Sang SEO Responsive Blogger Template

Sang SEO Responsive Blogger Template
Sang SEO Responsive Blogger Template


Biasanya Saya share template buatan orang lain kali ini tak biasa, Saya akan share template gratis namun powerfull dan cocok serta paling mantap buat adsense. Saya sengaja membuat template ini sederhana, agar loading blog jadi lebih ringan. Kualitas template ini tidak diragukan lagi pokoknya, dijamin SEO sekali ;) sesuai namanya Sang SEO Responsive Blogger Template.



The English version is now available, you can download it at the link below. You also can buy the premium version at a price of 5$ Via PayPal, if interested contact me on the page Contact

PayPal : anonymousir.sir@gmail.com



Template ini Saya bagikan secara gratis, Anda bisa menghilangkan Credit pada footer dengan membayar sebesar Rp. 50.000 atau 5$.Bila berminat silakan hubungi Saya melalui halaman Contact.

Special : Selain menghilangkan Credit, ada fitur baru seperti :
- Related Post With Image
- Protect Comment ( SPAM )
- Facebook Comment
- Added Footer


Alasan, Anda harus memakai template ini ?
template yang sangat sangat recomended..
terbukti visitor langsung melonjak 200%.
mantap kang..
terimakasih.. info yang sangat membantu dan bermanfaat..

Danang Prihantorohttp://www.infowagu.co.vu/

templatenya mantap banget sob. ane tes di beberapa situs hasilnya bagus semua. udah cocok lah sama Sang SEO. hatur nuhun kang.

Muhammad Rauuf

Fast Loading

Page Speed GTMetrix
Template ini memiliki kecepatan yang luar biasa alias loading pagenya ringan, jadi cocok untuk Internet Indonesia yang lemot :D

Penting !!

Harap dibaca agar pertanyaan yang Anda ajukan tidak berulang - ulang. Sebagian para blogger mengalami masalah saat memasang template ini. Berikut permasalahan dan solusinya.

Pada Tampilan Mobile Artikel Tidak Muncul
Karena template ini berbeda dari kebanyakan template responsive lainnya, maka Saya sudah mengubah isi dari template ini. Jadi apabila Anda mengalami masalah ini, pastikan dan nonaktifkan fitur mobile pada template ini.

Isi Komentar Tidak Ada
Solusinya coba cek di Setelan Google+ dibagian >>Gunakan Google+ Komentar di blog ini, jangan di contreng.


Valid Author Rich Snippet

Valid Author Rich Snippet
Template ini valid author rich snippet, jadi foto profil Anda akan muncul di mesin pencari google. Untuk pengaturan lebih lanjut bisa baca artikel berikut ini.

Webmaster Structured Data

Struktur Webmaster
Untuk melengkapi fitur SEO Saya menambahkan struktur yang disarankan webmaster, dengan adanya struktur ini tentunya robot pencari akan lebih mudah menjelajahi bagian - bagian template Anda.

Agar lebih tahu apa saja fiturnya, silakan Anda lihat fitur lengkap dari template ini dibawah.

Fitur Template

  1. 100% Responsive - Cek
  2. Valid HTML5 ( All Page ) - Cek
  3. Valid CSS3 ( All Page ) - Cek
  4. Valid Author Rich Snippet - Cek
  5. SEO Friendly - Cek
  6. User Friendly
  7. Fast Loading
  8. Webmaster Structured Data
  9. Clean Design
  10. HCard Author and Update ( Home Page, Post Page and Satic Page )
  11. Auto Readmore
  12. Breadcrumbs
  13. Related Posts
  14. Cool Threaded Comment
  15. Share Button
  16. Page Navigation
  17. Custom Error Page
  18. Custom Deleted Comment
  19. Custom Navigation In Post Page
  20. Custom Popular Post
  21. Custom Label
  22. Full Title Tag
  23. Ads Ready
  24. Dropdown Menu - new
  25. Search button - new
  26. Back Top Top Button - new
  27. Recent Post By Tag - new
  28. Navigation Menu With Social Icon - new
  29. And more.

