Membuat replay komentar di kotak komentar blogspot

1. Masuk ke akun blogger (login)
2. Klik tab menu Rancangan => Edit HTML
3. Centang Expand Template Widget
4. Cari kode di bawah ini

kode:
<b:include data='comment' name='commentDeleteIcon'/>

5. Jika sudah ketemu, copy - paste kode ini tepat di bawah kode tersebut :

KODE:
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Blog ID ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img alt='Reply To This Comment' src='http://japaruspunya.xtgem.com/image/japarusreply.gif'/></a>

6. Ganti TULISAN ID Blog ANDA

Cara Mengetahui ID blog anda, lihat aja URL di bagian kontrol panel blog atau kalau mau buat entri baru ,.. misal gini alamat di adress bar nya ..
http://www.blogger.com/post-create.g?blogID=500907918888888

nah ini 500907918888888 ID NYA
Membuat replay komentar blogspot 10out of 10 based on 99989 ratings. 10 user reviews.

READMORE



SimpLe Menu Drop Down Horizontal Di Blog

Langsung ...
  1. Login Ke Akun Blog Masing masing
  2. Pilih Rancangan ,Tambah Gadget Dan Pilih HTML Java Script
Masukan kode ini di dalamnnya
kode:
<style type="text/css">
#japmenu ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#japmenu li .current{color: transparant;}#japmenu li a:hover, #japmenu li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#japmenu {width: auto;float: left;margin: 0;padding: 0;}#japmenu {margin: 0;padding: 0;}#japmenu ul {float: left;list-style: none;margin: 0;padding: 0;}#japmenu li {list-style: none;margin: 0;padding: 0;}#japmenu li a, #japmenu li a:link, #japmenu li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#japmenu li a:hover, #japmenu li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#japmenu li li a, #japmenu li li a:link, #japmenu li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#japmenu li li a:hover, #japmenu li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#japmenu li {float: left;padding: 0;}#japmenu li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#japmenu li ul a {width: 140px;}#japmenu li ul ul {margin: -32px 0 0 171px;}#japmenu li:hover ul ul, #japmenu li:hover ul ul ul, #japmenu li.sfhover ul ul, #japmenu li.sfhover ul ul ul {left: -999em;}#japmenu li:hover ul, #japmenu li li:hover ul, #japmenu li li li:hover ul, #japmenu li.sfhover ul, #japmenu li li.sfhover ul, #japmenu li li li.sfhover ul {left: auto;}#japmenu li:hover, #japmenu li.sfhover {position: static;}#footer-column-divide {clear:both;}#japmenu{font-family:Comic Sans Ms;background:#000 url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>

<div id='japmenu'>
<ul id='japmenu'>
<li><a href='disini letak link sobat'>Home</a></li>
<li><a href='disini letak link sobat' target='_blank'>Daftar Isi</a></li>
<li><a href='http://kusmizaluna.blogspot.com/' target='_blank'>link7</a>
<ul class='children'>
<li><a href='disini letak link sobat' target='_blank'>link7</a></li>
<li><a href='disini letak link sobat' target='_blank'>link7</a></li>
<li><a href='disini letak link sobat' target='_blank'>link7</a></li>
<li><a href='disini letak link sobat' target='_blank'>link7</a></li>
<li><a href='disini letak link sobat' target='_blank'>link7</a></li>
</ul>
</li>
<li><a href='http://japarus.blogspot.com/' target='_blank'>link8</a>
<ul class='children'>
<li><a href='disini letak link sobat' target='_blank'>link8</a></li>
<li><a href='disini letak link sobat' target='_blank'>link8</a></li>
</ul>
</li>
<li><a href='disini letak link sobat' target='_blank'>link9</a>
<ul class='children'>
<li><a href='disini letak link sobat' target='_blank'>link9</a></li>
<li><a href='disini letak link sobat' target='_blank'>link9</a></li>
<li><a href='disini letak link sobat' target='_blank'>link9</a></li>
</ul>
</li>
<li><a href='http://japarus.blogspot.com/'>link10</a>
<ul class='children' target='_blank'>
<li><a href='disini letak link sobat' target='_blank'>link10</a></li>
<li><a href='disini letak link sobat' target='_blank'>link10</a></li>
</ul>
</li>
<li><a href='disini letak link sobat' title='titleeeeee' target='_blank'>link11</a>
<ul class='children'>
<li><a href='disini letak link sobat'>link11</a></li>
<li><a href='disini letak link sobat' target='_blank'>link11</a></li>
</ul>
</li>
<li><a href='disini letak link sobat' target='_blank'>link12</a></li>
<li><a href='http://kusmizaluna.blogspot.com' title='tutorial' target='_blank'><blink>Tutorial</blink></a></li>
</ul>
</div>


