Photobucket
Tampilkan postingan dengan label blogger. Tampilkan semua postingan
Tampilkan postingan dengan label blogger. Tampilkan semua postingan

Selasa, 09 Oktober 2012

Cara Membuat Widget Random Post Blog

Cara membuat random post blog seperti yang saya gunakan disamping. berikut langkah-langkahnya:
  • log in ke dasbor blog anda
  • kemudian pilih tata letak
  • lalu pilihlah tambah gadget
  • pilih HTML
  • copykan kode di bawah ini
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong>RANDOM POST</strong></center>
<center>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:transparent url() repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#ffffff;
width:100%;
font-size:12px;
height:12px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:transparent;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZwzcMxRROfn_W1L2Bwtsf4tEMmEy2gSfHAUTw3RiDSU0WxRZxtBcCpbOIK4ofX4GvflBde4WLBUHDsHfm-xXKbssWJvpR3iI-gmze-mWLUBW-y6l-hxVMwc0MGFFtM-CSymoicgsZWcK/s128/logo.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZwzcMxRROfn_W1L2Bwtsf4tEMmEy2gSfHAUTw3RiDSU0WxRZxtBcCpbOIK4ofX4GvflBde4WLBUHDsHfm-xXKbssWJvpR3iI-gmze-mWLUBW-y6l-hxVMwc0MGFFtM-CSymoicgsZWcK/s128/logo.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZwzcMxRROfn_W1L2Bwtsf4tEMmEy2gSfHAUTw3RiDSU0WxRZxtBcCpbOIK4ofX4GvflBde4WLBUHDsHfm-xXKbssWJvpR3iI-gmze-mWLUBW-y6l-hxVMwc0MGFFtM-CSymoicgsZWcK/s128/logo.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZwzcMxRROfn_W1L2Bwtsf4tEMmEy2gSfHAUTw3RiDSU0WxRZxtBcCpbOIK4ofX4GvflBde4WLBUHDsHfm-xXKbssWJvpR3iI-gmze-mWLUBW-y6l-hxVMwc0MGFFtM-CSymoicgsZWcK/s128/logo.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZwzcMxRROfn_W1L2Bwtsf4tEMmEy2gSfHAUTw3RiDSU0WxRZxtBcCpbOIK4ofX4GvflBde4WLBUHDsHfm-xXKbssWJvpR3iI-gmze-mWLUBW-y6l-hxVMwc0MGFFtM-CSymoicgsZWcK/s128/logo.png";
showRandomImg = true;
boxwidth = 200;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 9;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 1000;
home_page = "http://khepshux.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://sundaboy.googlecode.com/files/Artikel%20Terkait%20berkedip.txt' type='text/javascript'></script>
</div></center>
»»  Baca Selengkapnya...

Minggu, 08 Juli 2012

Cara Membuat laman atau menu Blog yang Keren


Pertama log in ke blog kamu
Kemudian pilih "Tata Letak"
Lalu tambah gadget
dan copy kan pada konten



<style type="text/css">
#black{background:-webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); width:930px; 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;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;border-left:1px solid #333}
#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{border-left:1px solid #ff0000;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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjocB4Ww-HZJ4iyxQrmdhr15i5GIGRQUr06v03svtwVAZQo0vMruKboCFEZRbZ73JDR_H3s0wgLI_hqJvps5m63AohYHr8RxyRxqj8VRgzs981UmkVXpOmU8ZnwKJAJ_FyhbB9dCbqkykt2/); 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;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;}
#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;}
</style>
<div id='outer'>

<div id='black'>

<div id='navbarmenuleft'>

<ul id='nav'>

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

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

<ul>

<li><a href='http://khepshux.blogspot.com/2012/07/tips-blogger.html'>Tutorial Blogspot</a></li>

<li><a href='http://khepshux.blogspot.com'>Tutorial</a></li>

</ul></li>

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

<ul>

<li><a href='http://khepshux.blogspot.com/search/label/blogger'>Tips Blogspot</a></li>

<li><a href='http://khepshux.blogspot.com/search/label/Sosial'>Tips Sosial</a></li>

<li><a href='http://khepshux.blogspot.com/search/label/Kesehatan'>Tips Kesehatan</a></li>
</ul></li>

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

