MULTI PASTE: Blogger Gadgets | Menabur Ketulusan Menuai Kebahagiaan

Widget Member yang Aktif Berkomentar

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 6:30 AM with 8 comments

Bismillahirrahmanirrahim

MULTI PASTE - Banyak trik yang dilakukan oleh para master blogger untuk menyihir para pengunjung blog agar selalu datang dan datang lagi serta aktif memberikan komentar terhadap artikel yang dipublikasikan.

Lihat saja screenshot di samping ini. Ini adalah widget daftar member aktif yang terpasang pada blog pada blog ini.

Widget ini di design oleh Taufik Nurrohman dan pertama kali terpasang pada blog DTE :]. Ide membuat widget ini, terbilang brilian, seluruh pengunjung yang pernah memberikan komentar akan ditampilkan dalam widget ini, termasuk count komentar untuk masing-masing visitor akan diperlihatkan saat mose hover yang diarahkan ke gambar profile visitor. Profile image yang ditampilkan sesuai dengan profile yang digunakan saat memberikan komentar. Anda dapat melihat demonya klik tombol demo di bawah ini.

Widget ini dibuat menggunakan javascript dengan memanfaatkan jquery untuk menampilkan profile member serta polesan kode css untuk mempercantik tampilan widget.

Saya coba bertanya ke 'mbah google' untuk mencari tutorial widget ini, eh.. malah diarahkan ke TUTS+ blog milik kang Denddy Gustiana. Cara menggunakan widget ini cukup mudah, Anda hanya perlu membuat sebuah halaman statis dan masukkan kode widget ini ke dalamnya.

Untuk mempublikasikan tutorial widget ini saya sendiri tidak berani, karena belum izin ke Bang Taufik serta tidak etis karena menyangkut licensi dan hak cipta, tapi Anda tidak perlu berkecil hati, karena saya akan menunjukkan link tutorial untuk dapat menggunakan widget ini. Silahkan kunjungi halaman tutorial membuat Daftar Member Aktif yang dibuat oleh Kang Denddy.

Jika Anda sudah berhasil menerapkan widget ini di blog Anda, jangan lupa ucapkan Alhamdulillah dan berterima-kasihlah kepada para master blogger terutama buat Bang Taufik dan Kang Denddy, karena beliu berdua yang telah berjasa mengembangkan widget ini.

Labels: Blogger Gadgets

Menggunakan Widget Popular Series

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 10:19 AM with 10 comments

Bismillahirrahmanirrahim

MULTI PASTE - Berikut ini adalah salah satu widget blogger hasil kawin silang antara widget menu accordion dengan widget menampilkan judul posting berdasarkan label.

Widget Popular Series ini akan menampilkan daftar label beserta daftar judul posting terbaru di bawahnya.

Script accordion, saya ambil dari Glossy Accordion Menu design by Dynamic Drive, kemudian saya gabungkan dengan script untuk menampilkan judul posting berdasarkan label. Ada sedikit modifikasi pada kode CSS dari script Glossy Accordion Menu untuk menyesuaikan dengan tampilan footer blog yang berlatar belakang gelap seperti yang dapat Anda lihat pada blog ini.

Cara penerapan Widget Popular Series ini cukup mudah, Anda perlu menambahkan gadget type HTML/Javascript pada Layout blog dan masukkan script Widget Popular Series ke dalamnya. Berikut ini step by step cara menggunakan Widget Popular Series

Pada halaman dashboard blogger pilih menu Layout kemudian tambahkan gadget type HTML/Javascript pada bagian footer dan masukkan script di bawah ini ke dalamnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript" src="http://click-bingo-project.googlecode.com/files/accordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
   headerclass: "submenuheader", //Shared CSS class name of headers group
   contentclass: "submenu", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
   defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
   onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: true, //persist state of opened contents within browser session?
   toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["suffix", "<img src='http://2.bp.blogspot.com/-w2rXmKKoIWw/TyAHgaAoNyI/AAAAAAAAEvo/EQb_qVUputU/s1600/arrow_right.gif' class='statusicon' />", "<img src='http://3.bp.blogspot.com/-DAMBJVFbFmM/TyAHg2YnFAI/AAAAAAAAEvs/n6uvhcqO7V8/s1600/arrow_down.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
       //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
       //do nothing
   }
})
</script>
<style type="text/css">
.glossymenu{
margin: 0 auto;
padding: 0;
width: 300px;
border: none;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: transparent;
font: 12px "Arial", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #f6f6f6;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left:0px;
text-decoration: none;
border-bottom:1px dotted #747676
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: #f6f6f6;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background: #222;
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: transparent;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0 auto;
padding-left: 10px;
}
.glossymenu div.submenu ul li{
border:none;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Arial", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px auto;
}
.glossymenu div.submenu ul li a:hover{
background: #f6f6f6;
colorz: white;
}
</style>
<div class="glossymenu">
<a class="menuitem submenuheader" href="Masukkan URL Label Anda" rel="nofollow">LABEL ANDA</a>
<div class="submenu">
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://www.multipaste.web.id/feeds/posts/summary/-/LABEL ANDA?max-results=4&alt=json-in-script&callback=recentpostslist"></script>
</div>

</div>

Ganti kode yang ditulis dengan warna merah sesuai dengan url label dan nama label milik Anda. Untuk membuat beberapa Daftar Popular Kategori, copy kode yang berwarna biru dan tempelkan di bawahnya sebelum baris kode paling akhir (</div>), lakukan beberapa kali sesuai kebutuhan.

Perhatikan kode yang dibold pada baris pertama, jika sudah terpasang pada template Anda, tidak perlu diambil karena akan meperlambat loading blog.

Simpan gadget dengan menekan tombol Save

Sekarang ucapkan Alhamdulillah karena pekerjaan menambahkan Widget Popular Series pada bagian footer blog Anda telah selesai.

Labels: Blogger Gadgets

Menambahkan Icon Like pada Komentar Blogspot

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 3:42 PM with 8 comments

Bismillahirrahmanirrahim

MULTI PASTE - Ini adalah salah satu fitur yang cukup menarik untuk ditambahkan pada komentar blogspot yaitu icon like, seperti yang dapat Anda lihat terpasang pada elemen komentar blog ini.

Icon like ini akan menjadikan elemen komentar blogspot menjadi lebih interaktif, pengguna akan dapat saling mendukung terhadap komentar yang diberikan pada sebuah artikel melaui fitur yang satu ini. Secara otomatis count like akan tampil saat mouse pengguna di geser ke arah icon like.

