Bagaimana membuat widget top komentator



Top comments

Bagaimana sih cara membuat widget Top komentar ?? apasih top komentator itu ?? nah itulah beberapa pertanyaan – pertanyaan di atas yang akan saya jawab melalui artikel di bawah ini.
sebelum ke topik akan saya jelaskan dulu apasih widget top komentator ??yaitu sebuah widget untuk blog yang berfungsi menginformasikan siapa yang paling banyak berkomentar di suatu blog kita.Widget top komentator ini di lengkapi dengan avatar yang berkomentar , peringkat komentar dan jumlah komentar yang pastinya menarik untuk diterapkan di blog kita.
Widget ini bisa anda letakan di halaman baru blog anda atau di gadget di sidebar anda,silahkan anda lihat Demonya disini  Bagaimana apakah anda tertarik ?? Nah,jika anda tertarik untuk menerapkannya di blog anda ikutilah langkah langkah di bawah ini.

Step by step

  • Seperti biasa Login dulu ke akun Blog anda, kemudian masuk ke menu dashboard
  • Jika anda ingin menambahkan widget top komentator ini di halaman/page baru blog anda maka anda perlu masuk ke menu halaman/page kemudian pilih new page/halaman baru dan masukan script di bawah ini didalam mode HTML
  • Tapi jika anda ingin memasang widget untuk gadget baik di sidebar maupun di footer maka yang anda lakukan adalah masuk ke menu Tata Letak/Layout,kemudian tambahkan gadget dan pilih HTML/Javascript ,Beri judul pada kolom content sesuka anda dan pastekan script di bawah ini.

<style type="text/css">
.top-commenter-line 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);
margin-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;}
.top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;}
.top-commenter-avatar {vertical-align:middle;width:30px;height:30px;
}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by fendevils & MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://fendevils.blogspot.com//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "Nama Authore"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJBkQdKub96K9nYLB05Yw9cR-pdynNUm4lbTehaEz5-8cEB5slS1uvwhCkJaO3dWRj4WNujJhqJImMe4PjlBChZAYCVtxXwgUNH8WnGMiDeJm9Opl4dM4YzeDpgyl0aU9R0nDI8_fFYc/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {   for(var i=0;i<this.length;i++) if(this[i]==obj) return i;   return -1;
}}
function replaceTopCmtVars(text, item, position)
{   if(!item || !item.author) return text;   var author = item.author; 
   var authorUri = "";   if(author.uri && author.uri.$t != "")     authorUri = author.uri.$t; 
   var avaimg = urlAnoAvatar;   var bloggerprofile = "http://www.blogger.com/profile/";   if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)     avaimg = author.gd$image.src;   else {     var parseurl = document.createElement('a');     if(authorUri != "") {       parseurl.href = authorUri;       avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;     }   }   if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")     avaimg = urlMyAvatar;   if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")     avaimg = urlNoAvatar;   var newsize="s"+sizeAvatar;   avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");   if(cropAvatar) newsize+="-c";   avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/"); 
   var authorName = author.name.$t;   if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)     authorName = txtAnonymous;   var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';   if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>'; 
   if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)     authorName = authorName.substr(0, maxUserNameLength-3) + "...";   var authorcode = authorName;   if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>'; 
   text = text.replace('[user]', authorcode);   text = text.replace('[image]', imgcode);   text = text.replace('[#]', position);   text = text.replace('[count]', item.count);   return text;
} 

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {   var one_day=1000*60*60*24;   var today = new Date(); 
   if(urlMyProfile == "") {     var elements = document.getElementsByTagName("*");     var expr = /(^| )profile-link( |$)/;     for(var i=0 ; i<elements.length ; i++)       if(expr.test(elements[i].className)) {         urlMyProfile = elements[i].href;         break;       }   } 
   for(var i = 0 ; i < json.feed.entry.length ; i++ ) {     var entry = json.feed.entry[i];     if(numDays > 0) {       var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601       var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]); 
       //Calculate difference btw the two dates, and convert to days       var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));       if(days > numDays) break;     }     var authorUri = "";     if(entry.author[0].uri && entry.author[0].uri.$t != "")       authorUri = entry.author[0].uri.$t; 
     if(excludeMe && authorUri != "" && authorUri == urlMyProfile)       continue;     var authorName = entry.author[0].name.$t;     if(excludeUsers.indexOf(authorName) != -1)       continue; 
     var hash=entry.author[0].name.$t + "-" + authorUri;     if(topcommenters[hash])       topcommenters[hash].count++;     else {       var commenter = new Object();       commenter.author = entry.author[0];       commenter.count = 1;       topcommenters[hash] = commenter;     }   }   if(json.feed.entry.length == 200) {     ndxbase += 200;     document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');     return;   } 
   // convert object to array of tuples   var tuplear = [];   for(var key in topcommenters) tuplear.push([key, topcommenters[key]]); 
   tuplear.sort(function(a, b) {     if(b[1].count-a[1].count)         return b[1].count-a[1].count;     return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;   }); 
   // list top topcommenters:   var realcount = 0;   for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {     var item = tuplear[i][1];     if(item.count < minComments)         break;     document.write('<di'+'v class="top-commenter-line">');     document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));     document.write('</d'+'iv>');     realcount++;   }   if(!realcount)     document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>




  • jika sudah lakukan Pratinjau/Preview terlebih dahulu dan jika berhasil silahkan Save :c:


KET :
Silahkan anda lihat kode yang saya tandai berwarna merah di atas.
var maxTopCommenters = 5 : maksudnya berapa jumlah peringkat top komentar yang ditampilkan.
Nama Authore                          : silahkan di isi dengan nama anda sesuai display name di komentar jika anda tidak ingin menampilkannya di top komentator


Last note


Adapun kegunaan dari widget ini, bisa anda maknai sebagai apresiasi untuk pengunjung setia anda atau undangan untuk menarik perhatian dan keinginannya agar lebih giat berkomentar diblog anda. Sehingga anda telah memberi reward kepada pembaca setian yang rajin berkomentar di blog anda :) mungkin anda juga ingin membaca cara membuat komentar facebook dan blog berdampingan sekian dulu semoga berhasil