Save ....
SimpLe Menu Drop Down Horizontal Di Blog 10out of 10 based on 99989 ratings. 10 user reviews.

READMORE


Assalamualaikum Mas bro ...
heheheh ... malam ini mau mau buat artikel tapi gak ada bahan, coba coba browsing , eh nemu widget tersembunyi untuk link exchange, saya ubah aja dikit digunakan untuk buku tamu, asik asik buat tutorial, eh ada nyamuk masuk telinga,, haduh .... jadi bunyi bunyi ne tlinga.. langsung kaya pusing eh .. haduhhhhhhhhhhhhhh jadi curhat, ckckckc ..
ok langsung aja ke tutor ..

Berikut langkah - langkah nya
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan,
3. Tambah gatget HTMLjavascript
4. Pastekan Kode di Bawah ini Ke Dalam nya

KODE:
KODE:
<style type='text/css'>.cboxjaparus {z-index: 1000;height: 15px;width: 280px;border: 2px solid #FF0000;background: #FF0000 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));border-radius: 12px;-moz-border-radius: 12px;-webkit-border-radius: 12px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;padding: 5px 5px;margin: 15px auto;font: 11px Arial;color: #FF0000;overflow: hidden;box-shadow: 0 1px 8px #B30000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.cboxjaparus:hover {min-height: 270px;border: 2px solid #B30000;background: #000;box-shadow: 0 1px 15px #000;-moz-box-shadow: 0 1px 15px #000;-webkit-box-shadow: 0 1px 15px #000;color: #000; text-shadow: 0 1px 1px #888;}.cboxjaparus h3, .cboxjs h3 {font-size: 14px;font-family: Droid Serif;font-weight: bold;color: #ffffff;text-align: center;text-shadow: 0px 1px 1px #fff; margin: 3px 5px;background: #000;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #999;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;}.cboxjaparus h3:hover {box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.cboxjaparus img.mini, .cboxjaparus img.minianima {width: 70px;border: 4px solid #666;padding: 3px;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;float: left; margin: 0 10px 5px 0;background: #222;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.cboxjaparus img.mini:hover, .cboxjaparus img.minianima:hover {box-shadow: 1px 1px 15px #000;-moz-box-shadow: 1px 1px 15px #000;-webkit-box-shadow: 1px 1px 15px #FF0000;border: 4px solid #CCCCCC;background :#666;-o-transform: scale(1.4);-moz-transform: scale(1.4);-webkit-transform: scale(1.4);margin-top: 20px;margin-left: 15px;}.cboxjaparus img.minianima:hover {-o-transform: scale(1.4) rotate(360deg) translate(0px);-moz-transform: scale(1.4) rotate(360deg) translate(0px);-webkit-transform: scale(1.4) rotate(360deg) translate(0px);}.cboxjs {margin-top: 15px;height:225px;overflow: auto;padding: 0 5px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out; background:#ddd -moz-linear-gradient(top,#ddd,#000);background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));}.cboxjs:hover {background: #333;color: #eee;text-shadow: 0 0px 1px #fe0303;}.cboxjs h3 {margin: 20px 0;max-width: 224px;margin-left:10px;background: #FF0000;box-shadow: 0 1px 12px #eee;-moz-box-shadow: 0 1px 12px #eee;-webkit-box-shadow: 0 1px 12px #eee;}.columns{clear:both;line-height:22px;padding:0 0 20px;width:250px}.colleft{float:left;line-height:22px;width:120px}.colright{float:right;line-height:22px;width:120px}.cboxjs h3:hover {background: #FF0000;border: 3px solid #FF0000;box-shadow: 0 1px 12px #fff;-moz-box-shadow: 0 1px 12px #fff;-webkit-box-shadow: 0 1px 12px #fff;}.cboxjs ul {padding: 0;margin: 0;list-style: none;}.cboxjs li {padding: 0;margin: 0;list-style: none;border-bottom:1px dotted #FF0000;}.cboxjs li a{color: #FF0000;padding: 0;margin: 0;text-decoration:none;font-size: 12px;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.cboxjs li a:hover {-o-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);color: red;text-shadow: 0 1px 1px #FF0000;margin-left: 20px;}.cboxjaparus {height: 17px; float:right ;margin-top:0px;z-index: 10000;position: fixed;top:0px;margin-left:690px;} .cboxjaparus h3, .cboxjs {font-size: 13px;}</style>
<div class='cboxjaparus'>
<h3>BUKU TAMU</h3>
<div class='cboxjs'>
<h3>JANGAN SPAM ya BRO</h3>
<!-- ShoutBox --> MASUKAN KODE SHOUTBOX DISINI <!-- End ShoutBox -->
</div>
</div>

</div>


5. Simpan

KET ..
1. Kode ukuran shoutbox anda width (lebar)nya jadi 250 dan height (panjang )nya TERserah anda
2. Dibagian kode shoutbox bisa masbro ganti apa aja misalkan link-link sahabat, aboutme, info jejaringan sosial, dll ... itu terserah mas bro ..
3. doakan telinga ane gak apa apa ya mas bro, nyamuknya mati .. ckckckck
Buka Tutup Buku Tamu 10out of 10 based on 99989 ratings. 10 user reviews.

READMORE


Assalamualaikum ..,

pagi ini lagi browsing browsing ke blog orang, liat komen komen nya biasa aja tanpa aksesoris, sedangkan tempat untuk orang komen nya banyak yang di modip habis, ada yang menggunakan css dan lain- lain, apa lagi saya baca ada yang komen dengan makian kasian yang punya blog, dah nulis arikel di maki pula gimana kalau komen kita menggunakan aksesoris misalkan bus .. atau apa aja di google kan banyak, saya cuman kasih inspirasi buat para blogger aja , selanjutnya terserah anda mau model yang gimana


SILAHKAN DI COPY BUS NYA GAN :D


──────▄▌▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀​▀▌
───▄▄██▌█ ░ INFO TRIK N TIPS ░
▄▄▄▌▐██▌█ ░ SEPUTAR FACEBOOK ░
███████▌█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄​▄▌
▀(@)▀▀▀▀▀▀▀(@)(@)▀▀▀▀▀▀▀▀▀▀▀▀(​@)▀▘

EDIT KATA KATA NYA TERSERAH MAS BRO

Lihat demonnya komen di bawah artikel ini

SEMOGA BERGUNA

READMORE

Mungkin dari judul diatas sudah banyak terdapat artikel ini tetapi tidak salahnya kalau saya bahas lagi di blog saya ini. Karena yang saya khawatirkan adalah jika para pendatang baru belum juga memahami dari artikel ini diblog lain. Tidak perlu berlama-lama lagi soalnya tutorial ini sangat gampang sekali jadi saya harap Anda dapat memperhatikan dengan baik.


1. Login www.blogger.com
2. Pilih Dasbor
3. Pilih Rancangan
4. Pilih Edit HTML
5. Backup dulu template anda dengan klik Download full Template, supaya nanti jika terjadi kesalahan bisa di download lagi
6. Cari kode yang hampir mirip dibawah ini dengan cara blok kode yang mau dicari terus tekan CTRL+F:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}


