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:
    Back to Top