Bagi Bagi

Saturday, 10 May 2014

Cara Memasang Scroll Pada Blog 2

Tutorial kali ini membahas mengenai cara memasang scroll pada blog untuk widget custom, lanjutan pada posting sebelumnya yaitu cara memasang scroll pada blog untuk widget bawaan blogspot.

Untuk menambah fungsi scroll pada widget custom caranya lebih mudah dari pada menambah fungsi scroll pada widget bawaan blogspot.

Penambahan kode fungsi scroll pada widget custom bisa langsung ditambahkan didalam kotak html widget tersebut.

Berikut cara memasang scroll pada blog untuk widget custom:

Masuk ke tata letak blog, klik edit pada kotak html widget yang akan ditambahkan fungsi scrollnya.

Tambahkan kode berikut ini pada bagian depan dan bagian belakang script widget tersebut:

<div style='overflow:auto; width:100%;height:200px;'>

======== Isi kode didalam widget html =======

</div>

Perhatikan kode yang di tandai warna merah dan biru (<div style='overflow:auto; width:105%;height:200px;'>) dan (</div>) di atas.

Kode itulah yang harus ditambahkankan sebelum dan setelah kode script didalam widget tadi.

Untuk kode yang berwarna biru (height:200px;) untuk mengatur tinggi fungsi scroll.

Simpan/Save template dan silahkan lihat hasilnya.

Tutorial Blog

Friday, 9 May 2014

Cara Mendaftar GlobAllShare dan Dapatkan Saham Dengan Membuat Akun GAS

Author: engkus | 23:15 | No Comments |

Google mengeluarkan social network terbaru, yaitu GlobAllShare. Sosial Network terbaru ini mungkin akan menggantikan Sosial Media Google Plus. Anda juga bisa mendapatkan saham pada peluncuran pertama GlobAllShare ini, dengan mengikuti program saham ini Anda bisa mendapatkan uang tanpa mengeluarkan uang sepeser pun.

Sistem untuk mendapatkan Saham ini, yaitu mengajak teman atau siapapun untuk bergabung dengan GlobAllShare dengan membuat akun gas sebelum tanggal 31 Mei 2014. Semakin banyak teman yang Anda ajak gabung semakin besar saham yang Anda dapatkan.

Jika Anda berhasil mengajak 5 teman dan bergabung dengan GlobAllShare Anda akan mendapatkan 1 Saham. Ada 7 tingkatan dibawah ini yang bisa Anda capai.

Level 1 5 mengundang 1 saham GAS
Level 2 25 mengundang 5 saham GAS
Level 3 125 mengundang 25 saham GAS
Level 4 625 125 mengundang saham GAS
Level 5 3 125 mengundang 625 saham GAS
Level 6 15 625 mengajak 3 125 saham GAS
Level 7 78 125 15 625 mengundang saham GAS
Jumlah 19,531 berbagi GAS

Oleh karena itulah Saya akan menjelaskan cara mendaftar GlobAllShare dan bagaimana cara mendapatkan saham. Dengan mengikuti program saham ini Anda dapat mendapatkan puluhan dollar yang cukup menguntungkan, maka tak ada salahnya untuk mencoba.

Cara Mendaftar GlobAllShare

1. Silakan Anda buka link ini GlobAllShare
2. Kemudian isi formulir pendaftaran yang tertera
3. Setelah selesai mendaftar akan muncul pemberitahuan seperti gambar dibawah ini.

4. Anda akan menerima verifikasi akun pada email, silakan buka email Anda dan lakukan verifikasi dengan menekan tombol Aktifkan Account

5. Sampai sini pendaftaran akun sudah selesai, Anda tinggal melengkapi profil dan keterangan.

6. Untuk mengatur username Anda silakan klik disini pada notifikasi diatas atau kik link ini https://www.globallshare.com/edit-settings.html

7. Untuk mengganti foto silakan klik foto profil pada sebelah kiri bagian atas.

8. Selanjutnya pilih foto yang Anda inginkan.

Kini akun Anda sudah selesai dibuat, untuk pengaturan lainnya silakan Anda atur sendiri pada social network ini ;)