Pengaturan

Setelah Anda memasang template ini ada beberapa hal yang harus di sesuaikan, oleh karena itu silakan disimak.

1. Ganti ID dan Nama 
Silakan Anda cari kode dibawah ini pada template ini dan ganti sesuai instruksi yang ada.
<meta content='ID Google Webmaster Verfikasi' name='google-site-verification'/>
<meta content='ID Bing Verification' name='msvalidate.01'/>
<meta content='ID Alexa Verification' name='alexaVerifyID'/>
<link href='https://plus.google.com/ID Google Plus/posts' rel='publisher'/>
<link href='https://plus.google.com/ID Google Plus/about' rel='author'/>
<link href='https://plus.google.com/ID Google Plus' rel='me'/>
<meta content='Nama Author' name='Author'/>
<meta content='ID Facebook' property='fb:admins'/>
Perhatikan kode yang Saya tandai, silakan Anda ganti kode tersebut.

2. Meta Tag
Sebelum memasang Meta Tag silakan Anda aktifkan Meta Tag pada Setelan.
  • Masuk ke blogger dan pilih Setelan
  • Pilih Preferensi Penelusuran
  • Kemudian pilih Meta Tag > Deskripsi
  • Silakan Anda isi dengan deskripsi blog yang di inginkan
  • Simpan
Untuk mengisi Meta Tag pada postingan silakan anda ikuti cara dibawah ini.
  • Buat Postingan
  • Lihat sebelah kanan ada menu Deskripsi Penelusuran, silakan Anda klik dan isi dengan deskripsi yang di inginkan.
  • Selesai
3. Nonaktifkan Mobile Version
Silakan Anda matikan fitur mobile pada template ini, agar fitur responsive bekerja pada perangkat mobile.
  • Masuk ke Setelan
  • Pilih Template
  • Klik Icon Gerigi pada Seluler
  • Pilih Tidak. Tampilkan template seluler di perangkat seluler.
  • Simpan
4. Navigation Menu With Social Icon
Silakan cari kode dibawah ini dan ganti linknya.

<nav class='menus'>
<ul class='nav-menus'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<div id='social-list'>
<ul class='socmed'>
<li><a class='facebook' href='#' title='Facebook'>Facebook</a></li>
<li><a class='twitter' href='#' title='Twitter'>Twitter</a></li>
<li><a class='plus' href='#' title='Google Plus'>Google Plus</a></li>
<li><a class='linkedin' href='#' title='Linkedin'>Linkedin</a></li>
<li><a class='pinterest' href='#' title='Pinterest'>Pinterest</a></li>
<li><a class='youtube' href='#' title='YouTube'>YouTube</a></li>
<li><a class='rss' href='#' title='RSS Feed'>RSS</a></li>
</ul>
</div>
</nav>

5. Dropdown Menu

Silakan cari pada template ini dan ganti link yang tertera sesuai yang Anda inginkan.

<div id='navitions'>
<div class='isi'>
<nav class='navix' id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div id='searching'>
<form action='/search' id='search-buttons' method='get'>
<input name='q' placeholder='Search...' type='text'/><input id='search-button-top' type='submit' value=''/></form>
</div>
<a href='#' id='mobilenav'>Select Menu</a>
<ul class='menu' id='menunav'>
<li><a class='home' href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='/p/about.html'>Static Page</a></li>
<li><a href='#'>With Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='/error.html'>Error 404</a></li>
</ul>
<script type='text/javascript'>
//<![CDATA[
menunav (jQuery);
//]]>
</script>
</nav>
</div></div>

6. Memasang Recent Post By Tag

Tambahkan kode dibawah ini pada widget Anda.

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Sukses?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>
KodeDeskripsi
var numpostsIsi dengan jumlah artikel yang ingin ditampilkan
var showpostthumbnailsPilih true bila ingin menampilkan gambar dan pilih false untuk menghilangkan gambar
var showpostdatePilih true untuk menampilkan tanggal dan pilih false untuk menghilangkan tanggal
/feeds/posts/default/-/SuksesSilakan ganti label Sukses dengan label yang Anda maksud