<ul>

<li><a href='http://khepshux.blogspot.com/search/label/software'>Software</a></li>

</ul></li>

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

<ul>

<li><a href='http://khepshux.blogspot.com/search/label/Laporan'>Laporan</a></li>

</ul></li>

<li><a href='http://khepshux.blogspot.com/search/label/Puisi'>Puisi</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>



nah ganti yang WARNA MERAH dengan link blog dan menu yang kamu inginkan dan join this site ya........
»»  Baca Selengkapnya...

Kamis, 05 Juli 2012

Tips Blogger

»»  Baca Selengkapnya...

Cara Membuat Daftar Isi Keren di Blog

Cara Membuat Daftar Isi Keren di Blog - Kali ini saya akan berbagi Tips dan Tutorial Blog yaitu Cara Membuat Daftar Isi Keren di Blog, daftar isi kali ini lain dari yang sebelumnya lebih bagus, keren dan praktis, juga bisa kamu bikin di Halaman Penuh.Jika kamu memasang Daftar isi kaya gambar di bawah ini maka akan tampil berupa Label nya setelah di Klik Judul Label nya maka akan terbuka bagian isi Label tersebut berupa judul posting nya.


Jika sobat berminat silahkan kamu Copy kode di bawah ini.

<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WzjRUOSka-9CcVlZonZ6MmO5Z7AGyPcgxLmOhNb7WH-KA6-T7s5uJ747F9Elwmg-j8NNL7WyKMA3Q5jsChtaJhzr2NFeU4Ix0w9PZP3jc8CLPZerRZSuWwlEIrimhtMHNiLh6Lc9nFI/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:ccc; 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; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background:#ccc; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://infonetmu.googlecode.com/files/Acc1.js" type="text/javascript">
</script>
<script src="http://blazerracing.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
Kamu ganti kode yang berwarna merah dengan alamat Blog kamu.
Kalau mau di Halaman Penuh.

  • Pilih Posting Baru.
  • Pilih Edit Html yang ada di samping Compose.
  • Lalu copy kode yang di atas.
  • Dan lihat hasilnya. 
Gimana mudah kan Cara Membuat Daftar Isi Keren.

»»  Baca Selengkapnya...

Cara Membuat Twitter Follower Box di Blog

Cara Membuat Twitter Follower Box di Blog - Kali ini saya akan membahas bagaimana Cara Membuat Twitter Follower Box di Blog, selain Like Box Facebook ternyata ada juga Twitter Follower Box, jika kamu memasang Twitter Follower Box di Blog kemungkinan besar Follower twiter kamu akan meningkat.

Hasil nya akan kaya gambar ini
Dan berikut cara membuat Twitter Follower Box di Blog :

1. Login ke Blog kamu.
2. Pilih Rancangan lalu Pilih Add Gadget pilih lagi HTML/Java Script.
3. Copy kode dibawah ini.

<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("blazer_blog");</script>
Ganti kode yang berwarna merah dengan username Twitter kamu, contoh :  https://twitter.com/#!/dhani_alin  
Cuma segitu cara bikin nya gampang bukan, sebelum pergi tunjukan rasa terimakasih kamu dengan Follow Twitter saya https://twitter.com/#!/dhani_alin


sumber:http://blazerracing.blogspot.com
»»  Baca Selengkapnya...

Kotak Like Facebook Melayang Dengan jQuery

Kotak Like Facebook Melayang Dengan jQuery - Kali ini saya akan membahas bagaimana cara membuat Kotak Like Facebook Melayang Dengan jQuery, maksudnya menampilkan kotak like facebook dengan efek melayang ditambah dengan waktu batas, maksudnya jika waktu tersebut sudah habis maka kotak like facebook yang melayang tadi akan menghilang dengan sendirinya, sebelum membahas bagaimana cara membuatnya silahkan lihat DEMO gambar dibawah ini.


Gimana tertarik untuk membuat widget kaya gambar diatas, jika tertarik silahkan ikuti langkah-langkah di bawah ini :

