Widget Social Network Metro Style

Kali ini saya akan  membagikan sebuah social share network  atau tombol share ke beberapa social Network terkenal seperti facebook,twitter,pinterest, google+, linkedin ,Youtube dan bahkan feeds burner. Jika biasanya kita hanya menjumpai tombol social media yang hanya memiliki 4 tombol maka widget ini bisa memberikan kita 7 situs social media sekaligus.


Social network button ini sangat tepat jika anda gunakan pada template yang juga menggunakan style/tema Metro seperti Metro UI yang ada di btemplates.com . Sebenarnya sudah banyak sekali social media metro style ini namun sebagian besar hanya berisikan dengan facebook,twitter,dan google+ saja ,sehingga widget ini saya sarankan pada anda yang Anti main stream

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih tata letak
• Step 3  Pilih tambahkan widget lalu HTML/Javascript
• Step 4  Copy kode berikut lalu pastekan di dalam kolom  HTML/Javascript tadi

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="BloggerSpiceMS">
<br />
<li><a class="BSfb" href="http://anti-fool.blogspot.com//" rel="nofollow"></a></li>
<li><a class="BStw" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSgp" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSpi" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSin" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSyt" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSfd" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
</div>
<style>
.BloggerSpiceMS{width:285px}
.BloggerSpiceMS li{position:relative;cursor:pointer;padding:0;list-style:none}
.BloggerSpiceMS .BSfb,.BStw,.BSgp,.BSpi,.BSin,.BSyt,.BSfd{z-index:7;float:left;margin:1px;position:relative;display:block}
.BloggerSpiceMS .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnCJe32iog-yJBvus_YHhsiSLQ1AURHj6-5rQ_h5o77XV3PoJ3s9035wO6Wp1H3kv318EdD_TjYu-y0q3hO7escttY3B3lu-aX5xaWC_PPrIKSlqyfARH8ss1Ln5nNYgnTkr0I-EJBuI/s1600/BS+MetroSocial+facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.BloggerSpiceMS .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDiRMTidATTQEPa9hGU5NBW7Wxzrpp5KvPlkq6KXcDf2lFA-RLligx2pgb-eRF5uUo9LtlWmZcrX5PGIX_gJI34aO8217OZMidDRrSmk3kTZp62JNdX09KLG8_wcGM5uoAN7G1RSarz8/s1600/BS+MetroSocial+twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.BloggerSpiceMS .BSgp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wROrsIEZT_kj8X3zlBdOXql0J6uZ7lzsa2bJ_LB-O9kZIPTf8fymPbeoYMD0P97NTHaM0I8wap7M2zS1elwxFN_6a3m45INj1dOad0JsUpsRq_xbTr2netzoGqzXJRuht4crQQCMUcQ/s1600/BS+MetroSocial+google+plus.png) no-repeat center center #da4a38}
.BloggerSpiceMS .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELuGF2Ig9l41KQ-IgZOEORvrADyad4NrmvdboT5zByOwvoiN4649slPbukSSdf55D12A955uu2BFuYclroNVEQBr3mFUEr8ImNskSwjksE2uoSEEqEP9oN968o_eAK_6K-20K8NmqDhc/s1600/BS+MetroSocial+pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.BloggerSpiceMS .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy13R8M6mesWW-0ag86_MPtCtPvxb5my6A42RWfHHMhYmHJS1qXC0QLodMjt9Nbvv5PTxdyIPeytVIGw3Ik-xAwgF0DAsdUcLL-rgH9v-i_PXinZI7YSB4nEjXxs-qtDt7njXG7kg2y9s/s1600/BS+MetroSocial+linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.BloggerSpiceMS .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxRfRTcYcIYjZP7qQHATEUQspT4uxmZohjSU1UGvOeOju92si8Tn8agE8Z7iBEDlgOL0SiHVHmOjTXPzAqwktGt7Q-NxA8DbwQM4r9eY0V0J4S8Shx0gwQXlbhVCvAQ-vqPgYnCZeFys/s1600/BS+MetroSocial+youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.BloggerSpiceMS .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEJh65D6xlU1EN3ZY6dK_u9DN5KV2uGbBS5e5vqBoAfvM6AIE7PZsd3uCHhl8n8ZcNl-II5ltCWD1nfeEq5hVFr9AoIRc4SXBMYQ8e8a4R4HzV5hM6622je2lUOhIRuXnu2BvjhM48NY/s1600/BS+MetroSocial+feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.BloggerSpiceMS li:hover .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIqiVd5l6gPDSObN-b6PU-LgXeOsRV5ARENW1GewS_V4OBGICF8xZyGmbcNyiiuVfpiwCQ1ec3vfHtQvGyPX_VbaQJB7RXPwi3f_3dZr7OdcaL0YxRWpFVEuWcXuyzbxYpCrAyva-Kp4/s1600/BS+MetroSocial+facebookbs.png) no-repeat center center #1f69b3}
.BloggerSpiceMS li:hover .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfPVAp0Oz5TsCaD7ePFvRpg_i4nJlRtikIqWhma4vjaiJZ-BrwWl4uWGkSWeB6qXmzkoVp_2cx7M-lxACjLUwjE2wiBidsZagQmew2wM7EsAZ61C7yy3O-GSBbzjd_1oNAasqT0gRnzQ/s1600/BS+MetroSocial+twitterbs.png) no-repeat center center #43b3e5}
.BloggerSpiceMS li:hover .BSgp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfSvwHAsBpFJ8XdsHdAOR8r9sntNSzYKBD7aYB6LUDTkf5fN5AbFFRxKK3tOJ7FGgrTPXzJ1RhV1E_ZNnS5aIJ6wZj4h3bJ4PejPCp-uxh9El83wwyq7a6xduoPipyKxaxWUub7162tU/s1600/BS+MetroSocial+google+plusbs.png) no-repeat center center #da4a38}
.BloggerSpiceMS li:hover .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAxMAsmfPMUwPahkcj_TZdi2vX08ZHsE0P7Pk_MQ19Hni81byFP-1OHTHZVmp5PwtnMpURtJTXF9Vkp0DSz1xGHrFbuK43i9auynEvHLTK8aLi3X9F3ICZxsVaJvCtPkKk2AfebsOWiaA/s1600/BS+MetroSocial+pinterestbs.png) no-repeat center center #d73532}
.BloggerSpiceMS li:hover .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmHe9uq7pMmAhWUrXDB9WNNSI7Wr6YjH_yROQkcVG6v7VoAJ-45LJXYCg8_jKobbuEy0AfnyHxBGjYAYRbGbdls1gY9SpjHXfSYX283AA5yLkuzsAQGHWq20zf8y7SKNrBrkoQMRVujCA/s1600/BS+MetroSocial+linkedinbs.png) no-repeat center center #0097bd}
.BloggerSpiceMS li:hover .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWcT3Y1Nd85wdsHgKyxwAmEOKb_sASQYO7A_rHbIS7E6mpzwzMLQEEtinUPHUSSIzXsE1fqecXrbUztIBTuTtxZkVSbsXao4h_XAzY4dEENCrX5vCZjrAzcVCMGzVozvbay-9hEH5_Gc/s1600/BS+MetroSocial+youtubebs.png) no-repeat center center #e64a41}
.BloggerSpiceMS li:hover .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_pggPPrn0lwvF9fYiV-bACRkQwhzsXIcEwp8WwsgR9h7XpsQOYQHn3qcVoPHAkCVG0J3_vG5aPx6YNYGuRA9Ilp43-rC2l2Wp_dDHGMQdrJjIr7mHLrz-2uY_7xA8NErQ8hIgBQmJDI/s1600/BS+MetroSocial+feedbs.png) no-repeat center center #e9a01c}
</style>
</div>