7. Validasi HTML5 Widget

Silakan cari kode <b:include name='quickedit'/> pada template dan hapus agar blog Anda valid HTML5

Itulah pengaturan pada template ini agar fitur pada template ini benar - benar bekerja ;)

Changelog

V1.00 - 16 Mei 2014 18:30 WIB
- Rilis perdana

V1.10 - 16 Mei 2014 19:54 WIB
- Fixed bug responsive menu

V2 - 23 Mei 2014
- Fixed design
- New design error page
- New font
- Added menu with social icon
- Added dropdown menu
- Added search button
- Added recent post by tag
- Added back to top button

V2.10 - 24 Mei 2014
- Fixed bug Error page

Waspadalah! Google Panda 4.0 Dilepas

Google Panda 4.0
Google Panda adalah algoritma milik Google yang sudah lama beredar. Kemarin, 21 Mei 2014 Google resmi melepas Google Panda 4.0 lewat akun twitter @mattcutts. Sekedar informasi buat Anda para blogger sebaiknya lebih berhati - hati dengan telah beredar nya Google Panda 4.0. Berikut adalah pernyataan update Google Panda 4.0 dari  @mattcutts.
Google Panda adalah algoritma yang fungsinya menilai kualitas suatu konten blog/website. Penilaian Google Panda dilihat dari judul dan deskripsi suatu konten. Jika ditemukan terdapat duplikat maka akan berdampak buruk bagi SERP blog/website tersebut. Seperti pernyataan @mattcutts dalam akun twitternya. yang menyatakan akan menurunkan suatu blog/website yang melakukan tindakan spamming dan menaruh kata kunci secar berlebihan.
Oleh karena itulah agar berhati - hatilah bagi para blogger yang suka melakukan aktivitas copy paste, karena konten copy paste lah yang jadi sasaran Google Panda.  Kalau memang masih tetap copy paste, sebaiknya lakukan penyuntingan secara keseluruhan dengan bahasa sendiri.

Jadi, dengan dilepasnya Google Panda 4.0 ini sebaiknya Anda lebih berhati - hati lagi, bisa jadi blog Anda jadi korbanya.

Mengenal dan Memahami, Apa Itu Alexa Rank ?

Logo Alexa Rank
Alexa Rank adalah sebuah peringkat yang diberikan kepada sebuah blog atau website berdasarkan banyaknya traffic atau pengunjung, penghitungan ini dilakukan oleh Alexa.com. Peringkat ini dihitung dari terbesar sampai yang terkecil, jadi semakin kecil alexa rank maka semakin bagus kualitas blog tersebut.

Penghitungan peringkat juga dilakukan berdasarkan jumlah Links In pada Alexa, semakin banyak jumlahnya maka akan semakin cepat alexa rank turun.

Bagaimana Alexa Mengetahui Traffic atau Kunjungan Suatu Blog ?

Informasi mengenai traffic atau kunjungan yang di dapat Alexa berasal dari toolbar alexa yang dipasang oleh jutaan komputer oleh pengguna internet. Oleh karena itu ada baiknya jika ingin alexa rank Anda cepat ramping pasanglah Alexa Toolbar. Dari toolbar tersebut Kita dapat mengetahui ranking suatu blog.

Cara Kerja Penilaian Alexa Rank

Seperti yang sudah Saya jelaskan diatas pemberian dilakukan dari terbesar hingga terkecil, semakin kecil maka semakin bagus. Namun beda halnya dengan Page Rank, penilaian dilakukan dari terkecil hingga terbesar, semakin besar maka semakin bagus. Alexa rank akan mengecil apabila jumlah traffic atau penayangan suatu blog meningkat atau konstan. Sebaliknya jika jumlah traffic atau kunjungan berkurang maka nilai alexa rank pun akan mebengkak.

