4 Tipe Gadget Popular Post Cantik untuk Blogger

Gadget Popular Posts memiliki peran yang sangat penting untuk meningkatkan trafik pengunjung karena semua artikel/postingan terpopuler dapat dengan mudah terindex oleh google dan dengan mudah dilihat oleh pengunjung dan pembaca.

Bagaimana cara membuat gadget Popular Posts?

1. Login ke blogger.com.
2. Pilih menu Template.
3. Klik Edit Template.
4. Cari (Ctrl+F) kode ]]></b:skin> dan copy paste kode di bawah ini diatasnya. Klik Simpan.

Berikut ini saya bagikan beberapa style popular posts widget/gadget yang bisa Anda pilih sesuai dengan selera masing-masing.

Multicoloured Popular Posts Gadget

.sidebar .PopularPosts .widget-content ul li{
height: 100%;
line-height: 22px;
float: left;
clear: left;
list-style-type: none;
overflow: hidden;
color: gray;
}
.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;}
.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}
.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}
.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
}
.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

Popular Posts Gadget with Rounded Borders

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQx2CVx5hDEVzliqEOZR4hqhZ3wxj0EXIYxPaWQ6M1fpzA1jmQxgcVeWo1bGVApAifEh6Cqqs2dNqqzqx6s8GGMfSDg19HnI6tLhgelnHr9SiMH39KBcM5UcY5RSHLSsu2_9InSSPW1I/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:2px solid #6BB5FF;
background:#FFFFFF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
color:#6633FF;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-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);
}

Popular Post Gadget with Rounded Thumbnails

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQx2CVx5hDEVzliqEOZR4hqhZ3wxj0EXIYxPaWQ6M1fpzA1jmQxgcVeWo1bGVApAifEh6Cqqs2dNqqzqx6s8GGMfSDg19HnI6tLhgelnHr9SiMH39KBcM5UcY5RSHLSsu2_9InSSPW1I/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-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);
}

Popular Post Gadget with Thumbnails from Labels

Lain halnya dengan 3 Popular Post Gadget di atas, popular posts gadget berikut ini ditambahkan melalui HTML/Javascript pada Tata Letak/Layout. Berikut cara penggunaannya.

1. Klik Tambah Gadget/Add Gadget.
2. Pilih HTML / Javascript.
3. Copy paste kode di bawah dan simpan.

<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src="googledrive.com/host/0B0ydCMKHxzOIY1ZiZzJGUjJXMkE" type="text/javascript"></script>
<script src="http://LINK URL BLOG/feeds/posts/default/-/NAMA LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script>

Ganti LINK URL BLOG dengan link url blog Anda.
Ganti NAMA LABEL dengan nama label yang akan ditampilkan.

Itu beberapa tipe Popular Posts Gadget yang dapat Anda gunakan di blog blogger/blogspot Anda. Semoga bermanfaat dan terima kasih.

Tambahkan Facebook Comment Box di Blogger

Bagi Anda yang ingin menambahkan Widget Facebook Comment untuk blog Anda khususnya para pengguna blogger.com, seiring dengan banyaknya pengguna Facebook di seluruh dunia.

Apalagi menurut sumber yang dapat dipercaya pengguna Facebook terbesar adalah di Indonesia, itulah sebabnya banyak para blogger memasang Facebook Comment Box di blog mereka. Anda tertarik menggunakannya? silakan ikuti cara pemasangannya di blog Anda berikut ini.

1. Login ke  Blogger.com.
2. Pilih Template.
3. Pilih Edit HTML
4. Setelah itu cari (Ctrl+F) kode <body> dan copy paste kode berikut dibawahnya.

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

5. Setelah itu simpan template.
6. Sekarang pergi ke Tata Letak (Layout) dan Tambah Gadget (Add Gadget).
7. Pilih HTML/Javascript dan copy paste kode di bawah ini.

<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10"></div>

Ganti example.com dengan alamat/link url blog Anda.
Ganti data-width (panjang box komentar) sesuai dengan keinginan Anda.
Ganti data-num-posts (jumlah komentar yang ditampilkan) sesuai keinginan Anda. 

8. Setelah itu simpan.

Itulah cara untuk menambahkan Facebook Comment ke dalam blog blogger/blogspot. Mudah bukan?

Menambahkan Gadget Random Posts di Blogger

Berikut ini saya bagikan cara membuat widget / gadget Random Posts untuk blogger. OK, langsung saja ke cara pembuatannya.

1. Login ke Blogger.com menggunakan akun Anda.
2. Pilih menu Tata Letak / Layout seperti gambar di bawah ini.

3. Setelah itu pilih Tambah Gadget / Add Gadget (lihat gambar di bawah ini).

4. Kemudian pilih HTML/JavaScript (lihat gambar di bawah ini).

5. Setelah itu copy paste kode di bawah ini.

