Membuat widget “Sharing Is Sexy” di postingan Blog



sharering is sexy 
Widget “Sharing Is Caring” atau “Sharing Is Sexy”  adalah sebuah widget yang berfungsi untuk membagikan sebuah artikel, jadi disini kita menyediakan sebuah sarana untuk para visitor yang ingin membagikan artikel kita di social medianya .
dibandingkan dengan widget share yang lain, Fungsinya sebenarnya sama saja yaitu untuk menarik perhatian pengunjung blog agar mau share artikel di blog anda ke berbagai jejaring sosial seperti Facebook, Twitter, RSS, dll. Melainkan yang menarik didalam widget ini adalah struktur widget  yang  memiliki design lebih keren dan menarik juga lebih enak di pandang.
sharing is sexy Di sisi lain, widget ini juga mempunyai fungsi untuk meminimalisir ruang blog karena tampilan dari widget ini sangat simple dan tidak memakan banyak ruang yang nantinya bisa merusak pemandangan dan malah mengganggu pengunjung blog. Berikut cara memasang Widget Sharing Is Sexy dibawah postingan blog :

Tutorial

  1. Login ke akun blog anda ,Back up template jika perlu
  2. Ke menu Template >> Edit HTML
  3. Cari kode </head> (gunakan Ctrl+F untuk mempermudah pencarian), lalu letakkan kode Di bawah  ini tepat diatas kode </head>
    <style type='text/css'>
    div.sexy-bookmarks {
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
    position:relative;
    width:540px;
    }
    div.sexy-bookmarks span.sexy-rightside {
    width:17px;
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
    position:absolute;
    right:-17px;
    }
    div.sexy-bookmarks ul.socials {
    margin:0 !important;
    padding:0 !important;
    position:absolute;
    bottom:0;
    left:10px;
    }
    div.sexy-bookmarks ul.socials li {
    display:inline-block !important;
    float:left !important;
    list-style-type:none !important;
    margin:0 !important;
    height:29px !important;
    width:48px !important;
    cursor:pointer !important;
    padding:0 !important;
    }
    div.sexy-bookmarks ul.socials a {
    display:block !important;
    width:48px !important;
    height:29px !important;
    font-size:0 !important;
    color:transparent !important;
    }
    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
    background:url('http://i44.tinypic.com/1znbj83.png%27') no-repeat !important;
    }
    .sexy-furl {
    background-position:-300px top !important;
    }
    .sexy-furl:hover {
    background-position:-300px bottom !important;
    }
    .sexy-digg {
    background-position:-500px top !important;
    }
    .sexy-digg:hover {
    background-position:-500px bottom !important;
    }
    .sexy-reddit {
    background-position:-100px top !important;
    }
    .sexy-reddit:hover {
    background-position:-100px bottom !important;
    }
    .sexy-stumble {
    background-position:-50px top !important;
    }
    .sexy-stumble:hover {
    background-position:-50px bottom !important;
    }
    .sexy-delicious {
    background-position:left top !important;
    }
    .sexy-delicious:hover {
    background-position:left bottom !important;
    }
    .sexy-yahoo {
    background-position:-650px top !important;
    }
    .sexy-yahoo:hover {
    background-position:-650px bottom !important;
    }
    .sexy-blinklist {
    background-position:-600px top !important;
    }
    .sexy-blinklist:hover {
    background-position:-600px bottom !important;
    }
    .sexy-technorati {
    background-position:-700px top !important;
    }
    .sexy-technorati:hover {
    background-position:-700px bottom !important;
    }
    .sexy-myspace {
    background-position:-200px top !important;
    }
    .sexy-myspace:hover {
    background-position:-200px bottom !important;
    }
    .sexy-twitter {
    background-position:-350px top !important;
    }
    .sexy-twitter:hover {
    background-position:-350px bottom !important;
    }
    .sexy-facebook {
    background-position:-450px top !important;
    }
    .sexy-facebook:hover {
    background-position:-450px bottom !important;
    }
    .sexy-mixx {
    background-position:-250px top !important;
    }
    .sexy-mixx:hover {
    background-position:-250px bottom !important;
    }
    .sexy-script-style {
    background-position:-400px top !important;
    }
    .sexy-script-style:hover {
    background-position:-400px bottom !important;
    }
    .sexy-designfloat {
    background-position:-550px top !important;
    }
    .sexy-designfloat:hover {
    background-position:-550px bottom !important;
    }
    .sexy-syndicate {
    background-position:-150px top !important;
    }
    .sexy-syndicate:hover {
    background-position:-150px bottom !important;
    }
    .sexy-email {
    background-position:-753px top !important;
    }
    .sexy-email:hover {
    background-position:-753px bottom !important;
    }
    </style>

  4. Langkah selanjutnya cari kode <data:post.body/> Kemudian letakan kode di bawah ini di bawahnya
    Catatan :
    Jika blog anda sudah menggunakan fungsi Read More, maka biasanya akan terdapat 2 kode bahkan lebih, maka Letakkan kode dibawah ini setelah kode <data:post.body/> yang pertama, jika belum sesuai maka taruh dibawah kode <data:post.body/> yang kedua.
    <div class='sexy-bookmarks'>
    <ul class='socials'>
    <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-syndicate'><a href='http://feeds.feedburner.com/Fendevils' title='Subscribe to RSS'/></li>
    <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    </ul>
    <span class='sexy-rightside'/></div><a href="http://fendevils.blogspot.com" target="_blank">Get Widget</a>

  5. Ganti kode yang saya tandai merah dengan id feedburber anda
  6. save template