Fitur icon like ini akan kelihatan lebih serasi jika dikombinasikan dengan widget komentar blogspot ala blogger vietnam yang telah di beri aksesoris nomor urut komentar. Ada sedikit penambahan javascript dalam penggunaan widget ini tetapi tidak akan banyak mempengaruhi kecepatan loading blog.

Tidak ada persyaratan khusus dalam penggunaan widget ini kecuali Anda telah mengaktifkan thread comment atau komentar bertingkat. Ikuti langkah implementasi berikut ini untuk menambahkan icon like pada elemen komentar blogspot.

Pada halaman dashboard blogger pilih Template dan sebelum melakukan perubahan, backup template Anda terlebih dahulu

Pilih menu Template > Edit HTML

Perhatikan baris kode seperti ini <b:skin>...</b:skin> perluas kode ini dan cari kode ]]></b:skin>

Tempatkan kode di bawah ini tepat diatas kode ]]></b:skin>

.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://lh5.googleusercontent.com/-sn9Xay9WiTo/UXo2C6dqStI/AAAAAAAADvk/JPxSUEG7GV0/s10/like.png) no-repeat}

Selanjutnya cari kode seperti ini :

(function() {
var items = <data:post.commentJso/>;

Ganti dengan kode di bawah ini. Catatan, jika Anda sudah pernah melakukan langkah ini karena sudah pernah meenambahkan nomor urut pada komentar blogspot, maka abaikan langkah ini dan lanjutkan ke langkah berikutnya.

var items_copy=[];
(function() {
var items = <data:post.commentJso/>;
items_copy=items;

Berikut cari lagi kode : <data:post.commentHtml/> dan tepat dibawahnya tempatkan script berikut ini

<script type='text/javascript'>
var likeurl='<data:blog.url/>';
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}
//]]>
</script>

Simpan perubahan dokumen HTML template Anda dengan menekan tombol Save template

Sekarang ucapkan Alhamdulillah, karena pekerjaan menambahkan icon like pada komentar blogspot telah selesai, dan sekarang silahkan periksa tampilan elemen komentar blog Anda

Labels: Blogger Gadgets, Blogger Tricks

Menambahkan Nomor Urut Pada Komentar Blogspot

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 11:04 AM with 5 comments

Bismillahirrahmanirrahim

MULTI PASTE - Berikut ini adalah cara menambahkan nomor urut pada komentar yang diberikan oleh pengunjung pada setiap postingan. Tampilan nomor urut ini bisa Anda lihat pada bagian komentar blog ini atau cobalah berikan satu komentar pada postingan ini, maka otomatis komentar Anda akan diberi nomor urut.

Nomor urut komentar ini, akan lebih serasi jika dipadu dengan tampilan komentar blogspot ala blogger vietnam, tetapi dapat pula diterapkan pada tema komentar lain yang sudah sering digunakan di blogspot, bentuk dan penempatan tinggal menyesuaikan melalui kode CSS. Jika ingin lebih rame lagi, tambahkan icon like pasti akan kelihatan lebih menyolok.

Berikut ini adalah cara menerapkan dan menambahkan nomor urut komentar pada elemen komentar blogspot.

Pada halaman dashboard blogger pilih Template sebelum melakukan perubahan backup template Anda terlebih dahulu.

Pilih menu Template > Edit HTML

Perhatikan baris kode seperti ini <b:skin>...</b:skin> perluas kode ini dan cari kode ]]></b:skin>

Tempatkan kode di bawah ini tepat diatas kode ]]></b:skin>

.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#BD5D48;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

Untuk menyesuaikan dengan tampilan blog Anda ganti kode warna ini : #BD5D48 dengan kode warna Anda

Selanjutnya cari kode seperti di bawah ini

(function() {
var items = <data:post.commentJso/>;

Ganti dengan kode berikut ini

var items_copy=[];
(function() {
var items = <data:post.commentJso/>;
items_copy=items;

Berikut cari lagi kode : <data:post.commentHtml/> dan tepat dibawahnya tempatkan script berikut ini

<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>

Simpan perubahan dokumen HTML template Anda dengan menekan tombol Save template

Sekarang ucapkan Alhamdulillah, karena pekerjaan menambahkan nomor urut pada komentar blogspot telah selesai, dan sekarang silahkan periksa blog Anda.

Labels: Blogger Gadgets, Blogger Tricks

Komentar Blogspot Ala Blogger Vietnam

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 7:17 AM with 7 comments

Bismillahirrahmanirrahim

MULTI PASTE - Seperti yang dapat Anda lihat pada bagian komentar blog ini, elemen komentar blogspot ini saya ambil dari tutorial yang dirilis oleh Duy Pham seorang blogger vietnam. Tutorial dan cara implementasinya saya posting lagi di blog ini dalam versi Bahasa Indonesia.

Ada beberapa fitur yang menarik dari elemen komentar blogspot yang satu ini, seperti label Author untuk membedakan komentar penulis dengan komentar pengunjung, nomor urut komentar serta tombol like ala facebook.

Tutorial ini akan saya publikasikan dalam tiga postingan yang terpisah, diantaranya kode CSS untuk elemen komentar yang disertai label Author pada komentar penulis, menambahkan nomor urut komentar serta menambahkan tombol like pada elemen komentar.

Syarat utama agar implementasi ini berhasil adalah bahwa Anda telah mengaktifkan Thread Comments atau Komentar Bertingkat. Untuk postingan pertama ini, mari kita mulai menanamkan kode CSS ke dalam dokumen HTML template untuk mendapatkan tampilan komentar blogspot ala bloger vietnam.

Pada halaman dashboard blogger pilih Template sebelum melakukan perubahan backup template Anda terlebih dahulu.

Pilih menu Template > Edit HTML

Perhatikan baris kode seperti ini <b:skin>...</b:skin> perluas kode ini dan cari kode ]]></b:skin>

Tempatkan kode di bawah ini tepat diatas kode ]]></b:skin>

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#BD5D48}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #BD5D48;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#BD5D48}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comments-content .comment-content {text-align:justify;font-size:12px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://lh5.googleusercontent.com/-v9ykkH6XScM/UXR6ao0ZCxI/AAAAAAAADto/xiz6pRWhOsQ/s36/author.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Untuk menyesuaikan dengan tampilan blog Anda edit kode warna berikut ini #BD5D48 serta label Author (https://lh5.googleusercontent.com/-v9ykkH6XScM/UXR6ao0ZCxI/AAAAAAAADto/xiz6pRWhOsQ/s36/author.png) dapat Anda buat dengan ukuran 32px X 32px

Simpan perubahan dengan menekan tombol Save Template

Sekarang perikasa blog Anda dan lihat perubahan pada bagian komentar jika berhasil ucapkan Alhamdulillah.