Dalam hal ini blok tulisan "sidebar" tanpa tanda kutip lalu tekan CTRL+F

7. Jika sudah menemukan kode diatas, setelah itu tambahkan kode dibawah ini dibawah kode diatas:

.sidebar h2 {
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
background:#2200CC repeat-x top left;
}


sehingga menjadi :


/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar h2 {
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
background:#2200CC repeat-x top left;
}


8. Simpan template dan liat blog

Yang perlu diganti dengan kreasi Anda :
Merah : #ffffff merupakan kode warna tulisan Anda, jika ingin ganti warna hapus saja kode tersebut dan diganti dengan warna Anda.
Biru : ukuran font Anda jika mau lebih besar angkanya harus lebih besar.
Hijau : ganti warna background Anda dengan kode warna yang lain, jika Anda menginginkan background gambar hapus kode warna terus ganti url('nama gambar.photobucket.com') sehingga menjadi :

background:url('URL gambar') repeat-x top left;

Untuk URL gambar ganti dengan alamat hosting gambar Anda. Jika Anda belum punya alamat hosting buat gambar dapat melalui daftar ke photobucket.com terus upload gambar Anda.

Bila anda ingin lebih sempurna lagi hasilnya, maka lakukanlah eksperimen dan ubahlah kode - kode HTMLnya kemudian lihat hasilnya. Jika anda masih bingung dengan tutorial diatas, anda dapat bertanya kepada saya lewat komentar anda.

