Widget Recent Comments Dengan Gaya Message Windows 8

Windows 8 resmi dirilis pada akhir Oktober lalu dan membuat dunia menggelegar. dan untuk saat ini saya kan memberikan widget Recent Comments bergaya Message Windows 8, Widget ini menurut saya sangat keren, widget ini menggunakan CSS dan JavaScript. Langsung saja Lihat cara Memasang Widget Recent Comments dengan gaya Message Windows 8.

Langkah 1 : Tambahkan kode berikut sebelum tag ]]> </ b:> skin dalam template Anda.

#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}

Langkah 2: Tambahkan 1 widget HTML / Javascript di mana Anda ingin menampilkan Recent Comments . Mengedit teks dan paste kode berikut ke dalam konten dan pilih SIMPAN .

<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioCFVuOgCuHwp38lTkJh5iyu0WU7HsGJ1f8nr5KtEL0ydqpOV-wVAWV7-W47rSFzM0NHo8SSrmysNqwZQZL_SbQJrMthYkQkpWJTajKHisCujXesa2DyBSt4NaR41hwVKCPanGi9en4JI/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>

Anda telah berhasil Memasang Widget Recent Comments dengan gaya Message Windows 8. 

source : http://mas-basir.blogspot.com/2013/06/widget-recent-comments-dengan-gaya.html

Metro Blogger Template with 4 column footer

Metro is a free blogger template custom design with 1 Right Sidebar, 2 Column, Ads Ready, Blogger, Blue, Custom Navbar, Fixed, Gray, Page Number, Responsive, and now you can download Metro blogger template for free  in All About Blogspot Templates.

Template Author  :   Ozynetwork
Designer     :  Ozynetwork.com
     
Metro blogger Template- A Unique Stylish Blogger Template. Two Column Metro Style template with 4 column footer. Highly Customized Navigation and sidebar menus. Author Box with Related posts and subscription box.

Almost everything from head to toe is customized and we haven’t left a single item in customization. Some of the features are very impressive like Metro Style Navigation Menu, Metro Style Post titles and Metro Social Subscription widget. This is a free of cost template but in order to thanks the Author you must keep the credit link.

DEMOVIEW   |    DOWNLOAD

What More Metro Blogger Template?

Beside these fantastic features, Blogger Metro blogger Template has many other exciting features which you will definitely like. After reviewing the features, we will now take a look over the customization part.

Installation
1) Open Your Blogger dashboard and click on  template and Edit Html.
2) Now open the file we provided it to you and copy all the data from that file and paste it there.
3) Save your template and the installation process in over.

Navigation
1) Click on Template >> Edit Html.
2) Press CTRL+F and search for

<div class='mblmetromenu'>

3) Edit the Menus and Put the links.

Author Box1) Click on Template >> Edit HTML
2) Press CTRL+F and search for

<div class='auth-panel'>

3) Edit the Author panel and you are done.

Meta Tags1) Press CTRL+F and search for

<!--meta tags-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>Mtro|A stylish blogger template</title>

2) Edit the Keywords, Meta Description and Title for your blog and you are done!

source : http://redaksiexpo2012.blogspot.com/2013/10/metro-blogger-template-with-4-column.html

Stylish Recent Post Slider for Blogger with Thumbnails

Recent post slider is used to increase your web traffic and attract your viewers. This recent post slider is a best way to help viewers to find more post's. This widget is made by CSS and Javascript which is not affect any load time in your blog. Please follow the below instruction to get this amazing slider in your blog.

Step 1:

Go to Blogger---> Layout ---> Click "Add a Gadget" link ---> Add HTML/Javascript Box.(refer below screenshot)

Step 2:

Now paste the following below code in HTML/Javascript Box.

<link href="http://www.tisunservices.com/jsandcss/recentpostwidget/recentpostwidget.css" rel="stylesheet" type="text/css">