Labels: Blogger Gadgets, Blogger Tricks

Menggunakan Microsoft Translator Widget

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 2:49 PM with No comments

Bismillahirrahmanirrahim

MULTI PASTE - Berikut ini adalah widget translator dari Microsoft, untuk menerjemahkan halaman web ke dalam berbagai bahasa secara real-time. Pengguna dapat melihat halaman Anda dalam bahasa mereka sendiri, tanpa harus pergi secara terpisah ke sebuah situs web penterjemah. Melalui widget ini, pengguna dapat berbagi halaman Anda dengan teman-teman mereka dalam berbagai bahasa.

Widget ini bisa dijadikan salah satu alternatif selain goggle translate atau widget translate dari Gtranslate. Selain tampilannya yang uniq, script Microsof Translator Widget ini lebih ringan, dapat dicustomize menyesuaikan dengan layout blog Anda, baik tampilan warna maupun ukuran. Anda dapat melihat penampakkan widget ini pada side bar blog ini.

Untuk instalasi widget cukup mudah, Anda hanya perlu menambahkan sebuah gadget HTM/javascript dan masukkan script Microsoft Translator Widget yang telah di generated sebelumnya ke dalam content widget, agar lebih terinci berikut cara menambahkan widget ini secara berurutan.

Kunjungi halaman Microsoft Translator Widget

Masukkan URL Address atau alamat situs Anda pada bagian Site Info

Pilih bahasa default yang digunakan oleh blog atau situs Anda

Lakukan pengaturan pada bagian Option, pilih warna yang dinginkan, lebar widget serta opsi translator, sesuaikan dengan layout blog atau situs Anda.

Beri tanda check pada kotak I agree to the Microsoft Translator Terms of Use. Kemudian klik tombol Generate Code.

Login ke blogger dengan ID Anda, pergi ke Layout/Tata Letak dan tambahkan sebuah gadget type HTML/Javascript, kemudian masukkan kode Microsof Translator Widget hasil generate ke dalamnya.

Atur penempatan widget pada side bar blog dan klik tombol Save arrangement.

Langkah penutup, periksa blog Anda dan ucapkan Alhamdulillah.

Labels: Blogger Gadgets

Daftar Isi Blogger Dengan Tampilan Tabulasi

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 11:07 AM with 13 comments

Bismillahirrahmanirrahim

MULTI PASTE - Banyak model dan bentuk daftar isi blogger yang bisa Anda dapatkan melalui google search. Menggunakan widget ini penting, karena akan mempermudah visitor melakukan navigasi untuk memperoleh informasi dari blog Anda.

Berikut ini salah satu widget daftar isi yang mungkin dapat dijadikan pilihan. Ada beberapa fitur yang lebih unggul dibanding widget daftar isi versi tampilan elegan. Pada widget daftar isi blogger dengan tampilan tabulasi ini, selain otomatis menampilkan daftar judul posting yang dikelompokkan berdasarkan label, Anda masih dapat melakukan pengaturan lain seperti menampilkan tangal publikasi, menambahkan label New pada artikel terbaru, bahkan Anda dapat menampilkan summary ringkasan posting, jika Anda menginginkannya.

Widget ini didesign oleh Taufik Nurrohman, beliau adalah termasuk salah satu blogger profesional dan banyak menguasai coding yang biasa digunakan untuk platform blogger, saya banyak belajar dari blog beliau. Tidak banyak perubahan yang saya lakukan dari widget daftar isi ini kecuali merubah kode CSS untuk menyesuaikan warna dengan tampilan blog ini, selebihnya masih sesuai aslinya. Bentuknya dapat Anda lihat seperti daftar isi blog ini.

Berikut adalah cara menggunakan widget daftar isi dengan tampilan tabulasi

Pada halaman dashboard blogger pilih menu Template

Seperti biasa backup template Anda terlebih dahulu

Pilih Template > Edit HTML dan beri tanda cek pada kotak Expand widget templates

Cari kode ]]></b:skin> dan letakkan kode berikut ini tepat di atas kode ]]></b:skin>

#tabbed-toc {margin:0 auto;background-color:#BD5D48;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333;}
#tabbed-toc .loading {display:block;padding:5px 10px;font:normal bold 10px Arial,Sans-Serif;color:white;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {margin:0 0;padding:0 0;list-style:none;}
#tabbed-toc .toc-tabs {width:22%;float:left;}
#tabbed-toc .toc-tabs li a {display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {background-color:#9a3b26;color:white;}
#tabbed-toc .toc-tabs li a.active-tab {background-color:#9a5546;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
#tabbed-toc .toc-content, #tabbed-toc .divider-layer {width:78%;float:right;background-color:white; border-left:5px solid #9a5546;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing:border-box;}
#tabbed-toc .divider-layer {float:none;display:block;position:absolute;top:0; right:0;bottom:0; -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:11px; color:#892412;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden;}
#tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
#tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden;}
#tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
#tabbed-toc .panel li:nth-child(even) {background-color:#FFE8E3;}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a {background-color:#333;color:white;outline:none;}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {background-color:#222;}
@media (max-width:700px) {
#tabbed-toc {border:2px solid #333;}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content {overflow:hidden; width:auto;float:none; display:block;}
#tabbed-toc .toc-tabs li {display:inline;float:left;}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab {background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4);}
#tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
#tabbed-toc .toc-content {border:none;}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time {display:none;}
}

Simpan template Anda dengan menekan tombol Save Templates

Buat Laman Baru, pilih menu Pages > New Page > Blank page dan paste kode berikut ini pada formulir halaman baru dalam mode HTML dan bukan mode Compose, lalu terbitkan / publish

<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://hompimpaalaihumgambreng.blogspot.com/2012/10/widget-daftar-isi-tabulasi-untuk-bogger.html" title="Tabbed TOC">DTE :]</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://nama_blog.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Atau jika Anda sebelumnya telah memiliki laman yang berisi widget daftar isi, untuk mengupdatenya anda tinggal mengganti isi widget dengan script di atas dalam mode HTML lalu klik tombol Updates

Pengaturan dan Kustomisasi Widget

blogUrl : Ganti dengan alamat blog Anda.
activeTab : Nilai 1 akan membuat tab di urutan pertama menjadi aktif, konten tab pertama akan terbuka saat pertama kali halaman diakses.
showDates : Nilainya true untuk menampilkan waktu terbit postingan.
showSummaries : Nilainya true untuk menampilkan ringkasan posting.
showThumbnails : Nilainya true untuk menampilkan thumbnail (tidak direkomendasikan karena akan membuat halaman lama termuat).
thumbSize : Untuk menentukan ukuran thumbnail.
noThumb : URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
monthNames : Menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Asal.
newTabLink : Nilainya true, semua tautan akan membuka di tab/jendela baru saat diklik.
maxResults : Jumlah maksimal posting yang akan ditampilkan.
preload : Digunakan untuk menentukan waktu penundaan pemuatan JSON. Gunakan satuan milidetik atau cukup tuliskan "onload" agar widget ini memuat setelah keseluruhan halaman telah selesai termuat.
sortAlphabetically : Nilai false untuk menyortir posting secara normal berdasarkan bulan terbit, true untuk menyortir posting berdasarkan alfabet.
showNew : Nilai false untuk menyembunyikan label New! pada artikel baru. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!.
newText : Markup HTML bebas untuk membuat label pada posting-posting terbaru (misalnya New! atau Terbaru!).

Alhamdulillah, semoga widget ini bisa lebih mempercantik blog Anda, jika Anda membutuhkan bantuan, jangan segan untuk memberikan komentar di bagian bawah artikel ini.

Labels: Blogger Gadgets, Blogger Tricks

Widget Popular Posts Multi Color

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 8:28 PM with No comments

Bismillahirrahmanirrahim

MULTI PASTE - Selain untuk menampilkan artikel yang paling sering di baca oleh pengunjung, widget popular posts juga dapat di modifikasi sehingga tampilannya akan menjadi lebih menarik. Pada kesempatan ini, saya akan membagikan kepada Anda widget popular posts ala plugin popular posts milik wordpress.

Widget ini tampil multi warna, dengan label angka dari 1 sampai 9 pada sisi kanan, diurut berdasarkan tingkat popularitas artikel. Artinya, artikel yang paling sering dibaca pengunjung akan menempati posisi teratas dengan label angka 1 disusul artikel populer berikutnya dengan label angka 2 dan seterusnya sampai artikel yang paling rendah popularitasnya.

Widget ini sebenarnya adalah widget bawaan blogger yang dimodifikasi menggunakan sedikit tambahan kode CSS yang harus ditanamkan ke dalam dokumen HTML templates. Untuk kecepatan loading widget, tidak banyak perpengaruh karena selain kode CSS, tidak ada penambahan external script seperti javascript ataupun kode HTML. Silahkan klik tombol di bawah ini untuk melihat demonya.

Kembali ke pokok bahasan, untuk memodifikasi widget popular posts, agar tampil dalam bentuk multi color, ikuti langkah implementasi seperti di bawah ini :

Pada halaman dashboard blogger klik menu Template

Sebelum melakukan perubahan pada dokumen HTML template biasakan untuk melakukan backup template terlebih dahulu.

Klik menu Template > Edit HTML, kemudian cari kode ]]></b:skin>

Tambahkan kode berikut ini tepat di atasnya

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}

Simpan template dengan menekan tombol Save Templates

Jika Anda sudah pernah menambahkan widget popular posts bawaan blogger, silahkan periksa homepage blog Anda dan pastikan widget popular posts telah berubah.

Jika Anda belum pernah menggunakan widget popular posts bawaan blogger, pergi ke menu Layout/Tata Letak, klik Add a gadget dan ambil widgets popular posts blogger.

Sekali lagi periksa halaman homepage blog Anda, dan pastikan widget popular posts yang baru saja ditambahkan sudah sesuai dengan keinginan Anda.

Alhamdulillah, sampai di sini perkerjaan Anda untuk menambahkan widget popular post multi color sudah selesai, jika menemui hambatan atau kesulitan saat mempraktekkan tutorial ini, jangan sungkan meninggalkan komentar pada bagian bawah artikel ini, atau jika Anda punya saran dan pendapat lain, saya mengajak Anda untuk bertukar informasi untuk kemajuan kita bersama.

Labels: Blogger Gadgets

Widget Author Box dari Creating Website

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 9:10 AM with 7 comments

Bismillahirrahmanirrahim

MULTI PASTE - Widget Author Box adalah widget yang biasa dipasang oleh para blogger di bagian bawah postingan atau biasa dipasang di bawah judul posting. Widget ini selain akan mempercantik tampilan blog, juga dapat diisi dengan berbagai pesan yang ingin disampaikan oleh penulis kepada pengunjung.

Saya telah menemukan beberapa widget author box, yang diisi oleh penulisnya dengan kata-kata motivasi yang menarik dan sangat kreatif, sebagian blogger juga telah mengisi widget ini dengan pemberitahuan, himbauan dan saran atau semacam disclaimer kepada pengunjung. Sementara saya sendiri lebih memilih untuk mengisi widget author box dengan himbauan dan sekaligus memanfaatkan author box agar berfungsi sebagai Permalink, seperti yang dapat Anda lihat pada bagian bawah postingan ini.

Widget author box ini saya ambil dari Creating Website tanpa izin, dan saya sudah menempelkan komentar pada artikel Template Blogger Super Genit tentang hal ini, ehhh... Maskolis malah ngakak, sehingga saya berasumsi bahwa beliau telah mengizinkannya dengan ikhlas, semoga saja saya tidak salah kaprah.

Baiklah... kita abaikan saja tentang Maskolis, langsung ke pokok bahasan, tentang bagaimana memasang widget author box ini pada blog dengan platform blogger.

Pada dashboar blogger pilih menu Template > Edit HTML beri tanda mark (centang) pada kotak Expand Widget Templates.

Sebaiknya sebelum melakukan perubahan pada dokumen HTML Template, biasakan untuk melakukan backup template terlebih dahulu.

Cari kode ]]></b:skin> kemudian simpan kode CSS beriktu ini tepat di atasnya

.masadmin{display:block; width:auto; background:#3d7b95; border:5px solid #011923;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; padding:0; margin:10px 0; font:normal 12px Arial,Sans-Serif; color:#efedfa}
.masadmin .isi{padding:5px}
.masadmin h3{ border-bottom:1px dashed #d4cffd; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:16px Oleo Script Swash Caps; padding:3px 0; margin:0 10px; display:block}
.masadmin h3 a{color:#FEEA83}
.masadmin img{width:70px; height:70px; margin:0 10px 0 0; float:left; padding:4px; background:#d4cffd;}

Selanjutnya cari kode <data:post.body/> dan simpan kode berikut ini tepat di bawahnya, atau jika ingin menampilkan widget author box di bawah judul posting, tempatkan kode berikut tepat diatasnya.

<div class='masadmin'>
<h3>Written by : <a href='http://www.multipaste.web.id/'>Nama Anda</a> - Descripsi Singkta Tentang Anda </h3>
<div class='isi'>
<img src='http://url gambar atau photo Anda, ambil saja dari profile google plus'/>
Isi widget Author Box - Masukkan pesan atau uneg-uneg Anda di sini, atau apa saja yang ingin di tampilkan pada widget ini.
<p><span style='float:left;text-align:left;'>
Join Me On: <a href='http://www.facebook.com/ID facebook Anda' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/ID Twitter Anda' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/ID G+ Anda/' rel='nofollow'>Google Plus</a></span>
<span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://www.multipaste.web.id/' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>

Ganti tulisan yang dicetak tebal dengan warna biru, sesuaikan dengan selera Anda.

Simpan perubahan dokumen template Anda dengan menekan tombol Save Templates

Sekarang buka salah satu artikel pada blog Anda dan periksa tampilan widget author box ini jika berhasil ucapkan Alhamdulillah.

Labels: Blogger Gadgets

Menambahkan Widget di Atas Blog Post

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 8:41 AM with 2 comments

Bismillahirrahmanirrahim

MULTI PASTE - Agar tampilan blog menjadi kelihatan lebih cantik, terkadang kita harus menambahkan widget di atas Blog Post. Tetapi widget yang akan ditambahkan haruslah benar-benar dipertimbangkan, terutama pengaruhnya terhadap kecepatan loading blog, serta widget yang banyak memberi kemudahan bagi pengunjung dalam melakukan navigasi.

Keuntungan lain yang diharapkan dari tampilan blog yang cantik adalah agar pengunjung betah berlama-lama di blog kita, sehingga prosentase bounce rate blog dapat ditekan.

Artikel ini saya publikasikan untuk mengakomodasi kebutuhan para blogger yang mungkin membutuhkan informasi bagaimana Menambahkan Widget di Atas Blog Post.

Widget yang paling sering dipasang di atas blog post biasanya berupa slider atau widget headline news, tujuan para blogger menggunakan widget ini adalah agar blog terkesan lebih visitor friendly, karena memudahkan pengunjung dalam memperoleh informasi yang dibutuhkan.

Cara Menambahkan Widget di Atas Blog Post

Untuk menambahkan widget di atas blog post, Anda harus mengedit dokumen HTML template blog Anda, detail implementasi seperti di bawah ini,

Pada halaman dasboard blogger klik link title blog Anda

Klik menu Template, sebaiknya backup template blog Anda terlebih dahulu, selanjutnya klik tombol Edit HTML

Cari kode ]]></b:skin> pada dokumen HTML template, dan tempatkan kode berikut tepat di atas kode ]]></b:skin>

.adding-wrapper {padding:0 auto;margin:0 auto;width:auto;float:left;word-wrap:break-word; overflow:hidden;}
.adding {color: #666666;line-height: 1.3em;}
.adding ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.adding li {margin:0;padding-top:0;padding-right:0;padding-bottom:.25em;padding-left:0px; text-indent:0px;line-height:1.3em;}
.adding .widget {margin:0px 0px 6px 0px;}

Selanjutnya cari kode <div id='main-wrapper'> dan tempatkan kode berikut ini tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='adding-wrapper'>
<b:section class='adding' id='adding' preferred='yes'/>
</div>
</b:if>

Simpan perubahan template Anda dengan menekan tombol Save Template

Langkah terakhir periksa perubahan pada layout blog, pilih menu Layout/Tata Letak pada side bar sebelah kiri dan pastikan telah terdapat elemen Add a Gadget di atas elemen blog post, seperti gambar di bawah.

Sampai di sini ucapkan Alhamdulillah karena pekerjaan Anda untuk Menambahkan Widget di Atas Blog Post telah selesai.

Labels: Blogger Gadgets, Blogger Tricks

Advertise Widget Blogger 125x125

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 9:06 PM with 2 comments

Bismillahirrahmanirrahim

MULTI PASTE - Seiring pesatnya perkembangan bisnis online saat ini, memasang banner iklan di blog menjadi penting, karena jumlah produsen dan pebisnis online yang mungkin memanfaatkan blog sebagai media promosi untuk memasarkan produknya terus bertumbuh.

Untuk mengakomodasi kebutuhan pihak pemasang iklan atau yang biasa disebut advertiser ini, maka para pemilik blog tentu harus menyediakan space untuk menampilkan iklan di blog mereka. Iklan yang ditampilkan bisa berupa banner atau iklan teks.

Pada kesempatan ini saya coba membagikan sebuah widget advertise yang mungkin cocok untuk blog Anda. Widget ini adalah widget yang akan menampilkan banner iklan dengan ukuran lebar 125px dan tinggi 125px, banner iklan akan tampil dalam bentuk tabel, dua baris dan dua kolom (2 banner di atas dan 2 banner di bawahnya). Sebenarnya widget seperti ini sudah banyak dipublikasikan oleh para master blogger, tetapi saya coba untuk menambahkan sedikit variasi, dimana pada bagian bawah terdapat sebuah button yang jika di klik oleh visitor, maka mereka akan dibawa ke sebuah halaman statis yang berisi aturan dan persyaratan untuk memasang iklan.

Memasang Widget Advertise di Blog

Untuk memasang widget ini, Anda perlu menambahkan sebuah gadget type HTM/Javascript pada Layout atau Tata Letak Halaman pada blog Anda dan masukkan kode iklan di bawah ini ke dalamnya. Namun yang perlu diperhatikan adalah, Anda harus menyediakan sebuah halaman statis yang berisi aturan dan persyaratan untuk memasang iklan, tujuannya adalah, agar tombol "ADVERTISE ON THIS BLOG" yang ada pada widget, dapat dilink ke halaman ini.

Berikut ini adalah, detail cara memasang Widget Advertise

Pada halaman dashboard klik link Title Blog

Perhatikan side bar sebelah kiri, pilih menu Layout/Tata Letak >> Add a Gadget, pilih Gadget type HTML/Javascript

Masukkan kode widget di bawah ini ke dalamnya, untuk Title atau Judul Widget sesuaikan dengan keinginan Anda dan tekan tombol Save untuk menyimpan Gadget

<div align="center">
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
<tr>
<td><center><a href="URL IKLAN" rel="nofollow" target="_blank"><img border="0" alt="BANNER IKLAN" width="125" src="URL GAMBAR" height="125"/></a></center></td>
<td><center><a href="URL IKLAN" rel="nofollow" target="_blank"><img border="0" alt="BANNER IKLAN" width="125" src="URL GAMBAR" height="125"/></a></center></td>
</tr>
<tr>
<td><center><a href="URL IKLAN" rel="nofollow" target="_blank"><img border="0" alt="BANNER IKLAN" width="125" src="URL GAMBAR" height="125"/></a></center></td>
<td><center><a href="URL IKLAN" rel="nofollow" target="_blank"><img border="0" alt="BANNER IKLAN" width="125" src="URL GAMBAR" height="125"/></a></center></td>
</tr>
</tbody>
</table>
<div style="border:none" width="274">
<a href="http://multipaste.blogspot.com/p/blog-page.html" rel="nofollow" target="_blank"><img width="274" height="33" border="0" alt="Advertise Now!" src="https://lh3.googleusercontent.com/-S3SnExs_FG8/UN3ExtqzQgI/AAAAAAAADDY/aYNbtqFTyoI/s512/ADVERTISE9.jpg" /></a>
</div>
</div>

Perhatikan kode yang di bold biru ganti dengan URL iklan dan kode yang di bold hijau ganti dengan URL gambar. Untuk kode yang di bold hitam ganti dengan deskripsi iklan dan janga lupa untuk mengganti url statis page pada script diatas dengan url statis page milik Anda

Langkah terakhir adalah periksa blog Anda.

Sampai di sini ucapkan Alhamdulillah, karena pekerjaan mudah ini, yaitu memasang Advertise Widget Blogger 125x125 telah selesai.

Labels: Blogger Basics, Blogger Gadgets

Menggunakan Expand Sticky Bar di Blogger

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 6:10 PM with 9 comments

Bismillahirrahmanirrahim

MULTI PASTE - Sticky Bar atau notifikasi bar biasanya digunakan untuk memberitahukan adanya update penting kepada pengunjung, seperti berita terbaru, penawaran produk bahkan Anda dapat menambahkan link RSS dan share button di sana. Sticky bar biasanya ditempatkan di atas header blog atau dibagian bawah footer.

Pada postingan kali ini, saya akan membagikan kepada Anda cara Menggunakan Expand Sticky Bar di Blogger, seperti yang dapat Anda lihat pada bagian bawah footer di blog ini. Expand sticky bar adalah notifikasi bar yang dapat diperluas setelah pengunjung menggulir pointer mouse ke arah sticky bar atau dapat juga dibuat manual dimana sticky bar baru akan diperluas setelah pengunjung menekan tombol yang telah disediakan.

Expand Sticky Bar ini dibuat menggunakan CSS script dengan "position: fixed" dikombinasikan dengan jQuery plugin dan javacript, serta kode HTML yang berguna untuk menampilkan informasi tambahan yang dimasukkan ke dalam expand sticky bar. Widget ini kompatibel dengan browser Firefox 1.0 ke atas, IE 5.0 ke atas, Google Chrome, Opera 7 ke atas, selebihnya silahkan Anda mencobanya. Untuk menerapkan dan menggunakan expand sticky bar ini di blogger ikuti langkah instalasi di bawah ini.

Cara Menambahkan Expand Sticky Bar di Blogger

Login ke Blogger dengan ID Anda
Pada halaman dashboard blogger klik link Title Blog Anda
Pilih menu Template >> Edit HTML >> Proceed
Pada dokumen HTML cari kode ]]></b:skin> dan tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

