EFEK BANJIR

 
Panduan Blogger untuk para blogger pemula. Panduan blogger yang akan membahas,menjelaskan serta membantu sobat blogger semua khususnya yang masih awam/pemula dalam dunia blog. Panduan blogger yang akan membantu sobat blogger dalam pembuatan efek "banjir" di blog. Musim hujan telah tiba,dan Alhamdulillah sebagian besar wilayah di Nusantara ini telah diguyur hujan.Patut disukuri, jika hujan telah turun. Namun mungkin sebagian wilayah di Nusantara,misalnya saja Jakarta jika musim hujan datang,maka para penduduk merasa khawatir jika daerahnya/rumahnya terendam banjir. Semoga saja, tahun ini daerah Jakarta tidak tergenang banji

Dan ngomongin soal banjir,kali ini akan dibahas bagaimana tentang "Panduan Cara Membuat Efek 'Banjir' di Blog". Sebenarnya membuat sebuah efek di blog bisa dibilang tidaklah terlalu penting. Karena terus terang beberapa efek memang tidaklah mempunyai fungsi yang penting. Sebenarnya fungsi efek ini hanyalah sekedar untuk mempercantik blog saja. Bagaimana ????

Jika sobat merasa tertarik dan merasa perlu membuat efek ini selain untuk mempercantik tampilan blognya dan juga untuk menambah ilmu blog sobat,mari simak caranya seperti berikut ini :

1. Login ke Blogger

2. Klik Tata Letak

3. Klik Tambah Gadget

4. Klik Opsi HTML/JavaScript

5. Copy kode di bawah ini dan Paste-kan ke dalamnya

<script language="javascript">

nd_mode="flood";

nd_vAlign="bottom";

nd_hAlign="right";

nd_vMargin="10";

nd_hMargin="10";

nd_taget=_blank;

</script>

<script language="javascript" src="http://aksota.googlecode.com/files/efek_banjir.js">

</script>

6. Simpan Template

Cara Membuat Judul Blog Berjalan Pada Address Bar

Cara ini adalah bagian dari pernak pernik blog yang tujuannya untukmempercantik tampilan blog kita pada browser.Banyak cara untuk membuat blog kita tampil menawan,cantik dan kreatif. Yah selagi cara yang di lakukan tidak membuat loading blog tambah berat.Salah satunya membuat judul blog berjalan di title bar.Letaknya paling atas sebelah kiri yang ada tulisan mozila firefoxnya,bila anda pengguna firefox.

Caranya mudah sekali,ikuti saja langkah-langkahnya seperti dibawah ini: 
1. Login ke akun blogger anda
2. Masuk Dasbor > Tata Letak (layout) > Edit HTML.
3. Kemudian cari kode dibawah ini dengan tombol F3 atau CTRL + F pada keyboard.

<title><data:blog.pageTitle/></title>

yang letaknya di bagian awal.

3. Kemudian ganti kode di atas tersebut dengan kode di bawah ini.

<script language='JavaScript'>

var txt=" Text judul yang dibuat berjalan ";

var kecepatan=120;var segarkan=null;function bergerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

segarkan=setTimeout("bergerak()",kecepatan);}bergerak();

</script>

Catatan : Angka 120 menunjukkan kecepatan gerakan, Anda dapat menggantinya dengan angka yang lebih kecil atau lebih besar, semakin besar nilainya maka kecepatan bergeraknya semakin lambat dan berlaku sebaliknya.
Teks yang berwarna merah bisa sobat ganti dengan kata-kata sobat 

4. Klik Pratinjau terlebih dahulu untuk melihat hasilnya.
5. Jika sudah berjalan dengan baik kemudian Simpan Template.

Cara Membuat Efek Zoom Pada Gambar di Blog

.Pada catatan kali ini saya akan berbagi .Contoh efek zoom bisa sobat lihat pada orang-orang ganteng disebelah heheee.Coba disorot saja foto tersebut menggunakan mouse.

Efek zoom pada gambar biasanya akan membuat foto bisa lebih jelas bila kita sorot dengan mouse.Bagi yang ingin membuat Efek Zoom pada gambar di blog,silahkan ikut tutorial Cara membuat efek zoom pada gambar sebagai berikut:

1.Login ke akun blogger kamu
2.Pilih template dan Edit HTML
3.Cari kode ]]></b:skin>
4.Copy dan paste kode dibawah ini tepat diatas kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

