Buku Tamu Show/Hide dari Atas #2

untuk demo Bisa dilihat disini
Bisa dilihat dengan mengklik gambar di samping layar seperti gambar dibawah...........
untuk cara mmbuatnya Cukup Kopi paste kode berikut pada menu  Rancangan, Edit Html, Tambah Gadget, dan Pilih Html/Java Script :

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#000;">


<!-- Simpan Kode cbox atau shoutmix nya disini -->


</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomd6GXaiDQfYSOz2XSEkoHH9tSJznGAYSBwByv8_FW7J8BtvJiX4HrNsAh53Ru-amGl_lZjMluYD3o46beJIKVsYxDKazAmEdtc_Ct1mc_cAj19Zg_TXlUCVePw9yhFP_xfRLDl9T93k/s1600/CLOSE.png" alt="close" title="Click here to Close Cbox" /></a></div>

</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh89DBhIt8wgR54T_jPIxHkpa0UP2xrZ0lyLpUg3IUfBBwVEbt4vB3L0XCUYb2rM6xty0qcoIikwgWs9dnpA-DP8xWdSFrg5WS3y-rRxI85ga3rypWcWAJjiVS9yPSAFptA8PHXfT6s4RI/s1600/guestbook.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Simpan........

Image Bubble with jQuery pada blog

Untuk melihat Demonya silahkan klik disini

Sedikit perbedaan dari image bubble yang tidak memakai jquery,,, efek transisi dengan yang menggunakan jquery lebih halus efek transisinya.. bisa dibedakan dengan yang  yang tidak menggunakan jQuery hanya memakai CSS,Cara membuatnya :

1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* Buble Image with jQuery
----------------------------------------------- */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}

Selanjutnya simpan java script berikut diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

jika sudah, sekarang simpan kode berikut tepat diatas kode </body> :

<script src='http://kangdadang.googlecode.com/files/imgbubbles.js' type='text/javascript'>
</script>
<script type='text/javascript'>