.expstickybar{
position:fixed;
color: white;
padding: 5px;
right:0;
left:0;
visibility:hidden;
background:#222222 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png') repeat-x;
border-top: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 10000;
width:auto;
}

.expstickybar a{
color: white;
}

Selanjutnya cari kode </head> dan tempatkan script di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/mplabsblog/expstickybar.js'/>

Simpan perubahan pada dokumen HTML dengan menekan tombol Save template
Kemudian pergi ke menu Layout (Tata Letak), klik Add a Gadget untuk menambahkan gadget type HTML/Javascript, lalu masukkan kode di bawah ini ke dalam kotak Content dan tidak perlu diberi title.

<div id="stickybar" class="expstickybar">
<a href="#togglebar"><img src="https://sites.google.com/site/mplabsblog/open.gif" data-closeimage="https://sites.google.com/site/mplabsblog/close.gif" data-openimage="https://sites.google.com/site/mplabsblog/open.gif" style="border-width:0; float:right;" /></a>
<div style="text-align:center;padding-top:3px"><b>Copyright (c) 2012 ~ MULTI PASTE | Menabur Ketulusan Menuai Kebahagiaan</b></div>

---- Masukkan Konten Anda di Sini -----

</div>

Klik tombol Save untuk menyimpan Gadget, dan periksa blog Anda untuk memastikan bahwa widget expand sticky bar telah berhasil diterapkan

Kustomisasi Script Expand Sticky Bar untuk Menyesuaikan dengan Style Blog.

Untuk menyesuaikan warna, ganti kode warna yang terdapat pada CSS script di atas (poin No.4) dengan kode warna yang diinginkan, Anda bisa menggunakan tool Hex Color Generator pada blog ini

Masukkan konten Anda ke dalam Expand Sticky Bar, perhatikan kode HTML yang akan dimasukkan ke dalam gadget HTML/Javascript, tempatkan konten Anda di dalam elemen <div> (poin No. 7)

Untuk merubah type expand sticky bar dari mouseover menjadi manual, download script expstickybar.js lalu edit script perhatikan pada bagian akhir ganti kode 'mouseover' menjadi 'manual' potongan script akan terlihat seperti di bawah ini.

var mystickybar=new expstickybar({ id: "stickybar", position:'bottom', revealtype:'mouseover', peekamount:35, externalcontent:'', speed:200 //duration of animation (in millisecs) })

Simpan kembali script yang telah diedit ke tempat hosting script seperti Google Code atau Google Sites, ambil URL script yang telah disimpan pada tempat hosting script dan ganti URL script pada kode yang akan ditempatkan di atas kode </head> (poin No. 5) pada dokumen HTLM template Anda.

Silahkan Anda bereksperimen dan mengembangkan metode ini dan jika Anda berhasil Menggunakan Expand Sticky Bar di Blogger, ucapkan Alhamdulillah. Saya akan sangat berterima kasih jika Anda turut berkontribusi dan memberikan masukkan pada kolom komentar di bagian bawah artikel ini.

Labels: Blogger Gadgets, Blogger Tricks

Menggabungkan Widget Related Articles dan Widget Recent Comments

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 5:30 AM with 7 comments

Bismillahirrahmanirrahim

MULTI PASTE - Plugin Related Articles adalah salah satu plugin blogger yang sangat penting, karena selain memudahkan pengunjung dalam hal navigasi, dari sisi optimasi SEO blog, juga sangat berpengaruh. Selain dapat meningkatkan PageViews juga dapat mengalirkan Link Juice antar halaman artikel.

Pada kesempatan ini, saya akan membagikan kepada Anda Plugin Related Articles yang digabungkan dengan Widget Recent Comments dan ditempatkan pada bagian bawah halaman posting dalam bentuk tampilan dua kolom, seperti yang Anda lihat pada bagian bawah artikel ini.

Related Articles dan Recent Comments dalam bentuk dua kolom yang terdapat pada blog ini, sebenarnya satu paket dengan design template yang saya gunakan, dirancang oleh www.maskolis.com, namun karena ada pengunjung blog ini yang menanyakan bagaimana cara memasang Related Aticles dan Recent Comments secara berdampingan, maka saya mengurai kode HTML template blog ini dan membagikannya kepada Anda. Untuk menyingkat pembahasan ikuti tutorialnya seperti di bawah ini.

Cara Memasang Related Aticles dan Recent Comments Secara Berdampingan

Pada halaman dashboard blogger klik link Title Blog Anda

Pilih menu Templates >> Edit HTML >> Proceed >> beri tanda cek pada kotak Expand Widget Templates

Cari kode ]]></b:skin> dan tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

