Cara Membuat: Create Show Hide Bottom Toolbar using CSS3:

Sebuah cara membuat bottom toolbar di blogspot atau blogger tanpa harus memanfaatkan layanan pembuatan toolbar gratis dari situs tertentu!

Sebuah desain yang sangat menarik dan jarang terpostingkan di tutorial blogger. Sebuah toolbar yang terletak di bagian bawah blog. Dia akan selalu terlihat sekalipun halaman blog ditarik hingga ujung terbawah. Untuk menggunakan toolbar semacam ini biasanya para blogger memanfaatkan sebuah widget dari situs tertentu (seperti Wibiya), namun dengan "Show Hide Bottom Toolbar using CSS3" ini sampeyan bisa membuatnya sendiri dan terserah mau diisi dengan apa box toolbar tersebut. Toolbar cantik ini sudah dilengkapi dengan fasilitas "scroll to top control" atau "back to top control pada sisi sebelah kanan. Dibagian sebelah tengah hingga ujung kiri dapat dimanfaatkan untuk menempatkan link atau yang lain. Satu hal yang jelas, dengan memasang bottom toolbar ini pasti akan membuat blog bertambah menarik.

Dengan memanfaatkan fungsi "onmouseover", semua bagian bottom toolbar hanya akan terlihat setelah blog dibuka hingga penampilannya tidak akan menggangu keseluruhan isi blog. Bersamaan dengan terbukanya blog, bottom toolbar akan terlihat secara penuh, baru kemudian setelah tersentuh cursor dia akan "menyembunyikan diri" (bagian box-nya). Untuk membuatnya terlihat kembali hanya perlu dilakukan dengan menyentuhkan cursor pada bagian tertentu yang dibuat tetap bisa terlihat sekalipun toolbar dalam keadaan tersembunyi. Untuk menciptakan efek pada toolbar, kembali kita manfaatkan CSS3 transition dan beberapa kode CSS3 yang lain.

Mungkin akan menjadi pertanyaan seperti apa yang dimaksud keterangan di atas. Agar lebih jelas memang cara termudah harus dengan melihat bentuk dan rupa serta tampilannya. Yah ...., kata-kata panjang lebar terkadang susah untuk diartikan, tetapi sebuah visualisasi dalam rupa barang sekalipun hanya sebongkah kecil dapat membuat banyak orang langsung dapat mengerti. Ok ...., silahkan buka saja demonya dan lihat pada bagian terbawah halaman blog yang di dalamnya terdapat "back to top controll".

D E M O

Kode CSS Bottom Toolbar

* {margin:0;padding:0;}
.GRbottomToolbar {
        position:fixed;
        overflow:hidden;
        text-align:left;
        height:58px;
        color:#000;
        bottom:0;
        margin:0;
        padding:0;
        width:100%;
       -o-transition:all 08s ease-in;
       -moz-transition:all 0.8s ease-in;
       -webkit-transition:all 0.8s ease-in;
}
.toolbarcontrol{
        position:absolute;
        right:4px;
        top:0; /* original code by: gubhugreyot.blogspot.com */
        height:16px;
        width:170px;
        cursor:pointer;
        border:1px solid #555;
        border-bottom:0;
        font-size:11px;
        font-weight:bold;
        font-family:Verdana; 
        text-align:left;  
        color:#993300; 
        padding:5px 8px;
        margin-left:5px; 
}
.toolbarcontrol:hover{
        color: #00CCFF;
}
.toolbarcontent{
        margin-top:28px;
        height:35px;
        padding:4px 10px;
        background:#ddd;
        border:1px solid #777;
        width:100%;
}
.toolbarcontent:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
}
.toolbarcontent a {
        font-size:14px;
        font-weight:bold;
        text-decoration:none;
        color:#003366;
        border-right:1px solid #888;
        border-left:1px solid #888;
        padding:1px 8px;
        margin-right:10px;  
}
.toolbarcontent a:hover{
        color:#FF0000;
}
.toolbarcontrol a.btop {
        display:block; /* original code by: gubhugreyot.blogspot.com */
        position:absolute; 
        font-size:11px;
        top:4px;
        right:6px;
        padding:1px 5px;
        color:#000;
}
.toolbarcontrol a.btttop:hover {
        color:#fff;
}
a.bttbot {
        display:block;
        float:right;
        border-left:1px solid #777; 
        margin-right:23px;
}

xHTML Bottom Toolbar

