Thursday, August 25, 2016

Cara Membuat Breadcrumb SEO Friendly

Cara Membuat Breadcrumb SEO Friendly

Cara Membuat Breadcrumb SEO Friendly di Atas Judul Blog

BREADCRUMBS secara bahasa (Inggris) artinya "remah roti". Di dunia desain blogging atau website, breadcrumbs adalah sebaris teks dan link di atas judul posting berupa navigasi atau tautan internal berupa yang menunjukkan kepada pembaca di halaman mana mereka berada.

Cara Membuat Breadcrumb SEO Friendly di Atas Judul Blog

Breadcrumb memudahkan pengunjung dalam mengeksplorasi konten blog karena berisi link ke halaman depan (home) dan halaman label (label page).

Breadcrumbs juga berguna juga dalam pencarian indeks halaman Google. Pencarian Google biasanya akan menyertakan navigasi blog yang sedang dicari. Google juga mengindex navigasi terkait keyword (kata kunci) yang diisikan dalam kotak pencariannya.

Cara Membuat Breadcrumb SEO Friendly di Atas Judul Blog

Berikut ini cara membuat breadcrumb dari maskolis:

1. 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. Copas kode berikut ini di bawah kode <div class='post hentry'> atau
<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'> Browse &#187; <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>

4. Save Template!

Pembuatan breadcrumb selesai.

Jika ingin membatasi jumlah posting di halaman label --jika link labelnya diklik, maka ubah kode data:label.url menjadi label.url+ &quot;?&amp;max-results=5&quot;

Demikian Cara Membuat Breadcrumb SEO Friendly untuk Blogger. (CB)

Tuesday, August 23, 2016

Mengatasi Gambar (Image) Thumbnail Buram, Blur, Tidak Jelas di Blog

Mengatasi Gambar (Image) Thumbnail Buram, Blur, Tidak Jelas di Blog

Mengatasi Gambar (Image) Thumbnail Buram, Blur, Tidak Jelas di Blog

Mengatasi Gambar (Image) Thumbnail Buram
GAMBAR buram atau blur adalah tampilan gambar yang tidak sesuai dengan warna aslinya dikarenakan dimensi ukuran dengan tampilan berbeda.

Gambar buram biasanya muncul di image thumbnail halaman depan blog dengan auto readmore.

Kode autoreadmore aslinya 72 pixel, sedangkan yang disetting lebih besar dari itu. Makanya jadi blur atau buram.

Untuk mengatasinya, simpan kode berikut ini di atas kode </head> atau </body> untuk mengatasi gambar buram atau blur di homepage blogger.

KODE

<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" +

size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
} resizeThumb('Blog1', 300);
//]]>
    </script>

Ingat ya, simpan di atas kode </body> atau </head>

Demikian Mengatasi Gambar (Image) Thumbnail Buram, Blur, Tidak Jelas di Blog. (CB).*

Template Blog SEO Friendly Terbaik & Terbaru 2016

Template Blog SEO Friendly Terbaik & Terbaru 2016

Template Blog SEO Friendly Terbaik 2016
Template Blog SEO Friendly Terbaik ^ Terbaru 2016: Responsive & Fast Loading

TEMPLATE Blog SEO Friendly adalah desain tampilan blog blogger yang memiliki struktur kode yang baik, mudah dibaca dan diindeks mesin pencari Google dan Bing/Yahoo, ringan atau tampil cepat saat dibuka (fast loading), dan responsive atau ramah mobile (mobile friendly) --mudah dibuka lewat HP.

Template blog memainkan peran penting kedua setelah konten (isi/posting/tulisan). Content is King. Isi blog adalah raja, penentu utama blog mudah dan cepat terindeks mesin telusur sehingga tampil di posisi teratas halaman depan (page one) halaman hasil pencarian Google (SERP) dan banyak pengunjung.

Jika konten adalah King, maka template, tampilan, atau desain, adalah Queen (ratun) yang sering juga menentukan kebijakan sang raja.

Perpaduan King (konten) dan Queen (template) yang ramah mesin pencari (SEO Friendly) dan ramah pengguna (User Friendly) akan membuat blog Anda powefull, seo killer, dan mendominasi halaman hasil pencarian.


Mengetes Template Blog SEO Friendly

Untuk menentukan sebuah Template Blog itu SEO Friendly atau tidak, sedikitnya ada empat situs pengujian template:

1. Webmaster Structured Data Testing Tools 
Tool ini berfungsi untuk menguji struktur data template baik tidaknya, sehingga mudah diindex oleh mesin pencari.

2. Mobile-friendly Test.
This test will analyze a URL and report if the page has a mobile-friendly design. Learn more about the mobile-friendly criteria and how it may affect Google's search results by reading our blog post.
Alat ini untuk menguji templat Anda mobile friendly atau tidak, seperti yang di rekomendasikan oleh Google. Templat yang baik harus mobile friendly.

4. GT Metrix 
Tool untuk menguci kecepatan loading templat. Templat yang baik memiliki fast loding sekitar 80-90% itu baru templat keren.

5. CHKME 
Tool yang tidak asing lagi di telinga Anda. Tool ini berfungsi untuk menguji SEO tidaknya templat Anda dan tool ini juga memberi rekomendasi apa yang harus di perbaiki dalam templat tersebut.


Template Blog SEO Friendly Responsive Terbaik 2016 (GRATIS)

New Johny Wuss V1
Template ini merupakan modifikasi template legendaris Johny Wuss dipadukan dengan Johny Wuss versi responsivenya, Johny Seebook.

Template Blog SEO Friendly Responsive Terbaik

New Johny Wuss V2
SEO-nya sama dengan NJW V1, hanya beda desain saja.

New Johny Wuss V3
NJW V3 ini juga SEO-nya sama kuat dengan NJW V1 dan NJW V2, hanya beda desain saja. NJW V3 memilih tampilan non-magazine sebagaimana template simple bawaan blogger.

Google SEO
Template blogger ini juga SEO-nya sama dengan NJW. Demikian juga tampilannya. Bedanya hanya di kode css dan html yang dipasang di dalam template.

New Thesis SEO V1
Template ini merupakan modifikasi dari template yang tidak kalah legendarisnya dari Johny Wuss, yakni Thesis SEO. Kebanyakan blogger luar negeri lebih memilih New Thesis SEO (NTS) ini dibandingkan NJW, mungkin karena templata aslinya didesain orang luar juga.


New Thesis SEO V2
New Thesis SEO V3
CB Basic


Template Blog SEO Friendly Responsive Terbaik 2016 (PREMIUM)

Template Blog SEO Friendly Responsive Terbaik

Template Blog SEO Friendly Responsive Terbaik

CB Style
Detik Style
NJW Magz
NTS Magz

Kode Kotak Pencarian Simple Responsive untuk Blogger

Kode Kotak Pencarian Simple Responsive untuk Blogger

Kode Kotak Pencarian Simple Responsive untuk Blogger. Mencari Cinta di Kampung Cinta juga bisa dengan Kotak Pencarian ini :)


Mencari Cinta di Kampung Cinta juga bisa dengan Kotak Pencarian
Mencari Cinta di Kampung Cinta

<style>
.serching{margin:0 auto;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:gray;color:#fff;border:0!important;font-size:12px!important}
</style>
<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></form></div>