Penilaian juga dilakukan berdasarkan jumlah links in suatu blog, semakin banyak maka akan semakin cepat alexa rank ramping. Links In adalah backlink yang di dapatkan suatu blog.

Seberapa Penting Alexa Rank

Alexa Rank bisa dibilang penting dan tidak penting tegantung blog apa yang Anda kelola. Menjadi penting apabila blog atau website yang Anda kelola digunakan sebagai ladang mencari uang melalui internet. Kondisinya akan terbalik atau tidak penting apabila blog atau website yang Anda kelola hanya sebagai media tulis menulis saja.

Bagi para blogger yang menggunakan blog sebagai media pencari uang, maka alexa rank sebagai tolak ukur kualitas blog Anda. Oleh karena itu peran alexa rank sangat penting dalam situasi ini.

Cara Merampingkan Alexa Rank

Menurunkan alexa rank dapat dilakukan dengan berbagai cara mulai dari rajin membuat artikel, melakukan optimasi SEO onpage  hingga optimasi SEO offpage, mencari backlink dan lain sebagainya. Sebenarnya masih banyak cara yang dilakukan agar alexa rank cepat ramping.

Jadi Alexa Rank adalah peringkat yang diberikan oleh Alexa.com, penting atau tidaknya tergantung tujuan Anda membuat blog ;)

Cara Mendaftar GlobAllShare dan Dapatkan Saham Dengan Membuat Akun GAS

Logo GlobAllShare
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.

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


Verifikasi Akun GlobAllShare

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

Akun Aktif

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

Pengaturan Akun

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

Ganti Foto
8. Selanjutnya pilih foto yang Anda inginkan.

Unggah Foto

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.

Dunia Gas

2. Kemudian klik Aktifkan untuk mengaktifkan Akun Gas Anda

Aktifkan Akun Gas
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.

Reffereal GlobAllShare

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

Cara Memasang Blogger Threaded Comments Hack

Icon Comments Flat UI
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.

Memasang Blogger Threaded Comments Hack

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/AVvXsEg9rj0OZHATT0yzoFjpUWIugKMTr09wY4UuJso7KBENXSEJiKadHboutHwBE55jPuzJVmsvc775Cwcfmm1EPuJ1OaRj-udgmttfSaNTZ9p8cJCqJ8tXr2Eom1-23s9ERRjgajUupILg1WHL/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/AVvXsEg9rj0OZHATT0yzoFjpUWIugKMTr09wY4UuJso7KBENXSEJiKadHboutHwBE55jPuzJVmsvc775Cwcfmm1EPuJ1OaRj-udgmttfSaNTZ9p8cJCqJ8tXr2Eom1-23s9ERRjgajUupILg1WHL/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/AVvXsEivchSh4OJNdEtpuuMaT3phxVLwFG4eNbw1j4WJEQ1akAf08fyYwW6t563bV0qdqa7xd7pVcdpZzd8kBvb6aZtKfr-MWwLzmUWOkGGOiLPyi8dHDuTTP6XWWW-61n3YczcyHMWio1rsQ7I/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


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.

Membuat Widget Sosial Media Lengkap

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

Pengaturan

Untuk mengganti alamat pada kode diatas perhatikan kode yang Saya tandai, selanjutnya tinggal ganti sesuai pengaturan dibawah ini ;)
KodeKeterangan
4618488608224214041Silakan ganti dengan ID blog Anda
https://www.facebook.com/MousirrGanti dengan alamat Fans Page Anda
https://www.twitter.com/KangMousirGanti dengan alamat Twitter Anda
@KangMousirGanti dengan username Twitter Anda
http://kang-mousir.blogspot.com/Ganti dengan alamat blog Anda
107577168276378903527Ganti dengan ID akun Google Plus Anda

Membuat Popular Post Keren dan Berwarna

Icon Popular Post
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.
Popular Post Warna - warni

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.
Pengaturan Popular Post
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 ;)