Widget recent comment dengan efek avatar dan tooltip



Membuat dan memasang widget recent comment/komentar terakhir pada sebuah blog merupakan langkah yang penting,artinya kita menginformasikan kepada pembaca blog bahwa artikel mana yang sekarang banyak di diskusikan/dibahas pada blog tersebut sehingga pembaca blog tersebut tertarik ataupun ikut serta dalam berdiskusi.
Widget recent comment berikut di lengkapi dengan avatar dan stylelist dengan css dengan tambahan efek tooltip.previewnya seperti di bawah ini :
membuat widget recent comment dengan avatar

Tutorial

  1. Login ke akun blogger anda
  2. Pada dasbor >> Pilih Tata Letak >> Add Gadget >> HTML/JavaScript
  3. Kemudian Copy dan pastekan kode di bawah ini ke dalamnya :
    <style type="text/css">
    #komentar {background: #fff; border:1px solid #8181F7;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;margin:5px 0;padding:5px;}
    #komentar ul{margin:0;padding:0px;list-style: none;}
    #komentar ul li:first-child {border-top:none;}
    #komentar ul li {height:46px; background: white; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border:1px solid #8181F7;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;margin:5px 0;padding:5px;}
      
    #komentar ul li:last-child {border-bottom: none;}
    #komentar ul li:hover {background: whitesmoke;
    -moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;margin:5px 0;padding:5px;}
    #komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;}
    #komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
    #komentar .gamen>img { border: 2px solid #ffffff;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #222222;background: url(http://tipstrikblogging.googlecode.com/files/Avatar%20Blogger%20Comments.jpg)repeat-x;}
    #komentar ul li div.ismen {color:#333;text-shadow:-1px -1px 1px #ccc;}
    #komentar .ismen {display: block;font-size: 1em;font-style: italic;line-height: 1.2;padding: 2px 4px 2px 0;}
    #komentar .gamen>span{width: 150px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1em;font-weight:bold;color: #212121;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid #5858FA;background: rgba(255,255,255,0.7);text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 100px;opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
    #komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
    #komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid #5858FA;}
    #komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;}
    </style>

    <div id="komentar">
    <ul>
    <script type="text/javascript">
    //<![CDATA[
    var jmlkomentar = 8;
    var jmlkarakter = 60;
    //]]></script>
    <script src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar-Tooltip.js" type="text/javascript"></script>
    <script src="http://fendevils.blogspot.com/feeds/comments/default?alt=json&amp;callback=tampilkankomentar" type="text/javascript"></script>
    </ul>
    </div>
    <small></small><br />
    <div style="font-size: 90%; text-align: right; text-shadow: 2px 2px 2px #adadad;">
    <small><a href="http://fendevils.blogspot.com” target="_blank" title="Widget Recent Comment">Get This Widget</a></small></div>
  4. ganti URL di atas dengan URL blog anda , anda dapat mengedit warna widgetnya tinggal utak – atik saja cssnya.
  5. jika sudah , save template dan lihat hasilnya Demikian Tutorial membuat widget recent comment kali ini semoga bermanfaat :c:
referensi: Tipstrikblogging.com

