Modifikasi Tampilan Followers

Anda bosan dengan tampilan followers yang hanya seperti itu ajah, atau anda sudah memodifikasinya. Nah kali ini saya ingin sedikit memberikan triks bagai mana memodifikasi tampilan followers. Untuk demonya lihat dibawah ini. [[ Follow This Blog ! ]] 72 Followers has join

>> Click To View

Untuk membuat tampilan followers seperti diatas tinggal ikuti langkah-langkah berikut ini :

• Masuk ke Layout - Tambah Laman - HTML/Javascript, lalu masukan kode dibawah ini.
<center><a href="http://www.blogger.com/follow-blog.g?blogID=ID Blog anda" target="_blank">[[ Follow This Blog ! ]]</a><br /><br />72 Followers has join <br /><p> <a href="http://www.blogger.com/manage-followers.g?blogID=ID Blog anda" target="_blank">>> <b><u>Click To View</u></b></a><br /></p></center>

Untuk tulisan yang berwarna hijau bisa anda ganti, sedangkan yang berwarna merah atau blog-ID bisa anda lihat di address bar browser anda. [Sumber] nah semoga bermanfaat ya.. selamat mencoba..

Script Anti Klik Kanan.

Untuk sekedar jaga-jaga, bagi anda yang artikelnya sering di copy paste namun tidak mencantumkan sumbernya pasti merasa kesal juga ya. Nah postingan kali ini saya ingin memberikan sedikit tips bagaimana artikel atau postingan kita tidak bisa di copy alias klik kanan, trik kali ini bener-bener sama sekali ga bisa klik kanan dan juga ga bisa mem-blok artikel atau postingan anda.

Keuntungan dari script kali ini adalah :

1. Anti Right Click
2. Anti Return Key
3. Anti Enter Key
4. Anti Block Text
5. Anti Numeric Key
6. Anti Alpanumeric Key
7. Anti Key Combination
8. Anti Function Key
9. Anti Ctrl + Alt Key
10. Anti Power Key
11. Anti Sleep Key
12. Anti WakeUp Key
13. Anti Home Key
14. Anti Insert Key
15. Anti Tab Key
16. Anti Capslock Key
17. Anti Shift Key

Untuk memulainya anda tinggal ikuti saja langkah-langkah berikut ini :

• Seperti biasa backup terlebih dahulu template anda.
• Setelah itu Layout - Edit HTML.
• Cari kode </head>, lalu masukan kode berikut ini diatasnya.
<script type="text/javascript"> var message="Maaf, Klik Kanan Saat Ini Saya Disable"; /////////////////////////////////// function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedo wn=clickNS4;} else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false") if (typeof document.onselectstart!="undefined") { document.onselectstart=new Function ("return false"); } else{ document.onmousedown=new Function ("return false"); document.onmouseup=new Function ("return true"); } var isnn,isie if(navigator.appName=='Microsoft Internet Explorer') //check the browser { isie=true } if(navigator.appName=='Netscape') { isnn=true } function right(e) //to trap right click button { if (isnn && (e.which == 3 || e.which == 2 )) return false; else if (isie && (event.button == 2 || event.button == 3)) { alert("Maaf, klik kanan tidak di izinkan! Gunakan klik tengah"); return false; } return true; } function key(k) { if(isie) { if(event.keyCode==17 || event.keyCode==18 || event.keyCode==93) { alert("Maaf, kami mendeteksi anda sedang membajak") return false; } } if(isnn){ alert("MAAF!!, DISINI PEMBAJAK DILARANG MEMENCET TOMBOL KEYBOARD") return false; } } if (document.layers) window.captureEvents(Event.KEYPRESS); document.onkeydown=key; </script>

Selain kelebihanna itu script ini juga terdapat kelemahan yaitu, blog kita bakalan sepi pengunjungnya akibat tidak bisa mengcopy script yang terdapat dipostingan dengan maksud ingin mempraktekkannya.[sumber] nah semoga bermanfaat ya.. selamat mencoba..

jQuery: Coda-Slider 1.1.1

Untuk demonya silakan klik disini

1. coda-slider.1.1.1.js
2. jquery-easing-compatibility.1.2.pack.js
3. jquery-easing.1.2.pack.js
4. jquery-1.2.1.pack.js
5. body-bg.png
6. arrow-right.gif
7. arrow-left.gif
8. ajax-loader.gif

Download file diatas, lalu upload ketempat hosting anda. Selanjutnya kita akan bermain dengan htmlnya, ikuti langkah-langkah berikut ini :