1. Login ke Blog kamu.
2. Pilih Rancangan.
3. Pilih Edit HTML, jangan lupa Download Template Lengkap Dulu.
4. Cari kode </body>, setelah ketemu latakan kode dibawah ini tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='BLAZERBLOG'
//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/BLAZERBLOG',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>
Ganti kode yang berwarna MERAH  denagn USERNAME Facebook anda.
Dan untukk yang berwarna BIRU waktu yan ditampilkan dalam detik jadi 30 sama dengan 30 detik.
Sebelum disimpan Template nya klik dulu PERTINJAUAN apakah berhasil, jika berhasil baru SIMPAN TEMPLATE.


sumber: blazerracing.blogspot.com
»»  Baca Selengkapnya...

Cara Membuat Menu Horizontal Multi Color

Cara Membuat :
 
1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > Copy Kode di bawah ini.
<style>
#menuwrapperpic{margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:14px;font-weight:700;text-transform:uppercase;color:#333;padding:8px 8px 8px}
#menubar a.trigger{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;}
#menubar a.trigcome{padding:8px 18px 8px 20px;}
#menubar li{float:left;position:static;width:auto}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#008E00;color:#fff;-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.6); }

#menubar a.trighome{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#ff9900;}
#menubar a.trighealth{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#E42B2B;color:#fff;}
#menubar a.triglove{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#a800ff;color:#A89B9B;}
#menubar a.trigfoto{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#00248E;color:#fff}
#menubar a.trigfood{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#FFFF00;color:#24B200}
#menubar a.trigtravel{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#008E00;}




</style>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a class='trighome' href='http://blazerracing.blogspot.com/'>Home</a></li>
<li><a class='trighealth' href='http://blazerracing.blogspot.com/search/label/tips%20kesehatan?max-results=5'>Health</a></li>
<li><a class='triglove' href='http://blazerracing.blogspot.com/search/label/Love?max-results=5'>Love</a></li>
<li><a class='trigfoto' href='http://blazerracing.blogspot.com/search/label/foto?max-results=5'>Foto</a></li>
<li><a class='trigfood' href='http://blazerracing.blogspot.com/search/label/food?max-results=5'>Food</a></li>
<li><a class='trigtravel' href='http://blazerracing.blogspot.com/search/label/travelling?max-results=5'>Travel</a></li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
Ganti kata yang dicetak tebal dengan URL yang dituju.
Ganti kata yang dicetak tebal miring dengan kata lainnya.

Simpan dan lihat hasilnya. Jika Anda paham dengan kodenya saya yakin Anda bisa memodifikasi menunya.


sumber: blazerracing.blogspot.com
»»  Baca Selengkapnya...

Cara Membuat menu Dropdown


Sumber: Allbloggingtips
1. Login ke blog kamu.
2. Pilih Rancangan > Pilih EDIT HTML > Cari kode ]]></b:skin>
3. Setelah ketemu, letakan kode di bawah ini tepat di atas kode ]]></b:skin>