Semoga bermanfaat ..
background di judul sidebar 10out of 10 based on 99989 ratings. 10 user reviews.

READMORE

Assalamualaikum ...


pada postingan sebelumnya saya tulis tentang Mempercantik komen di blog seseorang, pada kesempatan kali ini saya mau tulis Mempercantik postingan blog dengan Menggunakan emo yahoo, awalnya saya buka wap saya waktu zaman batu Manusia Purba dung saia waktu zaman main freindster dulu, Icon ini di pake buat komen, ternyata sebagian wap saya masih ngelink, belum di hapus sama yang punya hostingan .. saya cek isinya, komen icon buat friedster dulu masih ada, apa salahnya kalau saya pakai untuk icon di postingan blog ini, bagi yang berminat bisa pake ini emo

Cara pakai nya seperti biasa , langsung copas aja kode kode nya misal <a href=http://japarus.wen9.com/Iconfriendster.html?2633/"><img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif"></a>

atau bisa juga dari <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif"></a>

SEMOGA BERGUNA
Mempercantik postingan blog dengan menggunakan emo yahoo 10out of 10 based on 99989 ratings. 10 user reviews.

READMORE





READMORE

Cara Buat Tooltip terbang Melayang di semua link dan gambar - pada kesempatan kali ini saya mau bahas tentang blogspot, mempercantik blog dengan tooltip, sebelum saya jelaskan bagaimana cara buat nya mari kita bacot dikit tentang apa itu tooltip :D .. tooltip itu apayah saya juga gak tau , hahahahha .. itu loh kalau link atau image di sentuh mouse title atau judul atau link terbang melayang seperti di blog saya ini, tapi kali ini tooltipnya lebih makyusss .. saya juga inging menggunakan tooltip ini nantinya :D ..

Cara Buat Tooltip terbang Melayang di semua link dan gambar

sementara kalau mau liat demo nya Cara Buat Tooltip terbang Melayang di semua link dan gambar sorot aja link di blog saya, sebelumnya juga saya pernah posting tooltip seperti punya saya di blog ini tapi saya lupa apa yah judul artikel nya , kalau gak salah ini sudah yang ke tiga kalinya saya posting masalah tooltip, tapi tooltip kali ini jauh lebih mudah cara buat nya , saya pastikan semua blogger pasti ingin mencoba , karna selain mempercantik blog, juga memudahkan pengunjung ..

Cara Buat Tooltip terbang Melayang di semua link dan gambar


langsung aja , langkar pertama login blogger masing masing ini password dan username nya masing masing , kalau sudah langsung ke sini aja untuk liat demo sama tutorial nya . pake cara yang ke dua, cara pertama gambar jika di sorot mouse tidak terbang.

Sekiar artikel Cara Buat Tooltip terbang Melayang di semua link dan gambar, semoga mudah di pahami, jangan lupa cendol nya gan :D

READMORE