Tutorial membuat Label flash animation



label flash
Tutorial kali ini adalah membuat sebuah Widget Label yang unik dan keren yang contohnya bisa anda lihat seperti pada gambar di atas,bedanya label flash ini dengan label yang lainnya adalah ,label flash ini yang apabila kursor kita mengarah ke label flash tersebut maka label tersebut akan bereaksi dengan efek Flow berputar-putar,apabila para pengunjung blog kita ingin memilih label misalnya label windows caranya simple seperti biasa tinggal klik maka akan menuju ke halaman label yang dipilih tersebut.

Tutorial

  • Pertama-tama seperti biasa login ke akun blog anda.
  • Kemudian pilih Rancangan atau template, untuk berjaga-jaga silahkan Back-up terlebih dahulu template sobat.
  • Kemudian cari kode yang seperti di bawah ini,cara cepatnya tekan Ctrl + F kemudian masukan kode di bawah ini,tetapi apabila tidak di temukan cari lagi secara manual dengan saksama pasti ada kok.
<b:section class="sidebar" id="sidebar" preferred="yes">
  • Setelah ketemu copy kan kode di dibawah ini dan letak dibawah kode diatas ..
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Labelflash by <a href='http://www.fendevils.blogspot.com/'>fendevils</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;260&quot;, &quot;260&quot;, &quot;7&quot;, &quot;#151515&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0xFFFFFF&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='10'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
  • Selesai,kemudian klik Pratinjau/Preview untuk melihat hasilnya kalau berhasil silahkan Save templatenya
KET :
  • 0xFFFFFF : warna tulisan label
  • #151515 : warna background
  • 260 dan 260 adalah lebar dan tingginya kotak label flash

Last note

Demikian tutorial membuat widget Labelflash animation ,semoga tutorial di atas dapat membantu sobat dalam menghias blog sobat, untuk tutorial lainnya mengenai blog silahkan cek di daftar isi ,wassalam :c:

Cara membuat random post sederhana di blog



Tutorial kali ini saya akan share mengenai random post  , apa itu random post ?? random post ialah posting acak yang fungsinya ialah agar mempermudah pengunjung blog kita untuk tetap stay di blog kita dengan adanya random post para pembaca dapat membaca artikel artikel yang kita tulis dahulu dan di tampilkan kembali di widget random post tersebut.
Random post kali ini dibuat dengan Valid HTML5 yang membuat widget tersebut lebih SEO , Dengan Kita Memasang Widget Random Post yang Valid HTML5 akan Membuat ini disukai Google. Selain itu dengan dipasangnya random post ini akan membuat para pembaca blog penasaran dan ingin membaca artikel yang ada di random post tersebut :c: baiklah lanngsung saja caranya adalah :

  • Login Ke Akun Blogger Anda Seperti Biasanya
  • Masuk Ke Menu Tata Letak Blog Anda
  • Klik Tambah Gadget > HTML/JavaScript 
  • Copy Kode dibawah dan Pastekan di Gadget HTML Tersebut
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;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>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://fendevils.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>
Keterangan : Kode yang Berwarna Merah Ganti Sesuai jumlah Post yang anda suka.
                   Kode yang Berwarna Biru Ganti Sesuai Alamat Blog Anda
  • Kemudian Terakhir Klik Save