<div class='toolbarcontrol'>Show/Hide
         <a class='btop' href='#'>Back to top</a>
</div>
<div class='toolbarcontent'>
         <a href='http://gubhugreyot.blogspot.com/' target='_blank'>gubhug reyot</a>
         <a href='http://tantytm.blogspot.com/' target='_blank'>Tanty Template Modification</a>
         <a href='http://bloggerstuars.blogspot.com/' target='_blank'>bloggerstars</a>
         <a href='http://gitosimin.blogspot.com/' target='_blank'>mas gitosamin</a>
         <a href='http://bgsgr.blogspot.com/' target='_blank'>bgsgr Tutorial</a>
         <a class='bttbot' href='#'>back to top</a>
</div>

Cara Membuat Bottom Toolbar Menggunakan CSS3

1. Membuat Elemen Baru di atas tag penutup </body>

• Login : Login ke Blogger.
• Dasboard : Setelah login dan halaman dasbord terbuka, klik link "Design/Rancangan".
• Design/Rancangan : klik link "Edit HTML"
.
• Edit HTML : Amankan template terlebih dahulu (back-up templates:
  • KLIK Download Template Lengkap/Full Download Templates.
  • Simpan/Save "file template" di folder PC.
  • Kembali ke halaman Edit HTML.
• Cari kode </body> kemudian copy dan pastekan kode HTML pembuat elemen baru di bawah, tepat di atasnya.
• SAVE Templates/Simpan : KLIK Simpan template.

Kode HTML Pembuat Elemen Baru

<div style='clear:both;'></div>
<div class='GRbottomToolbar' onmouseout='(this.style.bottom="-30px")' onmouseover='(this.style.bottom="0")'>
<b:section class='toolbarngisor' id='toolbarngisor' maxwidgets='1'/>
</div>

</body>

2. Menyimpan Kode CSS Bottom Toolbar

• Kembalilah ke halaman "Edit HTML", kemudian cari kode ]]></b:skin>
• Copy dan pastekan kode CSS di atas kode tersebut.
• KLIK SAVE Templates/Simpan Templates.

Contoh pemasangan dan penyimpanan kode CSS di atas kode ]]></b:skin>

.box {
width: 400px;
height: 300px;
margin: 0px auto;
padding: 20px 10px;
overflow: auto;
}

]]></b:skin>

3. Cara Menyimpan xHTML Bottom Toolbar lihat kode di atas!

• Lihat langkah di atas yang dimulai dari login, tapi silahkan berhenti di Page Elements/Elemen Laman. Elemen Laman di tandai dengan adanya beberapa box bertuliskan Add a Gadget. Beberapa di antaranya bergaris putus-putus!
• Lihat di bagian terbawah. Sudah ada satu Elemen baru yang sudah berhasil kita buat. Elemen ini bisa bergerak naik turun saat tersentuh cursor. KLIK dan simpan xHTML di dalamnya melalui "Widget HTML/Javascript".
• KLIK "SAVE/Simpan"
• Ulangi KLIK "SAVE/Simpan" yang terletak di bagian kanan atas halaman!
• Refresh/Reload Elemen Laman.
• Masuk kembali ke "Edit HTML".
• Cari kode </body>. Di atas kode tersebut telah ada sebuah widget baru seperti terlihat di bawah. Rubah kode-nya dengan merubah false menjadi true.
• KLIK "SAVE/Simpan Template".
• Selesai!

Contoh Kode Elemen Baru yang telah di rubah:

<div class='clear'/>
<div class='GRbottomToolbar' onmouseout='(this.style.bottom=&quot;-30px&quot;)' onmouseover='(this.style.bottom=&quot;0&quot;)'>
<b:section class='toolbarngisor' id='toolbarngisor' maxwidgets='1'>
<b:widget id='HTML ?' locked='true' title='' type='HTML'/>
</b:section>
</div>

Catatan/Keterangan:

• Bila sampeyan menginginkan bentuk tampilan Bottom Toolbar Using CSS3 yang sama persis dengan DEMO, silahkan download kode CSS-nya melalui link berikut ini:
  
  
  
• Untuk merubah tampilan bisa dilakukan dengan merubah background-image (http://i964.photobucket.com/albums/.../gubhugreyot/background/bgBTblueH1010V30b.gif
• Beberapa link dalam Bottom Toolbar silahkan ganti dengan link baru atau mungkin tool baru yang sampeyan suka.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «