Cara Membuat Menu Navigasi Horisontal Dropdown Pada Blog

Cara membuat menu navigasi horizontal dropdown sunrise pada blogspot:

1. Login ke aku blogger sobat
2. Masuk Dasboard => Tata Leak (rancangan) dan pilih edit HTML
3. Jangan lupa centang Explant Template Widget
4. Cari kode ]]></b:skin>

5. Setelah ketemu, kemudian masukan kode di bawah ini tepat di atas kode ]]></b:skin>

@charset "utf-8";
/* CSS Document */

body{
padding: 25px;
}

/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://i48.tinypic.com/hur12s.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/ 
#nav-container a{ 
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: blue;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://i50.tinypic.com/an25cp.jpg);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(http://i49.tinypic.com/md1emv.jpg);
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/ 
#nav-container div, #nav-container ul{ 
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://i49.tinypic.com/xauknl.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/ 
#nav-container div a, #nav-container ul a{ 
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://i48.tinypic.com/14l21jb.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/ 
#nav-container div a:hover, #nav-container ul a:hover{ 
background-color: #FFFFFF;
background: url(http://i48.tinypic.com/14l21jb.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/ 
#nav-container .item-secondary-title{ 
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
background: url(http://i47.tinypic.com/or1755.jpg);
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/ 
#nav-container .divider-horiz{ 
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/ 
#nav-container .divider-vert{ 
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

6. Sempan Template

7. Nah kemudian sobat masuk ke Tata Letak (Rancangan) kemudian pilih Add Windet => pilih HTML Java Script.
8. Selanjutnya Copy Paste Code di bawah ini ke widget tadi

<div class="nav-container-outer">
<img src="http://i49.tinypic.com/2rcu35h.jpg" alt="" class="float-left" />
<img src="http://i49.tinypic.com/2mww0vr.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 2</a>

<ul style="width:150px;">
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 3</a>

<ul style="width:150px;">
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
<li><a href="#">Menu 3.6</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 4</a>

<ul style="width:150px;">
<li><a href="#">Menu 4.1</span></li>
<li><a href="#">Menu 4.2</a></li>
<li><a href="#">Menu 4.3</a></li>
<li><a href="#">Menu 4.4</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 5</a>

<ul style="width:150px;">
<li><a href="#">Menu 5.1</span></li>
<li><a href="#">Menu 5.1</a></li>
<li><a href="#">Menu 5.3</a></li>
<li><a href="#">Menu 5.4</a></li>


</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 6</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 7</a>
</li>


<li class="clear"> </li></ul>
</div>

8. Save Widget
9. Lihat hasilnya

Caatan: Pada script di atas, ganti semua tanda # pada href="#" dengan url target atau url tujuan sobat.
Teks Menu1 , Menu2, ..., diganti dengan teks yang akan ditampilkan di menu atau tampilan yang akan muncul  seperti Home, Contac dll.

Cara Membuat Menu Drop Down di Bawah Header Blog

Menu drop down adalah adalah menu pada blog yang yang jika di sentuh memunculkan menu-menu yang lain. Menu ini banyak macamnya, ada yang dipasang pada header blog, sidebar blog ataupun pada tempat-tempat yang lain.

Kali ini kita akan membahas cara membuat menu drop down secara otomatis yang terletak pada header blog, tepatnya dibawah header blog. Seperti menu header yang ada pada “PSYCHOLOGYMANIA” ini.

Langsung saja kita coba sobat: 

1. Masuk pada Design --- edit HTML 
2. Jangan lupa kopi kode HTML sobat terlebih dahulu, jangan sampai ada kesalahan 
3. Beri tanda centang pada “Expand Widget Templates ” 
4. Kopi paste kode dibawah ini tepat diatas ]]></b:skin>

#catmenucontainer{

height:33px;

width:1000px;

margin:0 auto;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYruYTjSYfTQBurdSgphdekr4xutaeg0QXMxqhjamsjkLUglb9a8E6r5AhfXI6WU71xp5eDWZLwHa3cbc6aq3xYpgW606z2HsRcYRLT2jPRUia-DFVIS0NTgJhx6PgZnWIbhbHjfe7Htf-/s1600/2.gif) repeat-x;

display:block;

padding:0px 0 0px 0px;

font-size:12px;

font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;

font-weight:normal;

border-top:1px solid #252424;

}

#catmenu{

margin: 0px;

padding: 0px;

width:1000px;

background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYg0nddczA_er3OWQaEhJx-d30w6xT8WnLOpb-XoUWFr6ZL8Vxd4eq_7Ex4KqrT4EGjEW04zPGLShui4WJDXpS7-5ctwkZ4_sVFyM7Mms62yKn6ODwpzOF4ZqAwAh7LFx_APexjIf8EJM0/) repeat-x;