#under-wrapper{float:left;width:100%;border-bottom:1px solid #aaa;margin:10px 0;padding:5px 0 15px}
#related-articles{float:left;width:275px;border-right:1px solid #ddd;margin:5px 0 0;padding:0 15px 0 0}
#related-articles .widget{margin:0;padding:0}
#related-articles .widget h2,#related-posts h2{font:bold 14px Oswald;color:#000;text-transform:none;margin:0 0 5px;padding:0}
#related-articles a{color:#444;font:14px PT Sans Narrow}
#related-articles a:hover{color:#9daf22}
#related-articles li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 8px;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 2px 10px}
#recent-comments{float:right;width:300px;margin:5px 0}
.sidebar ul,#related-articles ul{list-style:none;margin:0;padding:0}

Perhatikan angka yang di bold biru, Anda dapat menggantinya untuk menyesuaikan lebar kolom Related Articles dan kolom Recent Comments

Cari kode </head> dan tempatkan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
var relatedpoststitle="Artikel Terkait";
</script>
<script src='http://multipaste.googlecode.com/files/relatedpost.js' type='text/javascript'/>

Cari kode <div class='post-footer-line post-footer-line-2'><span class='post-labels'> jika Anda tidak menemukannya cari kode seperti ini <div class='post-footer'><span class='post-labels'> dan tempatkan kode di bawah ini tepat di atasnya.

<b:if cond='data:blog.pageType == "item"'>
<div id='under-wrapper'>
<div id='related-articles'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=12"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=12;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>

<div id='recent-comments'>
<h2>Komentar Sahabat</h2>
<br/>
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
   numComments    = 5,
   showAvatar    = true,
   avatarSize    = 35,
   roundAvatar   = true,
   characters    = 40,
   showMorelink   = false,
   moreLinktext   = "More »",
   defaultAvatar    = "http://www.gravatar.com/avatar/?d=mm",
   hideCredits   = false;
//]]>
</script>
<script type="text/javascript" src="http://multipaste.googlecode.com/files/w2b-recent-comments-w-gravatar.js" rel="nofollow" target="_blank"></script>
<script type="text/javascript" src="http://multipaste.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
</div>
</div>
</b:if>

Kode yang berwarna merah adalah kode untuk Related Articles, Angka yang ditulis tebal adalah jumlah artikel terkait yang akan ditampilkan. Anda dapat merubahnya sesuai keinginan.

Kode yang ditulis dengan warna biru adalah kode untuk Recent Comments perhatikan kode numComments = 5 dan max-results=5 (jumlah komentar yang akan ditampilkan); avatarSize = 35 (ukuran image komentator); characters = 40 (jumlah karakter deskripsi komentar yang ditampilkan) silahkan disesuaikan dengan kebutuhan.

Jangan lupa mengganti url http://multipaste.blogspot.com dengan url blog Anda.

Simpan perubahan template dengan menekan tombol Save Templates, dan periksa blog Anda

Anda dapat membuat kombinasi lain dengan cara mengganti kode Recent Comments dengan kode iklan atau kode widget lainnnya.

Silahkan mencobanya, jika Anda menyukai Plugin Related Articles yang dipasang berdampingan dengan Widget Recent Comments ini, saya ucapkan Alhamdulillah, dan jika ada masukan yang berkaitan dengan pembahasan ini silahkan meninggalkan komentar, agar kita bisa berdiskusi untuk kemajuan bersama.

Labels: Blogger Gadgets, Blogger Tricks

Menggunakan TOP Posts Widget Blogger

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 10:32 AM with No comments

Bismillahirrahmanirrahim

MULTI PASTE - Widget Top Posts yang akan saya share kali ini, adalah salah satu widget blogger yang akan menampilkan daftar posting berdasarkan jumlah komentar pengunjung. Postingan yang paling banyak medapatkan komentar pengunjung akan ditempatkan pada urutan teratas disusul postingan berikutnya yang mendapatkan komentar lebih sedikit, demikian seterusnya sampai batas yang telah ditentukan.

Top Posts Widget Blogger memiliki prinsip kerja yang mirip dengan Widget Popular Posts yang sering digunakan oleh kebanyakan blogger, yaitu menampilkan daftar posting yang sering dibaca oleh pengunjung, yang membedakan kedua widget ini adalah parameter yang dijadikan tolak ukur untuk menampilkan daftar posting, jika widget popular posts mengambil parameter page views maka widget top posts menggunakan parameter jumlah komentar pengunjung, sehingga Widget Top Posts dapat dijadikan alternatif pengganti Widget Popular Posts atau Anda dapat menggunakan kombinasi kedua widget ini.

Widget Top Posts didesign oleh author BloggerSentral blog menggunakan kombinasi javascript serta Yahoo Pipes untuk mengkalkulasi jumlah komentar pada setiap posting yang telah dipublikasikan serta mengurutkan postingan berdasarkan jumlah komentar pengunjung pada sebuah blog.

Script widget TOP Posts ini telah saya modifikasi dari script aslinya dengan menghilangkan tampilan angka jumlah komentar setelah judul posting dan mengganti nomor urut daftar top posts dengan bullet list. Walaupun menggunakan javascript namun widget ini cukup ringan, instalasinya pun sangat mudah, Anda cukup menambahkan gadget type HTML/javascript pada layout blog, penempatannya bisa pada sidbar atau pada bagian footer seperti yang dapat Anda lihat pada bagian bawah halaman homepage blog ini.

Cara Memasang Widget TOP Posts pada Blog dengan Platform Blogger

Untuk memasang widget ini, ikuti detail langkah-langkahnya seperti di bawah ini :

