Cara Membuat Tabs Info | Seperti Pada Sebelah Kanan Blog Saya

Malem sob, malem ini Last Generation akan sedikit berbagi info sepurta tips blog kepada anda semua
oke langsung saja kita ke topik pembicaraan malam ini yaitu "Cara membuat Tabs Info" kalo masih belum tau seperti apa, bisa lihat screenshootnya

Bagaimana ?? Sudah tau dan tertarik ??
ini dia step by step yang harus sobat blogger ikuti.

Langkah 1
Login ke Blogger

Langkah 2
Masuk ke "Tata Letak - Edit HTML"

Langkah 3
Klik "Expand Template Widget" ( saya sarankan lebih baik sobat blogger download dulu template sobat blogger )

Langkah 4
Cari kode di bawah ini:
]]></b:skin>

Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:



.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 #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;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}





Langkah 6
Cari kode dibawah ini:
</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>



Langkah 8
Cari kode dibawah ini:
</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di Blog saya [Last Generation] - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel yang saya susun. Ada banyak hal tentang saya, Anda mungkin akan menemukan sesuatu yang menarik. <a href='http://www.facebook.com/nguaceng.2nd' title='Ivan Adi Pratama'>Selengkapnya tentang Saya</a></p>

<h3>Sepintas Tentang Admin</h3>
<img height='90px' src='Pasang Link Foto Sobat' width='75px'/>
<p style='text-align:justify'>Nama saya Ivan Adi Pratama, Alamat Saya Di Perum Sumber Indah I Rt.2/Rw.5. Sampai sekarang saya masih tinggal disana, jadi jikalau mungkin di antara sobat blogger ada yang mau berkunjung kerumah saya silahkan. Saya seorang pelajar yang masih duduk di bangku smp, sebentar lagi mau lulus sih, hhe, ya itulah sepintas tentang saya semoga sobat blogger bisa lebih tau tentang saya.</p>

<div style='clear:both;'/>

<div class='columns'>
 <div class='colcenter'>
<h3>Social Stuff</h3>
<p style='text-align:justify'>
<a href='http://twitter.com/nk_squad' title='Twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRRRUjQ7njgs4YHy6TbtH748aB8K5q8PXSANwHGJ_odHkYSNl-dfvN9O57lpES7fLTPdmSxo8DWX7GjFYZm-kNHGbVtXiz9kJhdIVWwTe13tKF9nvvsscTCKjkcxZzXuW0BkhqAifxGLI/'/></a>

<a href='http://facebook.com/nguaceng.2nd' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2g3L0DQMER_qehTDaha5ipFae-8T509pO9Q5aO4mPL_lG-5QMS1B5zt0RW1fblFBrslfH6SpU08Xn_ZHnlCsD_PnbOtTUykjfbWjyq0iodZvwgcpugVnmkQ6NwbUTNunG9VOEKSNvHE/'/></a>

<a href='mailto:black.angellzt@windowslive.com' title='E-mail'><img alt='E-mail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPd4KVXPsMsY80FkSyudtGMwGgZCsp0Sb77eEUGaX7_1d4cFpj9dTtXvaMBMg3Jsp7t15tSd6oPlS8AUDbfzgTBSZmyEuixGrxYCHHpW4FXQX24RWDLbLDHhmkDXPB66cVeSG55rzMtNk/'/></a></p>
 </div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

info :
Teks Merah : Pasang link foto sobat blogger, buat foto profil gitu.

Teks Biru Muda : Link profil twitter sobat blogger.

Teks Biru Tua : Link Facebook masing masing sobat blogger

Teks Hijau : Email sobat blogger


Last step, save template sobat blogger dan lihat jadinya.
good luck, dan sukses selalu.

By : Ivan Adi Pratama to Last Generation For Sobat blogger semua