myblog

Home » Archives for Maret 2012

Cara Membuat Widget Stay Connected

Posted by Jemari Menari Kamis, 08 Maret 2012 0 comments

Cara membuat widget stay connected :

Login ke dashboard blogger anda.
Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
Copy script dibawah ini dan paste pada gadget.

<style>
#news-letter{clear:both;padding-top:10px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnRTZOZieG8Oqjr7gBDveBkB6JhBan1u2-i4Ja5nwFRREE4NNmH3aYJW3Fr_evUUsbE_42Cu7bSeVRMg_ySHhmvWVLfq0IwuQM_y-Obeaj2GYPLsehDKcZZxScsWJ0VlbvHuuHbOTE8A/s800/mail-box.png) no-repeat;}
.news-headline{position: relative;z-index: 999;font-size: 10px;padding-bottom:10px;font-weight:bold;}
</style>

<div class="news-headline" color:#333;>
Read latest headlines in your favorite news reader
</div>
<center>
<table border="0">
<tr>
<td style="padding-right:4px;">
<a href="http://twitter.com/TWITTER-NAME" target="_blank" title="Follow Me On Twitter">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVqpNvVtADIAtXUZ46I6xxQZUr1GMF-39OSmeVRcqiFfs7eSklJLH_FNx_TM-mhVJXnStP1NTxQJp_y6kCm_h-crJAsA9GTRl9Xx-zznKnmu16n_zUleNITH5OJx4-QHx85OElsy14Saw/s800/twitt.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://feeds.feedburner.com/FEEDNAME" target="_blank" title="Subscribe Via RSS">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXHQJ12Hy3ZvtH_r0-v3AWRQfzvTISpFzAhHezDrrZ2TUax9rY2Aj8UT3Aj5b30MpmSBiisB33ApGWEsjBW1g0MyiZwxVDuGJkzCh1_HFVdtpfhupEvWcIHQoE0fBUBv4thBwtQj0sA8k/s800/Feed-icon_128.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="FACEBOOK-URL" target="_blank" title="Find Us On Facebook">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKmnM7jVQ2KCyfLmpLEB19XhM-LB1w2tJal6i1PPfgghYE_EbdiWaqy8z3-Jvpe-Nznd-NIurDsXeL8Xahqv6DzDjL6TYPamE_nMfLS7t4JCW82Jvk_4qXMYttzgxOJYOM3o8yi5zZDk/s800/Facebook_icon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="GOOGLE-PLUS-URL" target="_blank" title="Add me on Google+">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1-A_U88gWiN-m1Yj8Wj4PIkGV9zRF_z9dxIgNhKZMoLaK0niQO8oTPwdXnXlh02WKQkQi2plfezozRv1TuLjkeIRJZjDpzw-ouDHcR3xDfSx_FmLIaw5-3eYSKPW76BgfhD2uVplAXw/s800/googleplusicon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://www.stumbleupon.com/share?url=HOMEPAGE-URL" target="_blank" title="Stumble Upon">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKxtE5dXMaDJhAhBVglWfymJhb7SW_eFfO8A1efP9QdxzrW7Yu6xpG5f9y45DraUYF2JtVFUWnB_YFr5GHfVygUItggvPTvZYvgUgoyBtvZwnbGE9_OI8u82V7tGs-ZXt7IKq0Del9_8/s800/stumbleupon_icon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://technorati.com/faves?sub=addfavbtn&add=HOMEPAGE-URL" target="_blank" title="Add To Technorati">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_OHbdWyypO3veYXZjKHhEFd1zb_6h5QhAcUDXZujrLpZfpH_RjZ2-tuWWR5dyo-XPKXqPSv6BeHwA1TvmiDKSm_QQ-39PNV5Oo3qIhylQy6TYjx4rbJLgtqAiKDaA3Yxv88111wZMoY/s800/Technorati-icon.png" /></a>
</td>
<td>
<td style='padding-top:-2px;'>
<a href="http://feeds.feedburner.com/FEEDNAME"><img src="http://feeds.feedburner.com/~fc/FEEDNAME?bg=000000&fg=FFFFFF&anim=1" height="26" width="88" style="border:0; padding-top:5px" alt="Fellow Readers" /></a>
</td>
</td>
</tr>
</table>
</center>
<div id="news-letter">
<span class="msg-box"></span>
<b>Sign up for our email news letter</b>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<p><input type="text" valign="middle" name="email" value="Enter your email address" size="25" maxlength="100" onfocus="this.value = '';" style="width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);" gtbfieldid="2"/>
<input type="hidden" value="FEEDNAME" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Sign Up" id="submit"/>
</p>
</form>
</div>

Ganti yang berwarna merah dengan URL sobat.
Dan simpan..

Membuat Rocking Rolling Rounded Menu Dengan JQuery Dan Css3

Posted by Jemari Menari 0 comments

Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>.

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

Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.

<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin> dalam template.

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>.

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + "search/"' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>
</div>

<script type='text/javascript'> function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)}) </script>

Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
Save template anda.

Cara Membuat Widget Buku Tamu Melayang Di Blog

Posted by Jemari Menari 0 comments

Cara membuat buku tamu (guest book) / chatbox melayang :

Daftar dulu di Shoutmix atau Cbox, pilih salah satu saja.
Isikan data yang diminta dengan lengkap, jika sudah selesai ambil kode shoutmix yang diberikan dan simpan dulu di notepad.
Selanjutnya login ke dashboard blogger anda.
Pilih Rancangan - Elemen Laman - Add gadget (HTML/JavaScript).
Copy kode script dibawah ini dan paste pada gadget, kemudian masukkan kode shoutmix anda pada bagian yang saya tandai dengan tulisan warna merah.