jQuery(document).ready(function($){
    $(&#39;ul#orbs&#39;).imgbubbles({factor:1.75}) //add bubbles effect to UL id=&quot;orbs&quot;
    $(&#39;ul#squares&#39;).imgbubbles({factor:2.5}) //add bubbles effect to UL id=&quot;squares&quot;
})

</script>

Simpan template.....

Untuk pemanggilannya misalkan pada Rancangan, Tambah Gadget, Html/Java Script :

<h4>Contoh 1</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZcel-q-vrRjb0QqNhuG4buYGTvz0qdwX22kDGwo6ly5BBuCV6YgdEdX7mLAt-hb81yYGXGPrKHQ6UYQ8t5HopsRR5Xgkn2tnJTXTkzpKTDkIScfn2DsIIUJoaBJAKpOUcqJd-vfODxo/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRv1BGXrBXzGUon81kg5WdSK1ppIVSjJNgAt3HAemd_bnWfmvjrVpcqPI2E5DviPDCh-1cjvzt7yahG51ZegHLJB5pclPosEmFCsVrM6nZemaeJyJe-WgSvnuQXhidIbtO6bKFCm3H-NI/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iXVOAgWH7OPB-Ff1142rQp37GcoUTvVCzpVDCv6v7gAFYXpMD0UHzc5LiVTFFF1RxMkdZj9V8dML3IjCStKt_sDfljBoAD5J1q0p05OTPasgVHdaT3L3OnRtmU447pl0bZfhwRuBB90/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHWEYWVQcsbonCbyg8wObUuPHXP0chkA0JajzasKq0_pUNNdl7L5p_Xu9IafQZU-bN9V8bSJ86eEG2H8xFE98J8Q-2kBeFwYFd2OqPno0u5Wi-RQYI3YNVSl2rr2NS1Q51xGPwP7cHufM/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh89gfk-QiqZz8-HEVoUBfcobATk7qYbjr-FgB0TtYr9RxSf6XbiE2QeFDIPlpjbddpL9l92AA0PPjcdnggzzhYDceXOtZjymnzFTRmFnu7UtWCD-TQ2nBuLs5YFF_WW8t8k_Fcj2Rf6uM/s1600/rss.png" /></a></li>
</ul>

<h4>Contoh 2</h4>
<ul id="squares" class="bubblewrap">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFO7hAiNg8kM8zRKmyrSW4Rk6Ui3bnP2tpHGgPW8MUdyX4jT-zsdxp7Z1BBUiRvVnLzSrzuerZBJAxTmMw6P4agilFFsp_gt-W583aBp8fBYt2sthGxaHyQiKDqRYDN8OBrGoYq2GaLug/s1600/facebook1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjUjyFrOCHQbZgM9ZMuhYMGzQGNFX9TuJUoESu9G4nmhid1QubAC0VmujitTBT9PqW6B3Pgwsx9XXQfSyrDA3jKNj8b3Bpn_u949LoTC6zDoYTdaX550QCpUy0Eo-jzly41PzRe3kPCIE/s1600/delicious.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsIbs35Al5zLlOab1ZLVfN74rjRWMlwJa49aFOLQwXPV2hnxKd5NvFN4WHBfrUlW29c-8MnOFe3gJTd9OVc5MkJowoYOp2GVbMd2Tbk_gAMuOmyROlwZEgnxbrYHujchenX3sHGsmrqHo/s1600/digg1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzURc5asfI1BfRK5-6HzymdP2DO_U3PYdEq7Mpb56LOawB1UnL1FG9r8AoBgCOkP1ixzADin4rHgvYFw7_KVNhWpwkurblqAzoTOoofdHBfUsEXL7WS2Auj-6ZF-GkC3SENGMP03axA9U/s1600/stumbleupon1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEPdXfrKlu61dgdKZ9atBEYG2FZL9I_iT1xODxgp30JVWC_eIRO3i5_x_snSurJKmKENn0Grb3la6giqqrpTNbnTeoewprMr2XcoLuHJE19-HifyrHdX3KGvOg4iVIMulkumSmT9VgGJk/s1600/rss1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVfdfZAuLhxttAsvPF9cwkZ9s2MvAErreLf8ntpv9q7Rd5m7Wcgfpyc009zWd9xEGIO4_sgDIbWcE8e9P4lYOpB1yLg6BE9soG1ZBX7iJ34EYjM1zs7IklBQEa8Nv92aYbcq68QPvG1Lw/s1600/twitter1.png" /></a></li>
</ul>

Simpan.......

untuk penempatan image buble nya silahkan ganti sesuai kebutuhan baik itu pada header nav, gadget, ataupun pada postingan..

Selamat mencoba.....

Keterangan : sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js  ini sudah ada pada template kawan-kawan, kawan semua tak perlu lagi mnambahkan script tadi pada template yang dipakai

Fancy Apple-Style Icon Slide Out Navigation

Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* -------------------------
Fancy Apple-Style Icon Slide Out Navigation
------------------------------------------ */
.navigationaple{
    position:relative;
    margin:0 auto;
    width:915px;
}
ul.menuaple{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menuaple li{
    float:left;
}
ul.menuaple li a{
    text-decoration:none;
    background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTndQ2JawKS7PjuOdhD4HtGj4SevsaSoBWTl82o4WFX0MjuVz1IvXYxy0Ws2HlrA9SabWepNSaBzIPH6fCaLT61UqVjw0daaG-W6LdIp93mW1KKqK89VHxIvfHX4vz4um4s4LgUmxRGc/s1600/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}
ul.menuaple li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}
ul.menuaple li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menuaple li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}
ul.menuaple li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}
ul.menuaple li span.Home{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnC3fdh_D1vYt5-Ur7oECuItW_mWfa7FmDnKkzeZ1Jgovdk9ITSsrqCf4ztK9zw5T2a_YKBaeubibn7I9_nAe78lnrQNlxxPrrt1DcIMNhbjWxSnBcTtGW4BFb9k7pxnjjd0xXWF8a8Cw/s1600/home.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menuaple li span.About{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9b_r4zTpI0oSsyitEMzihhtTdDYf9lLPhUidI4dA49KmvTnY6xCTU6uYZsEHBm96Bku6jIJslOaeuhjJzFpnP2Z82ehhi6oxgFzqH8Xk1R8DFZ60imeL_ALJiNrKUfrBfT50Mmy7JQt0/s1600/about.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menuaple li span.Email{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhyZwYRdHLCAGcYf39UkzP4oM3RXiRTIiLdMVJoi4Y3G8fbhKPP5W_7OIZUjdxl6FX0tTmpRZfwKPUxckouQlTRpvRwB2-4IluFS1o-bUsAk5rYRUREZdwgctoMDhRAhMaVGmJ0FE1Fc/s1600/email.png);
    left:293px;
}
ul.menuaple li span.Portofolio{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqanTFokz-NbIk_TCIjiMkhkbCSOnM4Zr4xs12aQOsZlva_gP6DYsve-84hFEHBq3jU4NBubCiIrBxnb-6epL7Y7TYQv_t1FTXIRxuZCfbmcLyDYH5H6-51hcsLu3xG3KKp3uL_BpQANk/s1600/portofolio.png);
    left:423px;
}