5.Simpan Template Anda.

Cara Mudah Bikin Foto Muncul di Search Engine Google

.Membuat Foto kita muncul di search engine miliknya mbah Google pasti menyenangkan ya?Cara bikin foto profil google plus muncul di search enginel di search enginenya mbah Google sebenarnya sudah banyak yang posting dan ada beberapa cara,namun buat sobat Darmanto yang belum tahu,pada postingan kali ini saya akan berbagi Cara bikin foto muncul di Search engine google dengan mudah dan ngga ribet tentunya heheee..

Langsung saja silahkan bagi sobat yang ingin foto tampannya atau bagi sobat darmanto yang cantik juga ingin fotonya mejeng di search engine,berikut ini saya kasih cara yang mudah:

1.Sobat harus sudah memiliki akun Google+ miliknya mbah Google
2.Pada profil google plus milik sobat bagian Kontributor,masukkan blog milik sobat,lihat gambar dibawah:

3.Setelah blog sobat di masukkan pada bagian kontributor,buka dasbor blog milik sobat dan Klik Template-Edit HTML
4.Cari kode <head> dan bila sudah ketemu,masukkan kode dibawah ini tepat di bawahnya:

<link href='https://plus.google.com/114920232367001977687' rel='author'/>

5.Simpan dan selesai.

Catatan:
-Ganti no. id 114920232367001977687 dengan nomer id google puls milik sobat.
-Untuk menguji keberhasilan cara ini,Lakukan pengujian dengan alat penguji di Rich Snippets Testing Tool. Cara melakukan pengujiannya adalah copy salah satu link url milik blog sobat dan masukkan pada kotak yang sudah di sediakan -Klik preview,bila sudah berhasil maka foto milik sobat akan kelihatan.

Ok sobat Darmanto semua,itulah Cara membuat/bikin foto muncul di search engine google,semoga bermanfaat dan berhasil sobat praktekkan biar foto cakep milik sobat bisa mejeng di search engine.

Cara Menghilangkan Garis Bawah Pada Setiap Link

| Pernah ada salah satu sobat yang mengirimkan email ke saya, beliau ini menanyakan cara menghilangkan garis bawah yang ada pada setiap link. Garis bawah ini menurut beliau sangat mengganggu keindahan tulisan-tulisannya. Memang seperti kata saya terdahulu, lain orang lain keinginan, untuk urusan link pun ada yang suka memakai garis bawah dan ada juga yang tidak suka akan garis bawah tersebut.

Menurut kebiasan yang berlaku, sebuah tulisan yang berbentuk link biasanya memang mempunyai garis bawah, akan tetapi sebenarnya garis bawah tersebut bisa di hilangkan apabila kita mau. Bagaimana cara menghilangkan garis bawah pada link? Berikut ini tutorial blog yang akan saya bagikan untuk menghilangkan Garis bawah pada setiap link.

Sebenarnya mudah bila sobat mau menghilangkan Garis bawah pada setiap link.Sobat hanya perlu merubah beberapa kode yang ada pada style sheet CSS, kode tersebut biasanya seperti ini :

a:link {
color:#58a;
text-decoration:underline;
}

a:hover {
color:#c60;
text-decoration:underline;
}

a:visited {
color:#969;
text-decoration:underline;
}

Agar lebih memahami cara menghilangkan garis bawah padalink,berikut ini akan saya jelaskan satu persatu tentang garis bawah pada setiap link :

a:link {
color:#58a;
text-decoration:underline;
}

Kode ini mempunyai arti bahwa sebuah link akan berwarna biru dan bergaris bawah.

a:hover {
color:#c60;
text-decoration:underline;
}

Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah.


a:visited {
color:#969;
text-decoration:underline;
}


Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna biru tua (banget) dan bergaris bawah.


Nah sekarang manakah kode diatas yang membuat link menjadi bergaris bawah? Maka jawabannya adalah kode :

text-decoration:underline;

Tulisan underline lah yang membuat link menjadi bergaris bawah. Apabila kita tidak menginginkan adanya garis bawah pada sebuah link, maka kita hanya cukup merubahnya dengan kata none, nanti kodenya akan menjadi seperti ini :

text-decoration:none;

