CB Bloggerz

Kotak Pencarian Keren untuk Blog

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNP-Q8sbJRy2SAIzpSBNIfWW9WhydyCbplSxBYuYnMZcaNsfdE4L2pGMqcYos0Er7gdIJgjwKn24OrMKPrtIA250PYWSf_xOEyIclaOTVumQCKXUIrIVCdsEITRBHGiH5KQdY3gNH-AAmR/s1600/Search-Boxes-for-Blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Kotak Pencarian Keren untuk Blog" border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNP-Q8sbJRy2SAIzpSBNIfWW9WhydyCbplSxBYuYnMZcaNsfdE4L2pGMqcYos0Er7gdIJgjwKn24OrMKPrtIA250PYWSf_xOEyIclaOTVumQCKXUIrIVCdsEITRBHGiH5KQdY3gNH-AAmR/s1600/Search-Boxes-for-Blogger.png" title="Kotak Pencarian Keren untuk Blog" width="320" /></a></div>
<b>Cara Memasang Kotak Pencarian di Sidebar Blog.</b><br />
<br />
Kotak Pencarian (Search Box) sangat penting dipasang di blog. Widget yang biasa dipasang di Sidebar ini memudahkan pengunjung, juga admin, untuk mencari data, info, atau tips di blog kita.<br />
<br />
Kotak Pencarian juga berfungsi sebagai navigasi sekaligus internal link karena hasil pencarian memunculkan daftar posting kita (jika ada yang dicarinya)<br />
<br />
<b>Cara Memasang Kotak Pencarian Keren di Sidebar Blog</b><br />
1. Layout > Add A Gadget > pilih JavaScript/HTML<br />
2. Copy + Paste kode berikut ini di dalamnya. (Untuk pilihan warna, ganti kode berwarna merah dengan kode-kode yang ada dalam ilustrasi gambar).<br />
<br />
<div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">
<pre class="toolbar:1 lang:default decode:true" style="background: url(http://thetechgears.com/wp-content/themes/hueman/img/pre.png) 50% 0% repeat rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); font-family: Monaco, 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; font-size: 11px; font-stretch: inherit; line-height: 19px; margin-bottom: 30px; margin-top: 30px; overflow-x: auto; overflow-y: hidden; padding: 18px 20px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;"><style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: <span style="color: red;">#4d90fe</span>;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div></pre>
</div>
<br />
<i><a href="http://thetechgears.com/beautiful-search-box-widget-for-blogger/" rel="nofollow" target="_blank">Sumber</a></i><br />
<br />

Cara Memasang Kotak Pencarian di Sidebar Blog. Kotak Pencarian (Search Box) sangat penting dipasang di blog. Widget yang biasa dipasang di Sidebar ini memudahkan pengunjung, juga admin, untuk mencari data, info, atau ti…