selanjutnya simpan script berikut diatas kode </body> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript">
            $(function() {
                var d=1000;
                $('#menuaple span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menuaple > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},400).css({'zIndex':'-1'});
                }
            );
            });
        </script>

yang terakhir pemanggilan pada Html :

<div class="navigationaple">
<ul class="menuaple" id="menuaple">
<li><span class="Home"></span><a class="first" href="#">Home</a></li>
<li><span class="About"></span><a href="#">About</a></li>
<li><span class="Email"></span><a href="#">Email</a></li>
<li><span class="Portofolio"></span><a class="last" href="#">Portofolio</a></li>
</ul>

</div>

dan selesai...

Magic line navigation menu

Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/*----------------
Magic line navigation
--------------------------*/
.nav-wrapline{
    background:-moz-linear-gradient(top, #051547, #888, #051547);
-moz-box-shadow:0px 2px 2px #111;
    width: 500px;
    border: solid 1px #FFF;
    height: 30px;
    -moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.group:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both; height: 0;
      margin: 50px auto;
     background-color: rgba(0,0,0,0.6);
     border-top: 2px solid #FFF;
     border-bottom: 2px solid #FFF;
     width: 500px;
     }
*:first-child+html .group {
     zoom: 1;
     } /* IE7 */
#magic-line {
     position: absolute; bottom: -2px; left: 0;
     width: 100px; height: 2px;
     background: #fe4902;
     }

#magic {
     margin: 0 auto;
     list-style: none;
     position: relative;
     width: 500px;
     }
#magic li {
     display: inline;

     }
#magic li a {
     position: relative; z-index: 200;
     color: #bbb; font-size: 14px;
     display: block; float: left;
     padding: 6px 10px 4px 10px;
     text-decoration: none;
     text-transform: uppercase;
     }
#magic li a:hover {
     color: white;
     }
#magic #magic-line-two {
     position: absolute; top: 0;
     left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff; }

.current_page_item a, .current_page_item_two a {
     color: white !important;
     }

dan simpan kode ini diatas </head> :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="http://kangdadang.googlecode.com/files/jcolor.js"></script>

 <script type="text/javascript">
    $(function(){

    var $el, leftPos, newWidth,
        $mainNav2 = $("#magic");

    $mainNav2.append("<li id='magic-line-two'></li>");
  
    var $magicLineTwo = $("#magic-line-two");
  
    $magicLineTwo
        .width($(".current_page_item_two").width())
        .height($mainNav2.height())
        .css("left", $(".current_page_item_two a").position().left)
        .data("origLeft", $(".current_page_item_two a").position().left)
        .data("origWidth", $magicLineTwo.width())
        .data("origColor", $(".current_page_item_two a").attr("rel"));
              
    $("#magic li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLineTwo.stop().animate({
            left: leftPos,
            width: newWidth,
            backgroundColor: $el.attr("rel")
        })
    }, function() {
        $magicLineTwo.stop().animate({
            left: $magicLineTwo.data("origLeft"),
            width: $magicLineTwo.data("origWidth"),
            backgroundColor: $magicLineTwo.data("origColor")
        });  
    });
});

