Cara Menambahkan Related Post di Blogspot

Selain masalah postingan, percaya atau tidak tampilan blog yang user friendly terbukti ampuh dalam meningkatkan page view blog yang kita miliki. menurut pengalaman pribadi saya, blog yang memiliki widget seperti related post, recent post sangat berpeluang meningkatkan page view blog yang mereka miliki.

Sederhana saja, Setelah pengunjung selesai membaca artikel pasti mereka akan mencari-cari lagi artikel yang menarik di blog yang mereka kunjungi. dengan adanya related post atau recent post tentu hal ini akan lebih memudahkan pengujung untuk bernavigasi pada halaman blog atau website kita. lihat saja contohnya pada website seperti detik, tribunnews dan kompas. Berikut saya sharing cara membuat related post dimana hasil akhir yang kita harapkan seperti gambar berikut

Cara Menambahkan Related Post di Blogspot
Langkah Membuat Related Post di Blogspot

1.  Masuk ke Dashboard Blog | Template | Edit HTML

2.   Cari code </head> dan letakan code berikut tepat diatasnya
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> 
<script src='https://a97b243d7ace76a3ed01701c4416c3bc265c5577.googledrive.com/host/0B-DXQ7rA-Fb7a3RQX1c5U25sVFU/' type='text/javascript'/>

3. Langkah terakhir, cari code <data:post.body/> kemudian letakan code berikut tepat dibawahnya. hal ini akan menjadikan widget related post berada dibagian akhir tulisan pada postingan 
<!-- Related Post -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts  </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
Simpan Template anda dan lihat hasilnya. Happy Blogging. :D
Cara Menghilangkan Show All Post Label di Blogspot

Cara Menghilangkan Show All Post Label di Blogspot

Membuat tampilan template blog yang menarik memang menjadi PR tersendiri bagi seorang blogger. Pasalnya jika hanya mengandalkan template default dari blogger rasanya kurang greget dan terkesan kaku. setidaknya menurut saya sendiri. maka tidak heran jika template-template responsive mulai bermunculan baik yang pro ataupun yang free.

namun ayangnya, meski sudah banyak template yang menarik, bagus dan responsive permasalahan-permasalahan mendasar pada tampilan blog ternyata masih saja ada seperti pesan Showing Posts With Label yang menurut saya memberikan pemandangan yang cukup tidak enak dilihat. oleh karena pada postingan ini saya ingin berbagi tentang cara menghilangkan pesan Show Posts tersebut. hehe

Perlu dicatat bahwa masalah tersebut muncul jika sebuah blog diakses berdasarkan label atau menunya semisal http://canthafamily.blogspot.com/search/label/nama_label lantas bagaimana menghilangkannya?

1. Masuk ke Dashboard Blog Anda | Template | Edit HTML

2. Cari Code seperti berikut ini (Gunakan CTRL+F). Anda dapat menggunakan kata kunci seperti status-message atau navMessage
<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
    <div class='status-msg-wrap'>
      <div class='status-msg-body'>
<data:navMessage/>
      </div>
    <div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

3. Jika sudah ketemu silahkan ganti atau replace code diatas dengan code berikut ini
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

4. Simpan Template anda. Maka Lihatlah hasilnya. Pesan Showing Posts With Label akan hilang. Selamat mencoba. Happy Blogging. :D

Cara Memasang Syntax Highlighter di Blogspot

Syntax Highlighter adalah sebuah cara lain untuk menampilkan suatu source code atau sintax pada sebuah website atau blog. Syntax highlighter digunakan oleh blogger agar sebuah syntax yang disharing dalam suatu postingan website atau blog agar terlihat menjadi lebih menarik. Penggunaannya dapat kita manfaatkan pada source code Bahasa pemrograman apapun termasuk PHP, Java, Delphi atau Pascal, Perl, Python dan lain sebagainya. Berikut saya akan berbagi sedikit trik bagaimana cara memasang syntax highlighter di blogspot. adapun hasil yang kita inginkan adalah seperti gambar berikut

Cara Memasang Syntax Highlighter di Blogspot

Langkah Memasang Syntax Highlighter di Blogspot

1. Masuk ke Dashboard Blog | Template | Edit HTML

2. Cari Code ]]></b:skin> (sebaiknya gunakan CTRL+F). Jika sudah ketemu silahkan copy dan paste code berikut tepat dibawahnya (code dibawah menggunakan syntax highlighter) lalu Simpan Template anda.
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushDelphi.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf'; 
SyntaxHighlighter.all(); 
</script> 
3. Langkah terakhir adalah penggunaanya. Caranya letakan syntax atau source code anda tepat sebelum tag </pre> pada code berikut
<pre class="brush:jfx, brush:javafx, brush:java, brush:php, brush:css, brush:js, brush:html, brush:sql"> // Source Code Anda Disini </pre>