<div style="width: 250px; height: 370px;" class="slider-rotator" id="slider-rotator"><div style="display: none;" class="slider-item"><div class="image-wrapper"><img alt="How to Accept Donation Online Using Paypal?" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4oE_FUHhYEjiAdPL8fH64FHMz2xIZpEAR9tPRmxtD5xSpDyZqLru4PQRhA59Myww_CFw0OLpdoPIAapX1HTnIlxA0QoaNWkgkJFQdoS7oqqv1tB0pPddQJcXFTEbk4Usq-ErAGBaMgan5/s250-c/How+to+Accept+Donation+Online+Using+Paypal+welcome+screen.jpg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="How to Accept Donation Online Using Paypal?" href="http://www.aqtalks.com/2014/01/how-to-accept-donation-online-using-paypal.html">How to Accept Donation Online Using Paypal?</a></h4><p>

You can accept donation easily at online using paypal, Pay…</p></div></div><div style="display: none;" class="slider-item"><div class="image-wrapper"><img alt="Top Self-Made Video Youtube Millionaire - Jenna Marbles" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghOo8GLDXZSqbhwryqMeZErhZNBUR-RYK08HRUuENNzAJyhX9czEtqr6YrPasE9GX1rc_sWI2RKdmw1hnKs9hh5IXwACYRu1eGdV3JWcKLov1MxLiGCVJdbb8FjZPhWn-uBmGIzH9DiBb0/s250-c/Top+Self-Made+Video+Youtube+Millionaire+-+Jenna+Marbles+welcome+screen.jpg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="Top Self-Made Video Youtube Millionaire - Jenna Marbles" href="http://www.aqtalks.com/2013/12/top-self-made-video-youtube-millionaire.html">Top Self-Made Video Youtube Millionaire - Jenna Marbles</a></h4><p>

Youtube is one of the biggest videos mall, and you can als…</p></div></div><div style="display: none;" class="slider-item"><div class="image-wrapper"><img alt="Top 3 Adsense Earners in the World, 2013!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl798pIY4D_BXk8gl5Bp6JT-90y_i-ml0MHE2LvWIlGT2Wj07wl-s_SMwIIhhP4dtO48gWtXwegmiuxtFl5kqtRKFmI38HPXA1gvwBuONUnWq2GEbvkYeWVti6j-JI_SOgmkDerqhc9Smo/s250-c/Top+3+Adsense+Earners+in+the+World,+2013+welcome+screen.jpeg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="Top 3 Adsense Earners in the World, 2013!" href="http://www.aqtalks.com/2013/12/top-3-adsense-earners-in-world-2013.html">Top 3 Adsense Earners in the World, 2013!</a></h4><p>

Now a days Google Adsense is the main and biggest income …</p></div></div><div style="display: block; opacity: 0.253636;" class="slider-item"><div class="image-wrapper"><img alt="'Grand Theft Auto: San Andreas' Game For Android Released on Dec 20, 2013!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeInAmDE95yq8jBU9x8v9Nx2FF7zAdwr-put8CCEyucx8d72mIl1bk_x9kXFIDut-EQwwxFM2tofggqdv7jXvMPPnux0yHDXxME85mQPlmAGMxEs4ZUNnv6PCAK80dMdXSk4NymaOvm3P/s250-c/Grand+Theft+Auto+San+Andreas+Released+on+Dec+20+2013+8.jpeg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="'Grand Theft Auto: San Andreas' Game For Android Released on Dec 20, 2013!" href="http://www.aqtalks.com/2013/12/grand-theft-auto-san-andreas-released-on-dec-20-2013.html">'Grand Theft Auto: San Andreas' Game For Android Released on Dec 20, 2013!</a></h4><p>

In previous post we discuss about a "Rockstar" annonsement…</p></div></div><div style="display: none;" class="slider-item"><div class="image-wrapper"><img alt="How to Run Android Mobile Apps on Windows/Mac PC's?" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLO7Kx58jmgWhxhxnhS7eLHhQoYjBmXceTAe8XmsslDCAnGgxWuEKgzl21nB8isU1t49fq80lJdObKNCPwLsvQTubAt7i1__Wh5s7PDd4cVtqZz1F56_1DFG_qDap2xn31zENVybdJDEUT/s250-c/How+to+Use+Android+Mobile+Apps+on+Windows+PC+2.jpg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="How to Run Android Mobile Apps on Windows/Mac PC's?" href="http://www.aqtalks.com/2013/12/how-to-run-android-mobile-apps-on-pc.html">How to Run Android Mobile Apps on Windows/Mac PC's?</a></h4><p>