Nah sobat Darmanto semua,dari uraian saya diatas,kesimpulannya akan dihilangkan atau tetap dipertahankan garis bawah pada setiap link adalah tergantung selera masing-masing,yaitu:
-Apakah sebuah link ingin bergaris bawah atau tidak.
-Apakah apabila sebuah link di sorot oleh mouse ingin bergaris bawah atau tidak
-Dan apakah apabila sebuah link pernah di kunjungi atau di klik ingin bergaris bawah atau tidaksemua terserah sobat sebagai pemilik blog. 

Bila Ingin bergaris bawah ya pakai kode underline, bila tidak ingin bergaris bawah ya tingal ganti dengan none, gampang bukan?
Ok ya sobat semua,semoga catatan saya kali ini tentang Cara menghilangkan garis bawah pada setiap link bisa bermanfaat bagi yang memerluka

MEMBUAT EFEK PETIR DAN SEMUT BERJALAN PADA BLOG

Baru iseng bikin gambar efek petir dan semut jalan. Ada yang mau makai buat efek di blognya(blogspot) nggak?

pasang aja di gadged html nya. begini:

1. masuk blogger
2..klik tataletak
3. elemen laman
4. add gadget
5. pilih HTML/java script
masukan script di bawah ini


(untuk efek petir):

<style type="text/css">body { background-image: url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif); background-color:transparent; }</style>

(untuk semut jalan)

<div style="display:scroll; position:fixed; top:150px; left:20px;"><img border="0" src="http://i1217.photobucket.com/albums/dd381/funywrld/semutfuny.gif" /> </div>

6. kemudian save,
7. dan lihat hasilnya


**catatan, link photobucket adalah lokasi link gambar, bisa diubah sesuai link gambar masing2 kalau di photobucket error

Read more: http://www.rumpunnektar.com/2012/11/membuat-efek-petir-dan-semut-berjalan.html#ixzz2SnKmXOW5

Cara Membuat Teks Bergerak Mengikuti Arah Kursor

Kali ini akan kita bahas mengenai cara membuat teks mengikuti arah kursor, menanggapi sebuah komentar dari salah seorang teman di blog ini, berikut cuplikannya

......,,
DAN GAN Q MW MNTA ILMU NYA LGE DONK BAGAIMANA CARA NYA AGAR KATA-KATA DAPAT MENGIKUTI JALAN NYA KURSOR KITA ITU GAN ?......

Tanpa basa basi lagi, ayo kita coba bersama-sama khususnya bagi para pengguna blogspot



1. Login akun Blogger
2. Masuk menu Rancangan
3. Pilih Eleman Laman kemudian tambahkan gadget
4. Pilih HTML/JavaScript
5. Masukkan kode script di bawah ini