<style type="text/css">
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary=70;
var numofpost=5;
var showdate=false;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<ul style="line-height:10px;">');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<li><a href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"
if(showdate==true){
var pubdate = new Date(entry.published.$t).toDateString();
item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span><br/>";}
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += summary.substring(0,lengthsummary) + " ...</li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>

6. Setelah itu lihat hasilnya. Selesai.

Yang bisa diganti dari source code di atas adalah:
var lengthsummary=70; (70 adalah jumlah karakter huruf yang ditampilkan.)
var numofpost=5; (5 adalah jumlah posting / artikel yang ditampilkan.)
var showdate=false; (Gunakan false untuk menyembunyikan tanggal dan true untuk menampilkannya.)

Membuat Recent Comments Sederhana pada Blogger

Berikut ini saya bagikan cara manambahkan Widget / Gadget Recent Comments pada blog Blogger dengan tampilan yang sederhana agar tidak memberatkan blog Anda.

Baiklah kita lansung saja ke penerapannya.

1. Login dahulu ke Blogger.com dengan akun Anda.
2. Kemudian pilih Layout / Tata Letak seperti gambar di bawah ini.

3. Setelah itu pilih Tambah Gadget / Add Gadget seperti gambar di bawah ini.

4. Kemudian pilih HTML/JavaScript (lihat gambar di bawah ini).

5. Setelah itu copy paste kode di bawah ini.

<style type=text/css>
.rcw-comments {
border-bottom: 1px dotted;
padding-top: 7px!important;
padding-bottom: 7px!important;
}
#rcw-cr {
font-family: Arial,Tahoma;
font-size:9px;
padding-top:7px;
display:block;
}
</style>
<script style=text/javascript>
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");document.write('<div class="rcw-comments">');if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<span class="author-rc"><a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a></span> commented');if(n_rc==true)document.write(' on '+f_rc);

if(o_rc==0){
document.write('</div>');
           }

else{
document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i></div>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i></div>');document.write('');}
    }
}
}
var a_rc=5;
var m_rc=false;
var n_rc=true;
var o_rc=100;
</script><script src=http://NAMA BLOG ANDA/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>

6. Sekarang simpan kode HTML/Javascript tersebut. Selesai.

Anda bisa mengganti kode berikut:
Cari (Ctrl+F) NAMA BLOG ANDA dan ganti dengan url blog Anda.
var a_rc=5; ( 5 merupakan jumlah komentar yang akan ditampilkan. )
var m_rc=false; ( Ganti dengan false untuk menyembunyikan tanggal dan true untuk menampilkannya. )
var n_rc=true; ( Ganti dengan false untuk menyembunyikan Judul Postingan dan true untuk menampilkannya. )
var o_rc=100; ( 100 merupakan jumlah karakter huruf yang akan ditampilkan. )

Selesai dah dan terima kasih telah sempat membaca artikel ini.

Membuat Gadget Recent Posts Bergambar pada Blog

Berikut ini saya akan bagikan satu lagi cara mempercantik blog dan kali ini kita akan membuat tampilan Recent Posts dengan Gambar. Ok, langsung saja ke cara pembuatannya.

1. Login ke blogger.com
2. Pilih Tata Letak (Layout) --> Tambah Gadget (Add Gadget) --> Pilih HTML/Javascript
3. Copy paste script di bawah ini.

<script type="text/javaScript">
imgr = new Array();
imgr[0] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[1] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[2] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[3] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[4] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 0;
borderColor = "";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = false;
icon = " ";
text = "Komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5 ;
home_page = "http://oknoburogu.blogspot.com/";
</script>
<script src="http://rhoedalismev2.googlecode.com/files/removeHtmlT.js" type="text/javascript"></script>

numposts = 5 untuk jumlah artikel yang ditampilkan.
home_page = ganti dengan alamat blog Anda.

Membuat Follow Box di Blogger

Pada awal pagi hari ini saya akn membagikan kepada Anda sebuah cara pembuatan Widget/Gadget Blogger yang diberi nama Follow Box Twitter yang berfungsi untuk menampilkan orang-orang yang telah mem-follow akun twitter Anda. Berikut ini langkah-langkah pembuatannya. 

1. Masuk ke akun Blogger Anda.
2. Pilih Layout (Tata Letak) --> Add Gadget (Tambah Gadget) --> HTML/Javascript.
3. Paste kode berikut ini.

<script type="text/javascript">
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://moopz.com/connect.php?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 235px; height: 240px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox">
<iframe allowtransparency="true" class="FB_SERVER_IFRAME" frameborder="0" name="fbfanIFrame_0" scrolling="no" src="http://moopz.com/connect.php?user=Akun Twitter Anda" style="border-bottom-style: none; border-color: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial; height: 240px; width: 235px;"></iframe>
</div>
<script type="text/javascript">fanbox_init("Akun Twitter Anda");
</script>