Cara Membuat Hari dan Tanggal di Header Blog

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHSDnELl4jpMT1-_Er8UzBNKfXelN2zbY7PYN7ZuF9Flknqx0AZDZHHUaRftp77ZFjLHbZ2Zkx9KX3Fc9uMjzjLO1j43bn-sjnt48gmdbG8H6t9TGQXWAEfUsGGn_a0aEHfayPDtlqO-wR/s1600/blog-enter-key.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Hari dan Tanggal di Header Blog" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHSDnELl4jpMT1-_Er8UzBNKfXelN2zbY7PYN7ZuF9Flknqx0AZDZHHUaRftp77ZFjLHbZ2Zkx9KX3Fc9uMjzjLO1j43bn-sjnt48gmdbG8H6t9TGQXWAEfUsGGn_a0aEHfayPDtlqO-wR/s1600/blog-enter-key.jpg" title="Cara Membuat Hari dan Tanggal di Header Blog" width="200" /></a></div>
Cara Membuat Hari dan Tanggal di Header Blog sangat mudah, tinggal memasukkan kode HTML di Template Blog. Namun, sebenarnya hari dan tanggal tidak terlalu penting. Soalnya, hari dan tanggal sudah ada di komputer user, sebagaimana jam, musik, dan sebagainya.<br />
<br />
Karena sudah ada di komputer user, maka hari, tanggal, jam, musik, dan sejenisnya tidak perlu dipasang di blog. Itu hanya memperlambat loading alias memberatkan loading blog.<br />
<br />
Namun, jika Anda keukeuh ingin memasangnya, ini dia Cara Membuat Hari dan Tanggal di Header Blog.<br />
<br />
1. Template > Edit HTML<br />
2. Copy kode berikut ini dan paste di bagian header atau bagian mana saja yang Anda inginkan. Demonya bisa dilihat di <a href="http://newfastestmagz.blogspot.com/" rel="nofollow" target="_blank">New Fastest Magz</a>.<br />
<br />
<div style="background-color: #f9f9f9; border: 1px solid #444; padding: 10px; text-align: left;">
<script type='text/javascript'><br />
now = new Date();<br />
if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))<br />
else (a=now.getTime());<br />
now.setTime(a);<br />
var tahun=now.getFullYear()<br />
var hari=now.getDay()<br />
var bulan=now.getMonth()<br />
var tanggal=now.getDate()<br />
var hariarray=new Array(&quot;Minggu&quot;,&quot;Senin&quot;,&quot;Selasa&quot;,&quot;Rabu&quot;,&quot;Kamis&quot;,&quot;Jum&#39;at&quot;,&quot;Sabtu&quot;)<br />
var bulanarray=new Array(&quot;Januari&quot;,&quot;Februari&quot;,&quot;Maret&quot;,&quot;April&quot;,&quot;Mei&quot;,&quot;Juni&quot;,&quot;Juli&quot;,&quot;Agustus&quot;,&quot;September&quot;,&quot;Oktober&quot;,&quot;November&quot;,&quot;Desember&quot;)<br />
document.write(hariarray[hari]+&quot; &quot;+tanggal+&quot; &quot;+bulanarray[bulan]+&quot; &quot;+tahun)<br />
</script></div>
<br />
3. Save Template!<br />
<br />
Demikian Cara Membuat Hari dan Tanggal di Header Blog. Good Luck!<br />
<div>
<br /></div>

Cara Membuat Hari dan Tanggal di Header Blog sangat mudah, tinggal memasukkan kode HTML di Template Blog. Namun, sebenarnya hari dan tanggal tidak terlalu penting. Soalnya, hari dan tanggal sudah ada di komputer user, s…

Meta Tag SEO Friendly dan Valid HTML5 untuk Blogspot

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IWnlDWWLIJfzH6MDxNHEPB-8Vc1zDpQKboKyKjV0vIpGvBbmd38ymNWVaLOZ5qWDkkfeX4omQfPteI_WBd-AinLUFxbzjzP8PxWflTnvkdATrl9mMwJFRAUshshW0wlkqMhvalZMOdaA/s1600/Meta-Tag-SEO.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt=" Meta Tag SEO Friendly dan Valid HTML5 untuk Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IWnlDWWLIJfzH6MDxNHEPB-8Vc1zDpQKboKyKjV0vIpGvBbmd38ymNWVaLOZ5qWDkkfeX4omQfPteI_WBd-AinLUFxbzjzP8PxWflTnvkdATrl9mMwJFRAUshshW0wlkqMhvalZMOdaA/s1600/Meta-Tag-SEO.jpeg" title=" Meta Tag SEO Friendly dan Valid HTML5 untuk Blogspot" /></a></div>
Meta Tag SEO Friendly dan Valid HTML5 untuk Blogspot sangat bagus untuk mempercepat indeks mesin pencari, meningkatkan trafik atau pengunjung, dan menaikkan peringkat (ranking) di halaman hasil pencarian Google (SERP).<br /><br />Meta Tag  adalah kode khusus di bagian header template yang memberikan perintah kepada mesin pencari untuk mengenali, mengindeks, dan meng-crawl blog kita, jika user mencari informasi dengan kata kunci tertentu.<br /><br />Cek dulu template blog Anda, apakah sudah terpasang kode Meta Tag SEO Friendly dan Valid HTML5. Jika belum maka lakukan langkah berikut ini. Bisa juga ganti Meta Tags yang ada dengan yang di bawah ini.<br />
<b>1. Klik "Template"</b><br />
3. Klik "Edit HTML"<br />
4. Cari kode <head><br />
5. Copy dan Paste kode berikut ini tepat <b>di bawah</b> kode <head> <br />
<br />
<div style="background-color: #f9f9f9; border: 1px solid #444; padding: 10px; text-align: left;">
<meta charset='utf-8'/><br />
<link href='http://nama-blog.blogspot.com' rel='canonical'/><br />
<b:if cond='data:blog.pageType == &quot;index&quot;'><br />
<title><data:blog.pageTitle/><span style="color: red;"> Deskripsi Blog Anda di Sini</span> </title><br />
<b:else/><title><data:blog.pageName/> | <data:blog.title/></title><br />
</b:if><br />
<meta content='<span style="color: red;">Description Blog Anda</span>' name='description'/><br />
<meta content='<span style="color: red;">kata kunci di sini, kata kunci, keyword</span>' name='keywords'/><br />
<meta content='index, follow' name='robots'/><br />
<meta content='<span style="color: red;">Kode Verifikasi Google</span>' name='google-site-verification'/><br />
<meta content='<span style="color: red;">Kode Verifikasi Bing</span>' name='msvalidate.01'/><br />
<meta content='<span style="color: red;">Kode Verifikasi Alexa</span>' name='alexaVerifyID'/><br />
<br />
<meta content='general' name='rating'/><br />
<meta content='id' name='geo.country'/><br />
<meta content='Indonesia'<a href="http://ajatshare.blogspot.com/2013/08/cara-memasang-meta-tag-seo-friendly-dan.html"> </a>name='geo.placename'/><br />
<meta content='<span style="color: red;">Nama Anda</span>' name='author'/><br />
<meta content='all' name='Slurp'/><br />
<meta content='width=device-width' name='viewport'/><br />
<br />
<link href='http://<span style="color: red;">namabloganda</span>.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/><br />
<link href='http://<span style="color: red;">namabloganda</span>.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/><br />
<link href='http://<span style="color: red;">namabloganda</span>.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/><br />
<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/><br />
<link href='http://<span style="color: red;">namabloganda</span>.blogspot.com' rel='openid.delegate'/></div>
<br />
<b><i>Catatan: </i></b><br />
- Ganti tulisan yang berwarna <span style="color: red;">merah</span> dengan versi Anda.<br />
<div>
<span style="font-family: Arial, verdana, sans-serif;"><br /></span></div>
<b>6. Save Template</b><div>
<b><br /></b><div>
Memasang Meta Tag SEO Friendly dan Valid HTML5 untuk Blogspot ini adalah usaha kita agar blog kita mendapatkan tempat yang layak di sisi Google :) Amin.....! :)</div>
<div>
<br /></div>
</div>

