gravatar

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.

Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat komentar spam yang tidak tampil diposting tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.

Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. nah silakan anda ikuti cara-cara berikut ini,,
Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:



<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukkan tulisanmu di sini
</div></div></div>

Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:


Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.
Klik show untuk melihat



Blogs_(nya)_MAs KodoK




Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.

Ditulis Oleh : EchoDhoxXx ~ Deskripsi Blog Anda

Artikel Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog. ini diposting oleh EchoDhoxXx pada hari Sabtu, 28 April 2012. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

:: Get this widget ! ::

Lumayan SMS gratisSS


Make This Widget

nii nomer q 081945321350
English French German Spain Italian Dutch

Russian Brazil Japanese Korean Arabic Chinese Simplified
Translate Widget by Google

Subscribe Now: poweredby

Powered by FeedBurner

Pengikut



@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("facebook.com") { /* Hide this shit! */ .highlightIndicator, .tinyman:after, .fbTimelineSideAds, .fbTimelineScrubber, .buttonWrap, .fbTimelineSpine, .spinePointer, .topBorder, .bottomBorder, #footerContainer, .middleLink, .moreSectionsLink, .uiStreamHeaderChronologicalForm, .uiStreamHeader { display:none !important; } /*Global Facebook Settings*/ * { border-color: transparent !important; font-family: Arial !important; color: #FFFFFF !important; background-color: transparent !important; /*Temporary Fix*/ } /* Work In Progress .inputContainer, .uiSelectorButton, .uiCloseButton:focus, .hidden_elem, .stage, .stageWrapper, .dialog_content, .dialog_title, .seeMore, #contentCurve, #pageFooter, .uiBoxLightblue, .fbCurrentThickline, .showOnceInteracted, span, .text, .fbDockChatTab .input, .fbFeedTickerStory, .ufiItem, .uiHeader, .uiSideNavCount, .clearfix, .uiUfi, .uiSearchInput, .uiSearchInput button, .uiMentionsInput, .uiComposerMetaContainer, .inputtext, .nub { background-color: transparent !important; } */ /* Facebook's Theatre (Photo Viewer) Mode */ .fbPhotoSnowbox, .fbPhotoSnowliftInner { background-color: rgba(0, 0, 0, 0.75) !important; } .fbPhotoSnowboxInfo, .UIBeeper, .UIBeeper_Full, .menuDivider { background-color: #222222 !important; } .profile-picture img { max-width: 170px !important; } .inputtext { background-color: #111111 !important; } .webComposerPhotoUpload input, .webComposerPhotoUpload { color: #000000 !important; } .field_container { background-color: #000000 !important; } /* Background Image */ body { background-image:url('http://i.imgur.com/erZFE.jpg') !important; background-repeat:repeat !important; background-attachment:fixed !important; background-position:center !important; } .fbIndex .gradient { background: transparent !important; } .fbCurrentStory:hover, .connect_widget_like_button, .fbFeedTickerStory:hover, .item a:hover, .fbJewelFlyout li:hover, .uiSideNav a:hover, .fbNubFlyoutBody, .uiButtonConfirm { background-color: #333333 !important; } .fbChatMessageGroup { border-color: #2c2c2c !important; } .fbChatSidebar { background-color: #000000 !important; } #leftCol { /*position: fixed !important;*/ min-height: 400px !important; } .arrowLeft a { background-image:url('http://i.imgur.com/26zf5.png') !important; border-color: #666666 !important; } .arrowRight a { background-image:url('http://i.imgur.com/v6B6z.png') !important; border-color: #666666 !important; } .uiStreamSubstory { border-color: transparent !important; } .uiHeader { background-color: transparent !important; } .fbSidebarGripper, .fbTickerFooter, .fbSidebarGripper div, .navSubmenu:hover { background-color: #222222 !important; } .fbTimelineCountButton, .uiBoxWhite, .uiButtonGroup { background-color: #1c1c1c !important; } .fbxWelcomeBox { background-color: #0a0a0a !important; text-align: center !important; } #leftCol { padding-top: 0px !important; padding-left: 0px !important; } .fbNubFlyoutFooter { background: #111111 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; color: #FFFFFF !important; border: #333333 !important; } .uiStream .uiSelectorButton { background-image: url("http://i.imgur.com/nOfuQ.png") !important; } .uiSearchInput { background-image: url("http://i.imgur.com/agNWI.png") !important; } .jewelButton, a.jewelButton:hover { background-image: url("http://i.imgur.com/yoSw2.png") !important; } .jewelButton:hover, .topNavLink a:hover { background-color: #222222 !important; } .uiScrollableAreaGripper { background-color: #666666 !important; } .uiSearchInput, .fbPhotosGridHeader, .uiComposerMessageBoxControls, #MessagingShelf, .uiBoxGray { background: #111111 !important; } .uiButton { background: #1c1c1c !important; } #blueBar { background: -moz-linear-gradient(center top , #333333, #000000) repeat scroll 0 0 transparent !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; border-color: #333333 !important; } #navSearch { width:510px !important; margin-top: 8px !important; margin-left: 22px !important; } #contentCol, #pageLogo a { background-color: transparent !important; border-color: transparent !important; } .uiMorePager { margin-bottom:6px !important; background-color: #1c1c1c !important; -moz-border-radius: 5px 5px 5px 5px; border: 0px solid #333333 !important; } .uiStreamStory, .fbIndexFeaturedRegistration, .signupForm { margin-bottom:2px !important; background-color:transparent !important; background-image:url('http://i.imgur.com/T2LPj.png') !important; -moz-border-radius: 5px 5px 5px 5px; border: 0px solid #333333 !important; } #album_pagelet { background-color: #111111 !important; margin-left: 0px !important; margin-top: -15px !important; width: 722px !important; } .tagWrapper, #pagelet_main_column, .timelineUnitContainer, .timelineReportContainer, .fbTimelineTopSection, #MessagingMessages { background-color:transparent !important; background-image:url('http://i.imgur.com/T2LPj.png') !important; -moz-border-radius: 5px 5px 5px 5px; border: 0px solid #333333 !important; } #pagelet_main_column { width: 500px !important; } .fbJewelFlyout, .fbPhotoSnowliftContainer, .snowliftOverlay, .uiToggleFlyout, .navigation, .container, .uiOverlayContent, .search, .pop_container_advanced { background-color: #111111 !important; -moz-border-radius: 0px 5px 5px 5px; border: 2px solid #333333 !important; } #left_column, #leftCol, .MessagingReadHeader { background: #111111 !important; -moz-border-radius: 0px 0px 0px 5px; } #left_column, #leftCol { margin-left:-8px !important; width: 185px !important; } .uiMediaThumb i, .uiProfilePhoto { -moz-border-radius: 5px 5px 5px 5px; border: 1px solid #000000 !important; } #rightCol { margin-top: -5px !important; padding-top: 0px !important; background: #111111 !important; -moz-border-radius: 0px 0px 5px 0px; border: 0px solid #333333 !important; } #right_column, .rightColumnWrapper { margin-top: 0px !important; padding-top: 0px !important; position: fixed !important; background: #111111 !important; -moz-border-radius: 0px 0px 5px 0px; border: 0px solid #333333 !important; } .aboutMePagelet { background-color:transparent !important; background-image:url('http://i.imgur.com/T2LPj.png') !important; -moz-border-radius: 0px 0px 5px 5px; border: 0px solid #333333 !important; } .fbNubButton, .fbNubFlyoutTitlebar, .uiToggleFlyout, .fbChatSidebarFooter { background: -moz-linear-gradient(center top , #333333, #000000) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; color: #FFFFFF !important; -moz-border-radius: 5px 5px 0px 0px !important; border: #333333 !important; } .fbChatOrderedList { background: -moz-linear-gradient(center right , #333333, #000000) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; color: #FFFFFF !important; -moz-border-radius: 5px 5px 0px 0px !important; border: #333333 !important; } .uiTypeahead { background: #111111 !important; -moz-border-radius: 5px 5px 5px 5px; border: 2px solid #333333 !important; } }