Chunky Menu Css3

-Silahkan Copy Code Css Di bawah ini dan Letakan Di atas Code ]]></b:skin>

#top_navigation {
background : transparent;
width: 800px;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
width : 100%;
}
ul.nav {
background : transparent;
width: 800px;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
background : transparent;
height : 30px;
font-size : 16px;
color : #808080;
float : left;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}

Simpan Template

-Langkah Terakhir Copy Code Html Di bawah ini dan Letakan Di Add Gadget ->> Html/Javascript

<div id="top_navigation">
<ul class="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Your Blog </a></li>
<li><a href="#"> About You </a></li>
<li><a href="#"> More stuff </a></li>
<li><a href="#"> Contact </a></li></ul></div>

Jangan Lupa Klik Simpan...
Sumber Artikel : Zubeta.com

Read Full Post

Cara Pasang Avatar Pada Profile Komentar Blog

1.Silahkan Login Ke Blogger
2.Pada Dasbor Klik Tata Letak - Edit Html
3.Klik Expand template widget
4.Kemudian Letakan Code Di bawah ini Tepat Di atas Code ]]></b:skin>

.avatar-image-container img{
background:transparent url(http://pub.mybloglog.com/images/nopic_48.gif)no-repeat;
height:35px;
width:35px;
}

5.Kemudian Cari Code

<dl id='comments-block'>

Jika tidak ketemu coba cari code ini

<div id='comments-block'>

6.Jika sudah ketemu hapus dan ganti dengan code berikut ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

7.Lanjut lagi cari code seperti di bawah ini

<a expr:name='data:comment.anchorName'/>

8.Jika sudah ketemu hapus dan ganti dengan code berikut ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

9.Klik simpan dan lihat hasilnya...

Read Full Post

Box Subscribe For Blog

1.Login Ke Blogger
2.Pada Dasbor Klik Tata Letak ->> Edit Html
3.Kemudian Letakan Code Berikut ini Tepat Di atas Code </head>

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Save Template

4.Kemudian Silahkan anda copas code dibawah ini dan letakan ke dalam halaman add gadget ->> Html/javascript

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdIgPz41YYHc0Y7AFAZcTtAwiqXbu2kUt050lpnFPCWwmoNXMvhFQAcYUGn0EcAFzAHvxXDtknNU9B7k78dKFfhgKcca0lBJ0R1cPXrl3qAok4zhSuZcc1N7jg2kTN0uqvhjXG1N0N44-6/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9VG92yU6RqV8X3jNvgUKI3nWarS9y4dPh2bL7rKVvet99ztaVsfdCRWGbNbDUywBR1UNWIgHcRsmkVJoGa-wiOqIrkfGGoEaEFyNhmDBNNBnSanoXP6C0jGeayqol7k4Eqf7NVcmTOJdf/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwjNrFPKoqv4JE_aNp-mVT0s5xynbzQ0y3ru0-vEeBx2siLAMDykN_SmBqO283oMSN9TX_dZC63Vk5IJSXrCNu6EeQ863iCUZYv_onUUaShvr5mBfB_oQOLldM1J1p0b6Xm3uBX-GDGo3/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirlRXV4Z50OUeU6y3FZgDWe3KjLc7ZZhfVBFSgK1xreRxGxeJK49Kgxbh7dEASJBjDSpHWY6Vxfvu2SUwulGhyZZkgiqZELddXrUaIywaiyepIhJQkr3Dcjd3IAP6M4sQMrGumMPAXIPMG/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVp6QuJKdeQkuAr1WCKIbDVw9n3wX0dOwr1sJGOCe-N0bIZ8A_RJwQqbeHnZ5W9zepNi1Ma5_pzWtGHspXTI97XENP9ATRgLALuiDIl7qQmMsoms6N2dDz2wMc8wnCSvktghmj2bK-LHE/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2W0zFp7FRYSN2r42GZ8SI_E20m1ZeRDMgTRGsxXpC-gk_1nxUJJrj47GW_F5X9RbtjLqr3r4lNu4x4T4242F7SDdUnlfaYC5pv4INUBlpmz7_1i7HepA1cNFyqy52Xcsjwnz6gaWC-Xs/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmAAyc7UKWdk9K4sk9z4Mt9QGPJBc1Pe0RpMEp0cFzWrrSr2GEHv12Bm6P4PIUIEjmT3Lp0X534uT3YNl9ybymX49FOQVD-nqmQn5JjHCxbg-VOixwgkRWH2-TSMN_XebcU04NW8u2m7c/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4ik7f6_dN0x9WWF9NqgxmuTkAsv1Pigzvx2uFvUHLMEJlrXvMDBlmADpnHpD75HmEmWaq2rrJzjnv32vaCi8UlSBEotkcdUq03WzslASMUWkhYdt91wwoApp74QXSZvdGHDp_rNG8GU/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSeN7bY_maQx0tUu2n6WUFsMlZP5ydIXyCBaar6SeXYl6mopcAQOfBTi2Sknb7BAoZiYDEWXtcOYOq-WzOibtS2Ect8crrXuNCw4IqqVcUGhz1Wj_n7oglWPFPo_MZEWSzyt37CID-os/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5yt3AocMsO0EIVadZySZaI1WAn9fSH5iREob9UR_xLoP98Aa80ALRI4RRdoRSh_JOAP4ST0iEK9REXGHpi2b90tGfyDPDVu4wTvoCHeLzR2E8VKgsLKU3Sp1I81HHgY0X32rgdCcgTmM/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWC5BznSgOFeKacL3M0hzMMLP2FMBLA6ZI7ikzpQvnKKDTe_XYZXRz-lg51T98xt2V7v6tUw1jo4T3xBCD-vr-k1p2AE8hKfoHlnlH5ZQbyJ74Qp2adTnDj37YDWo8xy7fJChAxsp61Sw/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Ket:jangan lupa ganti code yang berwarna MERAH dengan ID FEEDBURNER-TWITTER-FACEBOOK USERNAME anda
5.Jika Sudah Klik Simpan dan lihat hasilnya

Read Full Post

Cara Mudah Membuat Artikel Terkait

Seperti Biasa Kita Langsung Aja Ya.....

Silahkan Ke halaman Edit Html Anda
Kemudian Letakan Code Script Di Bawah Ini Tepat Di Atas Code <div style='clear: both;'/> <!-- clear for photos floats -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>


<div class='widget-content'>
<br/>
<h3><center><blink>ARTIKEL TERKAIT</blink></center></h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Ket: Code yang Berwarna MERAH silahkan Ganti sesusai Dengan Keinginan anda

Read Full Post

Blog Bang Koko Mempunyai 2.887 pengunjung unik per hari

Postingan ini saya tulis karena saya merasa heran kenapa bisa ada pengunjung 2.887 Unik per hari di blog saya dan lebih anehnya lagi Pagerank Nya '0'....wahh bikin saya bingung sebenarnya ada apa di balik blog saya ini padahal yang saya lihat tidak ada yang menarik di blog saya....jadi buat teman-teman yang merasa gak percaya atau penasaran silahkan kunjungi ke Situs Ini http://pastebin.com/d/bang-koko.blogspot.com dan baca baik-baik,,,sapa tau mungkin ada yang tau tentang ke anehan yang terjadi pada blog saya ini...

Read Full Post

Menu Navigasi Horizontal Dengan Jquery

Jika ada yang tertarik Silahkan Ikuti langkah-langkah Berikut ini:

1.Pertama Sialhakn Login Ke bLogger
2.Pada Dasbor Klik Tata Letak/Rancangan
3.Klik Edit Html->>expand template widget
4.Kemudian Letakan Code Script Di bawah ini Tepat sebelum Code </head>

<style type='text/css'>

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item
$(this).css({ &#39;background&#39; : &#39;#1376c9 url() repeat-x&#39;}); //Add background color + image on hovered list item
$(this).find(&quot;span&quot;).show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ &#39;background&#39; : &#39;none&#39;}); //Ditch the background
$(this).find(&quot;span&quot;).hide(); //Hide the subnav
});

});
</script>

5.Klik simpan Template
6.Langkah Selanjutnya silahkan Klik Add gadget->>html/javascript kemudian Copy code berikut ini dan letakan di kolom Widget html/javascript

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="#">Blogger</a>
<span>
<a href="#">Widgets</a> |
<a href="#">Tip And Tricks</a> |
<a href="#">Basic</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

7.jika sudah klik Simpan
8.Selesai dan selamat mencoba..

Read Full Post