height:33px;

}

#catmenu ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {

color: #fae7df;

display: block;

margin: 0px;

padding: 9px 10px 10px 10px;

}

#catmenu li a:hover, #catmenu li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9x0GJ3umYbElLcCTMt1Y9U_B0T5DScwK94TJYrLiTKWwMr6fGS-pBVpACZ_eVjC8xpCS7_iz0vlgGBvxLrMuU_JqwJtKVUIJh8i4klgzFO0cCKcLrrnbZUTAm0XtSYoooXm1mb5YNykjh/) repeat-x;

color: #fff;

margin: 0px;

padding: 9px 10px 10px 10px;

text-decoration: none;

}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:#ED4A05;

width: 150px;

color: #fae7df;

font-family:Tahoma,century gothic,Georgia, sans-serif;

font-weight: normal;

float: none;

margin: 0px;

padding: 9px 10px 10px 10px;

border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9x0GJ3umYbElLcCTMt1Y9U_B0T5DScwK94TJYrLiTKWwMr6fGS-pBVpACZ_eVjC8xpCS7_iz0vlgGBvxLrMuU_JqwJtKVUIJh8i4klgzFO0cCKcLrrnbZUTAm0XtSYoooXm1mb5YNykjh/) repeat-x;

color: #fff;

padding: 9px 10px 10px 10px;

}

#catmenu li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0px;

padding: 0px;

}

#catmenu li li {

}

#catmenu li ul a {

width: 140px;

}

#catmenu li ul a:hover, #catmenu li ul a:active {

}

#catmenu li ul ul {

margin: -34px 0 0 170px;

}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,

#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {

left: -999em;

}

#catmenu li:hover ul, #catmenu li li:hover ul,

#catmenu li li li:hover ul, #catmenu li.sfhover ul,

#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {

left: auto;

}

#catmenu li:hover, #catmenu li.sfhover {

position: static;

}

5.    Cari Kode <div id='content-wrapper'>

6.    Kopi paste kode dibawah ini tepat dibawah kode <div id='content-wrapper'>

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>

</ul>

<div style='float:right;margin-right:20px;'>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=pbtemplates'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL-KwBa8fBTO9oRoBaiM9rMlmhXsrTj5lbP0S0LR2t0qw4idp_7sHXJDgrZ5hyphenhyphenN4sz-6bjeM0mumDtFBCaN2dkZ4UqP4vnzRFEaV9sTPcU-G6evDKLVLHDs9rpvhmjYYr-3qbJ94uREmuI/'/></a>

<a href='http://feeds.feedburner.com/pbtemplates'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67DXqmdduZ9HfMy4_sp5kKm5CAUF2y7QTW0l4RXdXimY6LSlBFkOgKP1sf29PaXYp6bwaHeFksfh43IAX2mmK1GU2kgcdr8ead_5j9gDB50HZ9D_h-djnleEkaLFZhvl60lJSZ4IM6aeu/'/></a>

<a href='http://www.twitter.com/btipandtrick'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-cEHgDIgiNkwrUZ17bEd2UuLb51adQe1qQeJm1ZnVHFN66GhJ3vYvUjJzGYaFK4SKRvWIAuXgn5pvOBfH_iKfUBi2CGRtKn_4LL8bs4LQt9wq4H4XFpihKaa7d-i2Rej5QWzI05bqNnQn/'/></a>

<a href='mailto:123@abc.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNf9NlqVAcMXim7pB_Ymu_lheLV3_9FTzFx6FKmNnhyphenhyphenfZmw7cACFf2gY7J4hjojY1zMAvdghBNnK6Cgvp93CJXOKEkme-RAay-VNCv2wuh4dVNuOO4J6e3dr2abLBDdV2lfv78JvTGKcm/'/></a>

</div>

</div>

</div>

<div class='clear'/>

7.   Ganti kode-kode “'Your-Link-Here” dengan link yang ingin sobat masukkan dan “Link-Name” dengan nama link yang sobat inginkan.
8.   Simpan template, dan lihat hasilnya…. 

Selamat mencoba semoga sukses…~~~

Cara Membuat Widget SMS Gratis di Blog dan Website

Sobat informasi maya seperti judul di atas kang salman ga akan panjang lebar deh ngebahasnya. yang jelas dengan tool ini kamu bisa kirim-kirim sms secara gratis lewat blog kamu. dan juga tentunya keunggulan dari memasang widget ini ialah dapat mendulang traffik. mendulang traffik tambahan buat blog kamu. namun masih ada kekurang dari widget ini yaitu tidak bisa menerima sms balasan. sehingga bila ada yang membalas kita tidak bisa membacanya. namun walaupun seperti itu gedget ini sangat bermanfaat terutama baut kita yang suka sms-an.