ilustrasi:kucoba.com
Membuat Menu Navigasi Dropdown Di Blogger  - Turoarial ini sengaja kang salman buat untuk membantu anda dalam membuat navigasi horizontal drop down menu. Dan sebelum ini saya sudah pernah membahas 3 tutorial serupa yaini
  1. Cara Membuat Navigasi Horizontal Dropdown Menu / Vertikal Navigasi Menu Di Blogger
  2. Membuat Menu Navigasi Dropdown
  3. Cara Membuat Halaman Menu Dropdown di Blog
Namun karena masih banyak yang mengalami kesulitan dalam tutorial no 3 di atas maka saya sengaja membuat sebuh kode baru yang insya Allah di jamin paling mudah dari tutorial-tutorial yang pernah ada.

Bagaimana menurut anda=||

Dalam demo di atas mungkin warna menu navigasinya belalar belakang hitam. tetapi jangan kuatir. Anda dapat mengubah warnanya leluasa dan tanpa harus pusing-pusing. cukup mengubah 2 kode warna, dalam 5 detik navigasi menu dropdown kita sesuai dengan template kita.:thumbsup:

Inilah trik membuat navigasi menu drop down tersebut.

1. Login ke Blogger

2. Pilih Rancangan

3. Pilih Edit HTML

4. Jangan Lupa Untuk Membackupd dulu template blog anda, klik Download Template Lengkap

5. Silakan copy kode di bawah ini :
#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

6. Setelah itu cari kode berikut ]]></b:skin>

7. Setelah ketemu simpan kode yang sudah di copy tadi dan paste kan tepat di atas ]]></b:skin>

8. Selanjutnya silakan hapus kode menu navigasi anda sebelumnya yang berada di bawah <body> atau <body class='loading'> 


kalau belum menemukan coba cari saja kode <body   kalau sudah ketemu, simpan saja kode sesudah kode tersebut.


9. Setelah itu ganti dengan kode berikut :

<div id='outer'> 

<div id='NavbarMenu'> 


<div id='NavbarMenuleft'> 


<ul id='nav'> 


<li><a href='
http://www.lulukafida.co.cc'>Home</a></li> 

<li><a href='#'>Trik</a> 


<ul> 


<li><a href='
http://www.lulukafida.co.cc'>Komputer</a></li> 

<li><a href='
http://www.lulukafida.co.cc'>Windows</a></li> 

</ul></li> 


<li><a href='#'>Tips</a> 


<ul> 


<li><a href='
http://www.lulukafida.co.cc/2010/07/kumpulan-tips-blogspot.html'>Tips Blogspot</a></li> 

<li><a href='
http://www.lulukafida.co.cc/search/label/Kesehatan'>Kesehatan</a></li> 

</ul></li> 


<li><a href='#'>Tutorial</a> 


<ul> 


<li><a href='
http://www.lulukafida.co.cc/2009/09/tutorial-mudah-blog.html'>Tutorial Blog</a></li> 

</ul></li> 


<li><a href='#'>Peralatan</a> 


<ul><li><a href='
http://www.lulukafida.co.cc/search/label/Widget'>Widget (smiley) &#160;&#160;&#187;</a> 

<ul><li><a href='
http://www.lulukafida.co.cc/2010/12/kirim-sms-gratis-di-internet.html'>SMS Gratis</a></li> 

<li><a href='
http://www.lulukafida.co.cc/2010/06/pasang-widget-dafar-isi-scrool-ajaib.html'>Scrool Ajaib</a></li> 

<li><a href='
http://www.lulukafida.co.cc/2010/12/menampilkan-status-onoff-yahoo-di-blog.html'>Status YM</a></li> 

</ul></li> 


<li><a href='
http://www.lulukafida.co.cc/2010/08/kumpulan-kode-warna-rgb-dan-hexadecimal.html'>Kode kode Warna</a></li> 

</ul></li> 


<li><a href='#'>Zona Aneh</a> 


<ul><li><a href='
http://www.lulukafida.co.cc'>Unik</a></li> 

<li><a href='/'>Gila</a></li> 


<li><a href='/'>Hiburan</a></li> 


</ul></li> 


<li><a href='http://www.lulukafida.co.cc/2010/12/free-link-exchange.html'>Link Sahabat</a></li> 


