Featured Post

Featured Post Featured Post

CB Style - Template Blog SEO Friendly Terbaru 2016 ala Contoh Blog

CB Style - Template Blog SEO Friendly, Fast Loading, dan Responsive Terbaru 2016 ala Contoh Blog . BANYAK pengunjung blog ini yang bermin...

Cara Mendapatkan FB Admin ID, FB App ID, Feedburner ID, Google Plus ID, Publisher ID

facebook google plus
Cara Mengetahui, Memasang, dan Mendapatkan Facebook Admin ID, FB App ID, Feedburner ID, Google Plus ID, Publisher ID, Webmaster Google, Alexa, Bing/Yahoo.

BANYAK blogger, especially pemula (newbie), yang belum tahu cara mendapatkan berbagai ID yang harus dimasukkan dalam template.

Template Blog SEO Friendly terbaru banyak yang menggunakan Meta Tags SEO, termasuk All In One Meta Tag SEO for Blogger, yang mencantumkan berbagai kode ID untuk otorisasi dan koneksi ke layanan atau media sosial.

<meta content='FACEBOOK-ADMIN-ID' property='fb:admins'/>
<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>

<link href='https://plus.google.com/GOOGLE+ID/posts' rel='publisher'/>
<link href='https://plus.google.com/GOOGLE+ID/about' rel='author'/>

Memasukkan kode-kode FB Admin ID, FB App ID, Feedburner ID, Google Plus ID, Publisher ID memang tidak wajib, namun hal itu dipercaya bagus buat SEO Blog sehingga mudah dan cepat terindeks Google, terutama tiga ID terakhir.

# Cara Mendapatkan FB Admin ID (fb:admin)

FB Admin ID yaitu identitas admin Facebook atau pemilik akun. Gunanya untuk memoderasi komentar Facebook dan otorisasi share Facebook.

Untuk mendapatkan FB Admin ID:
1. Buka laman www.findmyfbid.com
2. Masukkan URL atau link akun Facebook Anda
3. FB Admin ID akan muncul.

FB Admin ID

FB Admin ID

4. Copas kode tersebut (berupa angka) dan masukkan ke dalam kode seperti ini:

<meta content='FACEBOOK-ADMIN-ID' property='fb:admins'/>

menjadi <meta content='100007685192099' property='fb:admins'/>

# Cara Mendapatkan FB App ID (fb:app_id)

1. Buka halaman Developer Facebook.
2. Klik "Register" di sudut kanan atas.
3. Masukkan kembali password FB Anda
4. Klik "Create a New App ID"
5. Pilih "Website"
6. Pilih Kategori, misalnya "News" (Berita)
7. Klik "Create App ID"

FB App ID

8. Akan muncul FB App ID Anda (Angka) dan masukkan ke kode sebagai berikut:

<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>

menjadi <meta content='FACEBOOK-APP-ID' property='fb:app_id'/>


# Cara Mendapatkan Feedburner ID
1. Login atau Register ke Feedburner Google
2. Masukkan alamat blog Anda

Feedburner ID

3. Klik "Next" hingga menemukan gambar seperti ini

Feedburner ID

Yang dihighlight kuning adalah Feeburner ID blog yang harus dimasukkan dalam kode Kotak Berlangganan atau Widget Follow by Email.


# Cara Mendapatkan Google Plus ID

1. Buka Google Plus
2. Klik thumbnail profil G-Plus Anda

Google Plus ID

3. Lihat address bar!

Google Plus ID

4. Angka yang dihighlight kuning itulah Google Plus ID yang kita masukkan ke dalam kode:

<link href='https://plus.google.com/GOOGLE+ID/posts' rel='publisher'/>

# Cara Mendapatkan Google Page (Publisher) ID

1. Masih di halaman Google Plus Anda, klik menu "Page"


Google Page (Publisher) ID

2. Ada tiga pilihan tipe halaman, pilih "Brand"

choose business type

3. Akan muncul form isian seperti ini:

create business page

4. Setelah mengisi, klik "Create page"
5. Lihat kembali Address Bar. Ada angka yang nanti kita masukkan ke dalam kode

<link href='https://plus.google.com/GOOGLE+ID/about' rel='author'/>

Demikian Cara Mendapatkan FB Admin ID, FB App ID, Feedburner ID, Google Plus ID, Publisher ID.