• Silakan copy kode di bawah ini :

<iframe name="I2" src="http://sms-online.web.id/widget"style="border: 1px solid rgb(255, 255, 255);" frameborder="0" height="264" scrolling="no" width="84%"> not support</iframe><br /><small><center><a href='http://www.kucoba.com/2010/06/cara-membuat-widget-sms-gratis-di-blog.html' rel='nofollow'>Make Widget</a></center></small><br />

• Silakan login ke blogger
• Pilih tata letak
• Tambah widget baru
• Setelah itu kamiu pilih 
• Edit HTML/Javascript
• Paste kan kode yang sudah kamu copy tadi

Atau di bawah ini untuk instal yang menyenangkan :)

Sekarang blog kamu sudah bisa melayani sms gratis buat para pengunjung. lumayan kan, buat nambah-nambah traffik.

Ok sobat informasi maya cukup sekian dulu ya, semoga bermanfaat.

Membuat Menu Navigasi Melayang

Membuat Menu Vertikal Melayang. Di Pinggir. Sahabat informasi maya seperti yang kita tau berbagai macam cara dilakukan para blogger untuk menghemat ruang di blognya salah satunya dengan buku tamu melayang, kotak blogrol, sampai menu navigasi yang melayang. Nah pada kesempatan kali ini kang salman akan membahas bagaimana cara membuat menu navigasi yang tersembunyi/melayang. ya tentunya ini untuk menghemat ruang blog kita. Lihat Demonya di Kiri blog ini

Bagi sobat yang ingin menampilkan menu melayang ikuti panduan dibawah ini!


1.  Masuk ke Blogger dengan ID sobat.
2.  Pilih Design (Rancangn) ---> Edit HTML.
3.  Back up template dulu, untuk antisipasi kalau gagal.
4.  Cari kode ini : </head> pada template anda.
5.  Copy Seluruh script dibawah ini, kemudian paste tepat bawah </head>