</script>

terakhir cara pemanggilannya pada HTML (tempatkan ssuai keinginan dan template kawan-kawan):

<div class="nav-wrapline">
      
        <ul class="group" id="magic">
            <li style=""><a rel="#fe4902" href="#">Home</a></li>
            <li style=""><a rel="rgba(50,69,12,0.9)" href="#">Mobile Download</a></li>
            <li style=""><a rel="rgba(113,116,0,0.9)" href="#">About</a></li>

            <li style="" class="current_page_item_two"><a rel="rgba(220,133,5,0.9)" href="#">Facebook</a></li>
            <li style=""><a rel="rgba(236,85,25,0.9)" href="#">Twitter</a></li>

</ul>
      </div>

selesai.....

Membuat menu Tutup Buka pada posting (Spoiler)

Sebuah menu yang bisa menutup dan membuka secara otomatis (Spoiler) untuk contoh tampilannya ada di bawah ini dan untuk membuat nya yaitu sebagai berikut :

Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka

Log in blogger

Posting Baru, edit html dan masukkan kode di bawah ini :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div>
<div class="alt2" style="-moz-border-radius: 10px 10px 10px 10px; -moz-box-shadow: 2px 2px 4px rgb(139, 210, 104); background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEzdyEirRIkKNiwGQoNBloIjEEi_e-tSp-fvfn360MZ90Cjx6l8QaXzlcYywE3GCLuWIs-5KUMdov4uKHeBZQvmX0y_LFLaUX8m770PdeV15UtcyUDdvUVd48zk5_qA_XswNkaW2FBcGx/s1600/papers.jpg&quot;) no-repeat scroll 0% 0% transparent; border: 1px inset; color: black; margin: 0px; padding: 6px;">
<div style="display: none;">
Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka </div>
</div>
</div>

Tulisan Biru Isi  sesuai keinginan kawan-kawan
......
Terbitkan entri dan selesai............

selamat mencoba......

Membuat buku tamu/shoutbox melayang di samping blog with jquery

Untuk tampilannya mungkin bisa dilihat dan klik gambar disini :

  untuk dara membuatnya yaitu sebagai berikut :

1. Log in blogger
2. Masuk ke rancangan
3. Elemen laman
4. tambah gadget, html/java script
5. Kopi pastekan kode di bawah ini :

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px; right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEzdyEirRIkKNiwGQoNBloIjEEi_e-tSp-fvfn360MZ90Cjx6l8QaXzlcYywE3GCLuWIs-5KUMdov4uKHeBZQvmX0y_LFLaUX8m770PdeV15UtcyUDdvUVd48zk5_qA_XswNkaW2FBcGx/s1600/papers.jpg
)repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style=" background:-moz-linear-gradient(top, #051547, #999, #051547); color:#6cec17;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;"> TUTUP BUKU TAMU </b></a></div>

Masukkan script atau kode buku tamu kawan disini

</td></tr></table>
</div>
<script src="http://kangdadang.googlecode.com/files/shouteffect.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCFXg5l-8SEAeX9_XclLk5m71M2ej_Qty3Gi5HAKKMGWbqBsd5qDltys_-FkYL7pQIRfXj1lbmi7G-8pK6pJE0lN70SgAekWMr3fV8DRTPXXbFBm6cjLLcCNyJNimrDyILWT3TFUxGrXE/s1600/TabGBcopy.png" />

</a>
</div>

Masukkan script atau kode buku tamu kawan disini silahkan masukkan kode buku tamu nya disitu,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCFXg5l-8SEAeX9_XclLk5m71M2ej_Qty3Gi5HAKKMGWbqBsd5qDltys_-FkYL7pQIRfXj1lbmi7G-8pK6pJE0lN70SgAekWMr3fV8DRTPXXbFBm6cjLLcCNyJNimrDyILWT3TFUxGrXE/s1600/TabGBcopy.png adalah link gambar, silahkan ganti sesuai keinginan