You can run android mobile apps or google play store mobi…</p></div></div></div><div class="slider-rotator-nav"><span class="rotator-advancer"><a href="#prev"><</a></span><span class="rotator-num"><a href="#slide-0" class="">1</a><a href="#slide-1" class="">2</a><a href="#slide-2" class="">3</a><a href="#slide-3" class="current">4</a><a href="#slide-4" class="">5</a></span><span class="rotator-advancer"><a href="#next">></a></span></div>

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

<script src="http://www.tisunservices.com/jsandcss/recentpostwidget/recentpostwidget.js" type="text/javascript"></script>

<script type="text/javascript">

makeSlider({

    url: "http://www.aqtalks.com" // Add your blog URL

});

</script>

Note: Replace your blog URL on http://www.aqtalks.com/.

Cara Membuat Menu Horizontal Berdasarkan Label

Add caption

Label secara default adalah list item, daftar yang sifatnya vertical dan dibelakang label diikuti angka dari jumlah isi label yang sama. Jika ingin mengelola label menjadi menu yang horizontal, maka dibutuhkan kode CSS yang bisa mengelola tampilan label terlihat mendatar.

Membuat Menu horizontal dengan Label atau kategori - Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Tujuannya untuk memberikan Jalan pintas atau shortcut link ke halaman halaman tertentu sesuai yang di inginkan.

Kebanyakan Menu Horizontal linknya di isi secara manual. Sekarang bagaimana memasukkan label/kategori ke menu horizontal agar link yang di tampilkan bisa otomatis mengikuti label yang ada.
Berikut Langkah-langkahnya:

1. Login ke Blogger
2. Pilih Rancangan atau tata letak
3. Pilih Edit Html
4. Untuk mengantisipasi hal yang tak di inginkan, Download template dulu dan save di Pc.
5. Masukkan kode CSS berikut sebelum tag ]]></b:skin>

#menulabel{margin: 0px auto; padding:0; width:100%;background:#045FB4 }
#label{margin: 0px auto; padding: 3px 0; width:1000px;border-bottom:1px solid #000 ; height:20px;background:#045FB4 url() repeat-x top; }
#label ul {float: left; list-style: none; margin: 0px; padding: 0px;}
#label li {float: left; list-style: none; margin: 0px; padding:0 10px;}
#label li a, #label li a:link, #label li a:visited {color: #fff; display: block; margin: 0px; padding: 2px 10px 2px 5px;;font-weight: none;}
#label li a:hover, #label li a:active { color: #fff; margin: 0px; padding: 2px 10px 2px 5px;;text-decoration: underline;font-weight: bold;}

6. Masukkan Kode Html berikut di atas <div id='outer-wrapper'> atau kode sejenisnya 

<div style='clear:both;'/>
<div id='menulabel'>
<b:section class='label' id='label' maxwidgets='1' showaddelement='no'>
<b:widget id='Label12' locked='false' title='' type='Label'/>
</b:section>
</div>

7. Terakhir Simpan Template

Setelah Berhasil masih ada satu langkah lagi yaitu menghapus Angka di belakang label agar lebih rapi. Caranya tinggal di klik pengaturan label dan tidak mencentang nomer jumlah per label. Itu saja.

Sebetulnya label bisa dimuat kedalam menu horizontal bergambung dengan menu sebelumnya. Caranya dengan mengelola CSS seperti di tulisan saya sebelumnya: Membuat Menu Drop Down List. Tapi untuk model yang seperti ini mesti dilakukan secara manual. Meskipun demikian tidak akan sulit dilakukan. Untuk membuat agar menu label bisa bekerja, maka linknya mesti seperti ini:

<a href="/search/label/Variasi Menu">Variasi Menu</a>.

Jika anda membuat seperti ini:

<a href="http://wisencare.blogspot.com/search/label/Variasi Menu">Variasi Menu</a>

tidak akan berhasil. Jadi jika ingin menu lebih indah, menggabungkan kedua cara itu patut dicoba.

Sumber artikel :  http://wisencare.blogspot.com