1. Seperti biasa backup terlebih dahulu template anda.
2. Setelah itu cari kode </head>, lalu letakkan script berikut ini di atasnya.
<script src="alamat jquery-1.2.1.pack.js" type="text/javascript"></script> <script src="alamat jquery-easing.1.2.pack.js" type="text/javascript"></script> <script src="alamat jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script> <script src="alamat coda-slider.1.1.1.js" type="text/javascript"></script>
3. Lalu tambahkan juga kode yang ini.
<style type="text/css"> * { margin: 0; padding: 0 } /* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ p { text-align: left; margin: 15px 0 } p, ul { font-size: 13px; line-height: 1.4em } p a, li a { color: #39c; text-decoration: none } p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% } p#cross-links { text-align: center } p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px } noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left } noscript a { color: #a00; text-decoration: underline } noscript ol { margin-left: 25px; } a:focus { outline:none } img { border: 0 } h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left } body { font-family: Verdana, Arial; background: #ebebeb url("alamat body-bg.png") repeat-y center; color: #000; width: 800px; margin: auto; text-align: center; padding-bottom: 20px; } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin: 20px 0; position: relative; width: 100%; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 100%; height: 460px; background: #fff; overflow: scroll} .csw .loading {margin: 200px 0 300px 0; text-align: center} .stripViewer { /* This is the viewing window */ position: relative; overflow: hidden; border: 5px solid #000; /* this is the border. should have the same value for the links */ margin: auto; width: 700px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 460px; clear: both; background: #fff; } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float:left; height: 100%; position: relative; width: 700px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; } .stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin: auto; } .stripNav ul { /* The auto-generated set of links */ list-style: none; } .stripNav ul li { float: left; margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ } .stripNav a { /* The nav links */ font-size: 10px; font-weight: bold; text-align: center; line-height: 32px; background: #c6e3ff; color: #fff; text-decoration: none; display: block; padding: 0 15px; } .stripNav li.tab1 a { background: #60f } .stripNav li.tab2 a { background: #60c } .stripNav li.tab3 a { background: #63f } .stripNav li.tab4 a { background: #63c } .stripNav li.tab5 a { background: #00e } .stripNav li a:hover { background: #333; } .stripNav li a.current { background: #000; color: #fff; } .stripNavL, .stripNavR { /* The left and right arrows */ position: absolute; top: 230px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display: block; height: 40px; width: 40px; } .stripNavL { left: 0; } .stripNavR { right: 0; } .stripNavL { background: url("alamat arrow-left.gif") no-repeat center; } .stripNavR { background: url("alamat arrow-right.gif") no-repeat center; } </style> <!-- Initialize each slider on the page. Each slider must have a unique id --> <script type="text/javascript"> jQuery(window).bind("load", function() { jQuery("div#slider1").codaSlider() // jQuery("div#slider2").codaSlider() // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page. }); </script>
Ganti tulisan yang berwarna merah dengan alamat hostingan anda.
4. Save Template anda terlebih dahulu.
5. Masuk ke Layout, dan Tambah Laman, setelah itu masukan kode dibawah ini
<h2>Coda-Slider 1.1.1</h2> <div class="slider-wrap"> <div id="slider1" class="csw"> <div class="panelContainer"> <div class="panel" title="Panel 1"> <div class="wrapper"> <h3>Panel 1</h3> <p>Coda-Slider v1.1.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#5" class="cross-link" title="Go to Panel 5">&#171; Previous</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 2"> <div class="wrapper"> <h3>Panel 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#1" class="cross-link" title="Go to Panel 1">&#171; Previous</a> | <a href="#3" class="cross-link" title="Go to Panel 3">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 3"> <div class="wrapper"> <h3>Panel 3</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#2" class="cross-link" title="Go to Panel 2">&#171; Previous</a> | <a href="#4" class="cross-link" title="Go to Panel 4">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 4"> <div class="wrapper"> <h3>Panel 4</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#3" class="cross-link" title="Go to Panel 3">&#171; Previous</a> | <a href="#5" class="cross-link" title="Go to Panel 5">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> <h3>Panel 5</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#4" class="cross-link" title="Go to Panel 4">&#171; Previous</a> | <a href="#1" class="cross-link" title="Go to Panel 1">Next &#187;</a></p> </div> </div> </div> </div> </div> <p id="cross-links"> Same-page cross-link controls:<br /> <a href="#1" class="cross-link">Panel 1</a> | <a href="#2" class="cross-link">Panel 2</a> | <a href="#3" class="cross-link">Panel 3</a> | <a href="#4" class="cross-link">Panel 4</a> | <a href="#5" class="cross-link">Panel 5</a> </p>
Untuk tulisan yang berwarna hijau bisa anda ganti sesuai keinginan anda, sedangkan yang berwarna biru bisa dipasang atau dihapus.

nah semoga bermanfaat ya.. selamat mencoba..

jQuery: Sliding Top Menu

Untuk demo klik disini

Bingung ni masu ngasih judulnya apaan!!! kita langsung ajah lah ya..

1. Seperti biasa backup dulu template anda.
2. Cari kode ]]></b:skin> lalu masukan kode dibawah ini tepat diatasnya.
#sliderWrap { margin: 0 auto; width: 300px; } #slider { position: absolute; background-image:url(http://s2.sigmirror.com/files/58956_xcuvk/slider.png); background-repeat:no-repeat; background-position: bottom; width: 300px; height: 159px; margin-top: -141px; } #slider img { border: 0; } #sliderContent { margin: 50px 0 0 50px; position: absolute; text-align:center; background-color:#FFFFCC; color:#333333; font-weight:bold; padding: 10px; } #header { margin: 0 auto; width: 600px; background-color: #F0F0F0; height: 200px; padding: 10px; } #openCloseWrap { position:absolute; margin: 143px 0 0 120px; font-size:12px; font-weight:bold; }
3. Setelah itu cari kode </head> lalu masukan kode dibawah ini diatasnya.
<script type="text/javascript" src="http://s2.sigmirror.com/files/58960_sspjf/jquery-1.2.6.min.js"></script>
4. Lalu cari lagi kode <body>, setelah itu tambahkan kode berikut ini dibawahnya
.
<script type="text/javascript"> $(document).ready(function() { $(".topMenuAction").click( function() { if ($("#openCloseIdentifier").is(":hidden")) { $("#slider").animate({ marginTop: "-141px" }, 500 ); $("#topMenuImage").html('<img src="http://s2.sigmirror.com/files/58955_t6ugo/open.png"/>'); $("#openCloseIdentifier").show(); } else { $("#slider").animate({ marginTop: "0px" }, 500 ); $("#topMenuImage").html('<img src="http://s2.sigmirror.com/files/58954_fdrhd/close.png"/>'); $("#openCloseIdentifier").hide(); } }); }); </script> <div id="sliderWrap"> <div id="openCloseIdentifier"></div> <div id="slider"> <div id="sliderContent"> Isn't this nice? </div> <div id="openCloseWrap"> <a href="#" class="topMenuAction" id="topMenuImage"> <img src="http://s2.sigmirror.com/files/58955_t6ugo/open.png" alt="open" /> </a> </div> </div> </div>
5. Save Template anda, dan lihat hasilnya.

nah semoga bermanfaat ya.. selamat mencoba..

JQuery: Slide Elements in Different Directions

Untuk melihat demonya silakan klik disini

Kali ini saya ingin memberikan beberapa trik sliding yang tentu saja menggunakan JQuery juga, langsung ajah ya.. :

• JQuery.js
• sliding.js

Klik Kanan lalu "Save As", setelah itu upload ketempat hosting anda.