<li><a href='
http://www.lulukafida.co.cc'>[ Kontak Admin ]</a></li> 

</ul>

</div> 

<div id='search'> 

<form action='/search/' id='searchform' method='get' style='display:inline;'> 

<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> 

<input class='btn' type='submit' value='Go'/> 

</form> 

</div></div> 

</div> 



Keterangan : Ganti semua tulisan warna merah di atas dengan link anda / blog anda. dan tulisan warna hijau dan seterusnya kebawah ganti dengan nama menu yang ingin di tampilkan.



Semoga tutorial ini bermanfaat bagi anda.

READMORE

Hallo Sobat Informasi maya selamat sore ketemu lagi dengan Kang Salman. mudah-mudahan kalian sehat selalu :) Ok sekilas saja, Kemarin ada yang bertanya kepada saya "Bagaimana cara membuat horizontal dan vertikal navigasi menu di blogspot?". beliau bernama fatur. inilah cara membuat Navigasi Menu
_____________________________________________________________

Inysa  Allah saya dapat  membantu. setelah membaca email  dari  anda  ada beberapa hal yang ingin saya sampaikan :

Di bawah ini adalah langkah-langkah yang benar silakan di ikuti.

Langsung Aja yuk kita praktik kang fatur bagaimana cara membuat Horizontal Menu Blog :

1.      Cari Kode kode ]]></b:skin>

2.      Copy paste kode berikut simpan persis di atas kode ]]></b:skin>

 /*  navbar          ==================  */          #bg_nav {              background: #000000;              width: 660px;              height: 29px;              font-size: 11px;              font-family: Arial, Tahoma, Verdana;              color: #FFFFFF;              font-weight: bold;              margin: 0px auto 0px;              padding: 0px;              border-top: 1px solid #333333;              border-bottom: 1px solid #333333;              overflow: hidden;              }          #bg_nav a, #bg_nav a:visited {              color: #FFFFFF;              font-size: 11px;              text-decoration: none;              text-transform: uppercase;              padding: 0px 0px 0px 3px;              }          #bg_nav a:hover {              color: #FFFFFF;              text-decoration: underline;              padding: 0px 0px 0px 3px;              }          #navleft {              width: 440px;              float: left;              margin: 0px;              padding: 0px;              }          #navright {              width: 200px;              font-size: 11px;              float: right;              margin: 0px;              padding: 6px 5px 0px 0px;              }          #navright a img {              border: none;              margin: 0px;              padding: 0px;              }          #nav {              margin: 0px;              padding: 0px;              list-style: none;              }          #nav ul {              margin: 0px;              padding: 0px;              list-style: none;              }          #nav a, #nav a:visited {              background: #222222;              color: #FFFFFF;              display: block;              font-weight: bold;              margin: 0px;              padding: 8px 15px 8px 15px;              border-left: 1px solid #000000              }          #nav a:hover {              background: #6e6d6d;              color: #FFFFFF;              margin: 0px;              padding: 8px 15px 8px 15px;              text-decoration: none;              }          #nav li {              float: left;              margin: 0px;              padding: 0px;              }          #nav li li {              float: left;              margin: 0px;              padding: 0px;              width: 150px;              }          #nav li li a, #nav li li a:link, #nav li li a:visited {              background: #333333;              width: 160px;              float: none;              margin: 0px;              padding: 7px 30px 7px 10px;              border-bottom: 1px solid #000000;              border-left: 1px solid #000000;              border-right: 1px solid #000000;              }          #nav li li a:hover, #nav li li a:active {              background: #666666;              padding: 7px 30px 7px 10px;              }          #nav li ul {              position: absolute;              width: 10em;              left: -999em;              }          #nav li:hover ul {              left: auto;              display: block;              }          #nav li:hover ul, #nav li.sfhover ul {              left: auto;              }

3.    Tuju bagian bawah, lalu cari seperti berikut ini :

          <div id='header-wrapper'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
          <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
          </b:section>
          </div>

 4.  Copy paste code berikut persis di bawah kode yang tadi :

          <div id='bg_nav'>

          <div id='navleft'>
          <div id='nav'>
          <ul>
          <li><a href='http://www.lulukafida.co.cc/'>home</a></li>
    <li><a href='#'>Info Serba-Serbi</a></li>