Modifikasi Label cloud menjadi Full color



label


jika sebelumnya saya share mengenai cara membuat label animasi flash, kali ini saya share lagi tetapi dalam bentuk atau style yang berbeda?? tampilannya lebih simple dan dinamis, jika label animasi flash yang saya bagi sebelumnya label tag cloudnya hanya satu warna kali ini saya variasi menjadi berwarna warni,sehingga warna tag labelnya berbeda-beda.

Berikut kode CSS yang di pakai

/**Fullcolor Label By http://fendevils.blogspot.com**/
#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#E95D0C;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#ff8c00;font-size:11px;}
#Label1 .label-size-2 a {background:#556b2f;font-size:13px;}
#Label1 .label-size-3 a {background:#cd5c5c;font-size:14px;}
#Label1 .label-size-4 a {background:#B32A32;font-size:16px;}
#Label1 .label-size-5 a {background:#66CC00;font-size:18px;}
#Label1 .cloud-label-widget-content span a:hover {background:#B32A32;}

Tutorial

  1. Login Ke blog anda kemudian dari menu dashboard pilih Template /rancangan
  2. cari kode ]]></b:skin> Gunakan Ctrl+F pencarian cepat,kemudian Copy dan letakan kode CSS tersebut di atasnya
  3. Klik save dan lihat hasilnya

KETERANGAN

Silahkan anda ganti kode yang saya beri tanda warna merah dengan kreasi anda sendiri

Last note

Kode dan tutorial diatas saya dapatkan dari beberapa blog teman dan Tutorial diatas saya rasa sudah cukup detail , jika anda masih kesulitan silahkan berikan pertanyaan anda di kotak komentar di bawah ini ..open your mind and keep blogging :c:

Membuat komentar threaded style bertingkat




Setiap Blog atau web pastinya menyediakan para pengunjung atau pembaca untuk berkomentar,dan pastinya komentar itu sangat penting dalam hal berdiskusi antara penulis dan pembaca.Akan tetapi sering kali kita kurang puas dengan tampilan komentar yang deffault dari bawaan blogger.Para pembaca pun jadi enggan berkomentar jika tampilan komentarnya terlalu garing.
Komentar style bertingkat ini saya dapatkan dari belajar di blognya kang ismet,adapun kelebihan-kelebihan dari komentar threaded ini yaitu :
  1. Instalasi lebih mudah
  2. tanpa pop up
  3. ada emoticon
  4. bisa menampilkan kode,gambar,dan video dari youtube
Jadi bagaimana cara membuat tampilan komentar biar stylelist ?? baiklah akan saya uraikan tutorialnya sedetail detailnya setajam silet :c: #ehh

Tutorial

Sebelum memulai aksi ini sebaiknya anda back up dulu template anda,udah taukan cara back up template,kalau belum silahkan browsing di google :)
  • Masuk ke menu Template kemudian edit html
  • Cari kode <b:include data='post' name='threaded_comments'/> kemudian anda ganti semua kode itu dengan : 
<b:include data='post' name='comments'/>
catatan : jika anda tidak menemukan kode di atas lanjut ke langkah berikutnya
  • Selanjutnya ganti semua kode antara <b:includable id='comments' var='post'> sampai </b:includable> ,Sehingga contohnya seperti ini .
<b:includable id='comments' var='post'>
Kode yang harus anda ganti
</b:includable>
  • Ganti dengan kode berikut :
<style type='text/css'>
#comments {}
#comments h3 {margin-bottom:15px;font-size:18px;}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
background:#fcfcfc;
padding:4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-weight: bold;
padding: 5px 0 0 0;
font-size: 13px;
text-decoration: none;
}
.comment_admin .comment_name  {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background:#ECF3F7;
}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#f0f0f0;
padding:10px;
font-size:13px;
font-weight:bold;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
margin-top:2px;
}
.comment_body{
margin-top:-72px;
margin-left:66px;
background:#fcfcfc;
border:1px solid #ddd;
padding:10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #666;
border:1px solid #f1f1f1;
font-size: 13px;
word-wrap:break-word;
background:#fff;
padding:10px;
}
.comment_inner {
padding-bottom: 5px;
margin: 5px 0 5px 0;
}
.comment_child .comment_wrap {padding-left: 7%;}
.comment_reply {
display: inline-block;
margin-left:-5px;
padding: 1px 11px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #ccc;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment-form p {
background: white;
padding: 7px 10px 7px 10px;
margin: 5px 0 5px 0;
color: #888;
font-size: 13px;
line-height: 20px;
width:94%;
}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment-delete img{float:right;margin-left:10px;}
</style>