• Step 5  Ganti yang tulisan berwarna MERAH dengan alamat situs anda.
• Step 6 Simpan lalu cek bog anda untuk melihat hasilnya.

>

Cara Praktis Membuat Menu dengan List-O-Matic

kali ini saya akan memberi info tentang cara praktis membuat menu horizontal dengan List-O-Matic.

1. Masuk situs List-O-Matic

2. Selanjutnya, misalnya sobat blogger ingin membuat menu: home, article, download, galeri, dsb... Silahkan isi Link text dan Address/URL nya yang sobat blogger inginkan (Konsepnya sama dengan membuat link MS Office). Jika ingin menambah menu, dapat di klik Add top level navigation item.

3. Setelah selesai mengisi kemudian klik "I,m done...". Akan muncul tampilan:

4. Pilih tampilan menu yang disediakan List-O-Matic sesuai dengan selera sobat blogger

5. Setelah memilih akan tampil kode CSS dan HTML nya

6. Copy kode CSS tersebut diatas kode ]]></b:skin> pada template sobat blogger dan SIMPAN

7.Copy kode HTML tersebut di tambah gadget HTML/JavaScript pada Elemen Laman

>

Cara Membuat Widget Daftar Link Di Blog

Cara Membuat Widget Daftar Link Di Blog.