Meta Tag SEO Friendly dan Valid HTML5 untuk Blogspot sangat bagus untuk mempercepat indeks mesin pencari, meningkatkan trafik atau pengunjung, dan menaikkan peringkat (ranking) di halaman hasil pencarian Google (SERP).M…

Mengatasi Missing Header Blog H1 di Chkme

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXStKHo5rHXZOC21Xjea5-T5hBuKyw_l-Mseh5DlSpja59ilHwbsz3TUM50J1s8HQXLgHkZpPut2Srq5LVHFm-dIxSt06llv4rIXK652DUKXaXDIpiZTcPIcvaVHUBR5s8i72879CzHfV/s1600/heading+dinamis+h1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXStKHo5rHXZOC21Xjea5-T5hBuKyw_l-Mseh5DlSpja59ilHwbsz3TUM50J1s8HQXLgHkZpPut2Srq5LVHFm-dIxSt06llv4rIXK652DUKXaXDIpiZTcPIcvaVHUBR5s8i72879CzHfV/s1600/heading+dinamis+h1.png" width="200" /></a></div>
<b><i>Cara Mengatasi H1: Zero, that is Really Bad di CHKME</i></b><br />
<b><i><br /></i></b>
KADANG-kadang, bahkan hampir selalu, saat blog kita menggunakan image header (gambar/logo) lalu dicek skor SEOnya di <a href="http://chkme.com/" rel="nofollow" target="_blank">CHKME</a>, ada warning Missing Header Blog H1 sehingga skor seo-nya rendah. Nah, bagaimana cara Mengatasi Missing Header Blog H1 di Chkme itu?<br />
<br />
Gampang banget, kita tinggal menambahkan kode <h1> dan </h1> di bagian kode heading blog itu.<br />
<br />
Sebelumnya perlu dijelaskan dulu, bahwa elemen H1 (Heading Tag) merupakan elemen terpenting dalam desain blog. Elemen ini yang akan dikenali pertama kali oleh mesin pencari. Jika kosong, atau missing, maka skor seo blog kita akan rendah. Karenanya, harus diatasi dengan langkah-langkah sebagai berikut:<br />
<br />
<b>1. Template > Edit HTML</b><br />
<b>2. Cari kode seperti berikut ini:</b><br />
<br />
<div style="background-color: #f9f9f9; border: 1px solid #444; padding: 10px; text-align: left;">
  <span style="color: #3d85c6;">    </span><br />
