Cara membuat Menu Drop Down Melayang di Blog

Kali ini Newbie Blog akan share tentang Cara membuat Menu Drop Down Melayang di Blog, Cara pemasangannya pun sangat mudah, karena sobat tidak akan menggunakan Edit Template, cukup dipasang pada Tata Letak Atau Rancangan Blog saja.

 Untuk Cara membuat Menu Drop Down Melayang di Blog, Silahkan sobat ikuti langkah-langkahnya sebagai berikut :

1. Silahkan >> "Login/Masuk"ke akun blog sobat.

2. Kemudian pilih >> " Tata Letak" >> Add Gadget " >> Pilih "HTML/JavaScript"

3. Silahkan Sobat Copy Paste Kode Script dibawah ini kedalam HTML/Javascript :

Klik Show untuk melihat

<style type="text/css">

#kucopas 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;}#kucopas li .current{color: transparant;}#kucopas li a:hover, #kucopas 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;}#kucopas {width: auto;float: left;margin: 0;padding: 0;}#kucopas {margin: 0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding: 0;}#kucopas li {list-style: none;margin: 0;padding: 0;}#kucopas li a, #kucopas li a:link, #kucopas li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kucopas li a:hover, #kucopas li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kucopas li li a, #kucopas li li a:link, #kucopas 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;}#kucopas li li a:hover, #kucopas 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;}#kucopas li {float: left;padding: 0;}#kucopas li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kucopas li ul a {width: 140px;}#kucopas li ul ul {margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul, #kucopas li.sfhover ul ul, #kucopas  li.sfhover ul ul ul {left: -999em;}#kucopas  li:hover ul, #kucopas  li li:hover ul, #kucopas  li li li:hover ul, #kucopas  li.sfhover ul, #kucopas  li li.sfhover ul, #kucopas  li li li.sfhover ul {left: auto;}#kucopas  li:hover, #kucopas  li.sfhover {position: static;}#footer-column-divide {clear:both;}#kucopas{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='kucopas'>

<ul id='kucopas'>

<li><a href='http://newbienb.blogspot.com/'>Home</a></li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu1</a></li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu2</a>

<ul class='children'>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#2.1</a></li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#2.2</a></li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#2.3</a></li>

</ul>

</li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu3</a>

<ul class='children'>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#3.1</a></li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#3.2</a></li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#3.3</a></li>

</ul>

</li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu4</a>

<ul class='children'>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#4.1</a></li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#4.2</a></li>

<li><a href='Ganti link Tujuan' target='_blank'>Menu#4.3</a></li>

</ul>

</div>

Keterangan :

• Silahkan sobat ganti yang berwarna BIRU dengan URL tujuannya
•  Warna MERAH adalah Menu yang akan di tampilkan, silahkan sobat ganti.

4. Silahkan sobat SIMPAN dan Lihat hasilnya. 

Mudah bukan,.??

Cara Memasang Efek Salju Pada Blog

Hai sobat blogger, sobat pasti kepinginkan kalau blognya dihujani salju seperti blog saya ini. Udah pasti donk…. Kalau gak bagaimana mungkin sobat bisa sampai pada artikel saya ini tentang cara memasang efek salju pada blog. Hehehe….

Biar kata kita gak bisa ngerasain turunnya hujan salju di Tanah Air kita ini, biarin aja deh blog kita aja yang ngerasainnya ^_^

Berikut langkah-langkahnya :

1. Login ke blog sobat.
2. Klik Rancangan/Tata Letak.
3. Add gadget lalu pilih HTML/Javascript.
4. copy dan paste kode berikut:

<script src="http://newbienb.googlecode.com/files/snowers.js" type="text/javascript"></script>

5. Simpan dan lihat hasilnya.

Bagaimana., mudah kan..??

Semoga berhasil………..

Cara Memasang Tombol Like This Pada Blog

Hai sahabat blogger, kali ini Newbie Blog ingin berbagi tentang bagaimana cara memasang tombol like this pada setiap postingan. Seperti dibawah ini :

Berikut langkah-langkahnya :

1. Login ke blogger sobat, buka Dashboard - Temlplate - Edit HTML
2. Download Full Template --> untuk berjaga-jaga jika ada kesalahan
3. Centang Expand Widget Templates
4. Copy code dibawah ini

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

5. Letakkan kode diatas ditempat yang sobat inginkan. misalnya dibawah postingan sobat cari kode <data:post.body/> dan letakkan kode no 4 tadi tepat dibawah kode <data:post.body/>
6. Simpan template sobat.

Keterangan: kode standard bisa sobat ubah dengan button_count
dan kode light dengan kode dark, sesuaikan dengan blog sobat. nah mudah kan?

Selamat mencoba…. ^_^

Cara Membuat Daftar Isi Dengan jQuery

Daftar Isi dengan jQuery ini termasuk daftar isi yang banyak digemari para blogger. Dengan tampilan yang keren dan menarik sudah pasti donk banyak yang tertarik. Lihat aja tampilannya seperti gambar berikut :

Bagaimana…….keren kan…??

Bagi yang tertarik, ikuti langkah berikut :

1. Login ke blogspot.
2. Klik Design/Rancangan.
3. Edit HTML.Jangan lupa member centang pada Expand Template Widget

4. Kemudian cari Kode  ]]></b:skin>  Biar gampang, sobat bisa mencari dengan mengklik tombol  Ctrl+F  Setelah ketemu, copy kode dibawah ini dan letakkan diatas Kode ]]></b:skin>  tadi.

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:#ffffff;
}
.dafis-label {
background: url("http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
border: 1px solid #2F94BA;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 1.4em;
margin: 1px 3px;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
.dafis-label:hover {
background: url("http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;
color: #003366;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background-color: #C9E9F4;
border: 1px solid #339DC6;
line-height: 1.5em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
background: none repeat scroll 0 0 #7BC4DF;
border-left: 5px solid #333333;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

5. Lalu cari Kode </head> dan Letakkan Kode dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Tapi jika di blog sobat sudah ada kode seperti ini maka sobat boleh meninggalkan langkah no 5 ini.

Lalu simpan.

6. Jika sudah,copy dan paste kode dibawah ini,boleh sobat letakkan dalam postingan maupun diwidget blog sobat.

<script type="text/javascript" src="http://newbienb.googlecode.com/files/Acc1.js.txt"></script>
<script src="http://newbienb.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti yang berwarna merah dengan URL blog sobat.

Bagaimana..?? Mudah bukan…

Bagi yang belum berhasil , coba diperhatikan kembali apakah sudah memberi label pada tiap2 postingannya.