<ul>
<li><a href='Namaanda.blogspot.com'>Serba-serbi</a></li>
<li><a href='http://Namaanda.blogspot.com/'>lifestyle</a></li>
<li><a href='http://Namaanda.blogspot.com/'>Other</a></li>
</ul>
</li>
    <li><a href='#'>Internet</a></li>
    <ul>
    <li><a href='http://www.lulukafida.co.cc/search/lebel/internet'>Jaringan</a></li>
    <li><a href='http://www.lulukafida.co.cc/search/lebel/seo/'>Tips SEO Backlink </a></li>
    <li><a href='http://www.lulukafida.co.cc/search/lebel/tips blog/'>Tips and Trick </a></li>
   <li><a href='http://www.lulukafida.co.cc/seacrh/lebel/make money/'>Bisnis Online </a></li>
   </ul>
   </li>
    <li><a href='#'>Teknologi Informasi </a></li>
 <ul>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
  </li>
<li><a href='#'>Belajar Ilmu Komputer</a></li>
<ul>
<li><a href='portal-komputer.blogspot.com/'>Belajar Komputer</a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='http://www.lulukafida.co.cc/search/lebel/anti virus/'>Anti Virus </a></li>
</ul>

          </ul>
          </div>
          </div>

          <div id='navright'>

          <form action='http://alamat-url-anda.blogspot.com.blogspot.com/search' id='searchform' method='get' name='searchform'>
          <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

              </div>

          </div><!-- akhir bg_nav -->

5.    Klik tombol SIMPAN TEMPLATE.
6.    Selesai.

* Gantilah tulisan yang berwarna merah sesuai alamat blog yang anda inginkan.
Catatan :
Navbar yang saya buat  sudah saya modifikasi sehingga memiliki fungsi dropdown menu. Jika anda ingin menghilangkan fungsi dropdownnya hapus saja <ul> dan </ul></li> contoh :
<li><a href='alamat-url-anda.blogspot.com'>Software</a></li>
<ul> 
<li><a href='alamat-url-anda.blogspot.com'>Antivirus</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Internet Acceleator</a></li>
<li><a href='alamat-url-anda.blogspot.com’>Multimedia'></a></li>
</ul>
</li> 
*Hapuslah Kode Yang telah saya beri tanda Merah  hapus untuk menghilangkan fungsi dropdown menu!
Sehingga hasilnya akan menjadi seperti di bawah ini :
<li><a href='alamat-url-anda.blogspot.com'>Software</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Antivirus</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Internet Acceleator</a></li>
<li><a href='#’>Multimedia'></a></li>

Untuk sementara percobaan ini sudah selesai, namun tentunya jika kamu menerapkan pada template kamu, ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :

    /*  navbar

    ==================  */

    #bg_nav {
        background: #000000;
        width: 660px;
        height: 29px;
        font-size: 11px;
        font-family: Arial, Tahoma, Verdana;
        color: #FFFFFF;
        font-weight: bold;
        margin: 0px auto 0px;
        padding: 0px;
        border-top: 1px solid #333333;
        border-bottom: 1px solid #333333;
        overflow: hidden;
        }

kamu juga harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template kamu. misal : width:990px.

    #navleft {
        width: 440px;
        float: left;
        margin: 0px;
        padding: 0px;
        }
    #navright {
        width: 200px;
        font-size: 11px;
        float: right;
        margin: 0px;
        padding: 6px 5px 0px 0px;
        }


Catatan : Untuk Membuat Vertikal Menu Navigasi :

Tambahkan kode dibawah ini sesudah kode <style type="text/css"> dan sebelum kode </style>, tempatnya di mana saja asalkan di antara kode tadi.

