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

Pasang Meta Tag pada Blogger

Meta Tag dalam artian bahasanya, ibarat kunci rumah yang spesifik untuk membuka pintu.bisa diartikan meta tag itu sebagai perantara blog kita ke search engine atau mesin pencari agar informasi pada blog kita bisa dengan mudah terindeks oleh search engine seperti google, yahoo, bing. Informasi yang diberikan blog kita ke google akan lebih spesifik sehingga setiap kata yang diketikkan di google bisa mengarah ke blog kita.

Untuk memasang meta tag ke blogger ada  beberapa tahapan. Selain itu, ada dua cara memasang meta tag.  

🔑 Cara pertama modifikasi script pada template Blog:

• Pertama masuk ke Blogger, lalu klik Template dan pilih Edit HTML.
  

• Kemudian cari kode dibawah ini di halaman HTML. Untuk mempermudah pencarian tekan shortcut "Ctrl+F"
  
  
  

   <b:include data='blog' name='all-head-content'/> 

  
  Setelah dapat kode diatas, copy lagi script dibawah ini, dan paste tepat dibawah kode diatas. Tampilannya akan seperti pada gambar.

<meta content='DESKRIPSI BLOG' name='description'/>
<meta content='KATA KUNCI BLOG' name='keywords'/> 

Keterangan Script
Deskripsi Blog : Utuk pengisian deskripsi blog ini isi sesuai dengan blog Anda. Contohnya blog tentang mobil, deskripsinya bisa seperti ini " Blog yang memberikan informasi tentang cara membuat dan mendesain website dengan mudah. ". Usahakan panjang deskripsi antara 150-160 karakter saja.
Kata Kunci Blog : Pada bagian meta keyword isi dengan kata kunci yang mengacu pada judul blog untuk memaksimalkan pencarian di mesin pencari. Misal dari contoh di atas keywordnya bisa digunakan kata "website,membuat website,tips membuat website,tips mendesain website,website ramai pengunjung," dan seterusnya. Usahakan keywordsnya jangan banyak-banyak, maksimal 15 saja, kalau bisa antara 8-10 kata saja biar lebih SEO friendly.

• Setelah selesai mengisi semuanya, lalu klik Simpan template.

🔑Cara yang kedua ini sebenarnya hanya merupakan pendukung dari cara sebelumnya, agar blog lebih SEO friendly lagi. Begini caranya:

• Kembali lagi ke Template lalu Edit HTML seperti langkah awal diatas. Lalu copy kode dibawah ini dan paste dibawah kode baru yang tadi sudah ditambahkan pertama kali. Posisinya seperti gambar.

<meta content='Index, Follow' name='robots'/>
<meta content='JasabuatSoftware' name='JasabuatSoftware'/>
<meta content='© 2018 JasabuatSoftware' name='copyright'/>
<meta content='2 days' name='revisit'/>
<meta content='never' name='expires'/>
<meta content='always' name='revisit'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Bahasa' name='language'/>
<meta content='Indonesia' name='geo.country'/>
<meta content='All-Language' http-equiv='Content-Language'/>
<meta content='global' name='distribution'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='global' name='target'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='index, follow' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='all' name='spiders'/>
<meta content='all' name='WEBCRAWLERS'/>
<meta content='noodp' name='robots'/>
<meta content='noydir' name='robots'/>
<link expr:href='data:blog.url' rel='canonical'/>
<meta content='aeiwi, alexa, alltheWeb, altavista, aol netfind, anzwers, canada, directhit, euroseek, excite, overture, go, google, hotbot. infomak, kanoodle, lycos, mastersite, national directory, northern light, searchit, simplesearch, Websmostlinked, webtop, what-u-seek, aol, yahoo, webcrawler, infoseek, excite, magellan, looksmart, bing, cnet, googlebot' name='search engines'/> 

Sekarang tingggal ganti author dengan nama Anda, kemudian copyright dengan judul blog Anda. Buat geo.placename, geo.country dan language bisa diganti tergantung negara mana yang jadi priorotas dan bahasa apa yang di gunakan pada blog anda. 
Kemudian Simpan template, blog Anda sudah lebih SEO friendly.

Read More