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

Related Post Dengan Google CSE (Custom Search Engine) pada Blog

Related post merupakan daftar dari artikel yang memiliki topik pembahasan yang sama dengan artikel utama yang sedang dibaca. Berfungsi untuk menarik minat pengunjung agar membuka artikel lain. Ini jelas bagus karena pengunjung akan menghabiskan waktu lebih lama di blog kamu. Bisa banget buat menurunkan bounce rate. Kita nggak bakal membuat related post atau artikel terkait dengan Javascript biasa. Kali ini sedikit berbeda, karena kita akan membuat related post menggunakan Google CSE.

Custom Search Engine (CSE) merupakan layanan Google khusus untuk melakukan pencarian di blog. Biasanya hasil dari CSE hanya akan keluar apabila anda melakukan aktifitas pencarian terlebih dahulu. Hasilnya akan menampilkan artikel terkait lebih banyak yang dibagi menjadi beberapa halaman. Ketika pindah halaman pun dia nggak nge-reload dulu.

A. Buat Unit CSE

Pertama, anda harus create/buat unit CSE yang baru terlebih dulu.
Buka link cse.google.com

Pada kolom Site to Search, isi dengan URL blog anda diikuti tanda slash dan bintang.
 Contoh:
 jasabuatsoftware.blogspot.com/*

Pada Language pilih Indonesia. Atau sesuaikan dengan bahasa blog anda.

Pada Name of the search engine, isi sesuai keinginan anda. Ini adalah nama unit Google CSE.

Selesai? Klik tombol CREATE 

Pada menu Look and feel, pilihlah Results only. Lalu klik tombol Save & Get Code

Akan muncul kode CSE yang tadi dibuat. Dan perhatikan bagian var cx = '0090xxxxxxxxxxxxxx:abcde_fg' Ini adalah search engine ID yang nanti kamu perlukan. Sementara simpan dulu di notepad.

B. Pengaturan di Blog

Cara perapkan pada blogger Langkahnya:
Untuk memperbagus tampilan, tambahkan dulu kode CSS berikut. Simpan ⏫ SEBELUM </style> ATAU </b:skin>.

 /* Related Post with Google CSE by Pirates Code */
#PCRelate {margin:0px; padding:0px; text-align:center; border-top:0px; border:1px solid #008c5f; border-top:0px} #PCRelate h3{font-size:18px; font:bold 18px Tahoma,sans-serif; margin:0px 0px 5px 0px; background:#008c5f; color:#fff; text-align:left; text-transform:uppercase; overflow:hidden; padding: 7px 20px}
#piratCSE {padding:0 20px 10px 20px; text-align:left; width:auto; height:100%; line-height:18px}
#piratCSE .cse .gsc-control-cse, .gsc-control-cse {padding:0px}
#piratCSE .gsc-control-cse {margin:0px; padding:0px}
#piratCSE .gsc-control-cse .gsc-table-result {margin:0 0 15px 0}
#piratCSE .gsc-results {width:100%}
#piratCSE .gsc-search-box, #piratCSE .gsc-above-wrapper-area, #piratCSE .gsc-resultsHeader {display:none}
#piratCSE .gsc-webResult .gsc-result {padding:0px}
#piratCSE .gsc-webResult .gsc-result:nth-child(4) {border-bottom:0}
#piratCSE .gs-result .gs-title, #piratCSE .gs-result .gs-title * {text-decoration:none; color:#008c5f; font-size:14px; font-weight:600; padding-bottom:18px}
#piratCSE .gs-result .gs-snippet {font-size:12px}
#piratCSE .gsc-reviewer, #piratCSE .gs-result a.gs-visibleUrl, #piratCSE .gs-result .gs-visibleUrl{color:#767676}
#piratCSE .gsc-table-cell-thumbnail, #piratCSE .gs-promotion-image-cell {padding-right:10px}
#piratCSE .gsc-results .gsc-cursor-box {margin:0px}
#piratCSE .gsc-preview-reviews ul {margin:0px}
#piratCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page, #piratCSE .gsc-cursor .gsc-cursor-page {color:#fff; text-decoration:none; margin:5px 10px 0 0; padding: 5px 10px; border-radius: 5px; display:inline-block}
#piratCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page {background:#2f303f !important}
#piratCSE .gsc-cursor .gsc-cursor-page {background:#008c5f}
#piratCSE .gsc-cursor .gsc-cursor-page:hover {background:#2f303f}
#piratCSE .gsc-url-top {padding:0px}
#piratCSE .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {color:#2f303f}
#piratCSE .gsc-thumbnail-inside {padding:0px} 