4. Anda perlu melakukan parse code terlebih dahulu pada source code bahasa pemrograman berbasis website seperti PHP, ASP dan HTML sebelum meletakan code anda disana.

5. Anda perlu menambahkan, mengganti atau mengurangi code brush:jenis_syntax pada step 3 diatas sesuai dengan jenis source code atau script anda.

6. Pada saat anda menggunakan syntax highlighter tersebut anda perlu mengganti mode editor pada blog dengan HTML (bukan Compose) agar syntax highlighter dapat bekerja dengan baik. 

Berbagi Pengalaman Bermain Google Adsense

Mereka yang sudah akrab didunia bisnis internet utamanya layanan periklanan PPC (Pay Per Click) tentu sudah tidak asing dengan yang namanya Google Adsense atau yang juga akrab disebut GA. Media periklanan milik google ini banyak dimanfaatkan oleh blogger untuk meraup dolar dari internet dengan sistem per klik; yaitu dengan memasang iklan milik GA yang nantinya jika diklik oleh pengunjung pemilik blog akan mendapatkan komisi.

Meski terlihat mudah tapi nyatanya, untuk bisa memperoleh akun GA tidaklah mudah karena saat ini GA sangatlah ketat dalam merekrut Publisher. selain itu, berdasarkan pengalaman saya sendiri, karena Layanan PPC semacam ini sudah Familiar dikalangan Netter maka hanya sangatlah jarang orang yang mau mengklik iklan yang ada diblog. Saya sendiri bisa mendapatkan bayaran setelah 6 bulan memasang iklan diblog saya dimana berdasarkan TOS Google pembayaran baru akan dikirimkan setelah saldo mencapai lebih besar dari $100.

Pembayaran Pertama dari Google Adsense

Susah senang sudah saya lewati dalam menjadi publisher yang awalnya saya mulai dari layanan PPC indonesia yaitu IdBlognetwork tapi sayangnya Gagal alias tidak membuahkan Hasil. Memang mencari uang tidak ada yang mudah. Pada Awal tahun 2014, saya benar-benar terkejut karena ternyata Google Adsense Menerima saya menjadi Publisher setelah berkali-kali ditolak. Alhamdulillah. :)

Dan Setelah Beberapa bulan terhitung dari bulan Februari saya baru menerima pembayaran pad bulan Juli 2014 yang bertepatan dengan akhir bulan Ramadhan. Jadi secara tidak langsung Google mengirimkan saya THR (Tunjangan hari raya). Terima kasih Google. hehe

Berbagi Pengalaman Bermain Google Adsense

Bukti Pembayaran atau Payout dari google adsense yang saya terima dapat anda lihat pada gambar diatas. Jumlahnya tidak terlalu besar (maaf disensor) tapi saya bersyukur karena usaha saya selama ini untuk bisa mencicipi uang google akhirnya tercapai juga semoga bayaran kedepan tambah banyak. Pembayaran tersebut saya cairkan melalui kantor pos. Inilah Pembayaran pertama google adsense yang saya terima. Salam Blogger. sukses selalu untuk kita semua.   

Cara Merubah Tampilan Template Blogspot

Selain isi artikel, Tampilan Blog bisa dikatakan merupakan sebuah hal yang perlu diperhatikan guna memberikan kenyamanan pengunjung. Dengan Tampilan yang menarik tentu pengunjung blog kita akan betah berlama-lama pada halaman blog kita apalagi jika anda berniat untuk mendatangkan penghasilan melalui blog maka hal ini bisa dikatakan adalah hal yang wajib guna memberikan kemudahan pengunjung untuk menavigasi blog anda.

Blogspot memang tidak sama seperti blog lain seperti wordpress atau blogdetik karena blogspot memiliki fitur Editing HTML sehingga untuk mengelola blogspot kita juga harus memahami minimal bahasa HTML dan CSS karena ini erat kaitannya dengan mengedit tampilan Blogspot.

Untuk merubah atau mengganti template blogspot sebenarnya bisa dikatakan gampang-gampang susah. Pasalnya meskipun kita dapat dengan mudah mendownload dan menggunakan template gratisan pada layanan template gratis seperti btemplates terkadang kita juga perlu melakukan editing melalui Fasilitas Edit HTML semisal mengedi menu, mengganti gambar slideshow dan lain sebagainya.

Langkah Mengganti Template Blogspot

1. Silahkan Download Sebuah Template pada Layanan Penyedia Template Gratis. Saya merekomendasikan anda mendownload di btemplates

