Cara Posting Video Facebook di Blog

Cara Posting Video Faecebook di Blog. Contoh: Video Cuplikan Gol Everton vs Manchester United 0-3 EPL 17/10/2015.

JIKA kita mau update posting blog, namun "kehabisan ide" atau bingung mau posting apaan, salah satu solusinya adalah dengan membuka Facebook dan mencari foto atau video yang unik, lucu, inspiratif, aktual, menarik, dan terpenting... positif.

Sebagai blogger, kita sudah terbiasa berbagi di blog kita. Demikian juga saat menemukan video yang kita sukai, kita bisa share di blog.

CB kasih contoh video gol dan highlights sepakbola. Sebagai fans Manchester United, CB bahagia banget menyaksikan kemenangan MU atas tuan rumah Everton dengan skor 3-0 di Goodison Park, Sabtu (17/10/2015).

Saat membuka Fanspage United, eh... nemu link cuplikan video golnya dari page Super Highlights. Maka, share aja, sekaligus memberi contoh posting video dari Facebook di blog bagi yang belum tahu caranya.

Video Cuplikan Gol Everton vs Manchester United 0-3 EPL 17/10/2015

CARANYA?
Cara memposting video Facebook ke blog adalah dengan mengambil "kode tempel" (embeded).
1. Pilih video yang akan diposting
2. Putar Videonya
3. Klik kanan di video dan klik "Show video URL"
4. Salin URL videonya dan paste di tab baru (new tab)
5. Klik "Embed Video" dan Copas kodenya ke blog ( di mode HTML)

Contonya adalah video di atas.

MAU DOWNLOAD?
Untuk mendownload video facebook, cukup copas urlnya di Firefox. Misalnya:
https://www.facebook.com/video.php?v=1025880200797130

Ubah www menjadi m., jadi:
https://m.facebook.com/video.php?v=1025880200797130

Klik kanan videonya, lalu "Save link as" > MP4.

Video akan tersimpan di komputer. Namun, jika kita posting langsung file video, butuh waktu lama dan berat. Mendingan kode tempel aja. Good Luck! (http://www.contohblog.com/).*

3 Penentu Utama Peringkat Blog di Pencarian Google

Tiga Faktor Utama Penentu Peringkat Blog di Halaman Hasil Pencarian (SERP) Google. SEO Terbaik masih Konten Berkualitas!

KITA, blogger, terus berlomba agar blog atau postingan tampil di peringat atas halaman hasil pencarian Google. Tampil di ranking satu, dua, tiga, atau ada di halaman pertama (page one/pejwan) SERP Google merupakan "kran" yang akan mengalirkan pengunjung ke blog kita.

Apa yang kita lakukan untuk mendapatkan peringat satu di Google? SEO! Tapi, SEO bukan satu-satunya faktor penentu.

Bayangkan saja, kalo semua blogger menerapkan tips dan trik seo di blognya, lalu Google akan "bingung" kan? Lha... wong semuanya seo friendly kok!

Karenanya, berdasarkan pengalaman dan pengamatan, ada tiga faktor terpenting dalam penentuan rangking SERP Google, yaitu Konten Berkulitas, Template Blog SEO & User Friendly, dan... Link!

Jadi, sebelum berlanjut, kita simpulkan dulu. Faktor penentu peringat blog di SERP Google itu bukan puluhan, apalagi ratusan, tapi cuma TIGA! Telu. Tilu, Three! Mirip podium MotoGP yang cuma ada tiga di balkon!

Ke-3 Penentu Utama Peringkat Blog di Pencarian Google itu adalah:

1. Konten Berkualitas
2. Template Blog
3. Links

Penentu Peringkat Google #1: Content is King!

Konten, isi, atau posting (tulisan) adalah raja. Konten Berkualitas menjadi penentu utama peringat blog di hasil pencarian Google. Tips, teknik, atau trik SEO blog terbaik tidak lain adalah menulis Konten Berkualitas.

Kualitas konten itu meliputi aktualitas, unik, orisinalitas, lengkap, dan "enak dibaca" oleh pengunjung.

Enak dibaca? Ya, enak dibaca. Istilahnya, user friendly (ramah pengguna).  Kita bisa belajar banyak banget kepada NN Group soal usability web (blog) agar enak dibaca dan menyenangkan pengguna.

Misalnya, tampilan teks di postingan itu jangan bertumpuk. Satu alinea maksimal lima baris. Makin sedikit kalimat dalam satu alinea, makin enak dibaca. Biar mudah dan langsung praktik, lihat saja deh, misalnya, situs BBC Indonesia. 

Bandingkan tampilan teks (posting) di situs itu dengan di blog Anda. Enak mana dibacanya? :) 

Kalo enakan BBC, ya.... tiru saja gaya tampilan naskah berita/tulisannya: rata kiri (align left), ada jarak antar-alinea (white space), maksimal empat-lima baris per alinea alias paragraf pendek. 

Kembali ke soal Content is King. Sering sekali ada blog "asal jadi", tanpa seo, bahkan templatenya bawaan blogger (default), nangkring di peringkat pertama Google. 

Kenapa? Sebab, kontenya berkualitas, lengkap, asli tulisan sendiri, yaitu... blog mahasiswa yang memposting makalah atau tugas kuliahnya! Ya kan?

Penentu Peringat Google #2: Template Blog

Ini saran Google: Make your blog load faster! Jika blog Anda berat, misalnya kebanyakan kode dan widget, sehingga loading lebih dari 4 detik, maka blog Anda akan sering kena "bounce back", ditinggalkan pengunjung, lalu diabaikan Google.

Baca: Cara Mempercepat Loading Blog.

Maka, konten berkualitas harus didukung Template Blog SEO & User Friendly, yaitu fast loading (tampil cepat, ringan), enak dilihat, "tidak kumuh", dan responsive (mobile friendly). 

Gunakan template yang simple, sederhana, tapi "indah", tidaak asal cepat, perhatikan pula soal "keindahan", namun tidak "menor" dan "lebay" --segala tips desain blog diterapkan dan segala widget dipasang! 

