Pasang Widget Multi Tab pada Sidebar

Pada kesempatan kali ini, Saya akan Membahas tentang Cara Membuat Widget Multi Tab pada Sidebar Blog. Apabila anda memasang Widget Popular Post di Sidebar blog maka Otomatis akan Berjejer Kebawah, maka dari itu akan memakan tempat. Ditambah lagi memasang Labels di Sidebar blog berjejer kebawah, Makin memakan tempat lagi. Lalu ditambah lagi memasang Archive Blog pada Sidebar Blog Berjejer Kebawah makin makan tempat lagi. Maka dari itu saya menyarankan untuk memasang Widget Multi Tab Sidebar sehingga blog terlihat simple dan Rapi.


Cara Pertama :

1. Buka Blogger- Kemudian Login.
2. Dashboard - Template.
3. Edit HTML.

Proses Pemasangan :

1. Temukan (CTRL+F ) Kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </style>

 /* Multi Tab Widget */
.multitab-section{background:transparent;text-transform:uppercase;width:100%;max-width:337px;z-index:-999}
.multitab-widget{list-style:none;margin:0 auto;background:#444;padding:10px 10px 40px;border-radius:4px 4px 0 0;border-bottom:4px solid #ff5050;width:100%}
.multitab-widget li{list-style:none;padding:0px;margin:0;float:left}
.multitab-widget li a{background:transparent;display:block;padding:10px 0;font:13px merriweather sans,sans-serif;font-weight:700;text-shadow:0 1px 1px #000;color:#999}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding:12px 0;margin:0;background:#ff5050;text-decoration:none;text-transform:uppercase;border-radius:4px 4px 0 0;text-shadow:0 1px 1px #000;color:#fff} 

3. Temukan lagi kode <div class='sidebar-inner'> atau <div id='sidebar-wrapper'>
4. Copy & Paste kode berikut ini, dan Letakkan dibawah kode  <div class='sidebar-inner'> atau <div id='sidebar-wrapper'> apabila masih belum ketemu cari kode  id='sidebar-wrapper'

 <script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1' title='Popular'><i class='fa fa-star fa-fw'/>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2' title='Label'><i class='fa fa-tags fa-fw'/>Kategori</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3' title='Arsip'><i class='fa fa-tasks fa-fw'/>Arsip</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div> 

Wajib Baca :

title='Popular'> . title='Label'> . title='Arsip'> : Anda bisa mengganti judul, misalnya Recent Comment.

6. Simpan Template.
7. Buka Tata Letak/Layout.
8. Tambahkan Gadget.

Read More

Cara Pasang Breadcrumb pada Blogspot

Breadcrumb merupakan navigasi blog berupa "judul kecil" di atas judul posting blog, yang disertai nama label/kategori dan navigasi "home". Breadcrumb sering di gunakan menjadi navigasi yang berisikan label/kategori posting dan bisanya diawali dengan tombol menuju "home" (halaman depan blog/beranda/homepage).

Contohnya? Lihat navigasi berupa "judul kecil" atas judul posting yang sedang Anda baca ini. Ini breadcrumb-nya:  Home» Tips Membuat Website» Cara Pasang Breadcrumb pada Blogspot. 

Dengan adanya breadcrumb, maka itu memudahkan user untuk kembali ke halaman depan (tinggal klik "Home") atau menemukan posting lainnya di label yang sama (tinggal klik "Tips SEO Blog".

Cara Memasang/Membuat Breadcrumb di Blogspot

⏩ Cara Pertama

Berikut Ini cara terbaik memasang breadcrumbs, pada langkah-langkah panduan ini tidak akan membuat breadcrumbs menggantikan Permalink posting blog kita di hasil pencarian Google.

1. Klik "Template" > "Edit HTML"
2. Cari (Ctrl+F) kode ]]></b:skin>
3. Copy + Paste kode berikut ini tepat sebelum kode ]]></b:skin>

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:90%; line-height:1.4em; border-bottom:1px dotted #ccc} 

4. Cari kode <div class='post hentry'> dan Copy kode berikut ini tepat setelahnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'>
<data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop>
</b:if> &#187; <data:post.title/> </div> </b:if> </b:if> 

5. Simpan Template

Apabila cara ini belum berhasil anda bisa mencoba dengan cara lainnya yang bisa memunculkan breadcrumb pada postingan Blog.

⏩ Cara Kedua

1. Tambahkan kode berikut ini tepat di atas ⏫ kode ]]></b:skin>

 .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;} 

2. Cari dan Ganti kode <b:includable id='main' var='top'> dengan kode di bawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/> 

3. SAVE Template!

Apabila breadcrumb masih belum muncul, Bisa Coba lagi dengan Breadcrumb di Blogspot yang SEO Friendly.

⏩ Cara Ketiga (Breadcrumb Blogspot SEO Friendly)

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

 .breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;} 

2. Cari dan Ganti kode <b:includable id='main' var='top'> dengan kode di bawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/> 

3. Simpan Template

Read More

Registrasi Google Adsense dari Blogspot

Menjadi seorang blogger, selain sebagai hobby juga akan menghasilkan keuntungan finansial. Jika ada anggapan, ngeblog hanya menghabis-habiskan duit membayar warnet atau kopi (warung kopi wifi) bisa menjadi salah besar.

Karena sebenarnya, Google telah menyediakan layanan earning di flatfom blogspot. Mungkin Anda sudah sering mendengar cara mencari uang melalui internet atau blog. Ada banyak sekali pilihan diluar sana. Namun tidak akan kita bahas pada postingan kali ini.

Salah satu yang menjadi unggulan mencari uang lewat internet adalah Google Adsense. Selain karena nama besar Google sebagai penyedia layanan, Adsense juga memiliki daya tarik bagi banyak blogger.

