gravatar

Cara Membuat Buku Tamu Tersembunyi di blog. Trik ini berguna sekali bagi kalian yang ingin memasang buku tamu, tapi tidak memiliki ruang yang cukup. Dengan script ini, buku tamu kalian akan tersembunyi, yang berada tepat di samping kanan. Berikut screenshotnya :


( Gambar Buku Tamu Yang Tersembunyi)

Untuk membukanya, klik saja gambar buku tamunya, maka buku tamunya akan tampil secara slide ke kiri (Lihat Screenshot berikut)

( Gambar Buku Tamu setelah dibuka)

Berminat bagaimana cara membuatnya? Langsung saja sob :

1. Siapkan dulu sob, script buku tamu kalian. Bisa Shoutmix, bisa Cbox. Lalu simpan di notepad.
2. Login ke blogger, lalu klik Rancangan, Add Widget, HTML/Javascript ( Tips : Tempatkan widget di samping kiri dan jangan diberi judul)
3. Copy paste script berikut :

<style type="text/css">
#gb{
position:fixed;
top:23px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjsQoTrP5nVS-0Qy300_A9jNHk4KoOqnT3h6ppMwjKLjtvfnWLDlhmUYE2RvJQMsIdC6Vm6wAFPx6sBeyw98RcrE-BuAMHYAWrhdZSWZkVFD7UsLz0roP9uomUceipbKBqgxtFNf100e1/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

( Tempatkan Script Buku Tamu kalian disini)
<br/>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Warna Merah : Ganti dengan script buku tamu kalian yang telah disimpan di notepad
Warna Biru : Bisa diganti dengan url gambar tombol buku tamu. Kalau malas, dibiarkan saja juga tidak apa-apa.

4. Tinggal save, jadi  deh...

Gampang kan? Dengan ini kalian bisa menghemat ruang untuk penempatan buku tamu yang biasanya memakan banyak ruang blog kalian.Sekian dan Terimakasih

Ditulis Oleh : EchoDhoxXx ~ Deskripsi Blog Anda

Artikel ini diposting oleh EchoDhoxXx pada hari Senin, 09 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; } }