1. Cari kode berikut ini ]]></b:skin> lalu masukan kode berikut ini diatasnya.
.slide { position: relative; overflow: hidden; height: 120px; width: 350px; margin: 1em 0; background-color: #ffc; border: 1px solid #999; } .slide .inner { position: absolute; left: 0; bottom: 0; width: 338px; height: 36px; padding: 6px; background-color: #4c5; color: #333; } .slide button { margin: .7em 0 0 .7em; } .js #slidebottom .inner { display: none; }
2. Setelah itu cari kode </head> dan masukan kode berikut ini diatasnya.
<script src='masukan alamat jquery.js' type='text/javascript'/> <script src='masukan alamat sliding.js' type='text/javascript'/>
3. Save Template anda.

Setelah itu anda tinggal Tambah Laman lalu HTML/Javascript, dan masukan kode dibawah ini.

<div id="slidemarginleft" class="slide"> <button>slide it</button> <div class="inner">Slide from bottom</div> </div>

Tulisan yang berwarna merah bisa anda ganti sesuai kebutuhan anda. (sesuaikan dengan demo) sedangkan untuk tulisan yang berwarna hijau bisa disesuaikan dengan keinginan anda. nah semoga bermanfaat ya.. selamat mencoba..

Manual Post/Picture Slideshow.

Untuk demo klik disini

Kali ini saya ingin memberikan tips dalam membuat post/picture sildeshow tetapi kali ini slideshownya tidak otomatis seperti postingan saya terdahulu (Random Post With Slideshow), untuk membuatnya tinggal ikuti langkah-langkah berikut ini..:

1. loading.gif
2. contentslider.js
3. contentslider.css

"Klik Kanan" lalu "Save As", lalu upload ke hosting anda.

1. Lalu cari kode </head>, masukan kode berikut diatasnya
<link rel="stylesheet" type="text/css" href="masukan alamat contentslider.css" /> <script type="text/javascript" src="masukan alamat contentslider.js"></script>
2. Sekarang tinggal Tambah Elemen lalu masukan kode dibawah ini.
<h2>Example 1</h2> <!--Inner content DIVs should always carry "contentdiv" CSS class--> <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class--> <div id="slider1" class="sliderwrapper"> <div class="contentdiv"> Content 1 Here. <br /> <p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p> </div> <div class="contentdiv"> Content 2 Here. </div> <div class="contentdiv"> Content 3 Here. </div> </div> <div id="paginate-slider1" class="pagination"> </div> <script type="text/javascript"> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [true, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script> <br /> <h2>Example 2, Pagination links from markup</h2> <!--Inner content DIVs should always carry "contentdiv" CSS class--> <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class--> <div id="slider2" class="sliderwrapper"> <div class="contentdiv"> Content 1 Here. </div> <div class="contentdiv"> Content 2 Here. <br /> <p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p> </div> <div class="contentdiv"> Content 3 Here. </div> </div> <div id="paginate-slider2" class="pagination"> <a href="#" class="toc">First Page</a> <a href="#" class="toc anotherclass">Second Page</a> <a href="#" class="toc">Third Page</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a> </div> <script type="text/javascript"> featuredcontentslider.init({ id: "slider2", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [false, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script>
3. Save dan lihat hasilnya.

untuk kata yang tercetak merah bisa anda ganti sesuai keinginan. nah semoga bermanfaat ya.. selamat mencoba..

jQuery: Tab Navigasi Sliding Horizontal Smooth

Untuk demo silakan klik disini

Bingung ni mau ngasih judulnya apaan..?? ya udah deh "Tab Navigasi Sliding Horizontal Smooth jQuery" ajah, ya sesuai judulnya trik ini menggunakan JQuery. Langsung menuju TKP (ga usah basa-basi), kita langsung ajah praktekin ni triknya :

1. Seperti biasa backup terlebih dahulu template anda.
2. Cari kode ]]></b:skin>.
3. Masukan kode dibwah ini diatasnya.
.container { width: 610px; margin: 40px auto; text-align: left; } .tab-nav { width: 610px; overflow: hidden; background: #ddd url(http://s2.sigmirror.com/files/58348_nuylg/tab-slide.png) no-repeat 0 0; } .tab-nav ul { position: relative; float: left; width: 1600px; margin-left: 535px; padding-left: 0; list-style-type: none; background-color: #fff; } .tab-nav li { float: left; clear: left; } .tab-nav a { display: block; width: 74px; border-right: 1px solid #ddd; height: 25px; line-height: 24px; float: left; text-align: center; text-decoration: none; color: #000; background: url(tab-slide.png) no-repeat 2px -194px; } .tab-nav a.expanded { background-position: 2px -244px; } /* second level */ .tab-nav ul ul { float: left; background-color: #333; width: auto; margin-left: 0;} .tab-nav li li {clear: none;} .tab-nav li li a { color: #fff; width: 100px; background-image: none;}
4. Setelah itu cari juga kode berikut ini </head> dan taru diatasnya.
<script src="http://s2.sigmirror.com/files/58346_oasbi/jquery.js" type="text/javascript"></script> <script src="http://s2.sigmirror.com/files/58347_dsepy/tab-nav.js" type="text/javascript"></script>
5. Lalu cari kode <body> dan taruh kode ini dibawahnya.
<div class="container"> <h2>Demo 1: basic</h2> <div id="tab-nav-1" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 2: one at a time</h2> <div id="tab-nav-2" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 3: auto-close</h2> <div id="tab-nav-3" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> </div>
6. Save template anda, dan lihat hasilnya.

Jika anda ingin menggunakannya sebagai widget, untuk bagian <body> ga usah dimasukan. Memasangnya sebagai Widget.

• Tambah Laman - HTML/Javascript, tinggal tambahkan kode dibawah ini.
<div id="container"> <h2>Demo 1: basic</h2> <div id="tab-nav-1" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 2: one at a time</h2> <div id="tab-nav-2" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 3: auto-close</h2> <div id="tab-nav-3" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> </div>
• Simpan, dan lihat hasilnya.

nah semoga bermanfaat ya.. selamat mencoba..

Horizontal Accordion script

demo Horizontal Accordion script klik disini

Lagi males basa-basi, langsung ajah praktekin nie triks.. OK.

• Cari kode </head>
• Lalu masukan kode dibawah ini diatasnya
<link rel="stylesheet" type="text/css" href="http://s2.sigmirror.com/files/57493_yt4sj/haccordion.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://s2.sigmirror.com/files/57494_mygqi/haccordion.js"> </script> <style type="text/css"> /*CSS for example Accordion #hc1*/ #hc1 li{ margin:0 3px 0 0; /*Spacing between each LI container*/ } #hc1 li .hpanel{ padding: 5px; /*Padding inside each content*/ background: lightblue; } /*CSS for example Accordion #hc2*/ #hc2 li{ margin:0 0 0 0; /*Spacing between each LI container*/ border: 12px solid black; } #hc2 li .hpanel{ padding: 5px; /*Padding inside each content*/ background: #E2E9FF; cursor: hand; cursor: pointer; } </style> <script type="text/javascript"> haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! }) haccordion.setup({ accordionid: 'hc2', //main accordion div id paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'}, selectedli: [-1, true], //[selectedli_index, persiststate_bool] collapsecurrent: true //<- No comma following very last setting! }) </script>
• Save Template anda.
• Masuk ke tata letak - tambah laman lalu pilih html/javascript, tambahkan kode dibawah ini.
<h2>Demo 1:</h2> <div id="hc1" class="haccordion"> <ul> <li> <div class="hpanel"> <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia. </div> </li> <li> <div class="hpanel"> <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited. </div> </li> <li> <div class="hpanel"> <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals. </div> </li> <li> <div class="hpanel"> <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy. </div> </li> <li> <div class="hpanel"> <img src="http://img408.imageshack.us/img408/5751/langkawi.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia. </div> </li> </ul> </div> <p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Expand 4th Panel</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Expand 5th Panel</a></p> <br /> <h2>Demo 2:</h2> <div id="hc2" class="haccordion"> <ul> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:250px"> This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup. </div> </li> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:180px"> This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup. </div> </li> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:350px"> This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup. </div> </li> <li> <div class="hpanel" style="padding:10px; width:550px"> This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup. </div> </li> </ul> </div>
• Script diatas adalah script dasar, jadi ubahlah sesuai dengan keperluan anda.

nah semoga bermanfaat ya.. selamat mencoba..

Random Post With Slideshow

Untuk contoh click disini

Lagi males nie basa basinya, To the point ajah ya.. : Tinggal masuk ke Layout - Add Page Element - HTML/Javascript.

<br /> <style type="text/css"> .gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #fff;} .gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;} .gfg-subtitle {font-size: 14px;font-weight: bold;color: #000;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;} .gfg-subtitle a {color : #fff;display:none !important;} .gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;} /* To allow correct behavior for overlay */ .gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;} .gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;} .gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#fff;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;} .gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #fff;margin-top : 3px;font-size: 12px;} .clearFloat {clear : both;} #feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #fff;} </style> <script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script> <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <script type="text/javascript"> function showGadget() { var feeds = [ {title:'title', url:'http://alamatbloganda.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'}, ]; new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: " "}); } google.load("feeds", "1"); google.setOnLoadCallback(showGadget); </script> <div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div>

Save. Ganti tulisan yang berwarna merah dengan alamat blog anda. nah semoga bermanfaat ya.. selamat mencoba..

Bikin Blog Lebih Dinamis III

Klik disini untuk demo.

Ga usah basa-basi kita langsung praktekin ajah nie triksnya :

1. Seperti biasa Backup terlebih dahulu template anda.
2. Edit HTML, centang "Expand Template Widget", lalu cari widget yang akan disembunyikan isinya,misal "Labels" kodenya seperti ini :
<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <span dir='ltr'>(<data:label.count/>)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
3. Hapus kode <h2><data:title/></h2> lalu ganti dengan kode berikut :
* <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Open]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
4. Setelah itu sisipkan kode dibawah ini, persis diatas </b:includable>
* <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
5. Nah kalau dah digabung hasilnya kaya gini nie :
<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Open]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <span dir='ltr'>(<data:label.count/>)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> </b:includable> </b:widget>
6. Simpan Template anda.

Anda bisa ubah [Open] sesuai keinginan, misal Buka, Lihat dll. nah semoga bermanfaat ya.. selamat mencoba..

Dock Footer JQuery

Demo

Geser mouse anda pada bagian bawah blog tersebut maka anda akan melihat bagian yg terangkat. Bagian tersebut bisa diisikan macam2, Contoh Categori, Label, Link, Archives dan lain2, Apabila isi bagian tersebut berupa Widget jangan lupa mengkopinya mulai dari bagian.. <b:section class='docksectclass' id='docksect' preferred='yes'> dengan memberi nama class dan id yg berbeda (class bisa diberikan sama dg contoh tapi ID wajib berbeda karena Id hanya satu dalam satu xml). Footer tersebut akan tetap di bawah walaupun kita scroll mouse kita, baiklah kita mulai cara membuat footer tersebut!!!

1. Pertama masuk kebagian Edit HTML (Tata Letak - Edit HTML).
2. Paste bagian Style berikut ini tepat sebelum tulisan ]]></b:skin>.
/*untuk dock bottom */ #fake-body { overflow:auto; z-index:1; } #dock { background:#ccc; height:200px; z-index:100; width:100%; }
3. Kemudian paste script berikut ini sebelum tulisan </head>.
<script src="http://www.sigmirror.com/files/23924_ndaws/jquery.js" type="text/javascript" /> <script src='http://www.sigmirror.com/files/23965_5kf1u/jqueryeasing.js' type='text/javascript'/> <script> //http://webtips.dan.info/graceful.html $(document).ready(function() { //Transition you want var easing_type = 'easeOutBounce'; //The default height for the dock (on mouse out) var default_dock_height = '20'; //Expanded height, the height of the dock on mouse over, you have to set it in CSS var expanded_dock_height = $('#dock').height(); //Fake body height var body_height = $(window).height() - default_dock_height; //Set the size of #fake_body $('#fake-body').height(body_height); //Set the CSS attribute for #dock $('#dock').css({'height': default_dock_height, 'position':'fixed', 'top': body_height}); //In case the user resize the browser, we will need to recalculate the height and top for #fake_body and #dock $(window).resize(function () { //Grab the updated height/top updated_height = $(window).height() - default_dock_height; //Set the updated height for #fake_body and top for #dock $('#fake-body').height(updated_height); $('#dock').css({'top': updated_height}); }); //The main event for the dock bottom menu $('#dock').mouseover(function () { //Recalculate expanded height (always get the latest height), in case user has resized the window expanded_height = $(window).height() - expanded_dock_height; //Animate the height change, set the height to expanded_dock_height and set the top value as well $(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type}); }).mouseout(function () { //Recalculate default body height (always get the latest height), in case user has resized the window body_height = $(window).height() - default_dock_height; //Animate the height change, set the height to default_dock-height and set the top value as well $(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type}); }); }); </script>
4. Kemudian paste html berikut ini kesebelum </body>
<div id='dock'> <!-- Put your dock in this section --> <p><a href="http://www.abu-farhan.com">Abu Farhan</a></p> <p><a href="http://www.radiorodja.com">Radio Rodja</a></p> <p><a href="http://www.hang106.or.id.com">Radio Hang</a></p> </div>
Link di atas anda ganti sesuai keinginan anda, bisa juga diisi Widget yg bisa di ganti2 isinya kapan2 atau diisikan footer yg sudah ada CSS nya karena ada error pada IE posisi dari footernya berubah maka div di atas di pindah ke div Outer wraper (tepat sebelum </DIV>pada outer-wraper) , berikut posisinya
<div id='dock'> <!-- Put your dock in this section --> <p><a href="http://www.abu-farhan.com">Abu Farhan</a></p> <p><a href="http://www.radiorodja.com">Radio Rodja</a></p> <p><a href="http://www.hang106.or.id.com">Radio Hang</a></p></div></div><!--end of outer-wrapper-->
Dengan mengganti width dari style Dock disesuaikan dg width dari outer wraper 660px untuk contoh yg ada sebelumnya bernilai 100%
/*untuk dock bottom */ #fake-body { overflow:auto; z-index:1; } #dock { background:#ccc; height:200px; z-index:100; width:660px; }