Penentu Peringat Google #3: Link!

Tautan. Terdiri dari internal link, eksternal link, dan... masih.... backlink!

Internal link meliputi navigasi menu, related post, popular post, recent post, jika perlu random post dan most commented post (kalo memberatkan lepas saja widget random post dan most commented post).

Internal link juga ada dalam postingan, menaut ke posting lama yang setema (relevan). Contoh terbaik posting yang penuh link dan bagus buat seo adalah tulisan-tulisan Wikipedia. Lihat saja, banyak linknya 'kan?

Link eksternal juga penting agar posting kita "punya teman". Jika kita "pelit" menyertakan link eksternal, misalnya link sumber, maka blog kita akan sendirian, kesepian!

Anda yang suka menghapus credit link footer desainer template akan menjadi blog yang kesepian, bahkan dimusuhi oleh blogger lain! Ngelink ke blog desainer itu menguntungkan. Lihat saja, CB masih setia ngelink ke blog maskolis di footer!

Backlink masih penting, namun kata Google, sudah tidak terlalu penting karena banyaknya manipulasi dan "spam link". Hanya backlink dari situs/blog berkualitas yang akan dihitung Google.

Baca: Algoritma & Pemeringkat Situs Google Terbaru 2015: Akurasi Informasi, Bukan Link!

Demikian "bahan diskusi" kita tentang penentu utama peringkat blog di Google. Jangan habiskan waktu dan pikiran/tenaga untuk utak-atik desain dan seo. Kerahkan sebagian tenaga, waktu, dan pikiran untuk fokus ke konten berkualitas. 

Good luck and Happy Blogging! (http://www.contohblog.com/).*

Cara Menambahkan Gambar di Samping Judul Blog (Header)

Cara Menambahkan atau Memasang Gambar/Logo di Samping Judul Blog (Header)

JIKA judul, nama, atau header blog (blog title) Anda memilih menggunakan huruf, Anda bisa memperindahnya dengan menambahkan gambar, logo, atau icon di samping judul blog tersebut. Demonya bisa dilihat di Fast & Furious Blogger Template.

Ini penampakannya:

LANGKAH PERTAMA
1. Siapkan dulu icon gambarnya. Ukurannya proporsional dengan tinggi judul header, misalnya 60x60 pixel.
2. Simpan di Picasa Web Album Anda
3. Ambil URL Link Gambarnya (Image Link URL)

LANGKAH KEDUA
1. Template > Edit HTML
2. Cari kode ini:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1><data:title/></h1>
<b:else/>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:includable>

Tambahkan kode

<span style='float:left;'><img src='LINK URL GAMBAR'/></span>

Setelah kode

<h1><data:title/></h1>

Jadinya sepert ini:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1><data:title/><span style='float:left;'><img src='LINK URL GAMBAR'/></span></h1>
<b:else/>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:includable>

JIKA template blog Anda menggunakan header blog dinamis, maka tambahkan pula di samping kode lainnya.

Misalnya seperti ini:

 <b:includable id='title'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h1 class='title'><span style='float:left;margin-right:5px'><img alt='fast furious template' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZa39jF3v-1GcoSApKdmr2NrrU4271NYh9Ia7H05fE6SpdFSXnpl9m_bcPtY9xBwzx416i3lOFDnBEj27TfAYa5r9Fnipdnp7F7ceFgywZA7TP2pj1UhZ52GBSGZwK970Bwvm9peSzoTIO/s176-Ic42/fast-furious.png'/></span>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'><span style='float:left;margin-right:5px'><img alt='fast furious template' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZa39jF3v-1GcoSApKdmr2NrrU4271NYh9Ia7H05fE6SpdFSXnpl9m_bcPtY9xBwzx416i3lOFDnBEj27TfAYa5r9Fnipdnp7F7ceFgywZA7TP2pj1UhZ52GBSGZwK970Bwvm9peSzoTIO/s176-Ic42/fast-furious.png'/></span>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'><span style='float:left;margin-right:5px'><img alt='fast furious template' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZa39jF3v-1GcoSApKdmr2NrrU4271NYh9Ia7H05fE6SpdFSXnpl9m_bcPtY9xBwzx416i3lOFDnBEj27TfAYa5r9Fnipdnp7F7ceFgywZA7TP2pj1UhZ52GBSGZwK970Bwvm9peSzoTIO/s176-Ic42/fast-furious.png'/></span>
      <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
        <span itemprop='name'><data:title/></span>
      </a>
    </h2>
      </b:if>
</b:includable>

Cara Menambahkan Gambar di Samping Judul Blog (Header). Good luck and happy Blogging! (http://www.contohblog.com).*

Cara Menambah Gambar Ikon di Navigasi Menu Blog

Cara Menambah Gambar Ikon di Samping Daftar Navigasi Menu Blog

BANYAK template blog menggunakan ikon, simbol, atau gambar kecil di samping navigasi menu. Misalnya, menu HOME dilengkapi ikon rumah dan menu KONTAK disertai ikon gambar telepon atau email.

Dengan begitu tampilan blog tampak terkesan lebih profesional. Namun, jadinya "rame" dan mengurangi "clean" dan ke-simple-an blog. CB sendiri tidak memasangnya dengan alasan itu plus bisa mengurangi loading blog.

Bagi Anda yang ingin menambahkan gambar di samping daftar Menu blog, berikut ini caranya. Anda juga bisa langsung ke sumber tips ini.

Kita ambil contoh tiga menu atau halaman statis (static page): Home, About, dan Kontak. Kode link menunya umumnya seperti ini:

<div id="menu-items">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/kontak">Kontak</a></li></li>
</ul>
</div>

1. Tambahkan kode <span class> sehingga menjadi begini:

<div id="menu-items">
<ul>
<li><span class="home"><a href="/">Home</a></span></li>
<li><span class="about"><a href="/p/about.html">About</a></span></li>
<li><span class="contact">;<a href="/p/kontak">Kontak</a></span></li></li>
</ul>
</div>

2. Saatnya membuat link URL gambar ikon.

* Pilih gambar ikon yang dikehendaki, ukurannya disesuaikan dengan lebar dan tinggi area navigasi menu, sekitar 30x30 Pixel.

* Upload gambarnya ke Picasaweb Album di akun Blogger Anda

* Copas url link gambarnya dan simpan di kode-kode seperti ini:

#menu-items ul li {display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
#menu-items li span.home { background: url('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.about { background: url('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.contact { background: url('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }

* Setelah link gambarnya terisi, Copas semua kode di atas dan tempatkan di atas kode ]]</b:skin>