#imenu {
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(49%,#707070), color-stop(51%,#5e5e5e), color-stop(100%,#777777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #fff;
border: none;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
overflow: visible;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-appearance: none;
margin-bottom: 15px;
margin-left:0px;
}
#halfnav{float:right;}
#halfnav ul, #halfnav ul li{display:inline;list-style:none;padding:0;margin:0}
#halfnav ul li a{
display:inline-block;
margin: 5px;
font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
font-size:16px;
padding: 5px;
color:#fff;
line-height:20px;
text-decoration:none;
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(49%,#707070), color-stop(51%,#5e5e5e), color-stop(100%,#777777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
border: 1px solid #666;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#halfnav ul li a:hover{border: 1px solid #222;box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
#halfnav .current-menu-item a{border: 1px solid #000;}
#nav{position:relative;z-index:2000}
#nav .parent > a, #nav .parent > a:hover{background-image:url(../images/arrow.png);background-position:right;background-repeat:no-repeat}
#nav ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul li:hover ul .parent > a, #nav ul ul li:hover ul .parent > a:hover{background-image:url(../images/arrow-right.png);background-position:right;background-repeat:no-repeat}
#nav ul, #nav ul li{display:inline;list-style:none;padding:0;margin:0}
#nav ul li a{display:inline-block;font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;font-size:14px;color:#fff;line-height:36px;text-decoration:none;text-shadow:1px 1px 1px #333;padding:0 15px;margin-left:-4px;border-right:#777 1px solid}
#nav ul li a:hover{box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
#nav .current-menu-item a{color:#ccc;}
#nav .current-menu-item .sub-menu a{color:#fff;text-shadow:1px 1px 1px #333}
#nav .menu > li:first-child a:hover{border-radius:0}
#nav .menu .sub-menu li a:hover{border-radius:0}
#nav ul li{position:relative}
#nav li ul{display:none;position:absolute;top:27px;left:7px}
#nav li ul a{background:#555}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul{left:0;margin:-37px 0 11px 180px}
#nav ul li:hover ul{display:inline-block}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul{display:none}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul{display:block}
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a{border:#777 1px solid;margin:-1px 0 0 -11px}
#nav ul li:hover ul li a{width:150px;padding:0 14px}
#nav ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#888}
#nav ul ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#aaa}
#nav .children {z-index: 4000;}
#home {float: left;border-right:#777 1px solid;margin-right:4px;margin-left:15px; height: 36px;}
#home a:hover{opacity: .5}
#nohome {float: left; margin-right:4px;margin-left:5px; height: 35px;}
.searchform {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
width: 160px;
padding: 0;
margin: 7px 5px 5px 10px;
height: 20px;
box-shadow:inset 0 0 1px #222;
background: #fff;
float: right;
margin-right: 20px;
}
.center .searchform {float:none;}
#morefoot .searchform {float:left;}
.searchform .s{
margin:0;
border: none;
margin: 3px 2px 2px 20px;
font-size: 12px;
height: 14px;
width: 130px;
color: #333;
overflow: hidden;
}
#magnify {float:left;position:absolute;margin: 2px 0 0 5px;}
#magnify {margin: 0 0 0 5px}
.searchform .s:focus {outline:0; border:none;}
.searchform .searchsubmit {display:none;}
.row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
/* To fix the grid into a certain size, set max-width to width */
.row .row { min-width: 0; }
.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
.column:first-child, .columns:first-child { margin-left: 0; }
[class*="column"] + [class*="column"]:last-child { float: right; }
.row .three { width: 21.679%; }
.row .nine { width: 73.9%; }
.row .ten { width: 82.6%; }
.row .twelve { width: 100%; }
Lihat kode yang berwarna merah sesuaikan lebarnya dengan blog anda.
Setelah selesai simpan Template. Kembali lagi ke menu awal pilih Add Gadget > HTML JavaScript.
Copy kode di bawah ini.
<div class="container">
<div class="row">
<div class="twelve columns" id="imenu">
<div id="nav" class="nine columns">
<div id="home"><a href="http://marvblues.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvuIVBijEYAfeXXU2NJNgSfbCqTN3nN3dTfIJNRcf3iTBNxLThyphenhyphenIBroXA1XkKasQd5Qrt9MKgH6Ps1PmGZ9_kT5X8NInOGH3S_t_jtEPlHhFnlyMpPvZTcmiRuKt3XgnUnu7RjOu5aHrXC/s320/home.png" alt="home"></a></div>
<ul id="nav_menu">
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">JS</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">By category</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">By tag name</a>
<ul>
<li><a href="#">captcha</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="http://www.allbloggingtips.com">Go Back To The Tutorial</a></li>
</ul> </div>
<div class="three columns">
<form method="get" class="searchform" action="http://marvblues.com/">
<div id="magnify"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmxYjarYy98fzjDMrZtyKyyg3kMzYn1BebMowqLO13zgVP1iJTlVW0aeLh0ncv2H5ntMG3i_cYsJc8MyWQk2Frut1frleof-h6p-pnB3N7aE0Ggg7imKKD9SFlaaV6VTTn3z1GYEZ9ylhf/s320/magnify.png" alt="magnify"></div>
<div><input name="s" class="s" value="Search" id="searchsubmit" onfocus="if (this.value == 'Search') this.value = '';" type="text"></div>
<div><input class="searchsubmit" value="" type="submit"></div>
</form> </div>
</div>
</div>
</div>
Silahkan ganti tanda # Dengan URL yang dituju. Dan kata yang dicetak tebal dengan kata lainnya.
CSS dan HTML dibuat oleh Allbloggingtips.
»»  Baca Selengkapnya...
Photobucket
Related Posts Plugin for WordPress, Blogger...