2. Setelah anda mendownload silahkan diextract Lalu login ke Halaman Dashboard Blog anda | Masuk ke tab Template | Pilih cadangkan/Pulihkan seperti gambar berikut

Cara Merubah Tampilan Template Blogspot

3.  Berikutnya Pilih File. Cari File Template yang telah anda download dan extrack sebelumnya kemudian Pilih file *.XML-nya saja | Unggah.

Cara Merubah Tampilan Template Blogspot

Tunggu Hingga Prosesnya selesai kemudian buka blog anda. Selamat mencoba. Happy Blogging. :)

Solusi Duplicate Tittle Tag di Webmaster Tools

Mengurusi Blog memang tidaklah mudah. Selain membuat postingan secara rutin kita juga perlu memeperhatikan kesehatan blog yang kita kelola. hal ini dapat kita lakukan dengan memantaunya secara rutin melalui webmaster tools. Pada beberapa kasus, masalah seperti Duplicate Tittle Tag kerap menjadi persoalan dikalangan Blogger lebih-lebih pada blogspot. Bisa dikatakan ini menjadi semacam penyakit untuk blog tersebut dan untuk menyembuhkannya anda perlu memahami dan menerapkan ilmu SEO (Search Engine Optimazation).

Solusi Duplicate Tittle Tag di Webmaster Tools

Saya sendiri bersyukur karena ternyata blog saya bisa terbebas dari penyakit Duplicate Tittle tag tersebut setelah menerapkan sebuah trik yang saya peroleh dari blog tetangga. Caranya cukup mudah karena ini murni hanya bermain klik saja tanpa perlu melakukan editing pada Code HTML blog.

1. Masuk ke Halaman Dashboard Blogspot anda | Masuk ke Tab Setting/Setelan | Prefensi Penelusuran kemudian Aktifkan Tag Tajuk Robot Khusus | Centang Beberapa Pilihan Seperti gambar berikut | Simpan Perubahan

Solusi Duplicate Tittle Tag di Webmaster Tools

Berdasarkan pengalaman pribadi saya. Perlu waktu kurang lebih 1 bulan agar effeknya terlihat pada blog saya namun pemulihan dari Duplicate Tittle Tag tersebut terjadi secara berangsur-angsur. Selamat mencoba. Semoga berhasil. :)

Mengatasi Masalah Blocked URL di Webmaster Tools

Sebagai seorang blogger sejati tentu kita harus memperhatikan masalah-masalah yang terkait dengan kesehatan blog yang kita kelola. Kita dapat memanfaatkan layanan gratis seperti google webmaster tools atau bing webmaster tools untuk memantau kesehatan blog yang kita miliki. Suatu misal Permasalahan seperti Blocked URL di google webmaster tools yang banyak terjadi di blog terutama jika menggunakan blogspot dan hal itu dapat kita pantau secara continoue pada layanan gratis tersebut.

Mengatasi Masalah Blocked URL di Webmaster Tools

Berbicara tentang masalah, saya kira hal itu dapat kita atasi jika kita tahu penyebab terjadinya masalah tersebut. Berdasarkan pengalaman saya pribadi, Masalah Blocked URL ini terjadi karena pemilik blog memposting beberapa artikel sekaligus dalam waktu yang relatif singkat semisal 5 artikel hanya dalam waktu 5 menit. Hal ini banyak terjadi pada artikel copy paste atau mungkin artikel sudah ditulis duluan sehingga mengindikasi banyak artikel diposting dalam waktu yang singkat. 

Solusi pertama yang saya sarankan adalah usahakan untuk memposting artikel sewajarnya saja misalkan 3 artikel sehari dan berikan jarak waktu dalam memposting seperti 1 artikel dipagi hari, 1 artikel pada sore hari dan 1 artikel pada malam hari

Selain dengan cara diatas, saya juga menerapkan sebuah pencegahan terjadinya blocked URL. Hal ini juga dapat anda terapkan pada blog yang sudah terjangkit masalah blocked URL. Adapun cara yang saya terapkan adalah sebagai berikut

1. Masuk ke menu Setting/Setelan pada Dashboard Blog Anda | Pilih Prefensi Penelusuran | Aktifkan robot.txt khusus kemudian isi kolom yang ada dengan baris code berikut
User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow:
Allow: /

Sitemap: http://nama-blog-anda.blogspot.com/sitemap.xml
2. Selanjutnya Silahkan submit sitemap blog anda pada halaman google webmaster tools | Crawl | Sitemaps

Mengatasi Masalah Blocked URL di Webmaster Tools

Namun perlu diingat bahwa cara ini tidak akan langsung memberikan effect karena berdasarkan pengalaman saya butuh sekitar 1 sampai dua bulan agar blog anda terbebas dari masalah Blocked URL