3. Save template!

Kini, mestinya, menu blog Anda sudah disertai gambar ikon atau symbol. Kalo ternyata hanya bikin "rame" dan mengurangi "kebersihan" tampilan blog, gak usah dipasang, apalagi jika mengurangi keceparan loading. (http://contohblognih.blogspot.com).*

Cara Mengubah Warna Judul Blog

MELENGKAPI posting Cara Mengubah Warna Tampilan Blog, berikut ini CB share tentang cara mengubah warna judul blog (Blog Title), bagi header blog yang tidak menggunakan gambar (logo image).

Mengganti atau mengubah warna judul blog ini biar nama blog kita tampak lebih keren dan terkesan profesional.

Cara Mengubah Warna Judul Blog

Langsung saja:

1. Template > Edit HTML
2. Cari kode #header .title 

Misalnya seperti ini:

#header .title {
    font-size: 260%;
    letter-spacing: 1px;
    line-height: 1.4em;
    margin: 0px;
    text-transform: uppercase;
    font-family: "Oswald";
    font-weight: 500;
    color: #000;
}

Anda tinggal mengubah kode color: #48D;  dengan Kode Warna HTML yang Anda suka.

3. Save template!

JUDUL DUA KATA: BEDA WARNA?

Ini buat judul blog yang terdiri dari dua kata atau lebuh, namun kata atau judul pertama ingin berbeda warna dengan kata lainnya. Contohnya:

Cara mengubah warna judul blog dua kata:
1. Template > Edit HTML
2.  Pastikan ada kode jQuery di atas kode </head>. Jika belum ada, copas saja kode ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>

3. Copas kode CSS berikut ini di atas kode ]]</b:skin> atau </style>

.headerword2{color: #48d;} 

4. Copy kode Javascript di bawah di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
(function($) {
//ubah widget title
$('.title,.widget-title')
.each(function() {
var me = jQuery(this);
me.html(me.html()
.replace(/^(\w+)/, '<span>$1</span>'));
});
$('h1.title').each(function(){
var text = $(this).text().split(' ');
if(text.length < 2)
return;
text[0] = '<span class="headerword2">
<span class="headerword">'+text[0]+'</span></span>';
$(this).html( text.join(' ') );
});
})(jQuery);
//]]>
</script>

5. Save Template!

Demikian Cara Mengubah Warna Judul Blog, jika Anda tidak menggunakan logo header. Kodenya CB dapat hasil "ngintip" kode yang ada di blog dengan judul beda warna :) Good luck! (http://contohblognih.blogspot.com).*

Cara Memunculkan Jumlah Komentar Lebih dari 200 di Posting Blog

POSTING Cara Memunculkan Jumlah Komentar Lebih dari 200 di Posting Blog dibuat karena di beberapa posting dan halaman blog CB, jumlah komentar lebih dari 200. Akibatnya, tidak semua komentar itu bisa muncul dan dijawab.

Posting yang memiliki banyak sekali komentar, antara 100 hingga 200 lebih komentar, ada di widget "Most Commented Post" di widget footer, termasuk halaman konsultasi.

Secara, threaded comment system blogger hanya memunculkan 200 komentar, Jika lebih dari 200 komentar, maka sisanya akan "ngumpet".

Cara mengatasinya, agar semua komentar muncul, maka kita bisa melakukan "switch to the old and new comments" seperti gambar berikut ini atau bisa dicek di posting dengan komentar terbanyak, juga muncul di posting yang belum atau tidak ada komentar.

Tips berikut ini, dan sudah diterapkan di blog CB ini, diambil dari "How to Show More than 200 Comments on Blogger Posts" dan "Newest 200+ Comments Not Showing In Blogger - Fix Found!".

Cara Memunculkan Jumlah Komentar Lebih dari 200 

1. Template> Edit HTML
2. Lakukan "Back up your template" buat jaga-jaga kalo gagal/error.

3. Copas kode berikut ini di atas kode <body> :

<script type='text/javascript'>

//<![CDATA[

function commentpagination(url, comment) {

var posturl = url;

var comment = comment;

cmpage = Math.ceil(comment / 200);

document.write('<a  href="' + posturl + '?commentPage=1">Oldest</a>');

for (var i = 1; i <= cmpage; i++) {

document.write('<a  href="' + posturl + '?commentPage=' + i + '">' + i + '</a>');

}

document.write('<a href="' + posturl + '?commentPage=' + cmpage + '">Latest</a>');

}

//]]>

</script>

4. Cari kode berikut ini:

<h4>

        <b:if cond='data:post.numComments == 1'>

          1 <data:commentLabel/>:

        <b:else/>

          <data:post.numComments/> <data:commentLabelPlural/>:

        </b:if>

</h4>

5. Copas kode berikut ini di bawah kode tersebut:

<span id='commentpaging'>

      <font style='color:#00aaff; font-size:12px; font-weight:bold; padding-right:4px; '>Comment Page:           </font>

<script type='text/javascript'>commentpagination(&quot;<data:post.url/>&quot;,&quot;<data:post.numComments/>&quot;);

</script>                                      

</span>

6. Copas kode CSS berikut ini di atas kode ]]></b:skin> atau di atas kode </style>

#commentpaging {

background: #F7F9FA;

margin: 0px padding :20px auto;

width: 580px;

border: 1px solid #ddd;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

text-align: right;

}