Pada halaman dashboard bloger klik link Title Blog Anda

Pilih menu Layout (Tata Letak) >> Add a gadget >> Pilih gadget type HTML/Javascript

Copy script di bawah ini dan paste ke dalam kotak Content gadget type HTML/Javascript. Pada bagian Title masukkan TOP Posts

<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ul style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " $" + feed.value.items[i].commentcount + "$";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://multipaste.blogspot.com
&ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

Klik tombol Save untuk menyimpan gadget dan atur penempatan gandget, sesuaikan dengan tampilan blog Anda.

Kustomisasi Script Top Posts Widget Blogger

Script di atas akan menampilkan daftar posting dengan bullet lists jika ingin menggunakan nomor urut ganti kode <ul style pada script di atas dengan kode <ol style> serta </ul> dengan </ol>, lihat kode yang dibold dengan warna biru

Untuk mengatur jumlah daftar postingan yang akan ditampilkan ganti angka 10 yang dibold biru dengan angka yang Anda inginkan

Ganti URL http://multipaste.blogspot.com dengan URL blog Anda.

Silahkan Anda mencobanya, jika script ini bekerja dengan baik dan Anda menyukainya, saya ucapkan Alhamdulillah. Saran dan masukkan Anda akan sangat berarti bagi kami, berpartisipasilah pada bagian komentar. Happy Blogging..

Labels: Blogger Gadgets

Tombol Follow dan Subscribe Via Email dalam Satu Widget Catik

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 4:29 PM with 6 comments

Bismillahirrahmanirrahim

MULTI PASTE - Menggunakan widget social follow serta widget subscribe via email pada sidebar blog adalah merupakan hal penting dan sangat dibutuhkan untuk meningkatkan trafik blog. Rata-rata blog yang pernah saya kunjungi menggunakan kedua widget ini, dan banyak saran dari para 'Master SEO' agar menggunakan widget ini di blog, jika ingin pertumbuhan trafik blog Anda menjadi lebih baik.

Saat ini Google Analytics telah memasukkan social network sebagai salah satu parameter standart dalam menganalisa trafik sebuah situs atau blog. Saya tidak akan membahas terlalu jauh pengaruh widget social network ini terhadap pertumbuhan trafik sebuah blog, karena yang akan menjadi pembahasan utama pada artikel ini adalah bagaimana menggunakan widget social follow dan widget email subscribe yang di gabung dalam satu bundel pada sidebar blog. Anda dapat melihat demonya, klik tombol Live Demo di bawah ini

Widget Social Follow ini didesign oleh Paul Crowe, kemudian saya gabungkan dengan Widget Subscribe Via Email yang di design oleh Mohammad Mustafa Ahmedzai menjadi satu bundel widget social network yang cantik, jika Anda menyukai widget ini ikuti langkah implementasi yang cukup mudah seperti di bawah ini.

Memasang Widget Social Network dan Widget Email Subscribe Pada Sidebar Blog

Untuk memasang widget ini pada sidebar blog tidak terlalu sulit, Anda cukup menambahkan gadget type HTML/Javascript pada Layout blog dan masukkan script di bawah ini ke dalamnya. Agar lebih terinci ikuti langkah Menambahkan Widget Social Network dan Email Subscribe berikut ini.

Pada halaman dashboard blogger klik link Title Blog Anda

Pilih Menu Layout / Tata Letak >> Add a gadget >> Pilih gadget type HTML/Javascript

Copy script di bawah ini dan paste ke dalam kotak content gadget HTML/Javascript, selanjutnya klik tombol Save untuk menyimpan gadget

<style>
.socialfollow {border-bottom:1px dotted #444444;padding-bottom:5px}
a:hover {background-color: transparent;opacity:0.7;}
</style>
<center>
<div class="socialfollow">
<a title="Rss Feed" href="http://feeds.feedburner.com/multipaste" rel="nofollow" target="_blank"><img border="0" src="https://lh4.googleusercontent.com/-eHaZgz-Wcow/UDLwTV4gYNI/AAAAAAAACh4/XysaUHrsI7c/s512/rss_48x48.png" /></a>
  
<a title="Subscribe Via Email Rss" href="http://feedburner.google.com/fb/a/mailverify?uri=multipaste&loc=en_US" rel="nofollow" target="_blank"><img border="0" src="https://lh3.googleusercontent.com/-Yvbk9KzFKkg/UDLwSnvCOJI/AAAAAAAAChw/9eNjOuDW9Ks/s512/mailrss_48x48.png" /></a>
  
<a title="Follow On Twitter" href="http://twitter.com/twitter" rel="nofollow" target="_blank"><img border="0" src="https://lh6.googleusercontent.com/-05AKSlQvAaA/UDLwUfiSDnI/AAAAAAAACiI/pyAhtQh7KvI/s512/twitter_48x48.png" /></a>
  
<a title="Find Us On Facebook" href="http://facebook.com/facebook" rel="nofollow" target="_blank"><img border="0" src="https://lh5.googleusercontent.com/-V9ywu9u77rE/UDLwSC2CdkI/AAAAAAAACho/z978D5IPi28/s512/facebook_48x48.png" /></a>
  
<a title="Add To Circles" href="https://plus.google.com/b/112217312307388887751/112217312307388887751/posts" rel="nofollow" target="_blank"><img border="0" src="https://lh6.googleusercontent.com/-DN33CwUhYO8/UDLwSLMvg1I/AAAAAAAAChs/iGf42gEyqYA/s512/googleplus_48x48.png" /></a></div></center>

<style>
.mp-email{background:url(https://lh3.googleusercontent.com/-9tRrvLnuK08/T5Jv1zOxsGI/AAAAAAAABmc/xb8RV5jWr3Y/s128/email.png) no-repeat 0px 12px;width:300px;padding:10px 0 0 55px;float:left;font-size:1.4em;font-weight:bold;margin:0 0 10px 0;color:#686B6C;}
.mp-emailsubmit{background:#9B9895;cursor:pointer;color:#fff;border:none;padding:3px;text-shadow:0 -1px 1px rgba(0,0,0,0.25);-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font:12px sans-serif;}
.mp-emailsubmit:hover{background:#E98313;}
.textarea{padding:2px;margin:6px 2px 6px 2px;background:#f9f9f9;border:1px solid #ccc;resize:none;box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;width:170px;color:#666;}
</style>

<div class="mp-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=multipaste', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="multipaste" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mp-emailsubmit" value="Submit" type="submit" /></form></div>

Silahkan ganti kode yang diarsir kuning dengan id-social network Anda dan kode yang diarsir hijau dengan title rss feedburner blog anda yang terdapat pada script di atas