Kode Verifikasi Google Webmaster
1. Buka Halaman Verifikasi Google 
2. Klik Add a Property dan ikuti langkah selanjutnya

Kodenya masukkan ke:
<meta content='ID Google Webmaster Verfikasi' name='google-site-verification'/>

Kode ID Bing Verification (MS Validate)
1. Buka Halaman Verifikasi Bing/Yahoo!
2. Masukkan alamat blog dan ikuti langkah selanjutnya

Kodennya masukkan ke:
<meta content='ID Bing Verification' name='msvalidate.01'/>

Kode ID Verifikasi Alexa 
1. Buka Halaman Alexa
2. Jika sudah memiliki akun silahkan klik "Sign In"
3. Jika belum punya akun Alexa, silakan "Create An Account"
4. Buka http://www.alexa.com/siteowners/claim
5. Masukkan url blog Anda di kotak yang tersedia kemudian klik "Continue".
6.  Pilih metode 2

Kodenya masukkan ke:
<meta content='ID Alexa Verification' name='alexaVerifyID'/>

Good luck! (http://www.contohblog.com).*

Cara Agar Widget Link List Membuka Tab Baru atau Jendela Baru

JIKA kita memasang widget bawaan blogger bernama Link List, maka ketika link tersebut diklik, maka akan menutup halaman blog kita karena digantikan halaman link yang diklik itu.

Di widget ini kita bisa menambahkan link blog kita yang lain, bisa juga blog temen, atau situs favorit. Bebas. Link apa saja. Masalahnya, jika diklik, maka halaman blog kita jadi ketutup.

Widget Link List

Nah, ada yang tanya, bagaimana caranya agar link di widget Link List itu membuka tab baru atau Jendela Baru (New Window) sehingga blog kita tetap terbuka, tidak digantikan oleh halaman link itu?

Gampang. Gunakan saja kode target='_blank' setelah widget Link List itu dipasang di sidebar atau di footer.

Setelah terpasang, masuk ke Template (Edit HTML) dan temukan kode widgetnya seperti ini:
         
<b:widget id='LinkList1' locked='false' title='Blog Links' type='LinkList'>
            <b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
 </div>
</b:includable>
          </b:widget>

Tambahkan saja kode target='_blank' di belakang kode 'data:link.target' sehingga jadi seperti ini:

          <b:widget id='LinkList1' locked='false' title='Blog Links' type='LinkList'>
            <b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
     </b:loop>
   </ul>
 </div>
</b:includable>
          </b:widget>

Demikian Cara Agar Widget Link List Membuka Tab Baru atau Jendela Baru. Good Luck and Happy Blogging! (http://www.contohblog.com).*

Widget Wajib di Bawah Posting untuk Meningkatkan Kunjungan (Pageviews)

Daftar Widget Wajib di Bawah Posting untuk Meningkatkan Kunjungan (Pageviews).

LENGKAPI widget di halaman dalam (single post) karena mayoritas pembaca/pengunjung pertama kali berkunjung ke blog kita dengan membuka salah satu tulisan, hasil pencarian di Google atau mesin pencari lainnya.

Silakan cek statistik di dashbard blogger Anda, dipastikan kebanyakan link masuk pengunjung ke salah satu posting, bukan homepage. Betul 'kan?

Karenanya, kita harus fokus ke desain halaman dalam, bukan halaman depan. Di halaman dalam inilah kita tampilkan sejumlah internal link agar pengunjung "betah" dan berlama-lama membuka-buka konten blog kita.

Berikut ini contoh widget lengkap halaman dalam (single page/single post), selain isi tulisan dan sidebar widget.

Widget Wajib di Bawah Posting

Gambar di atas adalah salah satu tampilan template blog seo friendly koleksi Galeri Template CB. Telrihat begitu lengkap, terdiri dari:
  1. Tombol Berbagi (Social Share Button)
  2. Navigasi Posting (Blog Pager) Next-Previous berupa Judul Posting
  3. Related Post with Thumbnail Image
  4. Author Box (Profil Blogger/Penulis)
  5. Kotak Berlangganan (Subscription Box)
  6. Kotak Komentar

Keenam widget di bawah posting itu melengkapi sidebar widget yang biasanya terdiri dari 
  1. Posting Terbaru (Latest Posts)
  2. Tulisan Terpopuler (Pupular Posts)
  3. Random Posts (Optional)
  4. Terbanyak Dikomentari - Most Commented Post (Optional)
  5. Latest Post per Label Tertentu
Selain itu, internal link juga ada di dalam tulisan, yaitu link yang mengarah tulisan lain yang setema dengan postingan yang dibuka. (Baca: Cara Membuat Link Internal untuk Menaikkan Pageviews).

Banyak internal link halaman dalam merupakan rekomendasi Google agar memudahkan pengunjung mengeksplorasi dan mencari informasi yang mereka butuhkan.

Sekian dulu ulasan tentang Widget Wajib di Bawah Posting untuk Meningkatkan Kunjungan (Pageviews). Maybe update besok-besok. Good Luck and Happy Blogging! (http://www.contohblog.com).*

12 Kelebihan Custom Domain Blogger - Menggunakan Nama Domain Sendiri

cara custom domain
Blog dengan nama domain sendiri (custom domain) lebih profesional, kredibel, dan lebih seo friendly.

SETIDAKNYA ada 12 alasan mengapa blog Anda harus Custom Domain -  yaitu mengubah alamatnya menjadi nama domain sendiri, tanpa ada blogspot.com, misalnya dari tadinya www.contohblognih.blogspot.co.id menjadi www.contohblog.com.

Custom Domain sangat disarankan, terutama blog toko online atau blog yang menjadi publisher Google Adsense.

Alasan utamanya, blog dengan nama domain sendiri terkesan lebih profesional, lebih terpercaya, terkesan serius, dan... lebih seo friendly. Kabarnya, Google lebih suka mengindeks blog Top Level Domain (TDL) ketimbang subdomain blogspot.

Berikut ini detail kelebihan Custom Domain atau mengubah alamat blogspot.com menjadi nama domain sendiri:
  1. Blog terkesan lebih profesional dan kredibel.
  2. Nama blog akan lebih mudah diingat karena lebih pendek.
  3. Blog menjadi lebih "ramah mesin pencari" alias lebih SEO Friendly. 
Menurut MBT, kelebihan Custom Domain selengkapnya adalah sebagai berikut:
  1. Reputasi Blog akan lebih baik di dunia blogging. Bayar lho, 'gak gratisan.
  2. Banyak layanan periklanan (Adsense) tidak menerima subdomain.
  3. Fans & Subscribers Meningkat dengan custom domains.
  4. Pengunjung akan lebih suka Share dan Bookmark.
  5. PageRank akan naik.
  6. Kita cuma beli/sewa domain saja, tidak dengan hostingnya karena hosting tetap di blogger (Google) nan aman dan nyaman.
  7. Rankings akan naik tajam.
  8. PageRank will stabilize On next PR update
  9. Bisnis Anda akan berkembang pesat. Secara, nama domain sendiri lebih kredibel!
Tak kalah pentingnya, sewa/beli domain gak mahal kok. Murah, cuka di kisaran 100 ribuan per tahun!

Dengan hosting di Blogger/Google, blog atau situs web Anda dijamin aman dan "dilindungi" Google. Unlimited trafik! Dijamin nggak error dan tidak "server down" seperti sering dialami selfhosted. Blog berita dan blog toko online lebih aman dan stabil dengan Custom Domain.

Siap melakukan Custom Domain alias mengubah nama/alamat blog menjadi nama domain sendiri? Beli Domain Sekarang! Murah kok, cuma 100 ribuan per tahun! Good Luck! (http://www.contohblog.com).*

Cara Memasang Breadcrumb di Atas Judul Posting Blog

Cara Memasang Breadcrumb di Atas Judul Posting Blog - Baris Navigasi sebagai Internal Link untuk Meningkatkan Pageviews.

TEMPLATE blog terbaru dipastikan sudah memasang breadcrumbs di atas judul tulisan halaman dalam. Bagi yang belum tahu (masa sih?) apa itu breadcrumb, berikut ini penampakannya:

Breadcrumb di Atas Judul Posting

Pada gambar di atas, baris tulisan Home » News » Kunci Sukses Blog ...dst. itulah yang disebut breadcrumb. 

Breadcrumb merupakan navigasi berupa internal link (tautan kedalam) yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat, juga membuka semua posting yang ada dalam satu kategori (label). 
Menurust Maskolis, sang mastah yang sudah tidak asing lagi di kalangan blogger, search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog. 

Maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu, semakin relevan sebuah label dengan isi postingan (artikel), maka akan semakin mendapatkan kesempatan tampil di halaman depan Google (SERP).

Jelas, bepata benting breadcrumb ini ada di blog kita. Makanya, template seo friendly dipastikan sudah memasangnya. (Baca: Penjelasan Google tentang Breadcrumbs)

Namun ternyata, ada juga template keren yang belum dipasangi breadcrumb. Bagi yang templatenya belum dipasangi breadcrumb, misalnya template bawaan blogger, atau mau ganti tampilan breadcrumb, maka berikut ini cara memasangnya.

Cara Memasang Breadcrumb di Atas Judul Posting Blog

1. Klik Template > Edit HTML.
2. Copas kode berikut ini di atas  kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}


3. Cari kode seperti ini :

<div class='post hentry'>
4. Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>

<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. Save Template!
Beres! Kini breadcrumbs sudah terpasang di  atas tiap postingan blog Anda. Good Luck! (http://www.contohblog.com).*

Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar

Widget Arsip Blog
Cara Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar biar lebih keren.

ARSIP Blog merupakan salah satu widget bawaan blogger. Kita tinggal tambahkan di sidebar.

Namun, tampilan standar tampak terlalu sederhana dan bisa dimodifikasi menjadi lebih keren.

Kita bisa memodifikasinya. Salah satu kode Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar ini di-share oleh These Paper Hearts. Tampilannya sebagai berikut:

Widget Arsip Blog

Demonya bisa dilihat di halaman dalam (klik salah satu posting) CB Blogger Lab.

Cara Memasangnya:
1. Layout > Add a Gadget > pilih "Blog Archieve" (Arsip Blog)
2. Save!

Langkah berikutnya memasang kode Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar.

1. Klik Template > Customize 
2. Klik menu "Advance" > "Add CSS"
3. Copas kode berikut ini:

/* Archive Year Header */
#ArchiveList ul > li > a.post-count-link {
font-size: 18px;
width: 100%;
margin: 0;
padding: 0 15px;
line-height: 38px;
background-color: #F5F5F5;
box-sizing: border-box;
letter-spacing: 1px;
}

/* Archive Month Header */
#ArchiveList ul ul li  a.post-count-link{
font-size: inherit;
width: auto;
margin: 0 5px 0;
padding: 8px 25px;
line-height: 1;
background: transparent;
text-transform: uppercase;
}

#ArchiveList .zippy{
visibility: hidden;
}

#ArchiveList ul li a.toggle {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
height: 38px;
z-index: 5;
}