#commentpaging a {

margin-right: 5px;

}

Anda bisa mengubah warna background.

7. Save template!

Nah, kini Anda bisa melihat semua komentar, yang jumlahnya 200 lebih, di posting atau halaman statis. Good Luck and happy blogging! (http://contohblognih.blogspot.com/).*

Ini Dia Tips SEO yang Langsung Terbukti Hasilnya!

Ini Dia Tips SEO yang Langsung Terbukti Hasilnya. Rahasia Indeks Google!

BELUM lama ini CB share tentang sebuah tips SEO blog. Terbilang "sederhana", tapi ternyata, ini pengalaman CB nih, benar-benar terasa!

Hasilnya luar biasa! Maklum, tips seo itu 'kan sumbernya dari Google sendiri. Tips SEO Onpage.

Dalam sehari, jumlah pengunjung bertambah sekitar 200-an. Dalam seminggu, naik seribu lebih. Nah, dalam dua minggu, jumlah PageViews naik hingga 2000 lebih! Luar biadab, eh, luar biasa!

Itulah fungsi utama tips SEO. Mengoptimalkan posting blog kita agar mendapatkan peringkat yang baik di mesin pencari, bahkan bisa tampil di urutan nomo satu SERP Google.

Makin tinggi posisinya, makin tinggi pula potensi menarik pengunjung. Secara gitu, postingan yang ada di halaman depan Google itu masuk kategori konten berkualitas menurut Google.

CB jarang banget lho blogwalking, jarang komentar, apalagi komentas sampah (spam) dengan memasukkan link alamat blog dalam komentarnya, ihhhh... nggak banget deh!  CB fokus mengandalkan SEO (Onpage). Hasilnya, alhamdulillah, blog CB ramai pengunjung dan ramai komentar.

Nah, ingin tahu Ini Dia Tips SEO yang Langsung Terbukti Hasilnya itu? CB akan buka di Forum Blogger! Silakan gabung di sana, kita buka-bukaan di sana saja, sekaligus bebas menuliskan link blog Anda di sana. (http://contohblognih.blogspot.com/).*

Yuk, Gabung Forum Blogger Indonesia (FBI)!

Mengganti Link Posting Lama, Beranda, dan Posting Baru Menjadi Judul

Cara mengubah tulisan link "Posting Lama" (Older Post), "Beranda" (Home), dan "Posting Baru" (Newer Post) menjadi judul artikel biar lebih SEO friendly.

POSTING ini lanjutan tips "Mengganti Link Newer Post, Home, Older Post dengan Judul Posting". Tutorial sebelumnya berlaku untuk blog yang sudah menggunakan navigasi halaman (blog pager) berupa nomor/angka (numbered page navigation).

Nah, jika navigasi halaman blognya masih berupa Posting Lama - Posting Baru, maka tips sebelumnya akan memunculkan masalah di halaman label, yakni link "Older Post" dan "Newer Post"-nya pun menjadi judul di halaman depan dan halaman post per label.

Jika template blog Anda belum menggunakan navigasi halaman nomor, dan ingin mengubah link posting lama (older post), beranda (home), dan posting baru (newer post) menjadi judul posting yang tentunya lebih SEO Friendly dan User Friendly, maka gunakan cara berikut ini.

Demonya bisa dilihat di New Johny Wuss yang sukses memasang kode ini.

Cara Mengganti Link Posting Lama, Beranda, dan Posting Baru Menjadi Judul

1. Di dashboard blog, klik "Template" > "Edit HTML"

2. Temukan (Ctrl+F) kode </head>

3. Copy & Paste kode berikut ini di bawah kode </head>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#blog-pager-newer-link {font-size:13px;width:290px;float:left; text-align:left;}

#blog-pager-older-link {font-size:13px;width:290px;float:right; text-align:right;}

#blog-pager-older-link a{width:280px;text-align:right;color:#555;font:bold 13px Arial;padding:5px}

#blog-pager-newer-link a{width:290px;text-align:left;color:#555;font:bold 13px Arial;padding:5px}

a.home-link{display:none}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script type="text/javascript" src="http://yourjavascript.com/4635837019/blogpager.js"></script>

</b:if>

CATATAN:

Jika di template blog Anda sudah ada kode warna merah, berapa pun serinya, maka hapus saja, gak usah diikutkan!

4. Save Template!

Sekarang coba klik salah satu posting, apakah sudah link "posting terbaru", "beranda", dan "posting lama"-nya berubah. Jika belum berubah, berarti Anda gagal :)

Silakan ulangi lagi dengan teliti. Jika berhasil, maka di halaman depan tetap akan ada menu/tombol link "home" (beranda) dan "older post" (posting lama), sedangkan di halaman dalam (single post/single page) akan berubah menjadi judul posting.

Good Luck & Happy Blogging! (http://contohblognih.blogspot.com).*

Pasang Posting Terbaru plus Gambar Thumbnail di Sidebar Blog

Cara Menampilkan atau Memasang Widget Posting Terbaru, Label Tertentu, plus Gambar Thumbnail (Recent Post with Image Thumbnail) di Sidebar Blogger.

KODE HTML/Javascript widget untuk memasang widget Latest Posts, Recent Post, atau Artikel Terbaru di sidebar blog CB share setelah "diamankan" dari injeksi link dan dipercanti.

Dengan kode ini Anda bisa menampilkan posting terbaru semua kategori, bisa juga label tertentu, kategori unggulan konten blog Anda.

Demonya ada di ilustrai gambar. Live demonya bisa dilihat di sidebar blog ini. CB menampilkan posting terbaru plus gambar untuk Label Template Blog SEO.

Sebelumnya sudah dishare juga tentang cara membuat widget posting terbaru, random post, dan most commented posts.

Cara Pasang Widget Recent Posts plus Gambar di Sidebar Blog

1. Layout > Add a Gadget > pilih HTML/Javascript
2. Title/Judul isi dengan "Posting Terbaru" (Jika Semua Label) atau "Nama Label" (Jika Label Tertentu)
3. Copas kode berikut ini di kolom Content:

<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {min-height: 80px;background:none;padding:5px 0;background:none;}.recent_posts_with_thumbs a {text-decoration:none;font-weight:700;font-size: 12px;}.recent_posts_with_thumbs strong {font-size:10px;}i {font-style: normal;font-weight: 400;font-size: 11px;}
</style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 90;
</script><script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Catatan:
- Ganti kata warna merah dengan nama label Anda.
- Hapus kode /-/Label jika ingin menampilkan semua posting terbaru di semua label

4. Save!

Demikian cara memasang widget Posting Terbaru plus Gambar Thumbnail di Sidebar Blog. Good Luck! (http://www.contohblog.com/).*

Cara Memasang Kode Anti Komentar Spam di Blog

Menghapus Otomatis Komentar Spam & Link Aktif di Blog dengan Kode Anti Spam Comment.

POSTING Cara Memasang Kode Anti Komentar Spam di Blog ini merupakan upadate dua tulisan CB sebelumnya, Cara Hapus Komentar Spam Otomatis dan Cara Mengatasi Komentar Spam. CB update terkait beberapa kode anti-spam yang tidak bekerja.

Saat CB ganti template usai melakukan Custom Domain, lebih tepatnya memodifikasi kembali template biar lebih seo friendly, ternyata kode anti-komentar spam yang lama terpasang dan works, tidak lagi berfungsi, mungkin ada "bentrok kode".

Di blog CB, kode anti-spam yang meatikan link hidup (link aktif) berikut ini tidak berfungsi:

Kode Remove Spam Forever di Blog
(Disimpan di atas kode </body>)

<!--Stop Blog Comments -->
<script>$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>
<!--Stop Blog Comments -->

Demikian juga kode anti komentar spam atau "pembunuh link aktif" berikut ini --disimpan di atas </body>

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> No SPAM Here!!!";
            content[i].className = "spammer-detected";
        }
    }
}
blockLinks('comment-holder', 'p');
//]]>
</script>

