Cara Membuat Tombol Info dengan Slide Out

Also Read Other Articles

Mempercantik blog memang menjadi sebuah kebanggan tersendiri dengan banyaknya konten yang di sediakan blogger, namun terkadang dapat menghambat blogger mania saat membuka blog kita, terkadang masalah seperti itu memang saya sendiri tak terpikir, cuma bagaimana blog kita itu, bisa elegant, berkarakter, cantik, menarik dan elegant. Pengen juga memasang widget ini, he..he... Sebelum kita pandu cara pemasngannya sebetulnya apa sih fungsi dari widget ini, jawabannya sangat mudah; Pertama untuk memberikan informasi kepada pengunjung ataupun fisitor tentang blog maupun profile kita..

Silahkan Ikuti Petunjuk Berikut :

1. Masuk Dasbor Blog Sobat
2. Klik Rancangan Edit HTML
3. Cari kode  ]]></b:skin>
4. Dan masukkan kode berikut di atas kode ]]></b:skin> 

.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#CC0000;text-decoration:none;border-bottom:1px solid #CC0000;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#CC0000;text-decoration:none;border-bottom:1px solid #0dc3ff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

5. Klik Simpan templat
6. Lalu Klik rancangan add gadget html Javascrip... Kopy kode berikut dan masukkan di gadget

<div class='panel'>
<h3>Welcome</h3>
<p style='text-align:justify'>Selamat datang di blog kami yang sedrhana ini, Selamat membaca artikel yang kami sajikan dan Semoga Bermanfaat Bagi Kita Semua.. Amiin… <a href='http://www.web-mudho.blogspot.com/' title='Tutorial Blogger'>End</a></p>

<h3>Profile</h3>
<img height='80px' src='http://i47.tinypic.com/2vce3wj.gif' width='60px'/>
<p>Name : .........................</p>
<p>     : Indonesia</p>
<p>     : ............................</p>
<p>     : ..............................</p>
<p>     : ..............................</p>

<h4>Link Exchange<h4/>
<textarea rows="3" cols="17" style="width: 225px; height: 60px; color: Black; background-color: #CC0000;" readonly>&lt;a href="http://web-mudho.blogspot.com/" target="_blank" title="Artikel Pendidikan & Tutorial Blogger."&gt;&lt;img src="http://i40.tinypic.com/344v3wx.gif
" border="0" alt="Artikel Pendidikan & Tutorial Blogger."&gt;&lt;/a&gt;</textarea></h4></h4></div>

<a class='trigger' href='http://web-mudho.blogspot.com'>Info</a>

6. Silahkan ganti kode yang saya beri warna hijau dengan keinginan sobat..
7. Save (simpan)

Selamat Mencoba dan Salam Sukses !!!