<style type="text/css">
    /* Circle Text Styles */
    #outerCircleText {
    /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
    font-style: italic;
    font-weight: bold;
    font-family: 'comic sans ms';
    color: #000000;
    /* End Optional */


    /* Start Required - Do Not Edit */
    position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
    #outerCircleText div {position: relative;}
    #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
    /* End Required */
    /* End Circle Text Styles */
    </style>


    <script type="text/javascript">
    /* Circling text trail- Tim Tilton
    Website: http://www.tempermedia.com/
    Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
    Modified Here for more flexibility and modern browser support
    Modifications as first seen in http://www.dynamicdrive.com/forums/
    username:jscheuer1 - This notice must remain for legal use
    */


    ;(function(){


    // Your message here (QUOTED STRING)
    var msg = "Tutorial Blog";


    /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */


    // Set font's style size for calculating dimensions
    // Set to number of desired pixels font size (decimal and negative numbers not allowed)
    var size = 24;


    // Set both to 1 for plain circle, set one of them to 2 for oval
    // Other numbers & decimals can have interesting effects, keep these low (0 to 3)
    var circleY = 0.75; var circleX = 2;


    // The larger this divisor, the smaller the spaces between letters
    // (decimals allowed, not negative numbers)
    var letter_spacing = 5;


    // The larger this multiplier, the bigger the circle/oval
    // (decimals allowed, not negative numbers, some rounding is applied)
    var diameter = 10;


    // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
    var rotation = 0.4;


    // This is not the rotation speed, its the reaction speed, keep low!
    // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
    var speed = 0.3;


    ////////////////////// Stop Editing //////////////////////


    if (!window.addEventListener && !window.attachEvent || !document.createElement) return;


    msg = msg.split('');
    var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
    ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
    o = document.createElement('div'), oi = document.createElement('div'),
    b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,


    mouse = function(e){
    e = e || window.event;
    ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
    xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
    },


    makecircle = function(){ // rotation/positioning
    if(init.nopy){
    o.style.top = (b || document.body).scrollTop + 'px';
    o.style.left = (b || document.body).scrollLeft + 'px';
    };
    currStep -= rotation;
    for (var d, i = n; i > -1; --i){ // makes the circle
    d = document.getElementById('iemsg' + i).style;
    d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
    d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
    };
    },


    drag = function(){ // makes the resistance
    y[0] = Y[0] += (ymouse - Y[0]) * speed;
    x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
    for (var i = n; i > 0; --i){
    y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
    x[i] = X[i] += (x[i-1] - X[i]) * speed;
    };
    makecircle();
    },


    init = function(){ // appends message divs, & sets initial values for positioning arrays
    if(!isNaN(window.pageYOffset)){
    ymouse += window.pageYOffset;
    xmouse += window.pageXOffset;
    } else init.nopy = true;
    for (var d, i = n; i > -1; --i){
    d = document.createElement('div'); d.id = 'iemsg' + i;
    d.style.height = d.style.width = a + 'px';
    d.appendChild(document.createTextNode(msg[i]));
    oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
    };
    o.appendChild(oi); document.body.appendChild(o);
    setInterval(drag, 25);
    },


    ascroll = function(){
    ymouse += window.pageYOffset;
    xmouse += window.pageXOffset;
    window.removeEventListener('scroll', ascroll, false);
    };


    o.id = 'outerCircleText'; o.style.fontSize = size + 'px';


    if (window.addEventListener){
    window.addEventListener('load', init, false);
    document.addEventListener('mouseover', mouse, false);
    document.addEventListener('mousemove', mouse, false);
    if (/Apple/.test(navigator.vendor))
    window.addEventListener('scroll', ascroll, false);
    }
    else if (window.attachEvent){
    window.attachEvent('onload', init);
    document.attachEvent('onmousemove', mouse);
    };


    })();
    </script>

6. Simpan

Selesai, sekarang kursor akan diikuti dengan teks,
* Yang berwarna orange, berturut-turut adalah kode warna dan teks yang diinginkan
** Yang berwarna hijau ukuran huruf, jarak spasi, besar lingkaran yang dibentuk, kecepatan berputar, dan kecepatan mengikuti gerak mouse

Agar Blog Banyak Pengunjung

Agar Blog Banyak Pengunjung - Wah.. udah lama nich nggak posting.. Mengawali pagi yang cerah ini, kali ini saya akan memposting tentang cara agar blog banyak pengunjung. Visitor adalah harga mati dalam dunia blog.. Betul? Untuk apa kita mengoptimasi template , memakai beribu hiasan di blog, dan menulis artikel se orisinil mungkin yang nantinya hanya kita sendiri yang menikmatinya ? Blog kita butuh dipromosikan.. Promosi bisa dilakukan dengan berbagai cara.. Diantaranya
1. Memperkenalkan blog ke Berbagai Search engine ( khususnya Google, yahoo, dan Bing). Klik disini!
2. Memperkenalkan Blog ke Blog yang lain ( dalam hal ini "Blogwalking" ).
3. Memperkenalkan Blog ke Jejaring Social ( Khususnya Facebook dan Twitter).
4. Memperkenal Blog Ke Forum - Forum Online.
5. Memperkenalkan Blog Ke Social Bookmarking

Dan untuk satu hal penting yang menjadi hidup matinya blog, yaitu BACKLINK. Backlink itu akan ada dengan sendirinya jika sobat melakukan ke 5 langkah di atas... Sekian....

Dipersilahkan bagi para sobat blogger yang ingin memberi masukkan atau tambahan mengenai postingan di atas...

Cara Membuat Menu Horisontal di Blog

Cara Membuat Menu Horisontal di Blog - Banyak sekali blog tutorial yang mungkin sering membahas cara memasang menu horisontal di blog. Mulai dari yang biasa - biasa ( di sediakan pihak blogger ) hingga yang nggak biasa alias lebih canggih.( bisa sobat liat di menu horisontal blog ini .. hehehe)