1. Klik tambah gadget.
2. Pilih HTML/JavaScript
3. Lalu paste-kan kode script berikut

<div class=”widget-content”> <br /><div style=”border: 0px solid rgb(153, 153, 153); overflow: auto; width: 370px; height: 250px; text-align: left;”> <br /><div class="widgetSystem"> <div class="nama"> Blog Teman</div> <div class="kulit"> <li><br /><br /><a href=" http://anti-fool.blogspot.com/" target="”_blank”">All About All</a></li> <br /><br />    <style type="text/css">.widgetSystem {    width: 96%;    padding: 5px;    background: transparent url(http://bloggerbanyumas.net/about-us/selamat-datang/blogger-banyumas-logo_transparent_255/) no-repeat;    margin: 5px auto;    border: 1px solid #FFFFFF;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    webkit-box-shadow: 0 0 1px 1px #EE9304;    moz-box-shadow: 0 0 1px 1px #EE9304;    box-shadow: 0 0 1px 1px #EE9304    }.widgetSystem .nama {    text-align: center;    font-size: 1.5em;    background: #b80000;    background: rgba(255, 0, 0, 1);    padding:5px;    color: #fff;    font-family: "Arial", Arial, sans serif;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px    }.widgetSystem .kulit {    background: #555555;    background: rgba(55, 22, 10, 0.1);    height: 180px;    overflow: auto;    margin-top: 5px;    border: 1px solid #000;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px    }.widgetSystem a {    text-decoration: none;    margin: 5px;    background: #A2A2A2A2;    background: rgba(5, 1, 3, 0.2);    padding: 5px;    display: block;    color: #fff;    text-transform: uppercase;    font-size: 12px;    font-weight: bold;    font-family: "Arial", Arial, sans serif;    -webkit-transition: all 0.5s ease 0s;    -moz-transition: all 0.5s ease 0s;    -o-transition: all 0.5s ease 0s;    transition: all 0.5s ease 0s    }.widgetSystem a:hover {    background:#D60000;    color: #FFFFFF    }.widgetSystem li {    list-style: none;    color: #CCC;    margin: 5px    }</style></div> </div> </div> </div>            

Keterangan :
Contoh.
<a href=" http://anti-fool.blogspot.com/" target="”_blank”">All About All</a><br /><br />
Ganti  http://anti-fool.blogspot.com/     Dengan link yang akan di tuju.
Ganti   All About All    Dengan Nama Anda
Dan Juga Yang Lainnya Juga Sama :

>

Cara Membuat Recent Post Berjalan di Blog

Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama anda posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Anda yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog anda.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript"> </script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"><script> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"> </script> </ul> <small><a href="http://anti-fool.blogspot.com/2013/01/cara-membuat-recent-post-berjalan-di.html" target="_blank">:: get this widget ::</a></small>

 Ket.
1.     background-color:#1c1c1c;        Ganti Dengan warna background yang anda suka
     border:solid 1px #000000;}       Ganti  dengan arana garis yang anda inginkan
2.var speed = 1500;  Kecepatannya
    var pause = 3500; 
3.var numposts = 5;   Jumlah post yang ditampilkan
    var numchars = 0;  Jumlah karakter postingan
Untuk Kode Warna ada di widget samping.

4. Klik save dan lihat.

>

Cara Membuat Multi Slide widgate Tanpa Edit HTML

Cara Membuat Multi Slide widgate Tanpa Edit HTML - Pada postingan yang lalu bang dadan pernah membahas Cara Membuat Button Social Slide disamping Blog, nah untuk kesempatan kali ini bang dadan akan membahas artikel tentang Cara Membuat Multi Slide widgate di Blog tanpa edit HTML. Sahabat Blogger mungkin pernah atau sering melihat tutorial ini di Blog yang lain dan bahkan dari sobat mungkin ada yang sudah menggunakan tutorial ini, namun bagi yang belum pernah memasang widgate ini dan ingin memasang nya di Blog, silahkan ikuti langkah - langkah berikut: untuk DEMO sobat bisa lihat di sidebar Blog ini. atau screen shootnya seperti gambar dibawah.

Cara Membuat Multi Slide widgate Tanpa Edit HTML

---

1. Login ke akun Blog
2. Menuju dasbor/rancangan pilih Tata Letak
3. Kemudian Add Gadget dan Pilih HTML/Javascript
Selanjutnya silahkan sobat copy Kode dibawah ini pada HTML/Javascript

❞ Berikut Kodenya:

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzj_DO8SpmE_eRKljOSFNF2n2Yyw7ye-hdEzJ2OmsLrnlJ3q3Hv4gn9xH8QynjIPY6cg10-NWmeHoR9jDNDgC3E5e1W3-JN79XL0JBTJnEwAH7-WKXRjb5nlNGxrwYq79xtZxVY1tU7Q/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaGWTVqlDw9i_MUUg1YZOW_Y-NjmguNFpzg_xDxQYqd3LDbMDZBwfsnkPQc_Ya5o092mVg3O2br5Mad5BzcSFooOwmPj9PhplMSFqVBJfqg7S0tidlfK_dk0Pw5Vvznrl-UTJem-Q4aA/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Keterangan:
❞ Tulisan yang berwarna Orange adalah Judul widgate
❞ Tulisan yang berwarna merah adalah Kode widgate
Silahkan ganti sesuai keinginan anda.

4. Klik simpan, dan lihat hasilnya.

Kode HTML diatas adalah tampilan multi slide widgate berwarna Light, kalau sobat ingin berwarna Dark, silahkan copy Kode yang dibawah ini:

❞ Berikut Kodenya:

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwzBvme3COt-8gz5c83h2YSt8a5PMtNSop4l8xnMopInWz6PQEU-iMx4n3nZRTijkJygXsGqEj2Rcykko5AB8AfyCvXyrVneyvavz53p2nPihsP4LMbN_ehzzbdfS6tH-6Wu_6vvX2Q/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZD8lIG3iDAS_0IKI8yiG0JtiWnorhjSb-ro4IDCnIHW0T5fCXgzWWomZY2FBQLDnM5-0WCCsm5ERtkshXuMCAKVbCX-aPCIiiQ1zxjdxkzJx7Z7-8qbtilan0EtWWjBlu_Y_arTUrvg/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Multi Slide widgate diblog Tanpa Edit HTML



>

Cara Membuat Widget Daftar Menu Blog Otomatis

Cara Membuat Widget Daftar Menu Blog Otomatis  - Daftar menu blog yang biasanya ditempatkan pada sidebar blog ini ada juga yang menyebutnya dengan table of content. Cara membuat table of content ini sedikit berbeda dengan daftar isi blog otomatis yang pernah saya posting sebelumnya. Pada widget daftar menu otomatis ini sudah dilengkapi fungsi scroll dan pengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi “All label”. Pada script daftar menu blog yang mau saya share ini, mampu menampilkan sampai max 500 halaman posting. Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya : jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.

Cara Membuat Daftar Menu/Isi Di Sidebar Blog :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:2px solid #FFFFFF; height:310px; overflow:auto; padding:10px; width:260px;"> <div id="cl_option"> Loading... </div> <div id="cl_content_list"> </div> <script type="text/javascript"> var jumlah_kata_dalam_ringkasan = 250; </script> <script src="http://raihanun.googlecode.com/files/DaftarMenuOtomatis.js"> </script> <script src="http://anti-fool.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script></div>

4.       Silahkan edit pada lebar (width) dan tinggi (height) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga nama blognya dengan nama blog anda.

5.       Save / Simpan.

>

Membuat Widget Popular Post Dengan Efek 3D

Huft, sudah 2 Hari tidak membuat artikel di sebabkan tidak punya uang untuk ke warnet akhirnya sekarang bisa membuat artikel lagi hehe. Pada kesempatan kali ini saya akan memberikan tutorial tentang bagaimana membuat efek Popular post namun dengan efek 3D ! wah bagaimana yah kira-kira tampilan-nya pasti akan sangat menakjubkan. Langsung saja kamu lihat caranya di bawah ini :

1. Masuk ke akun Blog kamu.

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript dan kamu salin kode java script di bawah ini.

<style type="text/css"> .cube { width: 200px; height: 200px;} a img { border: none; } #linksCube img { width: 100%; height: 100%; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script> <script type="text/javascript" charset="utf-8"> $(function () { $('.popular-posts ul').abupopularcube(); }); </script> <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>

NOTE :

• Kamu bisa atur berapa lebar dan tinggi dari widget ini dengan mengubah kode yang berwarna biru, width untuk lebar, height untuk tinggi.

3. Simpan Template, Mudahkan ?

>