Headline

Buat sobat blogger yang menjumpai komentar kasar dan mengatasnamakan OzieCyber, silahkan baca dan laporkan disini.
Unduh Adobe Flash player

close

~Affiliates~

 

Bantu saya vote +1 pada tombol google plus di bawah!!

×

flang counter

free counters

Cara Membuat Tabs Info | Seperti Pada Sebelah Kanan Blog Saya

siang sob, siang ini MuhqmMd ROzie 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'>oziecyber, 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='http://lh5.ggpht.com/_KnZf0QUvjQQ/TCeRwO4ZUoI/AAAAAAAABTU/7YfN6fXAGiI/1277661372_icontexto-inside-twitter.png'/></a>

<a href='http://facebook.com/nguaceng.2nd' title='Facebook'><img alt='Facebook' src='http://lh6.ggpht.com/_KnZf0QUvjQQ/TCeRwGXG5EI/AAAAAAAABTY/O3pkPoh_d_o/1277661354_icontexto-inside-facebook.png'/></a>

<a href='mailto:black.angellzt@windowslive.com' title='E-mail'><img alt='E-mail' src='http://lh6.ggpht.com/_KnZf0QUvjQQ/TCeRwd3d93I/AAAAAAAABTc/xaDX3b9W_r0/1277661290_icontexto-inside-rss.png'/></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.

Related Post :

Comments
1 Comments


1 komentar:

Andy Fauzan Akbar said...

share dong templatex..! :q: <--:j:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q:

Berikan Tanggapan mengenai Artikel Di Atas :

Berkomentar Lah Dengan Sopan :

=> Hahahaha ...xD
=> Blog Ini bebas Mau Berkata Apa Asal Sopan ...Azzzz
=> #Peace ALL

Terima Kasih Sudah Berkomentar .. !!

-----
pin 284A465C Gunakan Browser Google Chrome Versi Terbaru, Agar Tampilan Blog Ini Maksimal.