<span style="color: #3d85c6;">      <div id='header-inner'></span><br />
<span style="color: #3d85c6;">       <a expr:href='data:blog.homepageUrl' style='display: block'></span><br />
<span style="color: #3d85c6;">          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></span><br />
<span style="color: #3d85c6;">        </a></span></div>
<br />
<br />
<b>2. Tambahkan kode <span style="color: red;"><h1></span> dan <span style="color: red;"></h1></span> seperti terlihat pada kode berikut ini:</b><br />
<br />
<div style="background-color: #f9f9f9; border: 1px solid #444; padding: 10px; text-align: left;">
<span style="color: #3d85c6;">     </span><br />
<span style="color: #3d85c6;">      <div id='header-inner'></span><br />
<span style="color: #3d85c6;">      </span><span style="color: red;">  <h1></span><span style="color: #3d85c6;"><a expr:href='data:blog.homepageUrl' style='display: block'></span><br />
<span style="color: #3d85c6;">          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></span><br />
<span style="color: #3d85c6;">        </a></span><span style="color: red;"></h1></span></div>
<br />
<br />
<b>3. Save Template!</b><br />
<br />
Misalnya, saat H1-nya hilang, maka akan ada hasil cek seo seperti ini:<br />
<br />
<span style="color: blue;">Headings</span><br />
<span style="color: blue;">H1: Zero, that is Really Bad </span><br />
<span style="color: blue;">Warning: Make sure you have at least one H1 tag: It represent the headline of your content/website.</span><br />
<br />
Skor SEO pun cuma: 74%<br />
<br />
Setelah diubah seperti langkah Mengatasi Missing Header Blog H1 di Chkme di atas, maka hasilnya akan seperti ini:<br />
<br />
<span style="color: blue;">Headings</span><br />
<span style="color: blue;">H1: 1, that is Good</span><br />
<br />
Skor SEO pun jadi 95%<br />
<br />

Cara Mengatasi H1: Zero, that is Really Bad di CHKME KADANG-kadang, bahkan hampir selalu, saat blog kita menggunakan image header (gambar/logo) lalu dicek skor SEOnya di CHKME, ada warning Missing Header Blog H1 sehingg…