Jika sudah langsung Simpan..................

dan lihat hasilnya.

selamat mencoba

Pure CSS Fish Eye Menu

Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/*----------------
Pure CSS Fish Eye Menu Expand Down
-------------------------------*/
.expand-down {
  font-family:Arial, Helvetica, sans-serif;
  line-height:normal;
  margin-top:20px;
  height:150px;
  width:500px;
  margin-bottom:30px;
}
.expand-down * {
  margin: 0;
  padding: 0;
}
.expand-down ul {
  padding-top:10px;
  margin-left:10px;
}
.expand-down ul li {
  float:left;
  list-style-type:none;
}
.expand-down ul li a {
    text-decoration:none;
}
.expand-down ul li a img {
  width:50px;
  height:50px;
  border:none;
}
.expand-down ul li a span {
  display:none;
}
.expand-down ul li:hover a span {
  display:block;
  font-size:14px;
  text-align:center;
  color:#fff;
}
.expand-down ul li:hover a img {
  width:100px;
  height:100px;
}
.expand-down ul li:hover + li a img {
  width:60px;
  height:60px;
}
.expand-down ul li:hover + li + li a img {
  width:55px;
  height:55px;
}

4. Pemanggilannya pada html silahkan disimpan di tempat yang diinginkan pada edit html posting ataupun Gadget Html/java script:

<div class="expand-down">
<ul class="expand-down">
  <li>
    <a href="#" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Lm1ifmdVr7Um3H1Ob3j1Vyk276J5Ke8U3pEsCxSAs0hce3xHwS55l98Ax5fibPaW4g97WoOT_y073aJpREMH-eOXhg7pmU5B81p817c1bm1jPuoOcI_ORDeNKdS_aSJDwn_SZxcdRS8/s1600/firefox-trans.png"/>
    </a>
  </li>
  <li>
    <a href="#" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuh4m1o4rQ_mGRoIHZqnwcv7OaARqNq5KYEgYJq-FYwKoXFscJUoczxeUlxUS8VxjSLx64aE6YPg9OJHjpkNLqwUrdf0j8kZOYS9p6KpQbVQ6ufulO6cYpv6beuUtwtiZSS0sBqf4a-8/s1600/safari-trans.png"/>
    </a>
  </li>
  <li>
    <a href="#"  target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Lm1ifmdVr7Um3H1Ob3j1Vyk276J5Ke8U3pEsCxSAs0hce3xHwS55l98Ax5fibPaW4g97WoOT_y073aJpREMH-eOXhg7pmU5B81p817c1bm1jPuoOcI_ORDeNKdS_aSJDwn_SZxcdRS8/s1600/firefox-trans.png"/>
    </a>
  </li>
  <li>
    <a href="#"target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8nm0iK-zlycacZ7AJk3PUqcNS8Q5wU6k6WGgFKZdDjtf2Q-S78gkIFXm523iyr0eFK4njTK3FJi_QDS9sY7av5XT47Ukd6SkSfLNsvXtW92ynSs6a3lWdwv6cYyNraIMt5G3nijhhb4w/s1600/google-chrome-trans.png" />
    </a>
  </li>
  <li>
    <a href="#"  target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5QC8wbP1QfTd5GqiCBL51JYAdKfmiQUTYF74oCHC_BMWdaQQa-QRP2id6W-JEOcOrIvrWGKGR_UovSmbQEDRIYLLcb2g9zv-z8gM1I5YAuxHBee_b5IZIzf6wePnp0l_fmIKSaqQyNM/s1600/ie-trans.png"/>
    </a>
  </li>
  <li>
    <a href="#" title="Konqueror" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqoQZm1ZRGfmY5JKHslsXS_T_1kFKPCYa2WiTajR3kCuQxVpBnkMLWS3htj1BKcY6oNL1CnhNQX9MbZv7ww7vbwMUyU2TYL_yK8FytnWf2vGLhk9-0Me22UtSZvP1ZIb2uCYKofagouGI/s1600/konqueror-trans.png" />
    </a>
  </li>
</ul>
</div>

selesai....