Cari kode <data:post.body/>. Gunakan shortcut CTRL + F untuk memudahkan. Jika ada beberapa kode, pilih yang terakhir. Tapi struktur setiap template pasti berbeda. Pastikan anda memilih salah satu yang work dengan template anda.

Simpan script berikut ⏬ SETELAH <data:post.body/>

<b:if cond='data:view.isPost'>
<div id='PCRelate'>
<h3>Artikel Terkait</h3>
<div id='piratCSE'/>
<script>//<![CDATA[
// Related Post with Google CSE piratescode
function piratCSE() {
  if (document.readyState != 'complete') {
    return google.setOnLoadCallback(piratCSE, true);
  }
  google.search.cse.element.render({gname:'gsearch', div:'piratCSE', tag:'searchresults-only', attributes:{linkTarget:'', webSearchResultSetSize:'small'}});
  var element = google.search.cse.element.getElement('gsearch');
  //]]>
  element.execute(&quot;<b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <data:label.name/> <b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if>&quot;);
  //<![CDATA[
};
window.__gcse = {
  parsetags: 'explicit',
  callback: piratCSE
};
(function() {
var cx = '0080xxxxxxxxxxxxxx:abcde_fg';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
//]]></script>
</div>
<div class='clear'/>
</b:if> 

Simpan Template

Read More

Fungsi Terbilang pada Delphi

Pada postingan ini akan membahas Fungsi Terbilang yang di gunakan untuk mengubah input dari angka menjadi output berupa huruf.

Berikut Langkah menggunakannya :

1. Buat Function menggunakan tipe Data string dan copykan kode berikut ini di bawah kode implementation atau anda bisa tempatkan di bawah syntax {$R *.dfm}

//Konversi Nilai Mata Uang ke dalam bahasa Indonesia

Function Terbilang(Uang:Int64):String;
Begin
      If (Uang = 1) Then Terbilang:='Satu '
      Else If (Uang = 2) Then Terbilang:='Dua '
      Else If (Uang = 3) Then Terbilang:='Tiga '
      Else If (Uang = 4) Then Terbilang:='Empat '
      Else If (Uang = 5) Then Terbilang:='Lima '
      Else If (Uang = 6) Then Terbilang:='Enam '
      Else If (Uang = 7) Then Terbilang:='Tujuh '
      Else If (Uang = 8) Then Terbilang:='Delapan '
      Else If (Uang = 9) Then Terbilang:='Sembilan '
      Else If (Uang = 0) Then Terbilang := ' '
      Else If (Uang = 10) Then Terbilang := 'Sepuluh '
      Else If (Uang = 11) Then Terbilang := 'Sebelas '
      Else If (Uang >= 12) And (Uang <= 19) Then Terbilang:=Terbilang(Uang Mod 10) + 'Belas '
Else If (Uang >=20) And (Uang <=99) Then Terbilang := Terbilang(Uang div 10) + 'Puluh ' + Terbilang(Uang Mod 10)
Else If (Uang >=100) And (Uang <=199) Then Terbilang := 'Seratus ' + Terbilang(Uang - 100)
Else If (Uang >= 200) And (Uang <=999) Then Terbilang := Terbilang(Uang div 100) + 'Ratus ' + Terbilang(Uang Mod 100)
Else If (Uang >=1000) And (Uang <=1999) Then Terbilang := 'Seribu ' + Terbilang(Uang - 1000)
Else If (Uang >=2000) And (Uang <=999999) Then Terbilang := Terbilang(Uang div 1000) + 'Ribu ' + Terbilang(Uang Mod 1000)
Else If (Uang >=1000000) And (Uang <=999999999) Then Terbilang := Terbilang(Uang div 1000000) + 'Juta ' + Terbilang(Uang Mod 1000000)
Else If (Uang >=1000000000) And (Uang <=999999999999) Then Terbilang :=Terbilang(Uang div 1000000000) + 'Milyar ' + Terbilang(Uang Mod 1000000000)
Else If (Uang >=1000000000000)  Then Terbilang :=Terbilang(Uang div 1000000000000) + 'Triliun ' + Terbilang(Uang Mod 1000000000000);
End;

2. Cara pemanggilan fungsi kode terbilang, Tambahkan komponen  TMemo, TEdit, TButton
3. Ubah nama komponen

        TEdit  ⏩  Edit1
        TMemo  ⏩  Memo1
        TButton  ⏩  Button1

4. Masukkan kode pemanggil terbilang pada TButton.Click seperti pada contoh berikut ini

procedure TForm1.Button1Click(Sender: TObject);
begin
 Memo1.Text := Terbilang(StrToInt64(Edit1.Text));
end;

untuk Contoh Sorce Code bisa download 

Via MEGA

Read More

Template Blog magazine style SEO Friendly Responsive

Template-template blog dengan desain magazine style sangat cocok melengkapi segala jenis Blog Seperti Berita, Bisnis, Tutorial.

Berikut ini adalah Beberapa Template Gratis/Free yang bisa anda gunakan

• Magz_1
• Magz_2
• Magz_3
• Magz_4
• Magz_5
• Magz_6
• Magz_7
• Magz_8
• Magz_9
• Magz_10
• Magz_11
• Magz_12
• Magz_13
• Magz_14
• Magz_15
• Magz_16
• Magz_17
• Magz_18
• Magz_19
• Magz_20
• Magz_21
• Magz_22
• Magz_23
• Magz_24
• Magz_25
• Magz_26
• Magz_27
• Magz_28
• Magz_29
• Magz_30
• Magz_31
• Magz_32
• Magz_33
• Magz_34
• Magz_35
• Magz_36

1. Bpress - Magazine Responsive SEO Blogger Template

Live Demo- Download

2. Dynamic Mag -Magazine Responsive SEO Blogger Template

Demo - Download

3. Responsive Multipurpose Blogger Template v1.1

Demo. Download

4.Flat News -Magazine Responsive SEO Blogger Template

Live Demo - Download

5.Syahira -Magazine Responsive SEO Blogger Template

Demo - Download

6.Easy News -Magazine Responsive SEO Blogger Template

Demo - Download

7. My Extra News -Magazine Responsive SEO Blogger Template

Demo - Download

8.Cody -Magazine Responsive SEO Blogger Template

Demo - Download

9. Gravity Blogger Template High CTR Adsense

DEMO - DOWNLOAD

10. Fast Blog Responsive

Demo - Download

11. Sang Ads - Seo Friendly & Responsive High CTR Adsense Template

Demo - Download

12. Vikka Fast and Responsive High CTR Adsense Template

Demo - Download

13. Invision - Best Responsive High CTR Adsense Template

DEMO - DOWNLOAD

14. Axact v3.1 – Responsive Magazine Blogger Theme

Demo - Download

15. Setiva v1.6 – Responsive Magazine Blogger Template

Demo - Download

16. Magpress v3.1 – Magazine Responsive Blogger Template

DEMO - DOWNLOAD

17. MagOne v6.2.6 – Responsive News & Magazine Blogger Template

Demo - Download

18. Sevida v2.5 – Responsive Magazine Blogger Template

DEMO - DOWNLOAD

19. SILVANA – Blogger Template Responsive

Demo - Download

20. Apriezt v2.1 – Responsive Magazine News Blogger Theme

Demo - Download

21. SNews v1.5 – News / Magazine Responsive Blogger Theme

DEMO - DOWNLOAD

22. Punjab Press v5 Responsive Blogger Template

DEMO - DOWNLOAD

23. Ijonkz v2.0 – Responsive Magazine/News Blogger Template

Demo - Download

24. Apriezt v2.1 – Responsive Magazine News Blogger Theme

Demo - Download

25. Rifqiy v2.0 – Responsive Magazine/News Blogger Template

DEMO - DOWNLOAD

26. Maxxiz – Themeforest Responsive Magazine/News Blogger Template V1.3

Demo - Download

27. Adamz v2.1 - Responsive Blogger Template

DEMO - DOWNLOAD

28. Ajbspot – Responsive MultiPurpose Blogger Template

DEMO - DOWNLOAD

29. XPress News – Responsive Blogger Magazine

Demo - Download

30. Geekish – Technology News Blogger Template

Demo - Download

31. Gagbox – Premium Memes Blogger Template

DEMO - DOWNLOAD

32. iPress – Multimedia Blogger Template

DEMO - DOWNLOAD

33. Extra News – Responsive Blogger Template

DEMO - DOWNLOAD

34. BlackNews – Magazine Premium Blogger Template
Demo - Download

35. Alpha
 
Demo - Download

36. Flat Mag – Responsive Magazine Blogger Template v1.2

Demo - Download

Read More