Modifikasi Label cloud menjadi Full color

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:

Read more »

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bC0HMxitgRQxr0zTdXzrs3dVnRDfDgWJk8QRraWjol60W3ZpFgsJt1B711_LTnZuHGKbIko900ty_AmkQA4xuXLaQU4Wx4Gpzz-4qILQ4PJJ8eAe-je81ZWjn7SFWQdh9OpOFUTfUfcY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvcgRBxJsXW8nP7xImwfj1NIjXJg0I-N-aptlQ7HTkt5ehbH65SuwACzfZRewF3KeWecUAwUP22JFww6nP-OGXA7WgjMU0daCe48z9q4DBu6veoF5zDGp8xmV9ZCOYE2HQ1FylWSz-3LM/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:

Read more »

Mengatur jumlah teks dan ukuran gambar pada auto readmore

Tampilan teks,kalimat dan juga gambar artikel di beranda blog anda apabila anda menggunakan auto readmore sebaiknya disesuaikan dengan panjang dan lebar blog anda.karena apabila tidak di atur maka blog tampak tidak rapi jadi sebaiknya di sesuaikan menurut lebar dan tinggimya blog.
Jika artikel sebelumnya membahas cara membuat readmore otomatis pada blog.Sesuai dengan judul artikel berikut,jika anda ingin mengaturnya  ikutilah langkah-langkah berikut di bawah ini :

1. Pertama-tama seperti biasa silahkan login ke akun blogger anda. setelah itu masuk ke Template/Rancangan lalu Edit HTML.
2. Sebaiknya silahkan backup terlebih dahulu template anda, agar apabila ada kesalahan bisa di perbaiki seperti semula.
3. Selanjutnya , anda  cari script yang mirip seperti di bawah ini:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot;;
summary_noimg = 300;
summary_img = 230;
img_thumb_height = 125;
img_thumb_width = 225;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Apabila anda kesulitan mencarinya, Pilih salahsatu kode yang berwarna tersebut .kemudian tekan Ctrl+F di keyboard anda untuk mencari kode script dan pastekan kode yang anda copy tadi. jika masih belum ditemukan juga kode  seperti diatas.Biasanya script tersebut terletak di atas kode </head> dan dibawah kode ]]></b:skin>. Script ini merupakan JS(javascript).
Jika anda sudah menemukannya silahkan edit script yang saya tandai dengan berwarna-warni seperti di atas. Yang merupakan angka yang menentukan berapa banyak kata/karakter yang akan tampil.

KET :

• summary_noimg = 300; yaitu jumlah karakter/kata yang ditampilkan apabila posting article anda tanpa gambar. apabila posting anda ada yang tidak bergambar sebaiknya jumlak karakter harus lebih banyak dibandingkan dengan artikel yang bergambar.
• summary_img = 230; yaitu jumlah karakter/kata yang ditampilkan apabila posting artikel anda beserta gambar.
• img_thumb_height = 125; yaitu ukuran tinggi gambar yang di tampilkan di autoreadmore beranda blog anda.
• img_thumb_width = 225; yaitu ukuran lebar gambar yang di tampilkan di autoreadmore beranda blog anda.

        

Last note

Dengan di sesuaikannya jumlah karakter dan tinggi lebarnya gambar yang di tampilkan autoreadmore pada beranda blog anda akan membuat blog anda tampak lebih rapi sehingga blog terlihat lebih sedap di pandang :c:

Read more »

Menambahkan Tooltip pada widget share

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 -->

• Jika anda sudah menemukan kodenya Tepat di dalam elemen .addthis_toolbox

  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:

Read more »

Cara Membuat Blog Berbintang di Tampilan Search Engine

sourceimg:google

Bagai mana cara agar membuat blog ber rating bintang di mesin pencarian atau search engine ?? ternyata sangat mudah sekali trick ini saya dapat dari hasil browsing-browsing nyari sesuatu :c:

Membuat tampilan blog dengan rating bintang dapat membuat visitor lebih tertarik untuk mengklik dari pada tautan yang tidak memiliki rating bintang.Akan tetapi jika anda ingin membuat blog anda memiliki rating bintang saa di tampilkan di search engine pastinya anda harus memiliki akun google plus   dan sudah harus terhubung dengan blog anda dengan cara mengklaim sebagai kontributor untuk blog anda tersebut.

Preview

Tutorial