Seperti yang kita ketahui bersama bahwa menu yang di sediakan pihak blogger memiliki tampilan yang tetap. ( sepengetahuan saya ) sehingga bagi sobat blogger yang hobby utak atik blog, mungkin sedikit kurang mengasikkan. Kali ini, setelah memposting artikel cara mengetahui blog dofollow atau nofollow, saya akan mencoba sharing pada sobat blogger tentang cara membuat menu horisontal di blog yang di lengkapi dengan fasilitas dropdown atau lebih tepatnya cara membuat menu horisontal dropdown di blog.  Untuk demonya sobat nggak perlu jauh jauh, cuma perlu liat aja menu di bawah header blog ini.

Bagi sobat yang tertarik untuk membuat menu horisontal di blog,silahkan ikuti tutorial berikut.


1. Log in dulu ke akun blog sobat.
2. Klik Rancangan --> edit html
3. Cari kode ]]></b:skin> ( Gunakan Ctrl + F untuk memudahkan percarian)
4. Letakkan kode berikut di atasnya.

#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLQjpKk2HlzU2SfXqjTtcHrbTCYPuaYuY9hNPmIQ80F_0nYYkzhTWU0B3-zR3UmZyHLXMTneDxC2S0lMx4yd2wrZ2SFZdx-wG9HgP9z3xexUhSv8SryRCgDmnVcPr668esXdiZeMlxBpN/) 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;
}

#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLQjpKk2HlzU2SfXqjTtcHrbTCYPuaYuY9hNPmIQ80F_0nYYkzhTWU0B3-zR3UmZyHLXMTneDxC2S0lMx4yd2wrZ2SFZdx-wG9HgP9z3xexUhSv8SryRCgDmnVcPr668esXdiZeMlxBpN/) repeat-x;
height:33px;
}

#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#tejas li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcmQu2sL77qoq_-56PP0isOy9m0aN2f7Llynzywc4B-EYXYnzF5_6eD_CmSFcdZA6DJDEfw3B3PDxXjcCSk4hRei7mprKgbgs6u1KOBmD4r5Xdncb_-0kgVUeZMvdpQXqpab4uFgibYN0B/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#tejas li li a, #tejas li li a:link, #tejas 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;
}

#tejas li li a:hover, #tejas li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcmQu2sL77qoq_-56PP0isOy9m0aN2f7Llynzywc4B-EYXYnzF5_6eD_CmSFcdZA6DJDEfw3B3PDxXjcCSk4hRei7mprKgbgs6u1KOBmD4r5Xdncb_-0kgVUeZMvdpQXqpab4uFgibYN0B/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#tejas li li {
}

#tejas li ul a {
width: 140px;
}

#tejas li ul a:hover, #tejas li ul a:active {
}

#tejas li ul ul {
margin: -34px 0 0 170px;
}

#tejas li:hover ul ul, #tejas li:hover ul ul ul,
#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
left: -999em;
}

#tejas li:hover ul, #tejas li li:hover ul,
#tejas li li li:hover ul, #tejas li.sfhover ul,
#tejas li li.sfhover ul, #tejas li li li.sfhover ul {
left: auto;
}

#tejas li:hover, #tejas li.sfhover {
position: static;
}

tambahan :

• Modifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog sobat.
• Hampir semua bagian dari kode di atas bisa di edit,  tapi kalo menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya saja... terserah sobat..

5. Letakkan kode berikut di bawah kode <div id='content-wrapper'> ( cari dengan Ctrl+F )

<div id='tejahtc'>
<div id='tejas'>

<ul>
<li><a href='http://christiantatelu.blogspot.com/'>Home</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href=Link sobat di sini!' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-8</a></li>
</ul>

</div>
</div>


<div class='clear'/>

• Ganti tulisan yang berwarna biru dengan link dari kategori atau bisa juga dengan link posting.

contoh link kategori atau label, modelnya seperti ini.

http://christiantatelu.blogspot.com/search/label/BLOG

sedangkan link posting seperti ini .

http://christiantatelu.blogspot.com/2012/01/membuat-link-terbuka-di-tab-baru.html

• Ganti tulisan berwarna ungu dengan url blog sobat.

• Ganti link name dengan judul kategori atau judul posting atau apapun yang penting menarik untuk di klik. untuk link title samakan saja dengan link name.

6. Save template..

Semoga cara membuat menu horisontal di atas bisa membantu sobat blogger.