Membuat Artikel Terkait dengan Gambar di Blog



Posting kali ini saya akan share tentang Widget artikel terkait (related posts) yang disertai dengan thumbnail ini memang sangat mirip dengan widget dari LinkWithin. Sudah pernah menggunakan LinkWithin ? jika belum, sobat bisa lihat contoh gambar dibawah, nah seperti itu kira-kira bentuknya. Setiap bagian akan disorot dalam warna pelengkap ketika mouse berada di atasnya, dan ketika seluruh bagian ini di klik akan mengarah ke URL dari "pos terkait" yang ditampilkan. artikel terkait sendiri sangat penting agar blog kita lebih SEO dan pengunjung lebih mudah untuk membaca artikel yang berkaitan

pict 
Berbeda dengan LinkWithin yang mengacak semua post yang ada untuk ditampilkan, widget ini sesuai dengan label atau kategori dari blog kita..


Gambar thumbnail ditampilkan untuk masing-masing pos terkait yang dihasilkan dari thumbnail posting yang bersangkutan. Oleh karena itu, hanya gambar yang telah Anda upload ke setiap blog post yang akan ditampilkan. Dan selain bagus dan rapi, script ini tidak membuat blog menjadi berat.

Caranya  Seperti biasa silahkan login dulu ke Blogger. Sip ! sekarang ikuti langkah-langkahnya berikut ini :




  1. Sekarang tuju Edit HTML.
  2. Jangan lupa backup template sobat dulu dengan mengklik Download Template Lengkap.
  3. Klik Expand Template Widget.
  4. Kemudian letakkan kode berikut ini, tepat diatas kode </head>
    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }
    
    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }
    
    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
     
     
  5. Kemudian cari kode berikut ini :

    <div class='post-footer-line post-footer-line-1'>
     


  6. atau jika tidak ada, cari kode seperti dibawah ini :


    <p class='post-footer-line post-footer-line-1'>



  7. Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah kode diatas :

    <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle="Related Posts";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->
  8. Setelah selesai semua, jangan lupa Simpan Template.
Untuk mengganti jumlah related posts-nya, silahkan edit var maxresults=5, ganti angka 5 dengan angka yang sesuai lebar postingan blog sobat. Sedangkan untuk mengganti judul dari related posts, silahkan edit var relatedpoststitle="Related Posts", ganti dengan judul yang sobat inginkan.

Semoga bermanfaat !  :c:

Membuat Komentar Facebook di Blog berdampingan



Membuat Komentar Facebook di Blog selain dapat membuat blog terlihat lebih bagus dan rapih, para pengunjung pun akan lebih di mudahkan dalam berinteraksi dengan anda melalui Kotak komentar karena sebagian pengunjung anda pastinya ada yang sudah login ke akun Facebook, jadi mereka pun akan ebih mudah berkomentar.

Tetapi jika kita menambahkan komentar Facebook dan etap mempertahankan Kotak komentar Default blog tentu akan membuat blog keliatan tidak dinamis karena terlalu memanjang ke bawah, nah oleh sebab itu saya akan memberikan Cara Membuat Komentar Facebook Berdampingan dengan Komentar Blog.

Berikut adalah Screenshot nya


Membuat Komentar Facebook Berdampingan dengan Komentar Blog
Bagaimana ingin mencoba Komentar berdampingan tersebut.
1. Login ke Blog
2. Rancangan - Edit HTML
3. Untuk menghindari keselahan, Backup template anda terlebih dahulu dengan Download lengkap
4. Centang "Expand Template Widget"
5. Cari Kode <div class='comments' id='comments'>
Biasanya akan terdapat 2 kode tersebut di template anda
Copy kode di bawah ini tepat di bawah kode <div class='comments' id='comments'> yang ke 2

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