<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:180px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>

<div style="text-float:right"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:auto; height:auto;" alt="Guestbook" src="http://blog.akakom.ac.id/marcell/files/close.png" /></a></div>
LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI
<br/>
<script type="text/javascript" src="http://bukutamu-zies-name.googlecode.com/files/bukutamu-zies-name.js"></script>
</td></tr></table></div>

<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onmouseover="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="http://img221.imageshack.us/img221/4097/bukutamu3c.png" /></a>
</div>

Preview dulu untuk melihat hasilnya.
Edit kode shoutmix pada bagian width dan height untuk mengatur lebar dan tinggi kotak widget sesuai keinginan. Sobat juga dapat melakukan editing pada bagian CSS untuk mengganti kode warna background atau mengganti URL gambar button dengan URL gambar anda sendiri. Silahkan bereksplorasi sendiri saja ya. Saran saya buatlah blog khusus untuk tempat uji coba sobat.
Jika sudah beres Simpan/Save gadgetnya.

Cara Membuat Kotak Admin Dibawah Postingan

Posted by Jemari Menari 0 comments

Cara Membuat Kotak Admin Di Blogspot :

Login ke dashboard blogger anda.
Pilih Rancangan >> Edit HTML, centang Expand template widget.
Cari kode <div class='post-footer'> pada template.
Copy script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>.

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_oYIxXmyAI3jCL8dc9oWUwjK5a3JQKkJvcGQLKls1RJ6Rn6bE7ohMSeoyM1EIfoFGLGht1AXPTQs53FZ4h8Ot2AFYpYxLnteD5N4sQgm1g88sy6NUzGxO3_JZ2j6NV537iVWve2f3No/s220/AVATAR+KU-128.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Kemudian cari lagi kode ]]></b:skin> pada template sobat.
Copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>.

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

Silahkan ganti link URL gambar profil yang berwarna Merah dengan link gambar profil sobat. Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kata ulasannya di notepad.
Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan.
Preview dulu hasil kotak admin yang dibuat. Jika editing sudah dirasa cukup, Save/Simpan template anda.

10 Menu Horizontal Untuk Keren Blogger

Posted by Jemari Menari 0 comments

Cara membuat menu horizontal

Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
Cari Kode ]]></b:skin> ( Gunakan CTRL + F untuk mempermudah pencarian )
Copy Css dari menu yang anda pilih di bawah ini dan paste tepat diatas kode ]]></b:skin>
Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
Jika sudah ditemukan, Copy kode Menu yang anda pilih dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>

Menu Horizontal 1

Css

#horizontal1 { /* none needed */ } ul#navlist1 { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist1 li { list-style:none;float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist1 a, #navlist1 a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist1 lh#active { color: #95bbae; background-color: #d1e3db; } #navlist1 a:hover { color: #fff; background-color: #FE9C54; }

Kode

Menu Horizontal 2

Css

#horizontal2 { float:left; width:100%; background:#fff; font: bold 6.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist2 { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist2 li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist2 a, #navlist2 a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist2 li#active { color: #95bbae; background-color: #d1e3db; } #navlist2 a:hover { color: #666; background-color: #fff; }

Kode

Menu Horizontal 3

Css

#tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvASky0MXI/AAAAAAAACvM/lCN12ooOQ_o/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvASjsu31I/AAAAAAAACvQ/h_VW2YzIljU/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; }

Kode

Menu Horizontal 4

Css

#horizontal3 {height: 20px; } #horizontal3 ul { border: 0; margin: 0; padding: 0; list-style: none; text-align: center; } #horizontal3 ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #horizontal3 ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #horizontal3 ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #horizontal3 li#active a { background: #c60; border: 1px solid #c60; color: #fff; }

Kode

Menu Horizontal 5

Css

#tabsI { float:left; width:100%;font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { margin:0; padding:0; } #tabsI a { float:left;background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; }

Kode

Menu Horizontal 6

Css

#tabsF { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5iiWmCI/AAAAAAAACv0/4lAk0jar62Q/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5jIWoBI/AAAAAAAACv4/1TJsSRUoYes/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; }

Kode

Menu Horizontal 7

Css

#tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; }

Kode

Menu Horizontal 8

Css

#tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height$3Anormal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-pxMSoZI/AAAAAAAACuU/PFY8xbrx6AQ/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-p0wRo5I/AAAAAAAACuY/T2KFLniEzcM/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Lac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; }

Kode

Menu Horizontal 9

Css

#tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_vhXlxhI/AAAAAAAACvE/mtaQIkLuioQ/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_voDXE9I/AAAAAAAACvI/sVgxX67lkGc/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; }

Kode

Menu Horizontal 10

Css

#tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left;display:block;background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; }

Kode

Catatan

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

Tanda pagar (#) silahkan ganti sesuai link yang anda inginkan, dan untuk yang saya warnai biru adalah text menu dari link yang anda buat. contoh : <li><a href="http://rizkydorkgaskins.blogspot.com/" ><span>Myblog</span></a></li>

myblog

Cara Membuat Widget Stay Connected

Membuat Rocking Rolling Rounded Menu Dengan JQuery Dan Css3

Cara Membuat Widget Buku Tamu Melayang Di Blog

Cara Membuat Kotak Admin Dibawah Postingan

10 Menu Horizontal Untuk Keren Blogger

Cari

Arsip Blog

Follow On Facebook

Followers