.E_L_A{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i811.photobucket.com/albums/zz36/asksalman/menu.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.E_L_A:hover{ background:#97A4B9 url(http://i811.photobucket.com/albums/zz36/asksalman/menu.gif) top right no-repeat;
text-decoration:none;
}

Catatan : kedua alamat url photobucket di atas adalah bentuk dari tombol navigasi yang saya buat, kamu bisa mengubahnya sendiri.
1. yang pertama adalah tampilan button dasar dari navigasi. terlihat saat mouse tidak di arahkan kesana
2. adalah tampilan button 2 terlihat saat mouse di arahkan menyentuh tombol navigasi, sehingga bisa berubah warna dan da bentuk. (tergantug kita membutnya)
3.  jika di samakan seperti contoh di atas navigasi tersebut tidak akan berubah warna.

Setelah selesai Simpan Tamplate

Langkah berikutnya adalah.
1.  Pilih Tata Letak
2.  Tambahkah Widget/Gedget Baru
3.  Pilih HTML / Javascript
4.  Silakan Copy kode Di bawah ini dan Pastekan Widget baru tadi kamu pilih !

Yang inipun sama, kamu harus mengubahnya sesuai dengan nilai yang pas untuk template kamu

<a class="E_L_A" alamatBlogAnda.blogspot.com">Menu</a><span class="hide"> | </span>
<a class="E_L_A" alamatBlogAnda.blogspot.com">Bisnis Online</a><span class="hide"> | </span>
<a class="E_L_A" alamatBlogAnda.blogspot.com">Tukar Link</a><span class="hide"> | </span>
<a class="E_L_A" alamatBlogAnda.blogspot.com">Tips Anda Trick</a><span class="hide"> | </span>
<a class="E_L_A" href="alamatBlogAnda.blogspot.com">Nama Menu Anda</a><span class="hide"> | </span>


Setelah itu Simpan dan lihat hasilnya. sekarang anda sudah memiliki navigasi horizontal Menu

Semoga dapat membantu anda ^_^

Wasalamualaikum Wr. Wb

READMORE

Cara Nambahin Halaman Menu Drop Down/ Sub Menu. Hari ini kang salman mau posting cara mudah membuat menu navigasi dropdown menu. atau lebih umum di sebut Horizontal Sub Menu Navigation Dropdown tanpa instalasi yang sulit seperti dulu, silakan buka  Cara Membuat Halaman Menu Dropdown di Blog dan Cara Membuat Navigasi Horizontal Dropdown Menu / Vertikal Navigasi Menu Di Blogger 

1. Login  Blogger
2. Pilih Tata Letak/Rancangan
3. Pilih Edit HTML
4. Centang "Expand Template Widget".

Tips: Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, agar kita memiliki Backup-an data saat tamplate kita eror

5. Tambahkan kode CSS berikut, di bawah kode CSS menu horizontal yang ada.



    #nav li ul a {
    width: 100px;
    }
    #nav li ul ul {
    position: absolute;
    margin: -30% 0 0 95%;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left:-999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left:auto;
    }
    #nav li li li.sfhover ul {
    left:auto;
    }
    #nav li:hover, #nav li.sfhover {
    position:static;
    }

Cari kode HTML <div id='navleft'>

Tips: Kalau anda susah mencarinya, coba tekan tombol F3 atau CTRL+F di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox) dan di atas (Google Chrome), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a>
    <ul>
    <li><a href='URL sub 1'>teks kamu</a></li>
    <li><a href='URL sub 2'>teks kamu</a></li>
    <li><a href='URL sub 3'>teks kamu</a>
    <ul>
    <li><a href='URL sub 3.1'>teks kamu</a></li>
    <li><a href='URL sub 3.2'>teks kamu</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    </ul>
    </div>
    </div>

Catatan :

  1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna Kuning.
  2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.
  3. Jika kamu menutup kode dengan </a> itu artinya sub menunya sampai disitu
  4. Jika anda ingin menambahkan submenu  lagi di bawahnya tutup kode dengan </a></li> kemudaian tambahkan lagi kode <li></a> href='URL sub 3.2'>teks kamu</a></li>
  5. Jangan lupa untuk mengakhiri Sub menu dengan </ul> 
  6. biar ga pusing di coba-coba saja dulu nanti pun anda akan mengerti sendiri

Setelah selesai Simpan dan lihat hasilnya
Semoga bermanfaat...

READMORE