<div class='comments' id='comments'>
    <a name='comments'/>
 <b:if cond='data:post.allowComments'> 
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </b:if>
                
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
   </span>
  </b:if>
                        
  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
                                                                              
   <div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>                                                                                      
     <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if> 
     
    <div class='comment_header'>
                               <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <data:comment.authorAvatarImage/>
                                 </div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a>
     </div>
                          
     <div class='clear'/>
    </div> 
          
    <div class='comment_body'>
                                      <span class='comment_arrow'/>
     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>        
                  <span class='comment_service'>
                      <b:include data='comment' name='commentDeleteIcon'/>
      <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'>                   <data:comment.timestamp/></abbr></span>
  </span></div> 
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
                        <div class='clear'/>
                       
     </b:if>
                                                       
    </div>                          
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
            
    <div class='comment_child'/>
    <a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>               
    </div>
   </b:loop>               
   </div>     
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
     <span class='paging-control-container'>
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form'>          
          
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
     <h3 id='comment-post-message'><data:postCommentMsg/></h3>
      <div class='comment_emo_list'/>                                                                                               
       <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>

                    
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
      
       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
       <script type='text/javascript'>
       
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment
        Display_Emo = false;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = true;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = true;//Auto replace link image,  ketik "false" untuk mendisable.
                                Replace_Force_Tag = true;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
       
        //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
     
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))       
               
       //]]>
         </script> 



  • Simpan template dan lihat hasilnya :c:

KET:
Untuk mengganti warna block komentar admin ,silahkan cari kode .comment_admin .comment_name ,Maka di stu akan anda lihat tulisan background: silahkan anda ganti dengan warna kesukaan anda agar membedakan komentar admin dengan komentar pembaca


Last note

Komentar buatan dari kang ismet ini support dengan emoticon,akan tetapi saat saya gunakan emoticon itu , ada error saat saya membuka halaman post saya yang memiliki banyak komentar sehingga emoticonnya saya disablekan , tapi jika anda ingin menambahkan emoticon di komentar blog itu nanti saya akan membuatkan tutorialnya indahnya berbagi :c:

Menambahkan Tooltip pada widget share



membuat tooltip



Apabila anda memiliki Widget Share atau add share seperti yang saya pakai bisa anda perindah dengan efek tooltip yang hanya membutuhkan sedikit modifikasi kode, tutorial ini saya dapatkan dari saudara dte.web.id .Untuk Demonya bisa anda lihat sendiri di widget share yang saya pakai

 

Tutorial

  1. Dari Dashboard blog anda menuju  Template kemudian Edit HTML
  2. cari kode seperti yang di bawah ini
  • Biasanya kodenya mirip-mirip seperti ini :
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->

  tinggal tambahkan elemen <span class="addthis-tooltip">Teks Anda</span> seperti di bawah ini:
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <span class="addthis-tooltip">share/bagikan kepada teman!</span>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END –>


  • Selanjutnya anda tambahkan kode css di bawah ini diatas ]]></b:skin>

/* Modifikasi widget AddThis */

.addthis_toolbox {
  width:98%;
  position:relative;
  background-color:darkgreen;
  padding:10px 15px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;    
}

.addthis_toolbox .addthis-tooltip {
  display:block;
  width:140px;
  padding:10px 15px;
  position:absolute;
  bottom:100%;
  left:30px;
  z-index:77;
  margin-bottom:40px;
  background-color:black;
  font:bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-align:center;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  opacity:0;
  visibility:hidden;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.addthis_toolbox .addthis-tooltip:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-top-color:black;
  position:absolute;
  top:100%;
  left:15px;
}

.addthis_toolbox:hover .addthis-tooltip {
  visibility:visible;
  opacity:1;
  margin-bottom:20px;
}

/* Akhir modifikasi widget AddThis */


  • Terakhir save template anda dan lihat hasilnya :c:

KET :
Untuk mengatur lebar dan mengganti warna background tinggal anda sesuaikan pada kode di atas yang sudah saya tandai dengan warna hijau , jika anda tidak ingin menampilkan background caranya tinggal anda tulis warna backgroundnya dengan “none”

