Contoh Blog Net

Contoh Blog Net
Jasa SEO Blog

Cara Mengatur Keterangan Foto/Gambar (Image Caption) di Posting Blog

Cara Mengatur Keterangan Foto/Gambar (Image Caption) di Posting Blog

Keterangan Gambar, Keterangan Foto, atau Image Caption adalah teks atau tulisan yang terdapat di bagian bawah sebuah foto atau ilustrasi gambar dalam posting blog.

Keterangan Gambar berfungsi untuk mendeskripsikan atau sekadar melengkapi gambar tersebut dengan penjelasan atau keterangan. 

Image Caption sangat bagus buat SEO karena lebih memudahkan mesin pencari untuk menentukan hasil pencarian yang relevan, terutama pada pencarian gambar/image. Di situs-situs berita, keterangan gambar ini diindeks oleh Google setelah judul berita.

Contoh penampakkan image caption adalah sebagai berikut:

Keterangan Gambar

Keterangan Gambar

Dalam gambar di atas, ada tulisan di bawah gambar. Itulah yang disebut image caption atau keterangan gambar.
Cara membuatnya adalah, setelah gambar diupload, klik gambar tersebut sekali, lalu klik menu "Add Caption", sebagai berikut:

Mengatur Keterangan Foto
Cara Menambahkan Keterangan Gambar.*


Cara Mengatur Keterangan Foto/Gambar (Image Caption) 

Kode CSS untuk mengatur penampilan keterangan gambar biasanya sudah ada di template blog. Yang CB share di sini adalah contoh kasus di template blog yang digunakan CB NET ini.

Untuk mengatur image caption menjadi seperti di atas, caranya adalah menemukan kode css lalu mengubahnya sebagai berikut:

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

.tr-caption {
text-align: center;
font-size: small;
font-style: italic;
color: #777;
padding: 5px 0;
border-bottom: 1px solid #ddd;
}


3. Save Template!

Jika kode di atas tidak berfungsi, artinya kode keterangan gambarnya berbeda. Silakan:
1. Select All keterangan gambar yang ada di postingan blog Anda
2. Klik Kanan > "Inspect Element" > akan muncul nama kodenya yang harus Anda atur.

