Membuat komentar threaded style bertingkat

Posted by Unknown Posted on 7/22/2013 with No comments



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 »
Label: ,

Mengatur jumlah teks dan ukuran gambar pada auto readmore

Posted by Unknown Posted on 7/22/2013 with 2 comments


mengatur ukuran gambar dan karakter 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:
Label:
Read more »
Label:

Menambahkan Tooltip pada widget share

Posted by Unknown Posted on 7/21/2013 with No comments


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:
Read more »
Label: ,

Cara Membuat Blog Berbintang di Tampilan Search Engine

Posted by Unknown Posted on 7/20/2013 with No comments


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


cara membuat rating bintang di mesin pencarian

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 

Label: ,
Read more »
Label: ,

Membuat tombol back to top dengan efek jquery

Posted by Unknown Posted on 7/20/2013 with No comments


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:
Read more »
Label: ,

Cara Membuat Readmore Otomatis di Blog

Posted by Unknown Posted on 7/20/2013 with No comments


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 :

 

readmore

Tutorial

  • 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
    Label:
    Read more »
    Label:

    Widget Follow twitterbird di blog

    Posted by Unknown Posted on 7/17/2013 with 2 comments


    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:
    Read more »
    Label: ,
    Back to Top