Hallo
teman-teman kali ini saya akan memposting cara member info terbang di blog.
Caranya mudah, di info ini berisi tentang info profil dan blog anda. Ikuti
langkah berikut:
2. Klik "Template" Edit HTML
3. Cari kode ]]></b:skin> untuk mempermudah pencarian tekan Ctrl + F atau F3
4. Copy code di bawah ini pastekan tepat di atas code ]]></b:skin>
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px
solid
#666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px
30px 30px 100px} .panel p{color:#fff;margin:0 0 15px;padding:0} .panel a,.panel
a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0} .panel
a:hover,.panel
a:visited:hover{color:#fff;text-decoration:none;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4SzmaXh2UyqhZPJaW_51VlBVUXNTQBlML62-P-E-7ml8m4shjhHNvsM3I365IMa_Xx9g5psSjG4MtmmXCUGmGgYGr4Pbs5bsu9GZCrlq6P-3aQ1ARIzrD4JIT7DC9kykkgkw44rKtdQ/s320/plus.png) 85% 55% no-repeat;border:1px
solid
#fff;-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:10px
35px 10px 10px}
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4SzmaXh2UyqhZPJaW_51VlBVUXNTQBlML62-P-E-7ml8m4shjhHNvsM3I365IMa_Xx9g5psSjG4MtmmXCUGmGgYGr4Pbs5bsu9GZCrlq6P-3aQ1ARIzrD4JIT7DC9kykkgkw44rKtdQ/s320/plus.png) 85% 55% no-repeat;border:1px
solid #fff;-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:10px
40px 10px 10px} a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_k0w_CujfahVDIZU7P8x4KademIvZxh19Oy2anZEkQAqWrSwZinQTrZkAJr-UVFGnj3LVDFD5r3at1U1D5XHQGm2OaQIg-ulALxx72yJe4Gsm7ONspidpF1ZFVi0lp8-KHmHzKjZejAs/s320/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none} .panel img{border:1px solid #666;float:right;margin:3px
0px 6px 5px;padding:2px} .panel h3{border-bottom:1px solid
#666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
Kemudian
cari lagi kode </head>
Copy code di bawah ini, lalu pastekan tepat di atas code </head>
Copy code di bawah ini, lalu pastekan tepat di atas code </head>
<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script
type='text/javascript'>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Belum Selesai gan, langkah terakhir
- Masuk ke Tata Letak > Add Gadget > HTML/Java
Script
- Copy Code di bawah ini
<div class='panel'>
<h3>WELCOME</h3>
<p
style="text-align:justify">Selamat datang di blog yang sederhana ini :D semoga anda
mendapatkan info yang anda cari di blog ini... silahkan baca - baca di artikel
terbaru saya..
terima kasih telah berkunjung ^_^
<br/>
<a title="Arjun Arief Wicaksono" target="_blank" href="https://plus.google.com/107762103812697298247/posts">Selengkapnya
tentang saya</a></p>
<h3>Tentang Saya.</h3>
<img
width="73px" height="73px" alt="Arjun Arief Wicaksono" src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn1/64133_383958958298494_1463404627_n.jpg" />
<p>Arjun Arief Wicaksono
<br/>
Perkenalkan, saya Arjun, seorang
pendatang baru dunia blogger.. saya masih dalam tahap pembelajaran, jadi mohon
maaf jika ada banyak kesalahan di blog ini.. saya mahasiswa ITS jurusan D3
Teknik Sipil angkatan 2013.. semoga blog ini dapat berguna :D</p>
<div class='columns'>
<div class='colleft'>
<h3>FIND ME ON..</h3>
<a
href="https://twitter.com/arjun_wicaksono"><img
alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9KdUTbxhqxNyU61vJU_2dbC9ZnQ25YEITfBeTIlEB5CslH-6PGourv0xVU2_dKDqZ1PzvehYdp4DVfH_susEsNT0gnq8NQdJSjKi0OMRT8e3cudFUpDvDlhLk9ySqnEU8Xbh8uJrTuRM/s320/t.png" /></a>
<a
href="https://www.facebook.com/arjun.robben.75"><img alt="facebook"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF2QYTf9hgebDy1EIWWatMPk61TBy8SX8qc5o5UGJvs0pFRX2T58CMpmE7glqHv-K4wAh8lHkCJ2HEG6umS3Er4L9HQGydeLIeEYuKgNhNNMmTUGcV5isEbRn3GwjeFszE0isb-C9QMgk/s320/f.png" /></a>
<a
href="http://kumpulanfilmwarkop.blogspot.com/"><img
alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhim291VAax6bT9np2l9-HpRsG62ircC1IMEb8edAGplPEouPjogsAc9Ak1RkOGV7owgfjvpvk29zyDMJ_sS-3oILHOophDMF0QfX_yHsBVJGWJk03yV0fErzb3Urc6xiaz0rJMTzPOmQo/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger'
href='#'>Info</a>
CATATAN
Yang warna Hijau ganti kata-kata sobat sendiri
Yang warna Biru Ganti dengan Url Foto Sobat
Yang warna KUNING ganti dengan alamat Feedburner anda,ganti dengan alamat Facebook anda, Blogger anda dan Twitter Anda.
Terakhir klik SIMPAN
Semoga artikel ini bermanfaat. (JIKA BERHASIL ATUPUN KURANG , TOLONG DIKOMEN YA) :D
Yang warna Hijau ganti kata-kata sobat sendiri
Yang warna Biru Ganti dengan Url Foto Sobat
Yang warna KUNING ganti dengan alamat Feedburner anda,ganti dengan alamat Facebook anda, Blogger anda dan Twitter Anda.
Terakhir klik SIMPAN
Semoga artikel ini bermanfaat. (JIKA BERHASIL ATUPUN KURANG , TOLONG DIKOMEN YA) :D