<script src='http://elmubarok.googlecode.com/files/floating1.js' type='text/javascript'/>
<script>
YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor=&quot;#cc0000&quot;;
menuIsStatic=&quot;yes&quot;;
menuWidth=120;
menuCols=3;
hdrFontFamily=&quot;verdana&quot;;
hdrFontSize=&quot;2&quot;;
hdrFontColor=&quot;black&quot;;
hdrBGColor=&quot;#cc0000&quot;;
hdrAlign=&quot;left&quot;;
hdrVAlign=&quot;center&quot;;
hdrHeight=&quot;15&quot;;
linkFontFamily=&quot;Verdana&quot;;
linkFontSize=&quot;2&quot;;
linkBGColor=&quot;white&quot;;
linkOverBGColor=&quot;#cc0000&quot;;
linkTarget=&quot;_top&quot;;
linkAlign=&quot;Left&quot;;
barBGColor=&quot;#cc0000&quot;;
barFontFamily=&quot;Verdana&quot;;
barFontSize=&quot;2&quot;;
barFontColor=&quot;white&quot;;
barVAlign=&quot;center&quot;;
barWidth=20; // no quotes!!
barText=&quot;MENU&quot;;
// ----- Mulai Edit Menu
ssmItems[0]=[&quot;OPTION :&quot;] //Header Menu
ssmItems[1]=[&quot; Home&quot;, &quot;/&quot;, &quot;&quot;]
ssmItems[2]=[&quot; About Me&quot;, &quot;http://www.kucoba.com/2010/03/profil.html&quot;,&quot;&quot;]
ssmItems[3]=[&quot; Tutorial Blog&quot;, &quot;http://www.kucoba.com/2009/09/tutorial-mudah-blog.html&quot;,&quot;&quot;]
ssmItems[4]=[&quot; Tips Blog&quot;, &quot;http://www.kucoba.com/2010/07/kumpulan-tips-blogspot.html&quot;,&quot;&quot;]
ssmItems[5]=[&quot; Buku Tamu&quot;, &quot;http:/www.kucoba.com/2009/10/buku-tamu.html&quot;, &quot;_new&quot;]
ssmItems[6]=[&quot; Lowongan Kerja&quot;, &quot;http://www.kucoba.com/2010/11/kumpulan-lowongan-kerja-terbaru-di.html&quot;, &quot;&quot;]
ssmItems[7]=[&quot; Dinamika Cinta&quot;, &quot;http://www.kucoba.com/search/label/Dinamika Cinta&quot;, &quot;&quot;]
buildMenu();
//----- Selesai Edit Menu
</script>

Keterangan:

• Posting ini telah di perbaiki terakhir tanggal 17 April 2011 100% work
• Silahkan rubah WELCOME dengan tulisan apa saja yang cocok dengan kehendak sobat
• kode yang berwarna biru wajib sobat ganti dengan alamat-2 punya sobat. 
• MY MENU boleh kita ganti dengan MENUKU, DAFTAR MENU dll.
• Tulisan yang berwaran biru, silakan ubah dengan kode warna yang kalian suka
• Masih banyak lagi yang bisa sobat utak-atik.
• Terakhir simpan. semoga berhasil

Oke semoga tips ini bermanfaat bagi anda, selamat menikamati menu melayang blogger

Cara Membuat Slide Show Tab View

Tab Slide Show Tab View adalah sebuah widget yang berisi ringkasan artikel, gambar dan foto yang

bergantian. Dengan membuat tab view, blog kita akan terlihat menarik dan mempermudah pengunjung melihat highlight yang kita pasang, tentu saja ini akan membuat pengunjung akan lebih tertarik membuka link / postingan yang kita pasang dalam menu tab view. Bagaimana sih cara membuatnya?

Langkah Pertama :
1. Login ke Blogger

2. Masuk ke TATA LETAK --> EDIT HTML

3. Anda cari kode ]]></b:skin>

4. Letakkan kode di bawah ini di atas ]]></b:skin> :

.indentmenu{font: bold 11px Arial;width: 100%; /*leave this value as is in most cases*/}.indentmenu ul{margin: 2px;padding: 0;float: left;/* width: 80%; width of menu*/background: transparent;}.indentmenu ul li{display: inline;}.indentmenu ul li a{float: left;margin: 2px;color: #000; /*text color*/padding: 5px 11px;text-decoration: none;border: 1px solid #ccc;}.indentmenu ul li a:hover{background:#ddd;}.indentmenu ul li a:visited{color: white;}.indentmenu ul li a.selected{color: white !important;padding-top: 6px; /*shift text down 1px*/padding-bottom: 4px;border: 1px solid #000000;background:#000000;}.tabcontentstyle{ /*style of tab content container*/border: 1px solid gray;width: 450px;margin-bottom: 1em;padding: 10px;}.tabcontent{display:none;}@media print {.tabcontent {display:block !important;}}

5. Kamu download dulu kode berikut, klik disini

6. Copy script tersebut dan letakkan sebelum kode </head>

7. Simpan template



Langkah kedua :



1. Masih posisi Login to Blogger kemudian pilih "Layout"

2. Klik pada "Page Element" trus pilih "Add a Gadget
--> HTML/Javascript" (Tempatnya terserah kamu).

3.Copy Paste Script Berikut :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected"
rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
<div style="width:240px;text-align:justify;padding: 5px;
margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="URL Artikel Kamu 1">
<img border="0" style="border-right: 0px; border-top: 0px;
border-left: 0px; border-bottom: 0px" alt="obamabush"
width="240" src="URL Gambar 1?imgmax=800"
height="152" title="obamabush"/></a>
<p><h3><a href="URL Artikelka
Kamu 1">Judul Aritkel 1</a></h3></p>
Tulis deskripsi singkat artikel pertama kamu disini
[...]
</div>
<div id="tab2" class="tabcontent">
<a href="URL Artikel Kamu 2">
<img border="0" style="border-right: 0px; border-top: 0px;
border-left: 0px; border-bottom: 0px" alt="beyone"
width="240" src="URL Gambar 2?imgmax=800"
height="152" title="beyone"/></a>
<p><h3><a href="URL Artikel Kamu
2">Judul Aritkel 2</a></h3></p>
Tulis deskripsi singkat artikel kedua kamu disini
[...]
</div>
<div id="tab3" class="tabcontent">
<a href="URL Artikel Kamu 3">
<img border="0" style="border-right: 0px; border-top: 0px;
border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses"
width="240" src="URL Gambar 3?imgmax=800"
height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="URL Artikel
Kamu3">Judul Aritkel 3</a></h3></p>
Tulis deskripsi singkat artikel ktiga kamu disini
[...]
</div>
<div id="tab4" class="tabcontent">
<a href="URL Artikel Kamu 4">
<img border="0" style="border-right: 0px; border-top: 0px;
border-left: 0px; border-bottom: 0px" alt="ipod"
width="240" src="URL Gambar 4?imgmax=800"
height="152" title="ipod"/></a>
<p><h3><a href="URL Artikel Kamu
4">Judul Aritkel 4</a></h3></p>
Tulis deskripsi singkat artikel keempat kamu disini
[...]
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>

4. Simpan dan lihat hasilnya.

Keterangan :

-.ganti keterangan huruf diatas yang berwarna merah.

- ganti angka 2 yang berwarna hijau sesuai dengan keinginanmu ( 2 berarti waktu
jeda tampil 2 detik )

Ok sobat Informasi Maya sekian dulu aja tip kali ini dari kang salman semoga bisa bermanfaat