nah semoga bermanfaat ya.. selamat mencoba..

Clock Widget : Menampilkan Tanggal Terakhir Kita Update Blog.

Blog anda lama ga di update-update, terus ingin tahu tanggal berapa kita terakhir mengupdatenya..? Langsung aja ikuti langkah-langkah berikut ini.

demo here

Tambahkan element baru lalu masukan kode html/javascript berikut ini.

<script language="JavaScript" type="text/javascript"> function getLongDateString() { //method defined on class Date. //Returns a date string of the form: Day DD Month,YYYY //(e.g. Sunday 27 September, 1998) monthNames = new Array("January","February","March","April","May","June","July","August","September","October","November","December"); dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); dayOfWeek = this.getDay(); day = dayNames[dayOfWeek]; dateOfMonth = this.getDate(); monthNo = this.getMonth(); month = monthNames[monthNo]; year = this.getYear(); if (year < 2000) year = year + 1900; dateStr = day+" "+dateOfMonth+" "+month+", "+year; return dateStr; } //register the method in the class Date Date.prototype.getLongDateString=getLongDateString; function DocDate() { //return the document modification date (excl.time) //as a string DateTimeStr = document.lastModified; secOffset = Date.parse(DateTimeStr); if (secOffset == 0 || secOffset == null) //Opera3.2 dateStr = "Unknown"; else { aDate = new Date(); aDate.setTime(secOffset); //use method defined above datestr = aDate.getLongDateString(); } return dateStr; } document.write("<center> Last Update: "); document.writeln(DocDate(),"</center>"); </script>

nah semoga bermanfaat ya.. selamat mencoba..

Clock Widget : Berapa Lama Kita Berada disuatu Halaman.

Trik kali ini yang ingin saya bagikan adalah bagaimana kita bisa mengetahui waktu yang telah kita habiskan dalam membaca/melihat sebuah halaman web. Kita langsung ajah ya..? Kita hanya tinggal menambahkan kode html/javascript dibawah ini kedalam blog/webpage kita. demo "How Long" here

<script language="JavaScript"> <!-- Begin day = new Date(); miVisit = day.getTime(); function clock() { dayTwo = new Date(); hrNow = dayTwo.getHours(); mnNow = dayTwo.getMinutes(); scNow = dayTwo.getSeconds(); miNow = dayTwo.getTime(); if (hrNow == 0) { hour = 12; ap = " AM"; } else if(hrNow <= 11) { ap = " AM"; hour = hrNow; } else if(hrNow == 12) { ap = " PM"; hour = 12; } else if (hrNow >= 13) { hour = (hrNow - 12); ap = " PM"; } if (hrNow >= 13) { hour = hrNow - 12; } if (mnNow <= 9) { min = "0" + mnNow; } else (min = mnNow) if (scNow <= 9) { secs = "0" + scNow; } else { secs = scNow; } time = hour + ":" + min + ":" + secs + ap; document.form.button.value = time; self.status = time; setTimeout('clock()', 1000); } function timeInfo() { milliSince = miNow; milliNow = miNow - miVisit; secsVisit = Math.round(milliNow / 1000); minsVisit = Math.round((milliNow / 1000) / 60); alert("anda telah menghabiskan " + milliSince + " millidetik sejak Maret 2009. " + milliNow + " milidetik anda telah berada dihalaman ini. " + ".... sekitar " + minsVisit + " menit, dan " + secsVisit + " detik."); } document.write("<form name=\"form\">" + "<input type=button value=\"Click for info!\"" + " name=button onClick=\"timeInfo()\"></form>"); onError = null; clock(); // End --> </script>

Mudah bukan. nah semoga bermanfaat ya.. selamat mencoba..

Clock Widget : Jam Mengikuti Kursor

Sesuai dengan judulnya kita langsung ajah prakteknya.. : Tinggal tambahkan kode html/javascrip berikut ini kedalam blog anda.

<style type="text/css"> <!-- /*Do not Alter these. Set for alignment*/ .css1{ position:absolute;top:0px;left:0px; width:16px;height:16px; font-family:Arial,sans-serif; font-size:16px; text-align:center; font-weight:bold; } .css2{ position:absolute;top:0px;left:0px; width:10px;height:10px; font-family:Arial,sans-serif; font-size:10px; text-align:center; } //--> </style> <script language="JavaScript"> //Hide from older browsers if (document.getElementById&&!document.layers){ // *** Clock colours dCol='#00ff00'; //date colour. fCol='#ffffff'; //face colour. sCol='#ffffff'; //seconds colour. mCol='#00ff00'; //minutes colour. hCol='#00ff00'; //hours colour. // *** Controls del=0.6; //Follow mouse speed. ref=40; //Run speed (timeout). // Alter nothing below! Alignments will be lost! var ieType=(typeof window.innerWidth != 'number'); var docComp=(document.compatMode); var docMod=(docComp && docComp.indexOf("CSS") != -1); var ieRef=(ieType && docMod) ?document.documentElement:document.body; theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"); theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"); date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year; D=tmpdate.split(""); N='3 4 5 6 7 8 9 10 11 12 1 2'; N=N.split(" "); F=N.length; H='...'; H=H.split(""); M='....'; M=M.split(""); S='.....'; S=S.split(""); siz=40; eqf=360/F; eqd=360/D.length; han=siz/5.5; ofy=-7; ofx=-3; ofst=70; tmr=null; vis=true; mouseY=0; mouseX=0; dy=new Array(); dx=new Array(); zy=new Array(); zx=new Array(); tmps=new Array(); tmpm=new Array(); tmph=new Array(); tmpf=new Array(); tmpd=new Array(); var sum=parseInt(D.length+F+H.length+M.length+S.length)+1; for (i=0; i < sum; i++){ dy[i]=0; dx[i]=0; zy[i]=0; zx[i]=0; } algn=new Array(); for (i=0; i < D.length; i++){ algn[i]=(parseInt(D[i]) || D[i]==0)?10:9; document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>'); tmpd[i]=document.getElementById("_date"+i).style; } for (i=0; i < F; i++){ document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>'); tmpf[i]=document.getElementById("_face"+i).style; } for (i=0; i < H.length; i++){ document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>'); tmph[i]=document.getElementById("_hours"+i).style; } for (i=0; i < M.length; i++){ document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>'); tmpm[i]=document.getElementById("_minutes"+i).style; } for (i=0; i < S.length; i++){ document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>'); tmps[i]=document.getElementById("_seconds"+i).style; } function onoff(){ if (vis){ vis=false; document.getElementById("control").value="Clock On"; } else{ vis=true; document.getElementById("control").value="Clock Off"; Delay(); } kill(); } function kill(){ if (vis) document.onmousemove=mouse; else document.onmousemove=null; } function mouse(e){ var msy = (!ieType)?window.pageYOffset:0; if (!e) e = window.event; if (typeof e.pageY == 'number'){ mouseY = e.pageY + ofst - msy; mouseX = e.pageX + ofst; } else{ mouseY = e.clientY + ofst - msy; mouseX = e.clientX + ofst; } if (!vis) kill(); } document.onmousemove=mouse; function winDims(){ winH=(ieType)?ieRef.clientHeight:window.innerHeight; winW=(ieType)?ieRef.clientWidth:window.innerWidth; } winDims(); window.onresize=new Function("winDims()"); function ClockAndAssign(){ time = new Date(); secs = time.getSeconds(); sec = Math.PI * (secs-15) / 30; mins = time.getMinutes(); min = Math.PI * (mins-15) / 30; hrs = time.getHours(); hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360; for (i=0; i < S.length; i++){ tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px"; tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px"; } for (i=0; i < M.length; i++){ tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px"; tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px"; } for (i=0; i < H.length; i++){ tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px"; tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px"; } for (i=0; i < F; i++){ tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px"; tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px"; } for (i=0; i < D.length; i++){ tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px"; tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px"; } if (!vis)clearTimeout(tmr); } buffW=(ieType)?80:90; function Delay(){ scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset; if (!vis){ dy[0]=-100; dx[0]=-100; } else{ zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del); zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del); } for (i=1; i < sum; i++){ if (!vis){ dy[i]=-100; dx[i]=-100; } else{ zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del); zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del); } if (dy[i-1] >= winH-80) dy[i-1]=winH-80; if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW; } tmr=setTimeout('Delay()',ref); ClockAndAssign(); } window.onload=Delay; } </script>

nah semoga bermanfaat ya.. selamat mencoba..

Membuat Tukeran Link Lebih Bervariasi

Kali ini saya ingin memodif sedikit mengenai tukeran link, mau tahu caranya?? ikuti langkahnya berikut ini..:

• Tambah Gadget lalu Html/Javascript lalu masukan kode di bawah ini.
<p>If you like this blog,then link back to me.<br/> This is what you will see.</p> <div style="text-align: center;"> <a style="border:0px;text-decoration:none;" href="alamat blog anda" title="Judul blog anda"> <img alt="Judul blog anda" style="border: 0px;" src="gambar logo blog anda"/> </a> </div> <textarea rows="3" cols="30"> &lt;a href="alamat blog anda" title="Judul blog anda" style="text-decoration:none;border:0;"&gt; &lt;img src="gambar logo blog anda" alt="Judul blog anda" style="border:0" /&gt; &lt;/a&gt; </textarea><br/> <br/> <!--Widget Auto Installer--> <form action="http://beta.blogger.com/add-widget" method="post"> <input style="display: none;" value="My Favourite Site" name="widget.title"/> <textarea style="display: none;" name="widget.content"> &lt;a href="alamat blog anda" title="Judul blog anda" style="text-decoration:none;border:0;"&gt; &lt;img src="gambar logo blog anda" alt="Judul blog anda" style="border:0" /&gt; &lt;/a&gt; </textarea> <br/> <input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/> </form>
• Ganti alamat blog anda, judul blog anda, dan gambar logo blog anda.

nah semoga bermanfaat ya.. selamat mencoba..

Widget Daftar Isi

Membuat Daftar Isi, ya sesuai dengan judulnya Daftar Isi tetapi kali ini saya ingin membuatnya dalam bentuk widget. Bagaimana membuatnya ??? cukup ikuti lagkah-langkah berikut ini.. : Tinggal tambah widget baru lalu masukan kode di bawah ini.

<div style="border: 1px solid #000; overflow: auto; height: 220px;"> <script style="text/javascript" src="http://javascriptcode.googlecode.com/files/daftar-isi.txt"></script> <script style="text/javascript"> var numposts = 1000; var showpostdate = false; var showpostsummary = false; var numchars = 100; var standardstyling = true; </script> <script src="http://NAMABLOG.blogspot.com/feeds/posts/default? orderby=published&alt=json-in-script&max-results=999 &callback=showrecentposts"></script> </div>

Ganti kode yang berwarna merah dengan nama blog anda. Lalu kode yang berwarna hijau merupakan tinggi widget anda, sesuaikan dengan selera anda. nah semoga bermanfaat ya.. selamat mencoba..

Pasang Auto Instal Untuk Blogger Dan TypePad

Bingung nie mau bikin postingan apa?? pas lagi jalan-jalan mampir di mastergomaster.com eh dapet artikel yang menarik, tapi buat para master mungkin trik ini sudah basi tapi juga untuk sekedar informasi mungkin trik ini berguna bagi pemula kaya saya ini.

ISI DENGAN KODE WIDGET YANG INGIN DI INSTAL

ya udah langsung ajah menuju TKP : <form action="http://beta.blogger.com/add-widget" method="POST" target="_blank"><form action="http://beta.blogger.com/add-widget" method="POST" target="_blank">

<form action="http://beta.blogger.com/add-widget" method="POST" target="_blank"> <input name="widget.title" type="hidden" value="JUDUL WIDGET" /><textarea cols="5" name="widget.content" rows="3" style="display: none;">ISI DENGAN KODE WIDGET YANG INGIN DI INSTAL</textarea><input class="button" name="go" type="submit" value="Klik auto Instal" /> </form>

Untuk kata yang berwarna merah, bisa anda ganti sesuai keinginan anda. Untuk tombolnya bisa anda ganti dengan gambar seperti punya blogger dibawah ini.

DI SINI ISI DENGAN KODE WIDGET YANG INGIN DI INSTAL

<input name="widget.title" type="hidden" value="JUDUL WIDGET" /><textarea cols="5" name="widget.content" rows="3" style="display: none;">DI SINI ISI DENGAN KODE WIDGET YANG INGIN DI INSTAL</textarea> <input name="go" src="http://www.blogger.com/img/add/add2blogger_lg.gif" style="border: 0px none;" type="image" value="Link To Your_Blog_Title" /> </form>

Untuk kode yang berwarna hijau bisa anda ganti dengan gambar anda sendiri. Sedangkan auto installer untuk TypePad contohnya seperti dibawah ini.

DI SINI ISI DENGAN KODE WIDGET YANG INGIN DI INSTAL

<input name="widget.title" type="hidden" value="JUDUL WIDGET" /><textarea cols="5" name="widget.content" rows="3" style="display: none;">DI SINI ISI DENGAN KODE WIDGET YANG INGIN DI INSTAL</textarea> <input name="go" src="http://i671.photobucket.com/albums/vv80/dadfereneczi/addTo_typePad.png" style="border: 0px none;" type="image" value="Link To Your_Blog_Title" /> </form>

Untuk kode yang berwarna merah dan hijau tinggal anda ganti sesuai keinginan anda. nah semoga bermanfaat ya.. selamat mencoba..

Membuat Headline News 1

Kali ini saya ingin memberikan triks bagaimana membuat Headline New, triks kali ini dasarnya menggunakan marque hanya saja yang tampil adalah postingan kita yang terbaru. Ingin segera mencobanya??? ikuti saja langkah-langkah berikut ini : Masuk ke Elemen Laman dan tinggal Tambah Gadget, lalu masukan kode dibawah ini.

<script type="text/javascript"> var hn_url_blog = "http://duny4ever.blogspot.com"; var hn_jumlah_post = 10; var hn_warna_latar = "#181816"; var hn_warna_garis = "#ff7700"; var hn_posisi = "bottom"; var hn_tampilkan_judul = true; var hn_backlink = false; </script> <script src="http://s2.sigmirror.com/files/53658_ng9ns/Headlinenews.js"> </script>

Pejelasan dari variabel-variabel di atas :

• hn_url_blog disi dengan URL blog sobat.
• hn_jumlah_post adalah jumlah judul artikel yang ingin ditampilkan pada headline news.
• hn_warna_latar adalah kode warna untuk latar belakang headline news.
• hn_warna_garis adalah kode warna untuk garis bingkai/border headline news.
• hn_posisi menentukan posisi headline news anda apakah di atas ("top") atau di bawah ("bottom")
• hn_tampilkan_judul bernilai true jika anda ingin menampilkan tulisan "Headline News" di bagian kiri dan bernilai false jika tidak ingin menampilkannya
• hn_backlink bernilai true jika anda ingin menampilkan backlink ke blog saya dan false jika tidak.

nah semoga bermanfaat ya.. selamat mencoba..

Membuat Widget Related Post

Biasanya kita melihat Related Artikel bersamaan dengan postingan yang terletak dibawahnya. Nah kali ini saya akan memberikan triks bagaimana membuat widget Related Artikel yang berada disidebar, langsung aja menuju TKP :

• Silakan anda menuju code.google.com untuk mendapatkan KEY nya.
• Setelah mendapatkan KEY nya, cari kode </head> lalu letakkan kode dibawah ini diatasnya.
<script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/> <script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>
• Setelah itu cari kode <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> (tergantung template anda) dan letakkan script dibawah ini tepat siatasnya.
<b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'> <b:includable id='nextprev'> </b:includable> <b:includable id='backlinks' var='post'> </b:includable> <b:includable id='post' var='post'> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> </b:includable> <b:includable id='status-message'> </b:includable> <b:includable id='feedLinks'> </b:includable> <b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h4 id='comment-post-message'><data:postCommentMsg/></h4> <p><data:blogCommentMessage/></p> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/> <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/> <data:post.iframeColorizer/> </div> </b:includable> <b:includable id='backlinkDeleteIcon' var='backlink'> </b:includable> <b:includable id='feedLinksBody' var='links'> </b:includable> <b:includable id='postQuickEdit' var='post'> </b:includable> <b:includable id='comments' var='post'> </b:includable> <b:includable id='main'> <!-- *****************http://hoctro.blogspot.com*****Oct,2008********** --> <!-- ***Related Articles by Labels Written by Hoctro- Take Four******* --> <!--<b:if cond='data:blog.pageType == "item"'>--> <div class='widget-content'> <h5>Related Articles</h5> <div id='data2007' style='padding:15px;'/><br/><br/> <h6>Related Article Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-and-improved-related-articles.html'>Hoctro</a></u></h6> <script type='text/javascript'> // Incorporating modified by Jackbook to the next line, thank you very much. var homeUrl = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 8; var maxNumberOfLabels = 10; var urlArray = new Array(); <b:if cond='data:blog.pageType == "item"'> maxNumberOfPostsPerLabel = 15; </b:if> <b:if cond='data:blog.pageType == "item"'> maxNumberOfLabels = 4; </b:if> var titleArray = new Array(); var titleTest = 0; function relInitialize() { var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; // Do not add identical labels from posts 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) { var url = homeUrl + 'feeds/posts/default/-/' + encodeURIComponent(textLabel); var feed = new google.feeds.Feed(url); feed.setNumEntries(maxNumberOfPostsPerLabel); feed.load(function(result) { if (!result.error) { var container = document.getElementById("data2007"); for (var i = 0; i &lt; result.feed.entries.length; i++) { var entry = result.feed.entries[i]; titleTest = 0; for (var i = 0; i &lt; titleArray.length; i++) if ( titleArray[i] == entry["title"] ) titleTest = 1; if (titleTest == 0 ) { titleArray.push(entry["title"]); var div = document.createElement('div'); var a = document.createElement('a'); a.href = entry["link"]; // Adding an if statement to exclude current post. // Addition from Jackbook.com. Thank you if( a.href!=location.href ) { var txt = document.createTextNode(entry["title"]); a.appendChild(txt); div.appendChild(a); container.appendChild(div); } // if not home page }// if titleTest } // for }// if result is not error }); // feed.load numLabel++; } } </b:loop> </b:loop> } google.load("feeds", "1"); google.setOnLoadCallback(relInitialize); </script> </div> <!--</b:if>--> </b:includable> </b:widget>
• Untuk var maxNumberOfPostsPerLabel = 8; var maxNumberOfLabels = 10; untuk yang angka 4 merupakan jumlah label yang nanti akan muncul sedangkan untuk angka 10 yaitu jumlah judul postingan anda yang ditampilkan

nah semoga bermanfaat ya.. selamat mencoba..

Membuat Label bervariatif

Tidak usah basa-basi lagi, langsung ajah menuju TKP :

• Seperti biasa backup dulu template anda.
• Masukan kode CSS berikut ini sebelum kode ]]></b:skin>
/* base styles for extending/overriding */ /* primary tabs */ .navset {border-bottom:1px solid #999;} .navset .hd li em {font-weight:bold;} .navset .hd li a {color:#666;} .navset .hd li.on strong, .navset .hd li.on strong a {color:#999;} /* selected tab */ .navset .hd li.on strong {background-color:#F2F3F5;border-bottom:1px solid #F2F3F5;} /* border-color should match selected color */ .navset .hd li.orphan, .navset .hd li.orphan a {color:#999;} /* bg images, defaults to #999 border-color on white bg */ .navset .hd li a, .navset .hd li strong {background:#ccc url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/el/tb/tr_999.gif) no-repeat top right;} .navset .hd li em {background:transparent url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/el/tb/tl_999.gif) no-repeat;} /* secondary tabs */ .navset .bd ul {background-color:#F2F3F5;border-color:#999;} .navset .bd li, .navset .bd li a {color:#06c;} .navset li.on, .navset li.on strong {font-weight:bold;} .navset .bd li {border-color:#ccc;} /* pipe divider */ /* end base styles */ /* Network tab standards, shouldn't change */ /* shared pri and sec */ .navset {width:100%;} /* IE: width */ .navset a {text-decoration:none;} .navset ul, .navset li {margin:0;padding:0;list-style:none;} .navset li {float:left;display:inline;} .navset li a:hover {text-decoration:underline;} .navset ul:after {clear:both;content:'.';display:block;height:0;visibility:hidden;} /* clear non-IE */ .navset ul {zoom:1;} /* clear IE */ /* primary tabs */ .navset .hd ul {font:bold 78%/1.2em verdana;margin-bottom:-1px;padding-left:.3em;position:relative;} /* IE quirks mode: relative */ .navset .hd li {margin-right:.33em;padding:0;} .navset .hd li.on strong a {cursor:default;} .navset .hd li a, .navset .hd li strong, .navset .hd li em {display:block;} .navset .hd li a, .navset .hd li strong {*display:inline-block;} /* IE: 100% clickable */ .navset .hd li em {font-style:normal;padding:.5em .6em;} .navset .hd li.orphan, .navset .hd li.orphan a, .navset .hd li.orphan em {background:transparent none;border-width:0;margin:0;} /* secondary tabs */ .navset .bd ul {border-top-width:1px;border-top-style:solid;font:78%/1.2em verdana;margin:0;padding:.6em 0 .6em .4em;} .navset .bd li {border-left-style:solid;border-left-width:1px;display:inline;padding:0 1em;} .navset .bd li.first {padding-left:0;border:0;}
• Setelah itu menambahkan javascript untuk widget Label, cari kode <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> dan taruh kode dibawah ini sebelumnya.
<b:widget id='Label2' locked='false' title='Labels' type='Label'> <b:includable id='main'> <div class='menuHack'> <div id='menuList'> </div> </div> <script language='javascript' type='text/javascript'> var label = &quot;&quot;; var text2 = &quot;&quot;; var currentLabel = &quot;&quot;; var activeLabel = &quot;&quot;; var firstLine = &quot;&quot;; var secondLine = &quot;&quot;; var drawTop = false; var firstSub = false; var currentUrl = &quot;<data:blog.url/>&quot;; var arr = new Array(2); firstLine = firstLine + &quot;<div class='navset' id='nav'>&quot;; firstLine = firstLine + &quot;<div class='hd'><ul>&quot;; <b:if cond='data:blog.url == data:blog.homepageUrl'> firstLine = firstLine + &quot;<li class='on' title='selected'><a expr:href='data:blog.homepageUrl'><strong><em>Home</em></strong></a></li>&quot;; <b:else/> firstLine = firstLine + &quot;<li><a expr:href='data:blog.homepageUrl'><em>Home</em></a></li>&quot;; </b:if> secondLine = secondLine + &quot;<div class='bd'><ul>&quot;; <b:loop values='data:labels' var='label'> label = &quot;<data:label.name/>&quot;; text2 = label.charAt(label.length - 1); if (text2 != '.') { arr = label.split(&quot;*&quot;,2); if (arr[0] != currentLabel) { currentLabel = arr[0]; /*var arr2 = new Array(2); arr2 = arr[0].split(&quot;&quot;,2);*/ if (currentUrl.search(arr[0]) != -1) { activeLabel = label; if (drawTop == false) drawTop = true; firstLine = firstLine + &quot;<li class='on' title='selected'><a expr:href='data:label.url + "?max-results=100"'><strong><em>&quot; + arr[0].replace(/_/g,' ') + &quot;</em></strong></a></li>&quot;; } else firstLine = firstLine + &quot;<li><a expr:href='data:label.url + "?max-results=100"'><em>&quot; + arr[0].replace(/_/g,' ') + &quot;</em></a></li>&quot;; } if (arr[1] != undefined &amp;&amp; currentUrl.search(arr[0]) != -1) { var secClass = &quot;&quot;; if (firstSub == false) { firstSub = true; secClass = &quot;class='first'&quot;; } if (currentUrl.search(arr[1]) != -1) secClass = &quot;class='on'&quot;; secondLine = secondLine + &quot;&lt;li &quot; + secClass + &quot;&gt;<a expr:href='data:label.url + "?max-results=100"'>&quot; + arr[1].replace(/_/g,' ') + &quot;</a>&lt;/li&gt;&quot;; } } </b:loop> firstLine = firstLine + &quot;</ul></div>&quot;;/*1st line*/ secondLine = secondLine + &quot;</ul></div>&quot;;/*2nd line*/ arr = activeLabel.split(&quot;*&quot;,2); if (arr[1] != undefined &amp;&amp; currentUrl.search(arr[0]) != -1) firstLine = firstLine + secondLine; firstLine = firstLine + &quot;</div>&quot;;/*navset*/ obj = document.getElementById('menuList'); obj.innerHTML = firstLine; </script> </b:includable> </b:widget>

Catatan : anda dapat merubah posisi labelnya sesuai keinginan anda, masuk Tata Letak - Element Laman.(sumber) nah semoga bermanfaat ya.. selamat mencoba..