Bagaimana tidak, caranya sangat gampang, kita dibayar oleh Google hanya kalau ada orang yang mengklik iklan yang kita pasang di blog. Pembahasan lebih jauh soal Adsense akan kita bahas terpisah.

Untuk kali ini kita akan bahas cara mendapat penghasilan dari blogspot melalui jasa Google Adsense. Kita akan mendaftar Adsense dari blogspot. Ikuti langkah-langkahnya sebagai berikut:

Cek Ketersediaan Adsense

Jika selama ini Anda ngeblog menggunakan bahasa Indonesia hingga pengaturannya pun berbahasa Indonesia, dipastikan tab pada Dasboard blogspot Anda tidak tersedia layanan Penghasilan. Olehnya itu kita harus mengaktifkannya. Caranya :

1.Masuk ke Dasboard blogspot Anda, lalu pilih tab Setelan dan pilih menu Bahasa dan Pemformatan.

• Pada menu pilihan bahasa, rubah format Bahasa Indonesia menjadi Bahasa Inggris, baik Amerika atau Inggris United Kingdom. Setelah itu Save. 

Refresh Dashboard blogspot Anda, sekarang akan muncul tab baru yakni Penghasilan dan isinya Adsense. 

Selanjutnya melihat ketersediaan layanan untuk blog Anda. Jika Anda membuka tab Penghasilan dan dibagian bawah kotak terlihat tampilan seperti dibawah ini, maka urungkan dulu niat Anda. Tunggu hingga tombol Mendaftar Adsense tidak buram lagi dan tak ada tulisan disampingnya. 

Daftar Adsense Melalui Blogspot

• Jika tombol Mendaftar Adsense telah bisa ditekan. Lakukan pendaftaran. Gambarnya seperti dibawah ini. 

• Ada tiga tahap melakukan pendaftaran Adsense melalui blogspot. Dilangkah pertama Anda akan diberi pilihan menggunakan akun email seperti yang sedang digunakan, atau menggunakan email lain. Silahkan pilih Ya, Gunakan (email Anda). 

• Tahap kedua, hanya menjabarkan informasi tentang blog Anda. Pilih bahasa yang Anda gunakan di blog Anda, lalu klik Lanjutkan. 

• Tahap ketiga dan terakhir adalah formulir permohonan. Isi semua pilihan, mulai Negara atau wilayah, Zona waktu dan Jenis akun (personal atau bisnis). Pilih sesuai pilihan yang ada dan paling sesuai dengan Anda. sementara untuk keterangan pribadi, usahakan isi dengan keterangan Asli, Nama, Alamat, Kota, Provinsi, Kode Pos dan Telepon, setelah itu tekan Kirim Permohonan Saya. 

Kini formulir Adsense Anda telah dikirim ke Google. Tunggu 1x24 jam atau paling lama 1 minggu untuk mendapatkan jawaban. Dari pengalaman bloGoooblok ~ mendaftar Adsense, setelah mengirimkan formulir, enam jam kemudian surat dari google tiba. Jawaban apakah Anda diterima atau tidak menjadi penyedia layanan iklannya.

Kelihatan memang mudah melakukan pendaftaran, dan kemudahan itu tidak segampang diterima oleh Google. Olehnya itu ada banyak hal yang harus diperhatikan jika hendak menggunakan layanan Adsense.

Read More

Trik percepat Loading Blog dengan Script Asinkron Adsense

Jika Anda menggunakan penayang Google Adsense dan memasang lebih dari satu script pada blog, terkadang loading blog khususnya menampilkan iklan terasa berat dan lama. Itu karena, setiap unit iklan melakukan loading hingga tampil sempurna.

Google Adsense sendiri sudah menyarankan setiap penayangnya untuk menerapkan kode iklan asinkron. Namun terkadang informasi penting ini diabaikan oleh pengguna blogger, hasilnya iklan yang terpasang akan membuat loading blog terasa berat. Jika ini terus dibiarkan, bukan tidak mungkin Anda akan ditinggal pembaca, itu artinya juga kehilangan penghasilan.

Secara default saat ini, Google Adsense telah menerapkan iklan asinkron di scriptnya. Bisa dilihat pada gambar berikut.

Itu artinya, kita tidak harus memasang seluruh script tersebut di blog atau website. Cukup sebagian saja pada script adsbygoogle.js. Script  adsbygoogle.js hanya dipasang di salah satu iklan dan iklan lainnya hanya menampilkan isi.

Berikut penjelasan scriptnya:

Pasang Script Code Anda Disini

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- KondeBerbulu ~ -->

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-3586xxxxxxxxxxx"
     data-ad-slot="4193697983"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Pada script di atas, tulisan yang berwarna merah adalah script asinkron. Jika Anda telah memasangnya secara utuh disalah satu bagian blog Anda, untuk script iklan lain, Anda bisa menghapusnya. Jadi hasil akhir script iklan yang dipasang di bagian lain seperti berikut:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- KondeBerbulu ~ -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-3586xxxxxxxxxxx"
     data-ad-slot="4193697983"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Dengan teknik modifikasi asinkron tersebut, kemungkinan besar loading blog Anda akan sedikit lebih cepat (tergantung template juga). Loading akan sedikit cepat karena iklan adsense hanya membaca script adsbygoogle.js sekali saja untuk semua unit iklan. Jadi jika satu terbuka, maka yang lain juga terbuka sempurna.

Dengan begini akan memberi nilai tambah bagi blog Anda dimata pengunjung. Dan trik di atas, sama sekali tidak melanggar aturan Google Adsense, bahkan sangat disarankan oleh mereka.

Read More