2 : Jumlah Komentar Facebook yang akan di tampilkan
400 : Lebar Komentar Facebook

6. Lalu Cari kode </head>
Copy Kode dibawah ini tepat diatas kode </head>

 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID Facebook' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

ID Facebook : Ganti dengan ID Facebook anda yang terletak di bagian belakang browser URL Profil Facebook anda, Misalkan http://www.facebook.com/Fendistinks ID Facebooknya adalah Fendistinkls

7. Cari kode /* Comment atau #comments
Setiap Template mempunyai struktur kode yang berbeda-beda, jadi cari saja kode yang mirip dengan kode diatas
Copy kode berikut di bawah kode diatas tadi

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

8. Simpan

Selesai, sekarang anda sudah mempunyai Komentar Facebook Berdampingan dengan Komentar Blog :c:

Cara Membuat Random Post Bergerak Di Blog



Kali ini mau berbagi bagaimana membuat recent post random/mengacak dengan thumbail.. mungkin ini bisa membantu sobat kalau ada posting yang lama dan jarang di lihat orang lain lagi, dengan adanya recent post ini, karena berkerja menampilkan posting secara random, ada kesempatan posting sobat yang sudah lama dan kusam akan muncul kembali dan pengunjung pun bisa melihatnya juga.. lumayankan untuk menambahkan popularitas untuk post sobat yang sudah lama.. :b:

Fitur
  • Berganti post dengan cara Bergerak Ke Bawah
Cara
  1. masuk ke Tata Letak
  2. Tambahkan Gadget
  3. cari HTML/JavaScript
  4. masukan kode di bawah ini...
  5. Lalu save.. :)
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>

Keterangan :
  1. kode yang warna Hijau adalah kecepatan untuk berpindahnya post ke post lain,, jika perlu sobat bisa ubah kecepatannya..
  2. kode yang warna Pink adalah waktu berhentinya post/di pause.. bisa di ubah juga jika perlu..
  3. kode yang warna Orange adalah jumlah post yang akan di tampilkan di recent post. sobat bisa mengubahnya sesuka hati..  :)
nanti hasilnya akan seperti ini..
Cara Membuat Random Post Bergerak Di Blog
saya ambil dari blog saya sendiri.. hehee.. :D ,menarik tidak..? :D semoga bermanfaat saja untuk sobat semuanya.. saya hanya berbagi.. berbagi itu indah loh sobat.. hahaa.. :D ,jangan lupa tinggalkan komen yaa..? terima kasih.. :)

cara menambahkan emotion di kotak komentar blog



kali ini saya akan memberikan tutorial cara menambahkan emotion di kotak komentar blog sobat 
seperti ini contohnya :


Berikut langkahnya
1. Sign in ke blog - Rancangan - Edit HTML
2. Download Template Lengkap sebagai backup
3. Centang Expand Template Widget
4. Cari (gunakan Ctrl + F pada papan keyboard) kode </body>
5. Pasang kode berikut diatasnya <script src='http://moalmules.googlecode.com/files/comment-content-p-emoticon.js' type='text/javascript'/>

 
6. Cari kode <b:if cond='data:post.embedCommentForm'>
7. Pasang kode ini dibawahnya,apa bila kode tersebut ada 2 buah maka pilih lah yang pertama

<div style='width:550px;text-align: center;border: 1px solid #ccc;padding:  2px 2px;margin-top:  15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'> <b> <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-001.gif' width='30'/> :a: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-005.gif' width='30'/> :b: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-009.gif' width='30'/> :c: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-013.gif' width='30'/> :d: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-003.gif' width='30'/> :e: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-020.gif' width='30'/> :f: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-018.gif' width='30'/> :g: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-001.gif' width='30'/> :h: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-002.gif' width='30'/> :i: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-005.gif' width='30'/> :j: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-007.gif' width='30'/> :k: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-009.gif' width='30'/> :l: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-008.gif' width='30'/> :m: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-004.gif' width='30'/> :n: </b>     </div>
 atau download kode emotionnya di sini
8.kemudian letakan sekali lagi kode emotion di atas tepat  di bawah kode   <h4 id='comment-post-message'><data:postCommentMsg/></h4>

9. Simpan Template dan tes hasilnya

Catatan: Tips ini akan berhasil bila template mempunyai kode comment-body atau dengan trik mengganti kode kolom komentarnya dengan kode comment-body


selamat mencoba dan semoga berhasil :c:

Back to Top