#ArchiveList ul ul li a.toggle {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 24px;
display: block;
z-index: 0;
}

#ArchiveList .toggle {
position: relative;
}

#ArchiveList ul ul .zippy{
color: white;
visibility: visible;
text-shadow: none;
}

#ArchiveList ul ul .zippy:before {
content: '\f105';
font-family: FontAwesome;
position: absolute;
top: 3px;
left: 12px;
padding: 4px;
line-height: 1;
font-size: 12px;
color: #8C8C8C;
}

#ArchiveList ul ul .toggle-open:before {
content: '\f107';
position: absolute;
top: 3px;
left: 10px;
}

#ArchiveList ul li{
padding: 0 !important;
text-indent: 0 !important;
margin: 0 !important;
position: relative;
        background: none;}
#ArchiveList ul .post-count-link {
padding: 10px 0;
display: inline-block;
margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
margin: 0px 10px 10px 30px !important;
text-transform: none;
}

#ArchiveList ul {
margin: 0 0 2px !important;
}

span.post-count {
position: absolute;
right: 10px;
top: 10px;
color: #8C8C8C;
}

4. Klik "Apply to Blog"
5. Beres!

Klik "Back to Blogger" (Kembali ke Blogger).

Jika ingin menampilkan Widget Arsip Blog (Blog Archieve) hanya di halaman dalam, gunakan Tag Kondisional. Good Luck & Happy Blogging! (http://www.contohblog.com).*

5 Navigasi Menu Responsive Keren untuk Blogger

Navigasi Menu Responsive Keren
Koleksi 5 Navigasi Menu Bar Responsive-Mobile Friendly plus Dropdown Keren untuk Blogger.

JIKA blog Anda ingin memiliki navigasi menu responsive dropwon yang keren abis, lima jenis menu bar blogger ini menjadi alternatif terbaik. Simple, tidak lebay dan alay, namun user friendly dan ringan.

Ada lima pilihan warna Navigasi Menu Responsive, namun hakikatnya tiga, yakni biru, hitam, dan putih.

Warna biru dan hitam cocok untuk main menu atau menu utama di bawah header. Yang warna putih snagat pas buat Top Menu Bar di atas header.

Desainernya menamakan menu navigasi ini sebagai 3D Responsive Mobile Menu Bar.

Desainer navigasi menu ini hanya menyediakan kodenya. Tidak ada tutorial pemasangan. Jadi, ini bukan buat "newbie", tapi buat yang sudah paham kode dan pemasangannya. Namun, CB kasih panduan secara umum di alinea terakhir.

5 Navigasi Menu Responsive Keren untuk Blogger

#1 Navigasi Menu Responsive Biru
 Navigasi Menu Responsive Biru

#2 Navigasi Menu Responsive Masih Biru


 Navigasi Menu Responsive


#3 Navigasi Menu Responsive Putih Bersih

 Navigasi Menu Responsive


#4 Navigasi Menu Responsive Hitam Elegan

Navigasi Menu Responsive


#5 Navigasi Menu Responsive Biru Lagi

Navigasi Menu Responsive


Kelima navigasi menu responsive di atas dibuat menggunakan kode HTML, CSS, dan jQuery untuk memastikan navigasi ini tampil jelas dan keren di layar device apa pun.

Cara Pemasangan:

  • Kode HTML di pasang di bawah atau atas kode header
  • Kode CSS dipasang di atas kode ]]</b:skin> atau </style>
  • Kode jQuery dipasang di atas </head> atau </body>