Cara Mendapatkan Saham Dengan Mengundang Teman dan Orang Lain Untuk Membuat Akun GAS

1. Silakan Anda lihat sidebar sebelah kiri terdapat menu Dunia-GAS, dan klik link tersebut.

2. Kemudian klik Aktifkan untuk mengaktifkan Akun Gas Anda

3. Kemudian pilih tab Undang untuk mendapatkan link, link ini dapat Anda gunakan untuk mengundang teman atau orang lain untuk membuat akun gas sebelum tanggal 31 Mei 2014.

Selamat sekarang Anda sudah mempunyai akun GlobAllShare dan Anda juga bisa menambah penghasilan dari program saham GAS. Undang teman atau orang lain sebanyak mungkin sebelum ditutup pada tanggal 31 Mei 2014 ;)

Sosial Media

Cara Memasang Blogger Threaded Comments Hack

Author: engkus | 06:53 | 2 Comments |

Kali ini Saya akan membagikan Threaded Comments untuk blog, desain dari komentar ini merupakan desain sendiri agar terlihat berbeda dari Threaded Comments Hack lainnya. Sistem komentar ini memiliki kelebihan daripada komentar default blogger. Untuk cara pemasangan pada blog silakan disimak.

Cara Memasang Blogger Threaded Comments Hack

1. Silakan masuk pada akun blogger Anda
2. Silakan cari kode dibawah ini pada template Anda

<b:include data='post' name='threaded_comments'/>

Kemudian ganti semua kode diatas dengan kode dibawah ini

<b:include data='post' name='comments'/>

3. Simpan kode ini, diatas kode ]]></b:skin> atau </style>