KODE ANTI KOMENTAR SPAM YANG WORKS!

Setelah mencoba beberapa kode, akhirnya inilah kode anti spam comment yang berfungsi di blog ini. Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script>

Tapi.... itu link hidup di komentar cuma mati doang! Teks-nya tetap muncul! Maka..... ini dia cara ampuhnya:

1. Simpan kode berikut ini di atas kode ]]</b:skin> atau </style> :

#comments p a {display:none;}

2. Simpan kode berikut ini di atas kode </head> :

<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments p").find("a").replaceWith("<mark>Spam Detected!</mark> Link aktif otomatis terhapus!!!");
});
</script>

3. Pastikan di template Anda ada koe jQuery seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Jika belum ada, pasang kode jQuery terbaru itu di atas kode </head>

4. Save template!

Demikian Cara Memasang Kode Anti Komentar Spam di Blog berdasarkan pengalaman terkini. Kode anti komentar spam buat blogger banyak banget di-share oleh para blogger baik hati. Googling aja :)  Good Luck! (http://www.contohblog.com/).*

Cara Mengatasi "Error parsing XML" Saat Edit Template Blogger

Cara Mengatasi "Error parsing XML" Saat Edit Template Blogger

SAAT memasukkan kode script, baik HTML maupun JavaScript (JS), kadang sang blogger gak mau SAVE dan bilang begini: "Error parsing XML, line XXXX, column XX: The reference to entity "max-results" must end with the ';' delimiter."

Bahasa Indonesianya: 'Kesalahan saat mengurai XML, baris XXXX kolom XX ...."

Pernah ngalami? CB mah sering, secara CB 'kan suka utak-atik template dengan bongkar pasang kode di dalam template.

Misalnya, sebelum posting ini ditulis, CB memasukkan kode

http://contohblognih.blogspot.com/search/label/Tips%20SEO?&max-results=5'

Eh Eyang Blogger malah bisang "error parsing...." dan gak mau save. Apa yang salah? Tak lain tak bulan adalah kode & yang harus di-parse menjadi &amp; (biar valid HTML).

Maka, setelah kode tersebut diubah menjadi

http://contohblognih.blogspot.com/search/label/Tips%20SEO?&amp;max-results=5'

masalah pun tertasai. Template bisa di-save dengan baik dan benar.

Btw, kode tersebut adalah link untuk menu per label, yakni menu label/kategori Tips SEO. Jika Anda mau memasangnya di Navigasi Menu, maka tinggal ganti:

1. Alamat blog (http://contohblognih.blogspot.com) 
2. Nama label (Tips%20SEO) --kalau Label-nya satu kata gak usah pake %20)
3. Jumlah posting (5) yang akan ditampilkan saat diklik.

ERROR KODE LAIN
Jika yang Anda alami kode lain, bukan seperti yang CB alami di atas, maka caranya lebih gampang lagi, yaitu tinggal PARSE dulu kode HTML Anda.

1. Buka Online HTML Parsing Codes atau Bloggercentral HTML Parse
2. Copy & Paste kodenya di kolom yang tersedia
3. Akan muncul otomatis kode hasil Parsing
4. Copy & Paste kode HTML yang sudah diparse ke template
5. Save!

Catatan:
Biasanya Parse HTML di Blogcrowds-HTML Parse, tapi CB cek situs tsb. sudah tidak aktif.

Masih error juga? Masa sih??!

Oke, itu saja posting kali ini, siapa tahu Anda mengalami dan begitulah Cara Mengatasi "Error parsing XML" atau "Kesalahan dalam mengurai XML..." saat mengedit template blogger. (http://contohblognih.blogspot.com).*

Kode Anti Copy Paste untuk Posting Blog Tertentu

www.hackingloops.com

Cara Pasang Kode Anti Copas (Disable Klik Kanan) untuk Posting Blog Tertentu. Matikan fungsi klik kanan mouse untuk mempersulit blogger tukang copas.

MEMASANG kode anti-copy paste (copas) untuk melindungi posting (konten) blog dari "pencurian" atau "plagiat" sebenarnya sudah tidak ampuh banget.

Sebagian blogger bahkan mengatakan, memasang kode anti-klik kanan (disable right click) atau anti-Ctrl+C dsb. adalah "masa lalu".

Kata mereka yang anti-kode anti-copas, jika konten blog gak mau dicopas, gak usah bikin posting aja. "Gak usah nulis atau share apa-apa di blog kalo gak mau dicopas," katanya. Secara, kode anti-copas sudah tidak ada yang ampuh. Lagian, blogging is sharing! Itu kata mereka...

Berikut ini CB share kode anti-copas untuk posting tertentu di blog. Artinya, tidak semua posting blog anti-klik kanan dan ant-copy & cut/paste, tapi hanya halaman tertentu atau tulisan tertentu.

Contoh Posting Blog dengan Kode Anti-Klik Kanan.

Cara Pasang Kode Anti Copy Paste untuk Posting Blog Tertentu

1. Posting seperti biasa.
2. Begitu selesai, klik mode HTML
3. Copas kode berikut ini di bawah alinea paling akhir tulisan.

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'/>

4. Publish! Beres....

Sumber Kode
Sumber Kode
Kode Proteksi Gambar

KODE ANTI-KLIK KANAN UNTUK SELURUH KONTEN BLOG
Kode anti-klik kanan alias anti-copas untuk seluruh konten blog juga kode tersebut. Namun, cara pasangnya langsung di dalam template, yaitu mengganti kode <body> dengan kode di atas. Coba saja.

Klik: Contoh Blog Anti-Klik Kanan Seluruh Konten.

Kode Anti-Copas Selengkapnya
Sebelumnya CB juga sudah share kode-kode anti-klik kanan alias anti copas posting blog yang sebenarnya gak ampuh-ampuh banget, namun setidaknya "meminimalkan" atau "mempersulit" para blogger tukang copas tulisan orang lain.

Baca: Cara Melindungi Posting Blog dari Copy Paste

Copas tulisan sah-sah saja, selama menyebutkan sumbernya. Namun, blog copy paste sudah pasti akan ditolak Google Adsense. Kalo sudah pasang Adsense, maka Googla akan nge-banned blogger yang kontennya copas, meskipun menyebutkan sumber. (http://contohblognih.blogspot.com).*

Cara Pasang Widget Daftar Posting Terbaru (Feed) Blog Lain

POSTING tentang cara memasang widget daftar posting terbaru dari blog orang lain di blog kita sendiri ini dibuat setelah ada yang tanya di NJW Simple:

"bro. .itu cara nampilin postingan blog lain yang ada di bawah itu, gimana ya?? yang judulnya "info bola & moto gp" , cara nyambunginnya bagaimana ??"

Di sana sudah dijawab. Lebih OK lagi CB jadikan posting tersendiri.

Demonya bisa dilihat di widget footer demo template NJW Simple atau di sidebar paling bawah blog ini. Itu namanya Widget Feed.

Cara Pasang Widget Daftar Posting Terbaru (Feed) Blog Lain

1. Layout > Add a Gadget > Pilih "Feed"
2. Masukkan url atau link lengkap alamat blog yang mau ditampilkan di widget, misalnya: http://www.sepakbolamagz.com atau http://koleksikode.blogspot.com
3. Klik "Continue" dan ubah judulnya
4. Save!!!

Widget Feed blog lain sudah muncul di sidebar ataupun di footer blog Anda.

Lihat Gambar:

Cara ini juga bisa digunakan untuk menampilkan widget Posting Terbaru dan Posting Terbaru dengan Label Tertentu.

• Untuk Posting Terbaru, cukup masukkan alamat blog sendiri.
• Untuk Posting Terbaru Label tertentu, kode .../feeds/post/default ganti dengan ....feeds/posts/default/-/Namalabel

Demikian Cara Pasang Widget Daftar Posting Terbaru (Feed) Blog Lain. Menambah beban loading, tapi di sisi lain juga menambah seo blog karena judul postingan itu juga terindeks oleh mesin pencari Google dan mengarah ke blog kita. Good Luck! (http://www.contohblog.com).*

New Thesis SEO V3 - Template Blog SEO Friendly Terbaru 2015

New Thesis SEO V3 - Template Blog SEO Friendly Terbaru 2015. Setelah meluncurkan New Johny Wuss V3, CB luncurkan New Thesis SEO V3, update dari New SEO Thesis V1 dan New Thesis SEO V2.

Alasan update sederhana saja, banyak pengguna yang minta tampilan New SEO Thesis V1 tapi Responsive. Beberapa update dan perbaikan juga dilakukan sehingga LEBIH bersahabat dengan mesin pencari.

Tidak banyak basa-basi lagi, ini dia penampakan dan data New SEO Thesis V3 yang tentu "lebih" SEO Killer untuk mendongkrak ranking dan trafik (pengunjung) blog Anda.

JUARANYA TEMPLATE SEO & SIMPLE !!!

SEO Score for http://newthesisseov3.blogspot.com/
100 %
Congratulations!

Fitur:

Responsive - Mobile Friendly

Drop Down Navigation Menu

SEO Heading Tags

Fast Loading

Markup Schema Ready

SEO Breadcrumbs

No Error at Rich Snippet Google

SEO Meta Tags (Dynamic SEO Meta Tags)

Easy Customized Design

Simple, Minimalis, Ringan!

New Thesis SEO V3 - Template Blog SEO Friendly Terbaru 2015

Need NTS V3 Premium?

New Johny Wuss V3 Update - Template Blog SEO Friendly Modif Terpopuler 2015

SETELAH berbagi template seo friendly terbaru NJW Simple dan Update New Johny Wuss V1, kini CB bagi lagi update template template super seo killer NJW V3.

For this time, this is the newest blogger template of 2015. Template seo friendly terbaru 2015. Free download with premium quality!

Share terbaru ini bagian dari ekspresi syukur CB atas meningkatnya penghasilan Google Adsense setelah blog ini di-Custom Domain dari http://contogblognih.blogspot.com menjadi www.contohblog.com.

Apa saja yang berubah di NJW V3 Update? 

Silakan buka saja blog demonya. Yang jelas, di template terbaru ini, sticky, static, atau floating menu-nya berubah jadi main-menu, bukan lagi top-menu (page list).

Sidebar widget juga lebih rapi. Modif "terbesar" adalah menghapus CSS Bundle bawaan blogger sehingga tampilannya lebih kenceng (more fast loading).

Bagian "Featured Posts" juga dibuat lebih responsive lagi (mobile friendly), sudah ditambah kode css responsive.

Bagi Anda yang ingin modif lebih dari itu, silakan gunakan Layanan Premium CB. Anda bisa request modif bagian mana lagi biar lebih sreg dengan selera Anda.

Template New Johny Wuss V3 ini termasuk paling banyak didownload, terpopuler, mungkin karena tampilannya lebih simple dari Seri NJW lainnya. "Laporan" dari server penyimpan file template menyebutkan, NJW V3 termasuk "popular downloads".

Bagi Anda pengguna NJW, khususnya NJW V3, jika ingin mengganti dengan versi terbaru (update), monggo, silakan... masih gratis! Keep credit link maskolia dan cb blogger ya, biar berkah! Good luck! (http://www.contohblog.com).*

Link DOWNLOAD NJW V3 UPDATE
https://app.box.com/s/l2xrj2ahc9c95a6dgs3qp7ohuimiuh4w

2 Template Simple Responsive Terbaru 2015

The Newest  SEO Ready, Mobile Friendly, Fast Loading, Cool,  Simple & Clean Responsive Blogger Template. Free Download!

SEO Friendly, Mobile Friendly, User Friendly, ringan, cepat (Fast Loading), simple, dan terbaru 2015 adalah ciri-ciri template blog keren yang CB share ini, sebagaimana template-template blog seo sebelumnya yang sudah lebih dulu hadir.

1. CB Bloggerz Template
2. Cara CB Template

Dua template ini merupakan hasil modifikasi atau versi lain dari New Thesis SEO V2. Hanya mengubah beberapa elemen, dengan tetap mempertahankan ke-seo-an, ke-responsif-an, dan loading cepatnya.

Dua template terbaru 2015 ini cocok dan dirancang untuk personal blog (blog pribadi).

CB Bloggerz Template dua kolom, untuk blog pribadi dengan "niche blog" tertentu dan tidak banyak label/kategori.

Cara CB Template tiga kolom, ada sidebar kiri untuk menampilkan label/kategori, bagi blog pribadi yang memilih "general blog" dengan banyak kategori.

Keduanya memiliki skor seo sempurna, 100% (versi Chkme) dan loadingnya kenceng (nilai A-B) versi GT Metrix.

Tak kalah pentingnya adalah kedua template ini sama-sama lolos Google Richsnippets alias Googel Structured Data yang punya peran penting bagi indeks mesin pencari --khususnya Google.

Dua template ini gratis! Free, dengan catatan Anda tidak boleh menghapus credit link di footer! Jika menghapusnya, CB tidak akan tinggal diam --lapor ke Pengadilan Google DMCA!!!

Ini dia link demo dan download kedua Template Simple Responsive Terbaru 2015 Free Download alias Gratis ini. Good Luck!

CB Bloggerz - Simple & Clean Responsive Blogger Template

Cara CB Template - Simple & Clean Responsive Blogger Template

Please remember! You have no right to remove credit link footer on these new, cool, and clean templates. Google DMCA will penalise you if yo do that. Thanks!

Top 5 Template Blog SEO Friendly Terpopuler 2015

NJW, NTS, Sang SEO, New Minima, dan Evo Magz - Template SEO Friendly Terbaru, Terbaik, dan Terpopuler 2015. 

SETELAH posting Top 5 Template Blog Terpopuler 2014, kali ini CB coba merangking Top 5 Template Blog SEO Friendly Terpopuler 2015, yakni template blog seo friendly, fast loading, dan responsive yang paling banyak digunakan blogger Indonesia sepanjang tahun ini.

Tentu, Top 5 Template Blog SEO Friendly Terpopuler 2015 ini bukan hasil survei resmi dan "ilmiah", tapi hasil pengamatan selama ini saat "tidak sengaja" membuka blog-blog yang nangkring di peringkat teratas halaman hasil pencarian Google (SERP).

Template blog seo friendly paling banyak digunakan oleh blogger Indonesia ini bisa menjadi acuan bagi Anda yang masih bingung memilih template, saking banyaknya template seo friendly, fast loading, dan responsif, baik versi gratis maupun premium.

Tahun lalu, CB sebutkan top 5 template terpopuler itu sebagai berikut:

1. Johny Wusss > Johny Wuss Responsive (NJW). DEMO
2. Thesis SEO > New Thesis SEO (NTS). DEMO
3. Fastest Magz > Premium Template. DEMO
4. Super SEO > New Super SEO. DEMO
5. Sengaja dikosongkan untuk diisi pengunjung.

Top 5 Template Blog SEO Friendly Terpopuler 2015

Selama tahun 2015 yang tinggal 2,5 bulan ini, bermunculan template baru. Menurut "pengamatan", template seo friendly terpopuler yang banyak dipakai blogger Indonesia, lima besar, adalah sebagai berikut:

1. New Johny Wuss (NJW). sengaja dinomorsatukan. Secara, ini 'kan template hasil modif CB. Terbanyak dipakai (didownload) adalah NJW V2.
2. Sang SEO. Ada dua versi, premium dan gratis.
3. Minima Colored. Ada banyak versi, termasuk Minima Colored Redesigned. 
4. Evo Magz. Template Premium.
5. New Thesis SEO (NTS) V3.

Tampilan Sang SEO, Minima Colored, dan Evo Magz sangat mirip. Entah desainernya saling saling contek, atau memang kebetulan saja "kompak". Silakan perhatikan screenshot dna demonya di bawah. 

Yang jelas, ketiganya sama-sama menggunakan Next Previous Judul Posting, Realated Post Thumbnail dari DTE, dan Top Menu plus Media Sosial. 

CB "mencurigai" ada template "clone" yang menggabungkan Sang SEO, Minima Colored, dan Evo Magz itu. Template yang seperti gabungan ketiganya adalah Minima Stylo yang sudah CB share. Gratis download. Silakan jaka berminat.

Berikut ini penampakan dan demo Top 5 Template Blog SEO Friendly Terpopuler 2015.

1. NEW JOHNY WUSS

DEMO

2. SANG SEO

DEMO

3. MINIMA COLORED

DEMO

4. EVO MAGZ

DEMO

5. NEW THESIS SEO V3

DEMO

Semoga Top 5 Template Blog SEO Friendly Terpopuler 2015 menjadi inspirasi dan "pedoman"  kususnya bagi Anda yang "galau memilih" dalam menggunakan template blog. 

Kita juga bisa memodifikasi template yang sedang kita gunakan menjadi mirip kelima template seo friendly terpopuler di atas, tinggal ganti kode css dan memasang script tertentu.

UPDATE! 

New from CB: NJW Simple

DOWNLOAD & DEMO

Pentingkah Template Blog SEO Friendly?

Jangan tanya lagi, penting pisan! Banget penting agar blog mudah dan cepat diindeks Google. 

Namun, di atasnya ada yang TERPENTING, yaitu Konten Berkualitas. (Baca: 3 Penentu Peringkat Blog di Google). Good luck and happy blogging! (http://www.contohblog.com/).*

Jenis-Jenis Template Blog

Macam-Macam Template Blog untuk Beragam Jenis, Tipe, dan Niche Blog (Blogger/Blogspot).

SERING ada pertanyaan begini: kalo template yang cocok buat resep masakan yang mana ya? Kalau template ini cocok 'gak ya buat blog tips kesehatan? Atau... ada gak template buat blog sepakbola?

Intinya, yang bertanya tampak "bingung" memilih template untuk blog yang akan dibuat atau sedang dikelola.

CB selalu menjawab, template mana saja cocok, selama sang template itu SEO Friendly, Responsive, dan Fast Loading! Soal desain alias tampilan, nomor dua, yang penting seo optimized dulu!

Google atau mesin pencari lainnya "gak peduli" sama warna atau model tampilan, tapi lebih peduli sama Meta Tags, Konten Berkualitas, dan Loading Blog yang kenceng dan ramah mobil (mobile friendly/responsive). Template Simple & Clean lebih disukai.

Namun demikian, para desainer template sudah membuat macam-macam template sedemikian rupa agar sesuai dengan niche dan tipe blog, misalnya buat blog pribadi ada "personal template", blog toko online ada "online shop template", atau blog berita ada "news and magazine template".

Jenis-Jenis Template Blog

1. Template Blog  Standar Blogger

Default Blogger Template atau Template bawaan blogger, mulai dari yang Simple hingga Dynamic View. Kita bisa mengubah atau memodifikasinya di Template > Customize.

Default Blogger Template - Simple

CB Theme - Hasil Modif Template Bawaan Blogger (Demo)

2. Template Blog  Gaya Majalah

Magazine Style. Biasanya tampilan depannya dua kolom, namun kolom utama (posting area) dibuat dua-tiga kolom, misalnya Auto Readmore Dua kolom ala Johny Wuss atau template magazine buatan Maskolis dan Uong Jowo. Template ini cocok buat majalah atau berita online. Terlalu "ramai" jika digunakan untuk blog pribadi.

Contoh Template Magazine Style - Google SEO (Demo)

3. Template Blog  Gaya Suratkabar

Newspaper Template. Dirancang sepertu gaya majalah, namun lebih banyak memunculkan judul posting di halaman depan, layaknya koran. 

Contoh Template ala Suratkabar: CB Newspaper (Demo)

4. Template Blog  Simple

Template sederhana menjadi pilihan banyak blogger. Lihat saja blog para "mastah". Biasanya simple, gak neko-neko, yang penting bersih, seo optimized, responsive, dan fast loading. Berbeda dengan blogger "newbie" yang biasanya "pasang semua widget" yang membuat blog jadi ramai dan berat.

Template Simple CB (Demo)

5. Template Blog Portfolio

Template blog untuk menampilkan hasil karya atau galeri produk/jasa. Template portfolio untuk blogger masih dibilang sedikit.

Contoh Blog Portfolio: Shotmagz

6.  Template Blog Bisnis

Business Template. Ini untuk blog bisnis atau perusahaan.

Business Solution Template: DEMO & DOWNLOAD

7.  Template Blog Corporate

Sama dengan template blog bisnis.

8. Template Blog  Online Store

Template blog khusus toko online. Dirancang untuk menampilkan produk, spesifikasi, dan harga, serta cara pemesanan/pembelian.

Contoh Blog Toko Online Keren: Demo

9. Template Blog Personal Folio (CV)

Dikenal dengan Online CV. Template blog untuk menampilkan profil pribadi atau biodata online.

DEMO & DOWNLOAD

10. Template Blog Unik

Template blog yang lain dari yang lain, beda sendiri, tidak lazim.

Template Blog Unik

11. Template Blog Ghost Button

Template blog yang menampilkan gamba penuh di halaman depan, memenuhi layar (screen) baik desktop maupun mobile. Ini template yang sesuai dengan trend desain website.

More Info

12. Template Blog Video

Template blog khusus untuk blog video (Vlog/Videolog)

More Info

13. Template Blog Foto

Template Blog khusus Foto (Phlog/Photolog)

More Info

Semua jenis template di atas sudah CB share di blog ini, kecuali yang ada link demo & downloadnya. Silakan klik Template SEO atau Galeri Template CB. Btw, gambar template paling atas (ilustrasi posting) adalah CB Magazine. Good Luck! (http://contohblognih.blogspot.com).*