• Pertama-tama login ke akun blog anda
• kemudian dari Dashborad > Template > Edit HTML
• Letakkan kode berikut tepat diatas kode <b:skin><![CDATA[/* ,gunakan Ctrl + F untuk pencarian cepat

<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/101658939006466863092' rel='publisher'/></b:if>

silahkan ganti kode yang berwarna hijau dengan id google plus anda.

• Selanjutnya letakkan kode berikut sesudah kode <body>

<div itemscope='' itemtype='http://data-vocabulary.org/Review'>

• kemudiah tambahkan kode </div> di atas kode </body>

• Cari kode <data:post.body/> dan letakkan kode berikut tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'><  <span style='color: white;'><span style='font-size: xx-small;'>Description: <span itemprop="description"><data:post.title/></span> Rating: <span itemprop='rating'>4.5</span> Reviewer: <span itemprop='reviewer'><data:post.author/></span> - ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span></span></span></b:if>

Catatan: Biasanya Kode <data:post.body/> akan berjumlah 2  bahkan lebih jika sobat telah memasang Auto readmore,baca bagai mana cara memasang auto readmore ,pilih kode yang terakhir atau paling bawah

• Save template ,kemudian cek blog anda dengan menuliskan URL judul post anda Disini 

Read more »

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

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:

Read more »

Cara Membuat Readmore Otomatis di Blog

Cara membuat readmore otomatis pada halaman utama blog anda sangat mudah sekali,maka simaklah tutorial di bawah ini.Tapi,sebelum kita membahas lebih jauh adabaiknya saya jelaskan mengenai fungsi autoreadmore dahulu kali aja ada teman-teman yang belum mengerti  :c:
Readmore otomatis yang biasanya berada di halaman sebuah blog berfungsi sebagai ringkasan dari sebuah artikel yang anda tulis,maksudnya adalah artikel tersebut pada halaman utama anda hanya berbentuk sebuah ringkasan dengan gambar jadi apabila pengunjung ingin membaca artikel tersebut dengan lengkap harus meng klik tombol baca selengkapnya/readmore.

Preview :

 

Tutorial

• Masuk ke akun Blogger anda

• pilih Template/Rancangan , sebaiknya Back up dulu template anda,dengan cara klik download template lengkap untuk berjaga-jaga.

• Cari kode </head>, tekan tombol Ctrl + F untuk pencarian cepat, lalu masukkan kode yang dimaksud untuk memudahkan pencarian.

• kemudian Copy kode di bawah ini dan letakan di atas </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/**
Auto-readmore link script (for blogspot)
(C) 2012 fendevils.blogspot.com
visit http://fendevils.blogspot.com/
**/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Next,Cari kode <data:post.body/>. Ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Readmore</b> &#8594;<data:post.title/></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Terakhir Save template dan lihat hasilnya :c:

KET : Silahkan ganti kode yang berwarna biru di atas dengan kata-kata sesuka anda contohnya baca selengkapnya , atau apabila anda mau mengganti teks tersebut dengan gambar readmore seperti gambar preview diatas tinggal ganti kode <b>Readmore</b> dengan kode <img src=”url gambar anda”/> ,untuk gambar tombol readmore anda bisa googling di om google dengan keyword “readmore png”

Last note

Dengan menambahkan fungsi Auto readmore pada halaman utama blog anda , hasilnya adalah artkel-artikel pada beranda blog anda  menjadi ringkas dan apabila pembaca ingin membaca lebih lengkap tinggal klik pilihan readmore baca juga cara mengatur tampilan gambar dan karakter pada readmore otomatis untuk menyesuaikannya

Read more »

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

 

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:

Read more »

Bagaimana membuat widget top komentator

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

Step by step

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

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

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

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

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

Last note

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

Read more »

Mengenal element dalam template blog

Apa saja element-element dalam sebuah template kali ini kita akan membahas mengenai hal tersebut, mengenai pembahasan di bawah ini saya dapat setelah bejajar dari blognya mas christiantatelu.Sebenarnya dalam mengedit sebuah template blog diperlukan pengetahuan khusus  mengenai HTML dan juga pastinya element – element yang mendasari blog tersebut.Karena jika kita sembarangan mengedit template blog anda tanpa mengetahui susunan dasar blog tersebut maka akan sangat fatal dan dapat membuat blog tersebut acak acakan (pengalaman pribadi :c ). jadi konsentrasilah dengan pembahasan di bawah ini *lebay

1.Jenis HTML (CMIIW)

Merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.HEAD

Bagian kepala atau head template blog yang berisi judul blog dan awal dari kode CSS. Di sinilah tempat untuk meletakkan meta tag baik deskripsi, keyword, atau meta - tag lainnya.

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:skin><![CDATA[/*

3.BODY

Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

4.LINK

Kode ini fungsinya untuk mengubah tampilan link pada template blog Anda.Misalnya berwarna hijau/kuning dan sebagainya :

a:link {
  color:#xxxx;
  text-decoration:none;
  }

Ini menubah tampilan link yang pernah di kunjungi.Misalnya warna link yang berbeda yang artinya pernah di klik oleh sobat.

a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }

Merubah tampilan link ketika pointer mengarah ke link

a:hover {
  color:$titlecolor;
  text-decoration:underline;
}

Mengubah tampilan link bergambar :

a img {
  border-width:0;
  }

5./* Header

Header adalah kepala dari sebuah  blog.
Terdapat pada bagian atas template yang berisi judul dan deskripsi blog dan merupakan bagian pertama yang di baca serach engine.Contohnya Fendyshare seperti judul di atas dan banner gambar di atas

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Mengubah tampilan header bagian dalam.

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan.

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Mengubah tampilan judul dan deskripsi blog tingkat 1

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

Mengubah tampilan link yang terdapat pada header.

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

Mengubah tampilan link pada header jika pointer mouse berada di atas link.

#header a:hover {
  color:$pagetitlecolor;
  }

Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
}

Mengubah tampilan gambar header.

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

6./* Comments

Mengubah tampilan judul bagian komentar.Disini sobat dapat mengganti tampilan judul komentar.

#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

Mengubah tampilan bagian keseluruhan komentar.

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }

Mengubah tampilan link author atau link komentator.

#comments-block .comment-author {
  margin:.5em 0;
  }

Mengubah tampilan isi komentar.

#comments-block .comment-body {
  margin:.25em 0 0;
  }

Mengubah tampilan footer komentar. Comment-footer biasanya berisi tanggal komentar.

#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }

Mengubah tampilan komentar yang telah di hapus.

.deleted-comment {
  font-style:italic;
  color:gray;
  }

mengubah tampilan link feed

.feed-links {
  clear: both;
  line-height: 2.5em;
}

7./* Sidebar Content

Sidebar ialah sisi kanan atau kiri content blog anda,seperti blog saya yang hanya mempunyai sidebar sebelah kanan ,berikut kode Mengubah tampilan sidebar secara keseluruhan.

.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;
}

Mengubah tampilan daftar pada sidebar.

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}

Mengubah tampilan definisi daftar dari tag <ul>

.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

Mengubah tampilan widget secara keseluruhan termasuk area postingan dan footer.

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

8./* Footer

Pada dasarnya sama seperti sidebar namun letaknya yang berbeda. footer berada di bagian paling bawah atau di atas dari credits template blog ( hanya ada pada template yang di download ).

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Di bawah ini merupakan akhir dari kode css pada template blogger. Di bawah  kode ini,sobat bisa menyisipkan script. (seperti readmore, related post, dll )

]]></b:skin>

Merupakan pasang atau tag penutup dari tag <head> pada dokumen HTML.

</head>

9.<body>

Bagian ini di mulai dari kode berikut.
Merupakan kode html dari outer-wrapper.

<div id='outer-wrapper'><div id='wrap2'>

Merupakan kode html dari header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='tes tatelu (Header)' type='Header'/>
</b:section>
</div>

            Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini

<div id='content-wrapper'>

Bagian antara header-wrapper dan content-wrapper.

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

Kode html dari area postingan atau main-wrapper

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Kode html untuk sidebar-wrapper

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
</div>

Mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.

<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

Akhir dari content-wrapper' .

</div> <!-- end content-wrapper -->

            Kode html untuk area footer-wrapper

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

            Akhir dari outer-wrapper.

</div></div> <!-- end outer-wrapper -->

Jika sobat menemukan kode seperti ini, kode ini adalah kode google analityc, yaitu fasilitas untuk menghitung jumlah pengunjung blog.

<b:include data='blog' name='google-analytics'/>

Tag penutup

kode kode di bawah ini adalah contoh kode – kode tag penutup  seperti :

<</div> kemudian </body> </html> dan sebagainya

Last note

Itulah beberapa kode bagian –bagian dalam element sebuah template semoga dapat menambah pengetahuan kawan semua dalam meng edit template. jika kawan punya tambahan mengenai element – element seperti di atas bisa di tambahkan di komentar di bawah ini terimakasih :c:

Read more »

Tutorial membuat Label flash animation

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:

Read more »

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

Read more »

Cara membuat teks link pelangi di Blog

 

Ingin membuat tulisan link kamu berubah warna menjadi warna-warni saat tersentuh panah cursor? .Kalau sobat ingin menjadikan tulisan link sobat menjadi seperti itu..

Berikut caranya :

• Login dulu di Blog


• Kemudian masuk ke


• Pengaturan > Template > Edit HTML


• Jangan lupa backup terlebih dahulu beri tanda centang pada widget


• Setelah itu di halaman HTML, cari kode <head> di bagian atas


• nah setelah itu copy kode berikut tepat di bawah tags <head>



<script src='http://the-kampoeng-blogger.googlecode.com/files/link-warna-warni.js'></script>



• Simpan template lalu lihatlah hasilnya.

Semoga berhasil :)

Read more »