Membuat Daftar Isi Dengan jQuery

Cara membuat daftar isi dengan jquery yang satu ini ternyata banyak disukai oleh para blogger. Karena dengan daftar isi ini sangat keren dan cantik untuk dilihat juga. Disamping itu tampilan ini lebih disukai daripada daftar isi dengan fungsi scroll lihat gambar tampilan daftar isi dibawah ini!

Nah,keren kan tampilanya? jika kamu ingin melihat demonya langsung silahkan klik disini. Lalu bagaimana cara membuat daftar isi dengan jquery tersebut? Ikuti langkah-langkah dibawah ini!

1. Login Ke Blogger
2. Klik Rancangan/Template
3. Edit HTML
4. Paste kode berikut di atas kode  ]]></b:skin>



#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:#ffffff;
}
.dafis-label {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKq_J416LnF7vZ8N9aLDcqYaCDAdV7id4fqgc-T0ZqoNUizlm-lbaKUT-5CSX8CHZlisEWD13xg22ZwDDQdkBC1yJflwgmRS_YBz-gxUrirg4DC5Rp4Fl5DYSdEAvezd8TrGCOPtXprw/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
border: 1px solid #2F94BA;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 1.4em;
margin: 1px 3px;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
.dafis-label:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqmdzrkVKDX-4sR2HJ78532h3TZHD5kQ0_rjmG_R29RQxQo31XuVksMzlQ8VR2muxsi_nOeIBkkgRs4vQhooEQrPEM2c60hz6jhZLpG1o9BC_p26CZMZjtEnpDEZ2XXbIyvnED8TsOFY/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;
color: #003366;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background-color: #C9E9F4;
border: 1px solid #339DC6;
line-height: 1.5em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
background: none repeat scroll 0 0 #7BC4DF;
border-left: 5px solid #333333;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

5. Paste code berikut di atas kode </head>

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

   
   Tapi jika di blogmu sudah ada kode seperti ini maka kamu boleh meninggalkan langkah no 5 ini.
6. Jika sudah,copy dan paste kode dibawah ini,boleh kamu letakkan dalam postingan maupun widget blog kamu.

   <script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
   <script src="
   http://infonetmu.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti yang berwarna merah dengan URL blogmu.Selesei.

Mudah bukan? sulit ya? ya sudah,kalo mau yang gampang silahkan kamu copy kode dibawah ini,letakkan dipostingan kamu lalu terbitkan.

<style type='text/css'>#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9KB592_JpzMZkocsaAXsO2rk-0Sw27GIBqGr1WMb5KprPTS7pFeksvSJEmrUf_8FeWkJBItyRJzkbq3VjmGFLTHxExH9BA-8E67UnrZoZwSKwoHoEhBC14YJV69ok_iVIcF-H0n_5KuM/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKq_J416LnF7vZ8N9aLDcqYaCDAdV7id4fqgc-T0ZqoNUizlm-lbaKUT-5CSX8CHZlisEWD13xg22ZwDDQdkBC1yJflwgmRS_YBz-gxUrirg4DC5Rp4Fl5DYSdEAvezd8TrGCOPtXprw/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqmdzrkVKDX-4sR2HJ78532h3TZHD5kQ0_rjmG_R29RQxQo31XuVksMzlQ8VR2muxsi_nOeIBkkgRs4vQhooEQrPEM2c60hz6jhZLpG1o9BC_p26CZMZjtEnpDEZ2XXbIyvnED8TsOFY/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script><script src="http://infonetmu.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti yang berwarna merah dengan URL blog kamu. selesei deh.. 

Read More

Floating Google +1, Facebook Like, Twitter Button for Blogger

Akhirny Counters Sliding! Sampai sekarang kami pelajari dan menciptakan banyak tombol mengambang saham sosial tetapi widget tombol yang sebenarnya tidak geser ketika pengguna gulungan halaman atas atau bawah. Satu-satunya yang dibutuhkan adalah kode JavaScript dibangun dengan baik yang bisa membuat widget melayang naik turun serentak dengan gerakan halaman web. Berkat kode Buka Menu Mengambang Jtricks, kami akhirnya berhasil bloggerize efek mengambang dan widget ini adalah semua siap ditambahkan ke blog Anda yang indah blogger. Mohon melihat demo yang pertama,

Live Demo

Adding Floating Social share Counters to Blogger

1. Buka Blogger> Rancangan / Tata Letak
   
2. Tambah Gadget
3. Pilih HTML / JavaScript widget
4. Paste kode berikut.
   

   <style>/*-------MBT Floating Counters------------*/#floatdiv {     position:absolute;     width:94px;     height:229px;     top:0;     left:0;         z-index:100 }
   #mbtsidebar {         border:1px solid #ddd;         padding-left:5px;     position:relative;     height:220px;     width:55px;     margin:0 0 0 5px; }</style>
   
   <div id="floatdiv"> <div id="mbtsidebar">     <table cellpadding="1px" cellspacing="0">    <tr>     <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"> <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>     </td>     </tr>    <tr>     <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"> <g:plusone size="Tall" expr:href="data:post.url">     </g:plusone></td>     </tr>    <tr>     <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>     </td>     </tr>    <tr>     <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;"><p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.MyBloggerTricks.com" target="_blank">Widgets</a></p>     </td>     </tr>    </table> </div> </div> <script type="text/javascript"> // JavaScript Document
      <!-- /* Script by: www.jtricks.com * Version: 20071017 * Latest version: * www.jtricks.com/javascript/navigation/floating.html */ var floatingMenuId = 'floatdiv'; var floatingMenu = {     targetX: 0,     targetY: 300,    hasInner: typeof(window.innerWidth) == 'number',     hasElement: typeof(document.documentElement) == 'object'         && typeof(document.documentElement.clientWidth) == 'number',    menu:         document.getElementById         ? document.getElementById(floatingMenuId)         : document.all           ? document.all[floatingMenuId]           : document.layers[floatingMenuId] };floatingMenu.move = function () {     floatingMenu.menu.style.left = floatingMenu.nextX + 'px';     floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; }floatingMenu.computeShifts = function () {     var de = document.documentElement;    floatingMenu.shiftX =          floatingMenu.hasInner          ? pageXOffset          : floatingMenu.hasElement            ? de.scrollLeft            : document.body.scrollLeft;      if (floatingMenu.targetX < 0)     {         floatingMenu.shiftX +=             floatingMenu.hasElement             ? de.clientWidth             : document.body.clientWidth;     }    floatingMenu.shiftY =         floatingMenu.hasInner         ? pageYOffset         : floatingMenu.hasElement           ? de.scrollTop           : document.body.scrollTop;     if (floatingMenu.targetY < 0)     {         if (floatingMenu.hasElement && floatingMenu.hasInner)         {             // Handle Opera 8 problems             floatingMenu.shiftY +=                 de.clientHeight > window.innerHeight                 ? window.innerHeight                 : de.clientHeight         }         else         {             floatingMenu.shiftY +=                 floatingMenu.hasElement                 ? de.clientHeight                 : document.body.clientHeight;         }     } }floatingMenu.calculateCornerX = function() {     if (floatingMenu.targetX != 'center')         return floatingMenu.shiftX + floatingMenu.targetX;    var width = parseInt(floatingMenu.menu.offsetWidth);    var cornerX =         floatingMenu.hasElement         ? (floatingMenu.hasInner            ? pageXOffset            : document.documentElement.scrollLeft) +           (document.documentElement.clientWidth - width)/2         : document.body.scrollLeft +           (document.body.clientWidth - width)/2;     return cornerX; };floatingMenu.calculateCornerY = function() {     if (floatingMenu.targetY != 'center')         return floatingMenu.shiftY + floatingMenu.targetY;    var height = parseInt(floatingMenu.menu.offsetHeight);    // Handle Opera 8 problems     var clientHeight =         floatingMenu.hasElement && floatingMenu.hasInner         && document.documentElement.clientHeight             > window.innerHeight         ? window.innerHeight         : document.documentElement.clientHeight    var cornerY =         floatingMenu.hasElement         ? (floatingMenu.hasInner             ? pageYOffset            : document.documentElement.scrollTop) +           (clientHeight - height)/2         : document.body.scrollTop +           (document.body.clientHeight - height)/2;     return cornerY; };floatingMenu.doFloat = function() {     // Check if reference to menu was lost due     // to ajax manipuations     if (!floatingMenu.menu)     {         menu = document.getElementById             ? document.getElementById(floatingMenuId)             : document.all               ? document.all[floatingMenuId]               : document.layers[floatingMenuId];        initSecondary();     }    var stepX, stepY;    floatingMenu.computeShifts();    var cornerX = floatingMenu.calculateCornerX();    var stepX = (cornerX - floatingMenu.nextX) * .07;     if (Math.abs(stepX) < .5)     {         stepX = cornerX - floatingMenu.nextX;     }    var cornerY = floatingMenu.calculateCornerY();    var stepY = (cornerY - floatingMenu.nextY) * .07;     if (Math.abs(stepY) < .5)     {         stepY = cornerY - floatingMenu.nextY;     }    if (Math.abs(stepX) > 0 ||         Math.abs(stepY) > 0)     {         floatingMenu.nextX += stepX;         floatingMenu.nextY += stepY;         floatingMenu.move();     }    setTimeout('floatingMenu.doFloat()', 20); };// addEvent designed by Aaron Moore floatingMenu.addEvent = function(element, listener, handler) {     if(typeof element[listener] != 'function' ||        typeof element[listener + '_num'] == 'undefined')     {         element[listener + '_num'] = 0;         if (typeof element[listener] == 'function')         {             element[listener + 0] = element[listener];             element[listener + '_num']++;         }         element[listener] = function(e)         {             var r = true;             e = (e) ? e : window.event;             for(var i = element[listener + '_num'] -1; i >= 0; i--)             {                 if(element[listener + i](e) == false)                     r = false;             }             return r;         }     }    //if handler is not already stored, assign it     for(var i = 0; i < element[listener + '_num']; i++)         if(element[listener + i] == handler)             return;     element[listener + element[listener + '_num']] = handler;     element[listener + '_num']++; };floatingMenu.init = function() {     floatingMenu.initSecondary();     floatingMenu.doFloat(); };// Some browsers init scrollbars only after // full document load. floatingMenu.initSecondary = function() {     floatingMenu.computeShifts();     floatingMenu.nextX = floatingMenu.calculateCornerX();     floatingMenu.nextY = floatingMenu.calculateCornerY();     floatingMenu.move(); }if (document.layers)     floatingMenu.addEvent(window, 'onload', floatingMenu.init); else {     floatingMenu.init();     floatingMenu.addEvent(window, 'onload',         floatingMenu.initSecondary); }//--></script>

   • Ganti mybloggertricks dengan nama pengguna Twitter Anda
5. Simpan widgetmu.
   Note : Jika kamu belum punya script Google +1 silahkan tambahkan scriptnya di template kamu.♦ Masuk ke Blogger > Rancangan / Template♦ Klik Edit HTML♦ Cari

</head>

           ♦ Paste kode di bawah ini di atas </head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

      6.  Simpan Templatemu.


Sumber : mybloggertricks.com

Read More

Cara Mengganti Template Blogspot (Dashboard baru)

Cara mengganti template blogspot sebenarnya sangat mudah. Tapi karena dashboard blogger baru jadinya banyak semuanya jadi agak sulit. Sebenarnya dashboardnya bisa diganti jadi old style. Tapi kali ini saya akan kasih tips cara mengganti template pada dashboard baru.

• Silahkan download template blog yang kamu inginkan. Kalian bisa cari di google atau di situs di bawah ini.

http://www.zoomtemplate.com/
http://www.bloggerblogtemplates.com/
http://www.premiumbloggertemplates.com/

• Template Blog berektensi .xml. Jika hasil downloadnya berbentuk Rar dan Zip. Silahkan extract dulu pakai WinRar, Winzip, 7zip, atau software lainnya.
• Selanjutnya upload template tadi ke Blog kamu. Caranya :
• Login dahulu ke Bloggermu.
• Klik Template
• Klik Cadangan/Pulihkan
• Upload template kamu.



• Silahkan hapus atau pertahankan witged blogmu. dan lihat hasilnya.
• Dan Selesai.

Semoga tips saya berguna buat kalian :)

Read More