#comments{background:#fff;border:1px solid #ccc;margin:20px  0 0;padding:20px}
#comments h5{color:#000;margin:0;padding:0 0 5px;font-size:160%}
.comment_inner{margin:20px 0;padding:0;overflow:hidden}
.comment_header{float:left;width:67px}
.cm_head{position:relative;background:#fff;border-bottom:1px solid #ccc;margin:-10px -10px 0;padding:5px 10px 8px;}
.comment_avatar{border:1px solid #ccc;margin:0;padding:5px 5px 0;}
.comment_avatar img{width:55px;height:55px;padding:0;text-align:center;margin:0;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3te793A_Dk7Kfke5zxL2gIJtrmAFFV2Y2_83njmZqRYHEMkOEDzvJRY-_yDJeySy1jCoX-l6Qkkcy1AQtc5_7UHMFgLLPQncNc5YDtGBLb8rJrWCwSMD4dMcdhuJKgUYH8qLTy07Uv7M/s1600/anonymous.jpg) no-repeat}
div.comment_avatar img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;]{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3te793A_Dk7Kfke5zxL2gIJtrmAFFV2Y2_83njmZqRYHEMkOEDzvJRY-_yDJeySy1jCoX-l6Qkkcy1AQtc5_7UHMFgLLPQncNc5YDtGBLb8rJrWCwSMD4dMcdhuJKgUYH8qLTy07Uv7M/s1600/anonymous.jpg)}
.comment_name,.comment_name a{font-family:Oswald, Calibri, Sans-Serif;padding:0;margin:0 0 5px 0;font-size:18px;}
.comment_service{margin-top:0}
.comment_date{margin:0;color:#d6d5d5;font-size:14px;text-transform:uppercase}
.respond{float:right;margin:0;padding:0}
.comment_date:hover{color:#bbb;text-decoration:underline}
.comment_body{background:#fff;border:1px solid #ccc;margin-left:77px;padding:10px;}
.comment_body p{line-height:1.4;margin:15px 0 5px;color:#666;font-size:14px;word-wrap:break-word;padding:0;}
.comment_child .comment_wrap{padding-left:78px}
.comment-delete{position:absolute;float:right;top:10px;right:10px;margin:0;padding:0}
.infonm{float:left}
.comment_reply{display:block;font-weight:700;margin:10px 0 0;padding:7px 0;color:#fff!important;text-align:center;text-decoration:none!important;background:#3498db;}
.comment_reply:hover{text-decoration:none;background:#2980b9}
.comment_hapus{font-weight:700;margin:0;padding:0;color:#fff!important;text-decoration:none;}
.comment_hapus:hover{text-decoration:none;color:#000!important}
.unneeded-paging-control{display:none}
.comment-form{max-width:100%!important}
#comment-editor{width:100%!important;background:#fff url(&#39;data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7&#39;) no-repeat 50% 40%;margin-bottom:0;margin-top:5px}
.comment_form a{text-decoration:none;font-weight:bold;font-size:14px}
.comment-form p{background:#fff;padding:10px;margin:5px 0 5px 0;color:#000;font-size:14px;line-height:20px;position:relative}
.comment_reply_form{padding:0 0 0 70px}
.comment_reply_form .comment-form{width:100%}
iframe{border:none;overflow:hidden}
.deleted-comment{background:#e74c3c;color:#fff;padding:20px;margin:5px 0;display:block}
iframe{border:none;overflow:hidden}

4. Selanjutnya cari kode dibawah ini

<b:includable id='comments' var='post'>...</b:includable>

Hapus seluruh isinya dan ganti dengan kode dibawah ini

    <b:includable id='comments' var='post'>
     <div class='comments' id='comments'>
        <b:if cond='data:post.allowComments'>
          <h5> <b:if cond='data:post.numComments == 0'> <span itemprop='interactionCount'>0</span> Komentar untuk &quot;<data:blog.pageName/>&quot;</b:if> <b:if cond='data:post.numComments == 1'> <span itemprop='interactionCount'>1</span> Komentar untuk &quot;<data:blog.pageName/>&quot; </b:if> <b:if cond='data:post.numComments &gt; 1'> <span itemprop='interactionCount'><data:post.numComments/></span> Komentar untuk &quot;<data:blog.pageName/>&quot; </b:if> </h5>
    <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 data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>
          <b:if cond='data:comment.isDeleted'>
            <span class='deleted-comment'>
              <data:comment.body/> - <a class='comment_hapus' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
                Hapus
              </a>
            </span>
            <b:else/>
            <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'>
                <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </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)' title='Balas'>Balas</a>
            </div>
            <div class='comment_body'>
<div class='cm_head'>
<div class='cm_infonm'>
              <div class='comment_name'>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'>
                   <data:comment.author/>
                  </a>
                  <b:else/>
                 <data:comment.author/>
                </b:if>
                <b:if cond='data:comment.author == data:post.author'/>
              </div>
              <div class='comment_service'>
                <a expr:href='data:comment.url' rel='nofollow' title='Permalink'>
                   <span class='comment_date'>
                      <data:comment.timestamp/>
                    </span>
                </a>
              </div>
</div>
<a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDQFayFBbbi7cNunVMkmdqIGl5y_o7xee0SqyuQzRXDCJKh6pK9ntCdgZc9YtCeXFhwkMjWacdsnuh9o3MK6zD2qAFsxmvhElgn7Ot5dKDqCvEaSMaY0fXc9Wbif-OOgACBUkfD1q8Qw/s1600/delete4.png' title='Hapus Komentar'/>
</a>    
</div>
              <p><data:comment.body/></p>
            </div>
            <div class='clear'/>
            &lt;/div&gt; 
            <div class='clear'/>
            <div class='comment_child'/>
            <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>
          </b:if>
        </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'>
          <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' expr:title='data:postCommentMsg'>
            <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[
Config.maxThreadDepth = 2; 
var Cur_Cform_Hdr='.comment_form';var Cur_Cform_Url=$('#comment-editor').attr('src');function trim(a){var b=' \n\r\t\f\x5b\x5d\x7c\x7d\x3c\x3e\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';for(var i=0;i<a.length;i++){if(b.indexOf(a.charAt(i))!=-1){a=a.substring(0,i);break}}return a}$('.comment_wrap .comment_body p').html(function(i,h){temp=h.toLowerCase();index=temp.indexOf('@<a href="#c');if(index!=-1){index_tail=temp.indexOf('</a>',index);if(index_tail!=-1){h=h.substring(0,index)+h.substring(index_tail+4)}}return h});function Valid_Par_Id(a){r=a.indexOf('c');if(r!=-1)a=a.substring(r+1);return a}function Cform_Ins_ParID(a){a='&parentID='+a+'#%7B';n_cform_url=Cur_Cform_Url.replace(/#%7B/,a);return n_cform_url}function Reset_Comment_Form(){html=$(Cur_Cform_Hdr).html();$(Cur_Cform_Hdr).html('');Cur_Cform_Hdr='.comment_form';$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cur_Cform_Url)}function Display_Reply_Form(e){par_id=$(e).attr('id');par_id=Valid_Par_Id(par_id);html=$(Cur_Cform_Hdr).html();if(Cur_Cform_Hdr=='.comment_form'){reset_html='<a href="#origin_cform" onclick="Reset_Comment_Form()">'+Msgs.addComment+'</a><a name="origin_cform"/>';$(Cur_Cform_Hdr).html(reset_html)}else{$(Cur_Cform_Hdr).html('')}Cur_Cform_Hdr='#r_f_c'+par_id;$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cform_Ins_ParID(par_id))}cur_url=window.location.href;search_formid='#comment-form_';search_index=cur_url.indexOf(search_formid);if(search_index!=-1){ret_id=cur_url.substring(search_index+search_formid.length);Display_Reply_Form('#rc'+ret_id)}for(var i=0;i<Items.length;i++){if('parentId'in Items[i]){var par_id=Items[i].parentId;var par_level=parseInt($('#c'+par_id+':first').attr('data-level'));$('#c'+par_id+' .comment_child:first').html(function(a,b){var c=Items[i].id;if(par_level>=Config.maxThreadDepth){$('#c'+c+':first .comment_reply').remove()}var d=$('#c'+c+':first').html();d='<div class="comment_wrap" id="c'+c+'" data-level="'+(par_level+1)+'">'+d+'</div>';$('#c'+c).remove();return(b+d)})}}var avatar=$("#comments");avatar.find('.comment_avatar img').each(function(){var a=$(this).attr('src');$(this).show().attr('src',a.replace(/\/s[0-9]+(\-c)?\//,"/s55-c/"))});
//]]>
</script>
</b:includable>

5. Langkah terakhir tinggal Anda Simpan

Demo

Fitur Blogger Threaded Comments Hack

1. Fixed Avatar Size and Speed
2. Valid HTML5
3. Custom Deleted Comment
4. Setting Level Comment

Pada sistem komentar ini Saya menghilangkan beberapa fitur yang sudah ada sebelumnya, seperti Added Image URL, Added YouTube URL dan Added Smiley. Namun Anda juga bisa menambah emoticon pada sistem komentar ini, oleh karena itu silakan Anda baca Emoticon Wordpress Untuk Blogger.

HTML5, Tutorial Blogger

Wednesday, 7 May 2014

Cara Memasang Scroll Pada Blog

Author: engkus | 19:33 | No Comments |

Widget yang dipasang di Blog terkadang ukurannya bisa terlalu tinggi jika dipaksakan untuk menampilkan semua isi dari widget tersebut.

Untuk mengatasinya kita bisa menambahkan fungsi scroll pada widget tersebut untuk menyesuaikan ketinggian dari widget yang kita pasang.

Widget pada blog (blogspot) terbagi dua, yaitu widget bawaan dan widget custom.

Widget bawaan adalah widget yang memang sudah disediakan oleh Blogspot itu sendiri. Sedangkan widget custom maksudnya adalah widget yang dibuat/dipasang sendiri oleh user dengan menambahkan dan mengedit kode HTML/Javascript, karena widget tersebut tidak disediakan oleh Blogspot.

Untuk dapat menambahkan scroll pada kedua jenis widget ini caranya akan berbeda.

Pada postingan kali ini saya ingin membahas cara memasang scroll pada blog untuk widget standar/bawaan blogspot. Untuk contoh kali ini, widget yang akan ditambahkan scroll adalah widget Populer Post bawaan Blogspot.

Tambahkan dulu widget Popular Posts seperti contoh dibawa ini:

Setelah widget Popular Posts terpasang pada blog, selanjutnya kita buka menu Template pada blog untuk menambahkan script didalam widget popular posts tersebut.

Selanjutnya cari widget popular posts yang sudah dibuat tadi, gunakan CTRL+F agar lebih cepat, kemudian akan muncul kode html seperti berikut (ini contoh di dalam template blog saya):

<b:widget id='PopularPosts3' locked='false' title='Populer Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<div style='overflow:auto; width:105%;height:200px;'>
====== kode script lainnya pada widget =======
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Perhatikan kode yang di tandai warna merah dan biru (<div style='overflow:auto; width:105%;height:200px;'>) dan (</div>) di atas.

Kode itulah yang harus disisipkan kedalam script widget popular posts yang telah dibuat tadi. Untuk kode yang berwarna biru (height:200px;) untuk mengatur tinggi fungsi scroll.

Simpan/Save template dan silahkan lihat hasilnya.

Tutorial Blog

Tuesday, 6 May 2014

Membuat Widget Sosial Media Lengkap

Author: engkus | 20:44 | No Comments |

Widget Sosial Media adalah widget yang berisi tombol like dan profile seperti Facebook, Twitter, Google Plus dan Blogger. Widget ini sangat diperlukan untuk blog agar pengunjung dapat berinteraksi tidak hanya di blog saja, namun di Sosial Media juga. Baca juga artikel tentang sosial media Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5.

Cara Memasang Widget Sosial Media Lengkap

1. Silakan masuk pada akun blogger Anda
2. Simpan kode dibawah ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
//]]>
</script>

3. Kemudian Tambahkan Gadget dan pilih HTML/JavaScript, lalu simpan kode dibawah ini

<div style="background:#3498db;font-weight:bold;font-size:150%;text-align:center;padding:10px 0;">
<a href="http://www.blogger.com/follow-blog.g?blogID=4618488608224214041" target="_blank" title="Follow this blog"><span style="color:#fff">Join</span> <span style="color:#000">Now</span></a>
</div>
<div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;border-top:none'>
<div style='background:#fff;margin:0;'>
<div class="fb-like-box" data-href="https://www.facebook.com/Mousirr" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div>
<div style="background:#fff; border-top:1px solid #ccc;margin:0; padding:5px 0 5px 40px"><a href="https://twitter.com/KangMousir" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @KangMousir</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://kang-mousir.blogspot.com"></div></div></div>
<div class="g-person" data-href="//plus.google.com/107577168276378903527" data-layout="landscape" data-rel="author"></div>

4. Terakhir Simpan

Demo

Pengaturan

Untuk mengganti alamat pada kode diatas perhatikan kode yang Saya tandai, selanjutnya tinggal ganti sesuai pengaturan dibawah ini ;)

Kode	Keterangan
4618488608224214041	Silakan ganti dengan ID blog Anda
https://www.facebook.com/Mousirr	Ganti dengan alamat Fans Page Anda
https://www.twitter.com/KangMousir	Ganti dengan alamat Twitter Anda
@KangMousir	Ganti dengan username Twitter Anda
http://kang-mousir.blogspot.com/	Ganti dengan alamat blog Anda
107577168276378903527	Ganti dengan ID akun Google Plus Anda

Tutorial Blogger, Widget

Sunday, 4 May 2014

5 Keuntungan Memasang Author Rich Snippet

Author: engkus | 18:01 | No Comments |

Author Rich Snippet adalah identitas penulis yang ditampilkan pada mesin pencari. Dengan memasang Author Rich Snippet ini tentunya akan membuat blog Anda menjadi lebih professional. Salah satu kualitas blog dinilai dari nilai Page Rank, Alexa Rank, Backlink dan yang lainnya, tapi tahukah Anda ada juga yang disebut dengan Author Rank.

Author Rank ini akan menjadi penentu artikel Anda berada di halaman pertama mesin pencari, semakin bagus reputasi penulis maka tidak menutup kemungkinan blog Anda akan mudah untuk duduk manis di halaman pertama mesin pencari.

5 Keuntungan Memasang Author Rich Snippet Pada Blog

Disini Saya akan membahas mengenai keuntungan dari Author Rich Snippet, ini hanyalah beberapa keuntungan saja.

1. Menambah Kepercayaan Mesin Pencari Google

Dengan memasang author rich snippet pada blog akan menambah kepercayaan Google karena dengan menghubungkan Google Plus dengan blog akan menyatakan bahwa Andalah pemilik sah dari blog tersebut.

2. Mempunyai Nilai Klik Lebih Tinggi

Kenapa ? Cobalah Anda menjadi pengunjung, saat Anda mencari sesuatu di mesin pencari artikel mana yang pertama dilirik. Jawabanya tentu yang berada di halaman pertama no 1, kedua artikel yang memiliki data lengkap seperti adanya gambar profil penulis atau Author Rich Snippet. Oleh karena itu artikel Anda akan menjadi mungkin untuk dilirik oleh pengunjung.

3. Memungkin Blog/Web Berada Di Halaman Pertama Mesin Pencari

Seperti yang sudah Saya singgung sebelumnya tentang Author Rank, artikel Anda akan menjadi mudah berada di halaman pertama jika reputasi penulis bagus. Oleh karena itu semakin bagus reputasi penulis, maka semakin mudah artikel Anda berada pada halaman pertama mesin pencari.

4. Menarik Perhatian Pengunjung

Sebenarnya masih sama dengan poin no 2 dan 3, yaitu artikel Anda sangat mudah untuk dilirik pengunjung. Apabila penulis artikel memiliki reputasi tinggi dan dikenal oleh pengunjung yang merupakan ahli di bidangnya, tentu artikel Anda akan dipilih sekalipun berada di no 2 kebawah.

5. Lebih Professional

Dengan memasang Author Rich Snippet ini memperlihatkan bahwa Anda adalah seorang penulis professional dan dianggap mengetahui dan paham tentang artikel yang Anda tulis. Ini juga membuktikan bahwa Anda serius dalam mengelola blog tersebut.

Mungkin itulah 5 Keuntungan Memasang Author Rich Snippet yang dapat Saya berikan. Semoga artikel ini dapat membantu Anda memahai Author Rich Snippet lebih dalam, kritik dan masukan sangat Saya apresiasi. Oleh karena itu berikan komentarmu ;)

Belajar SEO

Saturday, 3 May 2014

Membuat Popular Post Keren dan Berwarna

Author: engkus | 08:30 | No Comments |

Popular post/artikel populer adalah artikel yang banyak dilihat oleh pengunjung. Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik dan enak untuk dilihat. Untuk tampilan popular post akan terlihat seperti gambar dibawah ini.

Memasang Popular Post Keren dan Warna - Warni

1. Silakan masuk pada akun blogger Anda
2. Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja.

3. Kemudian tambahkan CSS dibawah ini pada template Anda, simpan diatas kode ]]></b:skin> atau </style> dan Simpan

/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Selamat sekarang Anda mempunyai tampilan popular keren, unik, warna - warni dan menarik. Anda juga bisa mengganti warna tersebut dengan mengubah nilai pada CSS Pengaturan Warna ;)

CSS, Tutorial Blogger

Bagi Bagi

Blog tentang internet dan Blogging Tips

Saturday, 10 May 2014

Cara Memasang Scroll Pada Blog 2

Friday, 9 May 2014

Cara Mendaftar GlobAllShare dan Dapatkan Saham Dengan Membuat Akun GAS

Cara Mendaftar GlobAllShare

Cara Mendapatkan Saham Dengan Mengundang Teman dan Orang Lain Untuk Membuat Akun GAS

Cara Memasang Blogger Threaded Comments Hack

Cara Memasang Blogger Threaded Comments Hack

Fitur Blogger Threaded Comments Hack

Wednesday, 7 May 2014

Cara Memasang Scroll Pada Blog

Tuesday, 6 May 2014

Membuat Widget Sosial Media Lengkap

Cara Memasang Widget Sosial Media Lengkap

Pengaturan

Sunday, 4 May 2014

5 Keuntungan Memasang Author Rich Snippet

5 Keuntungan Memasang Author Rich Snippet Pada Blog

Saturday, 3 May 2014

Membuat Popular Post Keren dan Berwarna

Memasang Popular Post Keren dan Warna - Warni

Popular Posts

Categories

Blog Archive