Bagi blogger pemula yang mau pasang sendiri menu navigasi responsive, silakan pasang dua jenis navigasi menu yang sering cb pasang berikut ini:

Good Luck and Happy Blogging! (http://www.contohblog.com).*

Sumber: CSS Menu Maker


Penyebab Skor SEO Blog di Chkme Tidak 100%

skor seo blog chkme 100%
Penyebab dan Cara Mengatasi Skor SEO Blog Tidak 100% Saat dicek di Chkme.

SEBELUMNYA CB sudah posting tips tentang Cara Membuat Skor SEO Jadi 100% di Chkme. Posting kali ini fokus pada salah satu atau beberapa penyebab dan cara mengatasi skor seo tidak 100% di Chkme.

Posting ini berdasarkan pertanyaan seorang pengunjung blog. Ia menggunakan salah satu Template CB. Blog demonya skor seo 100%, tapi begitu digunakan di blognya, kok jadi 78% atau lebih bawah lagi? Apa penyebabnya?

Setelah dicek, ternyata hampir semua gambar (image) di blognya tidak menggunakan deskripsi (Alt & Title Text). Maka, disarankan melakukan Optimalasi SEO Gambar Posting Blog, salah satunya mengisi Image Properties begitu selesai upload:

seo image properties blog

Selain itu, hapus semua kode <b:includable name='quickedit'/> yang ada dalam template. Setiap kali menambah widget baru, maka otomatis kode tersebut nongol di template.

Maka, masuk ke template (Template > Edit HTM) dan temukan (Ctrl + F) kode <b:includable name='quickedit'/> lalu hapus.

hapus quickedit

Kode <b:includable name='quickedit'/> ini menyebabkan adanya ikon "tang dan obeng" seperti dalam gambar berikut ini.

Ikon gambar ini tidak dilengkapi deskripsi gambar sehingga menjadi salah satu penyebab skor seko di Chkme tidak 100%.

wrench template blog

Penyebab umum lain yang menjadikan skor seo blog tidak 100% adalah penggunaan gambar logo di header. Jika tidak dilengkapi kode Heading Tag H1, maka H1 bakal jadi zero alias kosong dan itu bad for seo.

Untuk mengatasinya, cari kode berikut ini di dalam template dan tambahkan kode <h1> dan  </h1> seperti dalam contoh berikut ini:

<div id='header-inner'> 
<a expr:href='data:blog.homepageUrl' style='display: block'> 
<h1><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'/></h1>
</a> 
</div>

Demikian Penyebab Skor SEO Blog di Chkme Tidak 100% dan cara mengatasinya. Good Luck! (http://www.contohblog.com).*

Contact Form

Name

Email *

Message *