Demikian Cara Mengatur Keterangan Foto/Gambar (Image Caption) di Posting Blog. Good Luck & Happy Blogging! (http://www.contohblog.net).*

Cara Mudah Memasang Microdata Schema Org di Blog untuk SEO

Cara Mudah Memasang Microdata Schema Org di Blog untuk SEO

Microdata Schema Org adalah kode tambahan di template blog agar lebih SEO Friendly sehingga mudah dan cepat terindeks mesin telusur. Google menyebutnya Pemandu Markup Data Terstruktur.

Cara Mudah Memasang Microdata Schema Org di Blog untuk SEO
Microdata Scheme Org untuk SEO Blogger. Image: builtvisible.com.*


Template Blog SEO Friendly Terbaru biasanya sudah menggunakan microdata schema untuk menambah ke-SEO-an blog. Kode microdata schema ini membuat posting blog mudah dikenali dan diindeks Google dan mesin pencari lainnya.

Jika Anda menggunakan template lama, didesain tahun 2013 ke belakang, kemungkinan besar template blog Anda belum dipasangi Microdata Schema Org ini. 

Sebenarnya tidak masalah jika tidak ada kode Microdata Schema Org, namun akan lebih ramah mesin pencari jika ditambahkan kode Microdata Schema Org di dalam template blog Anda.

Silakan cek dulu blog Anda di Structured Data Testing Tools. Jika hanya ada "Atom" atau bahkan tidak terdeteksi apa pun, sebaiknya pasang kode di bawah ini, lalu cek ulang.

Cara Mudah Memasang Microdata Schema Org di Blog untuk SEO

1. Klik "Template" > "Edit HTML"
2. Cari (Ctrl+F) kode <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
3. Pasang kode microdata schema berikut ini tepat di bawah kode <body> tadi

<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if> <meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='URL Image Favicon atau Logo Blog Anda di Sini' itemprop='image'/>
</b:if>
</div>

4. Save!

Demkian Cara Mudah Memasang Microdata Schema Org di Blog untuk meningkatkan SEO. 


Penjelasan Google tentang Microdata Schema Org

Berikut ini penjelasan Google tentang Pemandu Markup Data Terstruktur:
  • Pemandu Markup Data Terstruktur menunjukkan cara memperbarui situs Anda sehingga Google—dan produk perusahaan lain yang berpotensi—dapat memahami data yang ada di dalamnya. 
  • Setelah Google memahami data dalam situs Anda, data Anda dapat disajikan dengan lebih menarik dan dengan cara yang baru. 
  • Selain itu, jika Anda mengirimkan email dengan format HTML ke pelanggan, Pemandu Markup dapat menunjukkan kepada Anda cara mengubah template email sehingga Gmail dapat menyajikan data tersebut dalam email dengan cara yang baru dan bermanfaat.
  • Schema.org adalah kolaborasi oleh Google, Microsoft, dan Yahoo! untuk meningkatkan web dengan membuat kosakata umum untuk mendeskripsikan data di web.
  • Jika Anda menambahkan markup schema.org ke laman HTML Anda, berbagai perusahaan dan produk—termasuk penelusuran Google—akan memahami data di situs Anda.
  • Anda dapat menggunakan jenis markup yang berbeda untuk mendeskripsikan data dengan kosakata schema.org. Pemandu Markup dapat menunjukkan kepada Anda cara menggunakan microdata dan JSON-LD.
Intinya, memasang atau menambahkan Microdata Schema Org dapat membuat blog atau situs web lebih SEO Friendly sehingga mudah dan cepat terindeks Google, serta menempati peringkat (rangking) terbaik di halaman hasil pencarian (SERP).

Good Luck & Happy Blogging! (http://www.contohblog.net).*

Cara Membuat Kotak Pencarian plus Media Sosial di Sidebar Blogger

Cara Membuat Kotak Pencarian plus Ikon Media Sosial
Cara Membuat Kotak Pencarian plus Ikon Media Sosial di Sidebar Blog.

KOTAK Pencarian (Search Box) merupakan salah satu menu utama yang wajib ada dalam sebuah situs web atau blog.

Kotak pencarian ini memudahkan pengunjung dan admin blog sendiri untuk mencari informasi yang dibutuhkan.

Kotak pencarian harus mudah dilihat, misalnya di header atau sidebar paling atas. Search Box ini terkait dengan User Experience (UX) atau pengalaman pengguna.

Blog yang tidak dipasangi kotak pencarian termasuk kategori yang buruk dan tidak ramah pengguna (user friendly).

Ikon media sosial berfungsi untuk meningkatkan jumlah follower, teman, atau liker. Link akun sosial media di bawah kotak pencarian, juga memudahkan pengunjung keep in touch dengan admin lewat media sosial --Facebook, Twitter, Google Plus, Pinterest, Feedburner, dan LinkedIn.


Cara Membuat Kotak Pencarian + Media Sosial di Sidebar

Cara memasang, menampilkan, atau membuat widget Kotak Pencarian (Search Box) plus Ikon Media Sosial di sidebar blog sangat mudah. Kita tinggal pasang kode.

Sebelum memasangnya, pastikan Anda harus punya dulu akun-akun media sosialnya --Facebook, Twitter, Google Plus, Pinterest, Feedburner, dan LinkedIn.

1. Layout > Add a Gadget di sidebar paling atas.
2. Copy + Paste kode berikut ini di kolom "Content". Kolom judul biarkan kosong.

<!-- SEARCH BOX -->
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 30px;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=&quot;text&quot;]
{width: 90%;padding: 7px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-width: 0;background-color: #4d90fe;-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>
<!-- SEARCH BOX END -->

<!-- SOCIAL PROFILE END -->
<div class='widget-content'>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
    .TZ-social{padding:0 5px 15px;}
    .TZ-social img:hover{opacity:0.8}
    .googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
    #widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id='socialwidget'>
    <div class='TZ-social'>
    <!-- social ico -->
    <center>

    <a href='http://facebook.com/username' rel='nofollow' style='margin-right: 15px;' target='_blank'>
    <img alt='Facebook' src='http://2.bp.blogspot.com/-1UYOmpOWMv8/T65vfQFE80I/AAAAAAAAABY/H0t0CMEwyO0/s1600/facebook.png'/></a>

    <a href='http://twitter.com/username' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Twitter' src='http://1.bp.blogspot.com/-4xPK0hkcELk/T65vi83XGqI/AAAAAAAAAB0/ef6Af1cesHE/s1600/twitter.png'/></a>

    <a href='https://plus.google.com/ID Number/posts' rel='me' style='margin-right: 12px;' target='_blank'>
    <img alt='Google Plus' src='http://3.bp.blogspot.com/-QEdzJcR1pfI/T65vgBJxxMI/AAAAAAAAABg/2eXrz-32Gds/s1600/gplus.png'/></a>

    <a href='http://www.pinterest.com/username' style='margin-right: 12px;' target='_blank'>
    <img alt='Pinterest' src='http://1.bp.blogspot.com/-2A1sbDGCgOw/T65vhAL4VZI/AAAAAAAAABo/2XDEIAFUuEI/s1600/pinterest.png'/></a>

    <a href='http://feeds.feedburner.com/Feedburner ID' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='RSS Feed' src='http://1.bp.blogspot.com/-wK9q4eUXA6U/T65viJ1HVmI/AAAAAAAAABs/DyIkCZdJ1Y4/s1600/rss.png'/></a>

    <a href='http://www.linkedin.com/in/username' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Linkedin' src='http://1.bp.blogspot.com/-uQdbnT1u1e0/Ui26eZOy3VI/AAAAAAAAJqA/h4wzaYt2L_Y/s1600/linkedin.png'/></a>

    </center>
    </div>
    </div>
</div>
<!-- SOCIAL PROFILE END -->

3. Ganti ID yang berwarna merah dengan kepunyaan Anda.
4. Save!

Kini Kotak Pencarian plus Media Sosial sudah muncul di sidebar blog Anda! Good Luck! (http://www.contohblog.net).*

Kelebihan Platform Blogspot dari WordPress: Anti Error!

Blogspot vs WordPress
Kelebihan Blogger/Blogspot vs WordPress.

BLOGGER atau blogspot adalah platform blog gratis milik Google. Wordpress adalah Content Managemen System (CMS) Wordpress untuk membuat website dengan nama doman dan server sendiri (selfhosted). Dua ini yang kita bandingkan.

SUDAH banyak ulasan yang membahas unggul mana Blogger vs WordPress atau Blogspot vs WordPress. Kali ini kita bahasa satu saja kelebihan blogspot, yaitu ANTI-ERROR.

Di Blogger, kita tidak akan pernah menemukan pesan error Networdk Error (tcp_error) seperi berikut ini.

Network Error (tcp_error)
A communication error occurred: ""
The Web Server may be down, too busy, or experiencing other problems preventing it from responding to requests. You may wish to try again at a later time.

For assistance, contact your network support team.

Itu error apa ya? Sudah ada penjelasannya, yaitu server turun, sibuk, atau masalah lainnya. Umumnya, itu karena banjir pengunjung dan server tidak mampu merespons semuanya.

Nah, jika Anda menggunakan server Blogger, maka jumlah pengunjung UNLIMITED dan ANTI-ERROR. Itulah kelebihan blogspot yang menggunakan server Google Blogger dibandingkan server sendiri (sewa/bayar) dan menggunakan CMS WordPress dalam membangun blog.

Masih banyak kelebihan blogspot lainnya dibandingkan wordpress, namun kali ini kita fokus ke soal NO ERROR aja. Percuma 'kan, kita bikin posting bagus, eh taunya gak bisa kebuka karane "server busy"? (http://www.contohblog.net).*

15 Template Blog Keren dan SEO Friendly untuk Blog Berita

Blog Keren dan SEO Friendly untuk Blog Berita
15 Template Blog Keren dan SEO Friendly untuk Blog Berita dan Niche Blogger Lainnya

SALAH satu kelebihan platform blog blogspot (blogger) adalah tampilan atau desain templatenya yang bisa dimodifikasi sesuai dengan selera blogger.

Untuk blog berita (news blog), yakni blog jenis "portal" yang berisi ragam informasi aktual, banyak template free (gratis) yang bisa digunakan dan dimodifikasi.

Hampir semua desainer template menyediakan template blog bernuansa "news" dan/atau "magazine" sehingga banyak pilihan template untuk blog berita.

Template blog yang bagus digunakan untuk blog berita atau blog lainnya antara lain:
  1. SEO Friendly alias ramah mesin telusur agar mendapatkan banyak pengunjung dari hasil indeks mesin pencari.
  2. Desain Profesional agar blog lebih kredibel dan terpercaya.
  3. Fast Loading alias tampil cepat, tidak berat, karena kalo berat akan ditinggalkan pengunjung.
  4. Responsive alias Mobile Friendly. Jika tidak ramah mobile, bukan saja Google sulit mengindeksnya, tapi juga tidak akan banyak pengunjung karena user kini lebih banyak menggunakan HP untuk akses internet.

List Top 15 Template Blog SEO Friendly untuk Situs Berita

Berikut ini Koleksi 15 Template Blog Keren dan SEO Friendly untuk Blog Berita disertai link demo dan downloadnya.

#1. Belastic Responsive 

Belastic Responsive


#2. Flat Mag

Flat Mag


#3. Kontify

 Kontify


#4. Modern Mag

Modern Mag


#5. Grizzled Blogger Template

Grizzled Blogger Template


#6. Bresponsive

Bresponsive


#7. Gamer MagZ

Gamer MagZ


#8. SEO Beast



#9 Google SEO V2



#10. CB Magazine 



#11. Detik Style - News Blogger Template

Detik Style - News Blogger Template


Detik Style - News Blogger Template adalah template blog berita terbaru dengan konsep situs berita terpopuler di Indonesia, detik.com. Dengan template ini pengunjung akan betah karena sesuai dengan User Experience (UX).

#12 NJW Magz

NJW Magz


#13. Flat News

Flat News


#14. MagOne

MagOne


#15. GodMag

GodMag


Demikia 15 Template Blog Keren dan SEO Friendly untuk Blog Berita yang juga cocok digunakan untuk blog selain blog berita alias blog dengan konten apa saja. Good Luck! (http://www.contohblog.net).*

Back To Top