Last note


Memberikan efek tooltip di widget share ,membuat widget tersebut menjadi tidak biasa..kreasikan imajinasi anda dalam mengedit kode – kode di atas dan jangan lupa untuk selalu berbagi :c:

Membuat tombol back to top dengan efek jquery



Pada kesempatan kali ini saya akan share yang berhubungan dengan blog,yaitu membuat tombol back to top ,fungsi dari tombol back to top inia dalah sebagai ringkasan buat visitor blog kita agar memudahkannya menavigasi scroll bar ke atas tanpa cape - cape secara manual.sehingga saat tombol tersebut di klik maka scroll akan naik dengan sendirinya secara otomatis

Kelebihan dari back to top dengan jquery ini ialah tidak membuat blog menjadi berat karena tombolnya sendiri tidak terbentuk melalui gambar melainkan css.

Preview

membuat back to top dengan jquery

Tutorial

  • Pertam-tama login ke akun blog anda
  • kemudian pilih menu,Template  > Edit HTML
  • Pilih Syle yang anda suka mau tipe 1 atau tipe 2 ,kalau sudah Letakan salah 1 kode di bawah ini, di atas kode ]]></b:skin>
STYLE CONTOH 1
<style>

#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:darkred;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;left:80%;

-moz-border-radius-topleft: 30px;

border-top-left-radius: 10px;border-top-right-radius: 10px;}

#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}

</style>
STYLE CONTOH 2
<style> #Backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px; -moz-border-radius-topleft: 30px; border-top-left-radius: 30px;} #Backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;} </style>
  • Kemudian letakan kode di berikut di atas kode </body>
<div id='Totop'>Back to Top</div>

<script type='text/javascript'>

//<![CDATA[

$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});

//]]>

</script> 
  • Terakhir Save template anda 
KET :
Silahkan anda ganti kode yang saya tandai warna merah dengan warna pilihan anda,dan apabila back to top button tidak berfungsi,atau tidak work ,maka letakan kode Style contoh 1/style contoh 2 tersebut tepat di atas kode
<div id='Totop'>Back to Top</div>

Last word

Bagaimana mudah dan simple kan ?? semoga tutorial di atas dapat anda pahami dengan mudah :c:

Widget Follow twitterbird di blog



Jika anda ingin memasang widget follow twitter yang unik mungkin widget inilah yang anda butuhkan sekarang , selain unik burung twitter ini akan mengikuti kita misalnya kita scroll ke halaman page bawah blog maka dia pun akan ikut mengikuti anda ke bawah halaman blog dengan berterbangan di blog. Dan apabila burung twitter tersebut di klik maka akan langsung mengarahkan ke account twitter anda pastinya dapat menambah followers anda kan hehehe :c

Preview

 burung twitter berterbangan di blog

Langkah-langkah pembuatan :

  • Pertama-tama login ke akun blogger anda pastinya, setelah itu ke menu Tata letak/Layout.
  • Kemudian Klik “Add Gadget” pilih HTML/Javascript
  • Selanjutnya copy lalu pastekan kode di bawah ini ke kotak HTML/javascript tersebut
<script type="text/javascript" src="http://t4belajarblogger.googlecode.com/files/tripleflap_t4belajarblogger.js"></script> <script type="text/javascript"> var birdSprite="https://lh5.googleusercontent.com/-jmsRqmZBnhA/Tz1VgRvG7gI/AAAAAAAAD8g/AjMfEV9CHbw/s320/birdsprite_t4belajarblogger.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/#!/idtwitteranda";var tweetThisText = "Twitter - Fendyshare http://Bloganda.blogspot.com/";tripleflapInit(); </script>

Silahkan ganti bagian yang telah saya tandai dengan warna biru dengan ID Twitter anda, lalu yang bagian warna merah dengan judul blog anda, dan yang berwarna orange/jingga dengan URL Blog/web anda.


  • Klik tombol "Save". Selesai....!

  • Last note

    Terimakasih kepada saudara blog t4belajar karena sudah menyediakan scriptnya,dan pesan saya Widget follow burung twitter ini membuat blog anda terkesan unik sehingga para pengunjung penasaran untuk mengklik burung twitter yang tertuju kepada akun twitter anda ,semoga artikel di atas membuat anda menerapkannya di blog sobat :c:

    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 = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+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.. :)
    Back to Top