4. Cari (Ctrl+F) Akun Twitter Anda dan ganti dengan nama akun twitter Anda.
5. Simpan dan selesai.

Tambah Gadget "Subcribe by Email" di Blogger

Untuk postingan yang ke tiga dihari ini saya akan bagikan untuk Anda, Bagaimana cara membuat "Subcribe by Email" di blogger? Ok, kita langsung saja ke langkah pembuatannya.

1. Masuk ke akun Blogger Anda.
2. Pilih Layout (Tata Letak) --> Add Gadget (Tambah Gadget) --> HTML/Javascript.
3. Paste kode berikut ini.

<style>
    #dgenera-blog {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }

    #email-news-subscribe .email-box{
        padding: 5px 5px;
        font-family: "Arial","Helvetica",sans-serif;
       height:38px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333} 

#email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#666 0,#333 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
    
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:white;
      
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}

    #email-news-subscribe .email-box input.subscribe:hover{
    
        background-image:-moz-linear-gradient(top,#333,#666);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
    
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:#FFFFFF;
     }

    #other-social-bar {
        padding: 0px;
        overflow: hidden;
           height:37px;
         margin-top:-8px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}

    #other-social-bar .other-follow {
        float: left;
        overflow: hidden;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow li {

        display:inline;
        border:0;
      }

    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#666;
        font-weight: bold; font-family:arial;
        display:inline;
        }
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DXPRyIqqhrVGAxWm2Yw5GfoMap6Vh4yZguRo8LSFld0LzAdRzFyH-nBoIIbVvE7X-wYTcwDkdrlTwmERPTaypH7p0UeACDzbSyXklb84W48svNnhBmzcQUzZ8YEKHEAC9lCWctgan3Q/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2iILj0Yv_2Kkzynl_ssY_JAfPE09sWCmNt82xKCzZk-XLCcawnP6FVEMv6UyDUa2ocmwZfXLVbNkCFbXSy7WSpOO-zy_I2H-FHR1QOK_s4voJ0uq4WWjWmAkPdo7cxdc22UfyqvMgG1I/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD06uH63NzLyz9YFdQg8yIXxAPJD1M0339EILo3Q32IQDwcYXteCfReQkkmziScTYfQWPrusY9aC3iXRZ5dVu6yBj0dmPpAaGdG9d1T6-zvgO7Q1Jipe4YE03adA1GGpJ2bmU7d4lh_wE/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkqEvVDqHZ7gV3reLc86IfcYf5lq7TAwfmACwbJS9hIeTEmYheYHLiBsXsLrljr-wUCgV-6PTw4tq6YiI7tlwu_rjluDQ3pp19HIwNFucoZtq9JrG6N7uHxdJcYKWLO08RjxaAMJ3yxwrz/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 0px 95px;
    min-height:100px;
    margin: 0px;
    width: 183px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: rgb(51, 51, 51);
}

.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family:  impact; 
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
</style>
<!--[if IE]>
<style>
    #email-news-subscribe .email-box input.subscribe{
        background: #333;
    }
</style>
<![endif]-->
<center>
<div id="dgenera-blog">
<div class="emailicon">
Dapatkan artikel terupdate dari kami, Gratis!</div>
<div id="email-news-subscribe">
<div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=oknoburogu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" gtbfieldid="10" id="email" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" style="font-size: 11px; width: 160px;" type="text" value="Enter your email here..." />

<input name="uri" type="hidden" value="oknoburogu" /> <input name="loc" type="hidden" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Ikuti" /> </form>
</div>
</div>
</div>
</center>

4. Cari (Ctrl+F) dan ganti oknoburogu dengan ID Feedburner Anda.

Jika Anda belum mengetahui dan belum tahu cara mengecek ID/Feed Feedburner Anda. Anda bisa mengecek artikel selanjunya di Cara Melihat ID/Feed Feedburner.

Tambah Tombol "back to top" di Blogger

Berikut ini saya bagikan sebuah tutorial blogger yaitu untuk menambah/membuat tombol "back to top" yang berfungsi untuk kembali ke atas/awal halaman. Ok, langsung saja ke langkah pembuatannya.

1. Masuk ke akun Blogger Anda.
2. Pilih Layout (Tata Letak) --> Add Gadget (Tambah Gadget) --> pilih HTML/Javascript.
3. Pate kode berikut ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxYj_VCbuk6RqzuqRG1i-y84gfvQKxPnxLN2kDuVKIGvYZDdhPLEO47INgVEnLTefBnhkA7Go5V8fxQCJMObBc_b_l3Qofg0yp5E7Ob1oMBxxEY7_YXahaNa3cNe9j0nChWxQccXlKuwM/s1600/navigate-up-icon.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">
'+mainobj.controlHTML+'</div>
')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>