Cara Membuat Sitemap atau Daftar Isi SEO Friendly Pada Blog

Daftar isi blog atau sering juga disebut sitemap merupakan salah satu komponen yang sangat penting keberadaannya pada blog. Sitemap merupakan suatu media yang memberikan informasi secara garis besar kepada para pengunjung blog tentang isi blog yang anda kelola.

Dalam postingan kali ini saya akan memberikan tutorial singkat tentang cara membuat sitemap yang fast loading, responsive dan tentu saja SEO friendly. Sebenarnya sitemap default bawaan dari blogger sudah tersedia namun sitemap tersebut kurang menarik dan terlihat biasa biasa saja.

Adapun sitemap atau daftar isi yang saya bagikan tutorialnya ini merupakan sitemap otomatis yang menampilkan judul postingan yang sesuai dengan label yang anda buat pada blog. Artikel-artikel atau postingan postingan terbaru pada blog pun akan terindex secara otomatis jadi tidak perlu ribet memasukan satu persatu lagi pada sitemap.

Contoh sitemap atau daftar isi yang saya bagikan pada artikel kali ini

Tertarik??...silahkan langsung saja ikuti langkah langkahnya, pertama silahkan log in ke akun blogger anda dan seterusnya pilih "Laman" kemudian klik pada "laman baru"

Langkah berikutnya, 1. isi pada kolom judul laman dengan "sitemap" atau "daftar isi" terserah anda enaknya apa... 2. kemudian pilih atau klik kolom HTML lalu 3. copy paste kode berikut ini 

#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:15px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none;padding-bottom:15px}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://jadulation.blogspot.co.id/';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

dan langkah ke empatnya setelah copy paste kode diatas klik publikasikan maka selesai sitemap atau daftar isi blog anda sudah jadi dan silahkan lihat hasilnya...

Untuk lebih jelasnya silahkan lihat pict berikut ini...

catatan : ganti http://jadulation.blogspot.co.id/ dengan url blog anda dan setelah anda copy paste kode script diatas jangan klik kolom compose (disebelah kolom HTML tadi) karena bisa jadi sitemap yang anda buat tadi tidak akan muncul atau hanya ada halaman kosong.

Nah begitulah langkah langkah membuat Daftar Isi atau Sitemap yang fast loading, responsive dan SEO friendly dari saya semoga membantu dan bermanfaat untuk ada...wassalam... 

Read more »

Memperbaiki Missing Error Structured Data Pada Blog

Untuk mengetahui adanya missing error pada struktur data blog anda, silahkan anda cek pada halaman Structured Data Testing Tool yang telah disediakan oleh google pada link berikut https://developers.google.com/structured-data/testing-tool/ setelah masuk ke halaman tadi kemudian klik ambil url dan masukan url blog anda ke kolom yang ada dan klik ambil & validasi setelah itu akan muncul hasil dari tes yang dilakukan tadi.

Pada kolom sebelah kanan hasil tes tersebut akan terlihat beberapa missing error yang terjadi pada struktur data blog anda misalnya missing error pada Author, Name, Published, DatePublished, MainEntityOfPage dan ImageDateModifie. Beberapa blogger berpendapat tentang error-error pada struktur data blog tersebut dapat diabaikan alias tidak berpengaruh pada SEO, tetapi alangkah baiknya apabila error-error tersebut bisa kita perbaiki meskipun itu katanya tidak terlalu penting untuk SEO.

Untuk memperbaiki missing error yang terjadi pada struktur data blog tersebut silahkan ikuti langkah-langkahnya dibawah ini :

catatan : dalam memperbaiki missing tersebut lakukan langkah-langkahnya secara berurutan dan apabila ada missing error yang sudah fix dapat berlanjut pada langkah selanjutnya dan jangan lupa untuk selalu cek di structured data testing tool untuk mengetahui missing error tersebut telah diperbaiki atau tidak.

seperti biasa log in ke akun blogger dan klik template kemudian klik edit HTML

• Memperbaiki Missing Error Pada Image di Homepage

Cari kode itemprop='image' kemudian hapus kode tersebut (biasanya terdapat dua buah kode tersebut)

• Memperbaiki Missing Error pada Image, Publisher dan MainEntityOfPage Pada Halaman Posting dan Homepage

Cari kode berikut ini

<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

lalu copy kode dibawah ini kemudian pastekan dibawah kode tadi

<div itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta expr:content='data:post.firstImageUrl' itemprop='url'/>
  <meta content='600' itemprop='width'/>
  <meta content='300' itemprop='height'/>
  </div>
    </b:if>
  <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <meta content='URL LOGO BLOG ANDA' itemprop='url'/>
      <meta content='300' itemprop='width'/>
      <meta content='300' itemprop='height'/>
    </div>
    <meta expr:content='data:blog.title' itemprop='name'/>
  </div>

ganti tulisan berwarna merah dengan url blog anda

• Memperbaiki Missing Error DateModified Pada Halaman Posting dan Homepage

Temukan kode seperti dibawah ini

<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

dan tambahkan kode berikut yang ditandai dengan warna merah

<span itemprop='dateModified'><a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a></span>

• Memperbaiki Missing Error Author dan Name pada Halaman Posting dan Homepage

Hapus dan ganti kode Author (Person) pada HTML template blog anda dengan kode dibawah ini

<span class='author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a expr:href='data:post.authorProfileUrl' itemprop='url' rel='publisher' title='author profile'>
<span class='post-author vcard'><span class='fn' itemprop='name'><data:post.author/></span>
</span></a></span>

• Memperbaiki Struktur Data Blog yang Dobel

Cari kode berikut ini jika terdapat pada template blog anda kemudian hapus

<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>

Demikianlah langkah-langkah untuk memperbaiki missing error pada struktur data blog, semoga membantu dan good luck.

sumber : bungfranki.com

Read more »

Cara Memperbaiki Thumbnail Artikel yang Tidak Muncul Ketika Share ke Facebook

Cara memperbaiki thumbnail artikel atau postingan blog yang tidak muncul ketika artikel di share ke facebook. Ketika kita selesai membuat suatu artikel dan mempublikasikannya di blog tentu saja artikel yang kita tulis tersebut ingin dibaca oleh semua orang. Untuk bisa menarik pembaca atau pengunjung datang ke blog yang kita kelola salah satunya dengan cara membagikannya ke media sosial.

Facebook merupakan lahan yang besar untuk menarik pengunjung untuk datang ke blog kita. Ketika kita share artikel ke facebook kadang kalanya thumbnail atau gambar kecil dari artike tersebut tidak ikut muncul. Hal tersebut terjadi karena mesin telusur facebook gagal mengambil data-data dari halaman blog yang kita share, dan apabila muncul pun thumbnailnya bukan merupakan gambar yang kita sisipkan pada artikel blog tersebut.

Untuk memperbaikinya bisa dilakukan dengan cara sebagai berikut :

• log in ke akun blogger seperti biasa
• klik template dan edit HTML 
• kemudian cari kode <head>
• copy kode dibawah ini dan pastekan di bawah kode <head> tadi

<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='ISI DESKRIPSI ALTERNATIF DISINI' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='KODE-APLIKASI' property='fb:app_id'/>
<meta content='KODE-ADMIN' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

• setelah itu cari kode <body> 
• copy kode dibawah ini dan pastekan dibawah kode <body> tadi

<div id='fb-root'/>

<script>

window.fbAsyncInit = function() {

FB.init({

appId : 'KODE-APLIKASI',

status : true, // check login status

cookie : true, // enable cookies to allow the server to access the session

xfbml : true // parse XFBML

});

};

(function() {

var e = document.createElement('script');

e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

e.async = true;

document.getElementById('fb-root').appendChild(e);

}());

</script>

• klik simpan/save template

catatan

1. ganti ISI DESKRIPSI ALTERNATIF DISINI dengan deskripsi sesuai keinginan (deskripsi alternatif akan muncul apabila artikel tidak diberikan deskripsi)
2. KODE-APLIKASI ganti dengan kode aplikasi facebook anda
3. KODE-ADMIN ganti dengan kode fans page atau kode profil facebook anda

Tambahan Tips

• gambar yang disisipkan atau diupload pada artikel dimensinya tidak kurang dari 600x315 pixel

Setelah semua langkah-langkah tadi diterapkan, silahkan cek link artikel di link dibawah dengan catatan kode aplikasi dan kode admin sudah diisikan di blog

cek di link ---> https://developers.facebook.com/tools/debug/ 

Masukan link url artikel yang akan di share pada kolom yang ada dan klik debug kemudian klik fetch new scrape information maka secara otomatis data-data dari blog anda akan tersimpan pada sistem penelusuran facebook dan masalah thumbnail pun teratasi.

Nah itulah cara memperbaiki thumbnail artikel yang tidak muncul saat dishare ke facebook, semoga bermanfaat dan good luck.

sumber : arlinadzgn 

Read more »

Tutorial Cara Membuat Widget Recent Post Berdasarkan Label

Tutorial cara membuat, memasang dan menampilkan Recent Post atau Latest Post atau juga Posting Terbaru yang berdasarkan label atau kategori. Widget recent post ini tanpa menggunakan javascript dalam pemasangannya dan contohnya bisa dilihat ada pada bagian footer blog ini.

Recent post bisa dibilang penting fungsinya pada sebuah blog. Dengan adanya widget recent post pada blog dapat memudahkan pengunjung untuk melihat lihat artikel-artikel terbaru apa saja yang dipublikasikan pada blog. 

Oke langsung saja cara pemasangan widget recent post bisa dilakukan sebagai berikut :

• seperti biasa log in dulu ke akun blogger
• pada dashboard klik tata letak kemudian klik tambahkan gadget (bisa di sidebar atau footer untuk penempatannya)
• scroll ke bawah dan klik feed
• copy link di bawah dan paste kan pada kolom url feed

http://www.URL_BLOG_ANDA.com/feeds/posts/default/-/Ganteng

• klik lanjutkan
• atur tampilan sesuai keinginan
• klik simpan dan lihat hasilnya

keterangan

1. ganti http://www.URL_BLOG_ANDA.com dengan url blog
2. ganti Ganteng dengan nama label atau kategori yang ingin ditampilkan
3. apabila nama label terdiri dari dua kata, misal nama label Ganteng Banget sisipkan kode %20 diantara kedua kata tersebut. contoh penulisannya jadi Ganteng%20Banget
4. satu lagi yang tidak kalah penting penulisan huruf besar/kecil dari nama label tersebut sangat berpengaruh

Nah cukup mudah kan cara membuat widget recent post berdasarkan per label atau per kategori, good luck dan semoga bermanfaat.

Read more »

Tutorial Cara Memperbaiki dan Meningkatkan Kadar SEO Blog

Pada artikel sebelumnya telah dibahas mengenai cara mengetahui kadar keSEOan sebuah blog di chkme. Setelah mengetahui hasilnya dan apabila hasil yang blog kita peroleh di bawah 80% maka hal tersebut bisa kita perbaiki lagi kadar keSEOannya.

Untuk memperbaiki dan meningkatkan nilai keSEOan blog sebenarnya cukup mudah. Kita hanya perlu memperbaiki missing-missing yang ada pada blog yang kita kelola. Missing yang terjadi diantaranya pada heading, keyword, deskripsi, frames and iframes usage, flash movies/animations, images, website link dan lain sebagainya.

Permasalahan missing tersebut masalahnya berbeda pada setiap blog dan belum tentu sama. Contoh kasusnya pada blog si A permasalahannya ada missing pada images belum tentu pada blog si B mempunyai missing pada images juga. Jadi cara memperbaikinya dengan melihat laporan hasil kadar keSEOan blog kita sendiri dari chkme tersebut.

• Memperbaiki Tag Heading H1:Zero, That is Really Bad

Permasalahan missing tag heading H1 ini penyebabnya adalah tidak terbacanya tag h1 alias judul blog. Nah cara memperbaiki missing meta tag heading H1:Zero, that is really bad tersebut ada dua caranya. Silahkan ikuti langkah langkahnya sebagai berikut :

• masuk ke dashboard blog anda lalu klik tempalte dan klik edit HTML
• silahkan cari kode <div id='header-inner'> atau lengkapnya seperti dibawah ini

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

• tambahkan elemen <h1> dan </h1> pada kode diatas. contohnya seperti dibawah ini

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

• nah itu cara yang pertama. cara yang pertama ini bisa bisa dipakai memperbaiki mising tag h1 atau judul blog yang menggunakan huruf bukan gambar/logo
• untuk cara yang kedua bisa dipakai memperbaiki mising tag h1 atau judul blog yang memakai gambar atau logo. contohnya seperti dibawah 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>

• silahkan save dan cek kembali blog di chkme.

Begitulah dua cara mengatasi missing meta tag h1. Perlu diingat yang membedakan dua cara tersebut hanya h1 atau judul blog kita memakai huruf atau memakai gambar/logo saja.

• Mengatasi Meta Keyword dan Meta Deskripsi yang None 

Banyak yang mengalami hal ini, khususnya pada blogger pemula yang lupa atau tidak mengisi keyword dan deskripsi di HTML template blog. Dan bisa dipastikan ketika blog di cek kadar keSEOannya di chkme meta deskripsi dan meta keyword hasilnya akan none.

Cara mengatasi meta deskripsi meta keyword dan meta deskripsi yang menjadi none bisa dilakukan dengan cara : 

• kembali masuk ke dashboard blog klik template dan HTML
• temukan kode <head> dan masukan kode dibawah ini tepat dibawah kode <head> tadi

<meta content='ganti dengan deskripsi blog anda' name='description'/>
<meta content='ganti dengan keyword atau kata kunci blog anda' name='keywords'/>

 

• klik save template anda dan silahkan cek kembali blog di chkme

Untuk yang terakhir cara mengatasi missing descriptions pada images. Missing description pada images terjadi karena ketika kita membuat artikel dengan memasukan gambar, gambar tersebut tidak diberi description dan title. Untuk lebih jelasnya mengenai description dan title pada gambar silahkan baca artikel Cara Optimasi Gambar Pada Blog. 

Kembali ke bahasan cara mengatasi missing descriptions pada images, untuk mengatasinya silahkan ikuti langkah-langkah dibawah ini :

• masih didalam html template blog, cari kode berikut 

<img src='url_gambar.jpg ' />

• dan ubah setiap kode seperti diatas menjadi kode seperti dibawah ini

<img alt='image' title='image' src='url_gambar.jpg' />

• klik save dan cek kembali kadar keSEOan blog anda di chkme

Nah begitulah cara cara memperbaiki kadar keSEOan blog yang dicek di chkme. Semoga bisa mendapatkan kadar SEO 100% pada blog yang anda kelola dan semoga bermanfaat. 

Read more »

Tutorial Cara Membuat Widget Recent Post Pada Blog

Tutorial Cara Membuat Widget Recent Post Pada Blog. Biasanya setiap pengunjung blog yang datang ke blog tidak selalu ingin membaca artikel kita. Para pengunjung yang menemukan artikel kita lewat hasil penelusuran search engine sangat mungkin ingin mendapatkan suatu bahan bacaan yang lengkap dan relevan yang sesuai dengan apa yang mereka inginkan.

Maka untuk jenis pengunjung blog yang seperti hal tersebut diatas, artikel kita tentu saja akan dibaca atau bahkan dijadikan suatu bahan referensi. 

Akan tetapi jika pengunjung yang datang ke blog kita hanya untuk blogwalking dan melihat lihat blog yang kita kelola atau sekadar meningkatkan trafik sangat mungkin pengunjung seperti ini tidak membaca artikel artikel yang ada pada blog melainkan hanya melihat lihat judul artikelnya saja.

Jadi atas dasar hal tersebut kita bisa menyediakan widget recent post sehingga bagi pengunjung yang cuma blogwalking biasa bisa tertarik untuk membaca artikel artikel yang kita punya pada blog.

baca juga : Cara Membuat Arsip Blog dengan Scroll

   

Blog yang kita punya dan kita kelola biasanya didalamnya tidak terdapat fitur widget recent post pada templatenya. selain itu, pihak bloggernya pun tidak menyediakan fitur recent post. Sehingga untuk yang ingin mempunyai fitur recent post pada blognya kita hasrus memasangnya sendiri.

Bagi yang belum mengetahui pengertian widget recent post adalah merupakan widget yang berisi dan menampilkan postingan postingan atau artikel artikel terbaru yang dipublikasikan di blog. 

Fungsi widget recent post ini untuk mempermudah pengunjung dalam memberi informasi tentang artikel artikel terbaru yang ada pada blog. Bentuknya ada yang memakai thumbnail dan ada yang bentuknya berupa judul artikelnya saja.

Posisi widget ini bisa kita letakan sesuai keinginan. Bisa diletakan di sidebar atau bisa juga diletakan pada footer. Atur tata letaknya sehingga bisa terlihat rapi oleh pengunjung yang mengunjungi blog kita.

Baiklah cukup perkenalannya dengan apa yang dinamakan dengan widget recent post selanjutnya kita langsung ke tahap membuat dan memasang widget recent post pada blog yang sumbernya saya ambil dari blog arlinadzgn . Bentuk bentuk dan langkah langkahnya adalah sebagai berikut :

• widget recent post sederhana

Widget recent post sederhana ini hanya menampilkan judul artikelnya saja (contohnya seperti recent post pada blog ini lihat bagian bawah pada footer). Untuk membuat dan memasangnya langkahnya sebagai berikut :

• log in ke akun blogger
• klik pada tata letak atau layout
• kemudian add gadget (terserah mau diletakan di sidebar atau footer)
• klik HTML/javascript
• copy dan pastekan kode dibawah ini di kolom HTML/javascript tadi

kode:

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.URL_BLOG_ANDA.com",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

• ganti tulisan url yang saya tandai dengan warna merah dengan url blog anda dan ganti angka "5" dengan jumlah artikel yang ingin anda tampilkan sebagai recent post
• save dan silahkan lihat hasilnya

Dan blog anda pun kini sudah mempunyai recent post. Simple dan cukup mudah bukan. Nah berikutnya kita akan membuat dan memasang recent post dengan model navigasi.

• widget recent post dengan navigasi

Bentuk recent post dengan navigasi berikut ini seperti namanya mempunyai navigasi seperti next untuk ke post post selanjutnya dan previous untuk ke post post sebelumnya. Mengenai contoh bentuknya anda bisa klik dan lihat disini 

Langsung saja langkah untuk membuat dan memasangnya sebagai berikut :

• seperti biasa anda log in ke akun blogger
• pilih tata letak atau layout
• add gadget (letakan di sidebar atau di footer bebas terserah anda)
• klik pada HTML/javascript
• kemudian copy dan pastekan kode dibawah pada kolom HTML/javascript tadi

kode:

<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo6W3uS6Lsx3H_NIQpNUPV1m5hoERSSqE00tko3OZ_99K5UFkBiNdyhiJ-Ny72b4Wwvfc2Pg36qpneUfzRdpuCsOwyNZnXEfPP6H1rcw2JKSU7DTqRJSn7fXI8EINNaGuV1-xzf6IV2Mzm/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://URL anda.com";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjjkfdLXwQZd3IYuam1ToIA97f6yyxv_OKGId-ieslX9Ni9WcaJ5nmoDbalRB3-nedRir8YFS4JlodznTWhjOJrSNPnhflx5K387LbdSfdUTvUElLQYqeOaN4KPrgRbGcI4bFgmHoBkTK/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>

• ganti yang saya kasih BOLD sesuai dengan keinginan anda. 

1. var numfeed = jumlah artikel postingan yang ingin anda tampilkan
2. var urlblog = ganti dengan url blog anda
3. var charac = atur jumlah maksimal summary post yang ingin ditampilkan

• save dan silahkan cek hasilnya

Nah, begitulah cara membuat dan memasang bentuk recent post dengan navigasi pada blog. Silahkan anda pasang mana yang sesuai dengan keinginan anda.

Sekian tutorial cara membuat widget recent post pada blog, semoga membantu dan untuk kurang lebihnya saya mohon maaf serta tidak lupa semoga bermanfaat.

Read more »

Trik Meningkatkan Trafik Pengunjung Blog

Trik Meningkatkan Trafik Pengunjung Blog. Sebagai seorang blogger pastinya kita ingin blog kita ramai dikunjungi oleh pengunjung. Untuk mendapatkan pengunjung yang banyak bukan merupakan hal yang mudah dan diperlukan kerja keras dan usaha yang tidak sedikit untuk mewujudkannya.

Blog Trafik

Bagi para blogger yang mempunyai tujuan komersial atau internet marketer trafik merupakan suatu hal yang sangat penting karena dengan banyaknya trafik yang datang maka bisa dipastikan blognya akan terkenal sehingga bisa jadi ladang bisnis yang menguntungkan.

Namun seperti yang sudah saya sebutkan sebelumnya, persaingan untuk mendapatkan trafik tidak lah mudah karena persaingan yang sangat ketat antara blog satu dengan blog yang lainnya sehingga, kita harus mempunyai trik dan strategi strategi yang mumpuni untuk meningkatkan trafik untuk blog kita.

baca juga : 3 Faktor Utama Penentu Peringkat Blog Pada Hasil Penelusuran Google

Pada ulasan dibawah ini merupakan kumpulan kumpulan trik yang bisa meningkatkan trafik blog lumayan secara signifikan yang saya ambil sumbernya dari blog blogooblok tentang cara ampuh meningkatkan trafik blog atau website.

Trik triknya ini bisa kita terapkan sehingga bisa menghasilkan trafik untuk blog kita sesuai dengan keinginan dan membuat blog kita ramai pengunjung

• Share ke sosial media

Inilah hal pertama yang harus kita lakukan untuk mendatangkan trafik yang banyak. Setiap artikel atau postingan yang kita pulikasikan pada blog dan selanjutnya kita share ke sosial media tentunya akan menarik orang untuk membaca artikel artikel yang telah kita publikasikan tadi.

Semakin banyaknya sosial media pada sekarang ini tentu merupakan lahan yang bagus untuk mendapatkan trafik blog. Semakin banyak sosial media yang kita ikuti dan kita share artikel dari blog kita maka semakin besar peluang untuk mendapatkan trafik yang banyak.

• Buatlah artikel berkualitas yang ramah dengan search engine atau SEO friendly

Search engine atau mesin pencari seperti google, yandex atau bing merupakan sumber trafik yang paling besar. Alasan mengapa kita dalam membuat artikel diharuskan membuat artikel yang cukup ramah dengan search engine adalah supaya artikel yang kita publikasikan bisa cepat terindex oleh search engine sehingga ketika ada pengunjung yang mencari artikel seperti artikel yang telah kita tulis tadi pada search engine maka artikel kita pun sudah ada pada hasil penelusuran di search engine tersebut.

baca juga : Cara Mendaftarkan Blog ke Google

•  Membayar visitor yang tertarget

Membayar dalam hal ini kita bisa memasang iklan sehingga bisa menarik pengunjung untuk datang mengunjungi blog kita. Banyak website atau aplikasi yang dapat kita gunakan untuk mendapatkan pengunjung dengan cara ini.

Contoh dalam hal ini adalah layanan iklan Google Adwords dan StumbleUpon. Apabila memang kita mempunyai modal yang cukup tidak ada salahnya memakai cara ini.

baca juga : Google Adwords Sarana Promosi Berbasis Search Engine

• Promosi blog secara offline

Beri tahu orang orang terdekat seperti keluarga, teman teman, rekan kerja dan lain sebagainya tentang blog kita. Buatlah mereka jadi penasaran sehingga mereka membuka blog yang kita punya pada saat mereka online.

Cara ini juga dipercaya sebagai cara yang baik untuk membangun brand di masyarakat.

• Menggunakan Tag pada setiap artikel

Tag mempunyai fungsi yang besar pada blog. Tag akan mengumpulkan dan mengelompokan antara tema yang satu dengan tema yang lainnya. Sehingga apabila ada tema yang sedang ramai dibahas maka dapat dengan mudah ditemukan oleh pengunjung blog kita.

Tapi dalam penggunaan tag jangan sampai berlebihan. Karena tag yang terlalu berlebihan atau terlalu banyak serta tagnya tidak umum malah bisa berakibat buruk pada artikel blog.

• Baca dan berkomentar di blog lain atau blogwalking

Dengan membaca suatu artikel dan berkomentar di blog lain sehingga bertujuan untuk berdiskusi yang sehat maka akan membuat pengunjung lain mencari tahu siapa kita dan timbal baliknya mereka akan melakukan kunjungan pada blog kita.

• Membuat link out ke blog lain 

Blogger pada hakekatnya adalah semua hal yang berkaitan dengan interaksi online. Apabila dalam artikel yang kita publikasikan terdapat link yang mengarah ke blog lain maka dengan sendirinya dapat memberi nilai tambah buat kita.

Contohnya mencantumkan link artikel blog lain yang kita jadikan sumber dalam pembuatan artikel yang kita publikasikan.

Jangan takut blog yang kita cantumkan linknya pada artikel kita tadi tidak mengetahui tentang link tersebut karena biasanya mereka melakukan cek link melalui Technorati atau Pingback sehingga tidak menutup kemungkinan blog lain yang kita pasang linknya melakukan hal yang sama.

• Mengirim pemberitahuan lewat email 

Apabila kita mempunyai banyak kontak pada email kita hal ini bisa kita gunakan. Caranya dengan mengabarkan mengenai artikel artikel terbaru pada blog kita. Usahakan emailnya hanya berisi dengan url artikel terbaru dengan ditambah sedikit kata kata.

Tipsnya untuk cara ini jangan sampai terlalu sering menggunakannya karena jika sering mengirim email akibatnya kita bisa dilaporkan spam. Buatlah dengan berjangka misalnya seminggu sekali atau sebulan sekali juga bisa.

• Update blog secara teratur

Blog yang memiliki update artikel artikel secara teratur biasanya akan memiliki pengunjung yang banyak. Karena hal tersebut akan semakin baik penilaiannya pada search engine.

Poin penting dalam mengupdate artikel pada blog secara teratur adalah update blog dengan konten konten atau artikel artikel yang berkualitas. Jadi jangan asal asalan update yang bisa berakibat pengunjung makas untuk datang ke blog kita.

• Sabar dan santai mengelola blog itu butuh waktu

Coba tanyakan pada blogger blogger senior yang sudah sukses yang kita kenal dan mempunyai pengunjung yang banyak pada blognya itu semua membutuhkan waktu dalam prosesnya tidak serta merta didapat dalam waktu yang sangat singkat.

Bagitulah kira-kira trik meningkatkan trafik blog. Mudah mudahan dengan menerapkannya bisa mendapatkan banyak pengunjung pada blog kita seperti apa yang kita harapkan. Untuk kurang lebihnya saya mohon maaf dan semoga bermanfaat.

Read more »

Tutorial Cara Membuat Blog di Blogspot

blogger

Tutorial Cara Membuat Blog di Blogspot. Kegiatan blogging bisa dibilang memang mempunyai kesenangan tersendiri terutama bagi yang mempunyai hobi menulis. Selain itu kita dapat berbagi hal-hal yang kita tulis dalam blog kepada orang orang sehingga bisa bermanfaat bagi yang membacanya dan apabila kita serius dalam menekuni dunia blogging maka kita bisa mendapatkan penghasilan dari blog yang kita kelola.

Untuk membuat blog tidaklah sulit dan banyak platform yang menyediakannya secara gratis seperti Blogspot, Wordpress dan lain sebagainya. Pada kali ini kita akan sama sama belajar tentang cara membuat blog dari platform blogspot karena menurut saya untuk para blogger pemula yang ingin membuat blog dan mengelolanya dengan memakai blog platform blogspot lebih mudah dibanding platform lainnya.

Sedikit mengulas tentang blog, pada mulanya blog ini dipopulerkan oleh perusahaan pyra labs dengan produknya yang diberi nama blogger.com dan pada tahun 2002 blogger.com diakuisisi oleh google dari pyra labs, dari situlah perkembangan blog menjadi sangat pesat karena banyaknya aplikasi aplikasi yang mendukung untuk perkembangan para pengguna atau pengelola blog.

baca juga : cara mendaftarkan blog anda ke google

Kembali ke cara untuk membuat blog, membuat blog di blogspot tidak diperlukan syarat-syarat yang khusus cukup hanya mempunyai email gratis dari google yaitu gmail.
Untuk membuat blog di blogspot anda bisa ikuti langkah-langkahnya seperti dibawah ini yang sudah saya lengkapi dengan gambar biar bisa lebih mudah untuk dipahami.

• pertama-tama untuk membuat blog silahkan log in terlebih dahulu ke akun gmail anda
• setelah itu silahkan kunjungi situs www.blogger.com 
• dari situ anda akan mengkonfirmasi profil anda yang akan anda pakai untuk profil blog anda dan terdapat dua opsi pilihan profil yang bisa dipakai yaitu profil google+ dan profil blogger. saran saya pilihlah profil google+ supaya tidak perlu setting lagi nantinya.

klik untuk memperbesar

• selanjutnya anda diarahkan untuk mengisi nama, gender dan data anda lahir silahkan isi pada kotak yang ada. Data data tersebut digunakan untuk membuat profil google+ anda yang nantinya akan digunakan pada blog dan setelah selesai klik upgrade

klik untuk memperbesar

• setelahnya anda klik klik saja pada continue atau continue anyway sampai habis form untuk google+ dan sampai pada halaman yang bertuliskan konfirmasikan profil anda seperti gambar dibawah dan klik kotak berwarna orange bertuliskan lanjutkan ke blogger

klik untuk memperbesar

• dari situ anda sampai ke halaman untuk membuat blog (seperti gambar dibawah) dan silahkan klik pada kotak yang bertuliskan New Blog (yang saya tandai dengan kotak berwarna merah) untuk melanjutkan

klik pict untuk memperbesar

• setelah anda klik kotak new blog tadi maka akan terbuka halaman yang dapat anda gunakan untuk judul blog, nama domain blog dan memlih template yang ingin anda gunakan untuk blog anda. Lebih jelasnya perhatikan gambar dibawah

klik pict untuk memperbesar

penjelasan nomor pada gambar

1. pada nomor satu ini silahkan tuliskan judul yang anda inginkan untuk blog anda
2. pada kotak nomor dua anda bisa mengisikan alamat domain untuk blog anda dan pastikan alamat domain blog yang anda pilih masih tersedia (tandanya dengan tanda ceklis pada kotak berwarna biru)
3. pada nomor tiga anda bisa memilih template untuk blog anda
4. setelah semuanya sesuai dengan apa yang anda inginkan silahkan klik create blog seperti yang saya tandai pada nomor empat

sebagai tambahan untuk pemilihan template ini nantinya bisa anda rubah sesuai keinginan, untuk sementara pilih dulu yang standar yang telah disediakan disana.

• dan setelah create blog tadi anda klik maka anda akan dibawa ke dashboard blog yang sudah anda buat dan selamat blog anda pun sudah jadi.

Menu Dashboard pada blog

klik pict untuk memperbesar

Sedikit mengulas menu menu yang ada pada dashboard blog anda yang letaknya ada pada sebelah kiri halaman dashboard seperti yang saya tandai kotak merah pada gambar diatas.

• kotak oranye bertuliskan entri baru fungsinya untuk anda membuat artikel atau pos
• pada menu ikhtisar anda bisa melihat statistik penayangan blog anda, sumber lalu lintas teratas dan pembaruan dari komentar, pos dan lain sebagainya
• pada menu pos anda bisa melihat dan mengedit atau menghapus artikel artikel yang anda buat nantinya disitu juga anda bisa melihat jumlah penayangan artikel artikel anda tadi beserta komentarnya
• pada menu laman disini anda bisa melihat laman laman yang anda buat
• pada bagian menu komentar anda bisa memoderasi komentar komentar dari pengunjung blog terhadap artikel artikel yang anda punya di blog
• pada menu google+, disitu anda bisa melakukan pengaturan berbagi oleh google+
• pada bagian menu statistik anda bisa melihat data-data statistik mengenai blog anda yang lebih rinci lagi mengenai jumlah banyaknya penayangan artikel dan laman pada statistik pos, data statistik url perujuk, situs perujuk dan kata kunci dan pada menu ini juga anda bisa melihat pengunjung dari negara mana saja yang telah berkunjung ke blog anda melalui statistik pemirsa
• menu penghasilan anda bisa gunakan untuk mendapatkan penghasilan dari blog yang anda kelola dengan cara mendaftar google adsense
• pada menu kampanye bisa digunakan untuk memasang iklan blog anda di google adwords
• pada menu tata letak, anda bisa mengatur dan menyusun widget-widget yang anda pasang pada blog
• pada bagian menu template, seperti telah saya sebutkan diatas disini anda bisa mengganti dan mengedit template blog anda
• pada menu setelan, anda bisa melakukan pengaturan-pengaturan untuk blog anda

nah begitulah penjelasan singkatnya mengenai menu menu yang ada pada dashboard blog blogspot.

Selanjutnya silahkan anda berkreasi dengan menulis artikel artikel yang menarik sehingga bisa mendatangkan pengunjung yang banyak ke blog anda.

Itulah tutorial cara membuat blog di blogspot yang bisa saya sampaikan, kurang lebihnya saya mohon maaf dan semoga bermanfaat.

Read more »

Tutorial Cara Membuat dan Memasang Breadcrumb SEO Friendly

Tutorial Cara Membuat dan Memasang Breadcrumb SEO Friendly. Sebagai blogger newbie alias blogger pemula, tentu saja saya mencari segala informasi tentang dunia blog, istilah istilah blog, tentang seo dan lain sebagainya.

Sampailah saya ke satu istilah dalam dunia blog yaitu breadcrumbs yang sebenarnya istilah breadcrumbs sudah cukup populer karena mungkin sudah banyak yang share mengenai hal tersebut. Selain cukup populer ternyata breadcrumb mempunyai fungsi yang penting untuk pengunjung blog dan dalam hal SEO fungsinya juga penting.

Sebelum masuk ke tata cara membuat dan memasang breadcrumb, ada baiknya kita bahas dulu pengertian, fungsi dan juga manfaat dari breadcrumb itu sendiri terhadap blog yang kita kelola.

Pengertian breadcrumb (menurut deskripsi saya sendiri) adalah merupakan suatu bentuk navigasi atau petunjuk yang ada pada blog yang menunjukan kepada pengunjung blog posisi dari kategori artikel atau halaman yang sedang dia buka.

Breadcrumb bentuknya berupa deretan link horizontal sedangkan posisi dari breadcrumb pada halaman artikel yang dibuka biasanya terletak di atas judul artikel blog (contohnya gambar diatas) atau ada juga yang dibawah judul artikel letaknya.

Dalam hal fungsinya breadcrumbs mempunyai fungsi sebagai berikut:

• mempermudah para pengunjung blog dalam menjelajah blog yang kita kelola.
• dengan link yang ada pada breadcrumbs, dapat membantu pengunjung blog dalam hal mencari artikel artikel yang berhubungan dengan artikel yang sedang dibuka.
• sebagai petunjuk bagi pengunjung blog tentang posisi artikel yang sedang dibuka.

Nah, dilihat dari fungsinya dengan adanya breadcrumbs pada blog menurut saya sangat penting untuk kemudahan pengunjung blog dalam mendapatkan artikel artikel yang saling berhubungan yang pengunjung blog inginkan.

Sedangkan manfaat dari breadcrumbs adalah selain telah disebutkan dalam fungsi diatas, breadcrumbs juga akan menambahkan kata kunci atau keyword dan judul yang terstruktur pada link blog sehingga berpengaruh dalam hal posisi index pada search engine dan bisa menjadikan blog kita lebih SEO friendly.

Apabila pada template blog yang anda pasang telah terpasang breadcrumb maka tidak perlu repot repot membuatnya lagi tapi apakah breadcrumbs yang terpasang di template blog anda merupakan breadcrumbs yang bisa terindex oleh search engine?

Contohnya bisa dilihat gambar dibawah apakah breadcrumbs pada template anda bisa terindex atau tidak oleh search engine (kotak merah adalah label breadcrumbs).

contoh breadcrumbs yang terindex oleh google

Apabila breadcrumbs pada template anda tidak bisa terindex oleh search engine, anda bisa pasang kode breadcrumbs yang caranya sebagai berikut:

• log in ke akun blog anda
• pada dashboard klik template dan klik juga edit HTML
• cari kode ]]></b:skin> atau bisa juga kode </style>
• silahkan copy kode dibawah ini dan paste kan diatas kode ]]></b:skin> atau kode </style> tadi

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

• selanjutnya cari kode <b:includable id='main' var='top'> dan ganti kode tersebut dengan kode dibawah 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'/>

•  simpan (save) template anda.

Untuk melihat hasilnya, kita bisa cek hasilnya di Google Reachsnipet Tools dengan cara klik https://developers.google.com/structured-data/testing-tool/ setelah itu anda klik ambil URL dan masukan url artikel blog anda. Untuk lebih jelasnya silahkan lihat gambar dibawah

langkah pertama

langkah kedua

dan apabila hasilnya seperti gambar dibawah maka anda berhasil memasang breadcrumbsnya

Dan satu hal yang penting dalam membuat breadscrumbs adalah biasakanlah selalu membuat suatu kategori atau label dalam setiap artikel yang anda buat yang letaknya ada pada setelan entri pada sebelah kanan halaman ketika anda membuat suatu artikel apabila tidak maka adanya breadcrumb pun akan menjadi percuma saja.

Selesai sudah mengenai tutorial cara membuat dan memasang breadcrumb yang SEO friendly, kurang lebihnya saya mohon maaf dan semoga bermanfaat. 

Read more »

Tutorial Cara Memasang Anti Copy Paste di Blog

Tutorial Cara Memasang Anti Copy Paste di Blog. Artikel artikel yang telah kita buat dan dipublikasikan di blog sangat rentan sekali untuk dicopy atau istilah jaman sekarangnya di copas orang lain dan ketika artikel atau konten yang sudah anda buat dengan susah payah dan dipublikasikan di blog di curi atau di copy paste orang lain pasti kesal rasanya bukan hehe...

Maka dari itu, sebaiknya kita harus mengantisipasinya, untuk meminimalisir hal-hal yang berhubungan dengan pencurian isi artikel yang telah kita buat di blog dengan cara memasang anti copy paste agar orang lain tidak seenaknya mencomot artikel artikel yang telah kita buat.

Baiklah, terdapat beberapa cara supaya artikel artikel yang kita buat di blog tidak bisa di copas dengan seenaknya oleh orang lain, berikut cara-caranya:

• Cara pertama

Cara pertama ini bisa digunakan apabila anda hanya ingin pada bagian-bagian tertentu saja yang hanya bisa di copy paste, contohnya pada blog ini hanya pada bagian yang ada pada quote saja yang bisa dicopy sedangkan bagian lainnya tidak bisa dicopy.

Cara pemasangannya sebagai berikut:

• Seperti biasa anda log in ke akun blogger anda
• Selanjutnya klik template dan edit HTML 
• Cari kode ]]></b:skin> atau kode </style>
• Setelah ketemu letakan kode dibawah ini diatas kode yang tadi 

.post  { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -ms-user-select:none; -moz-user-select:none; }.post blockquote,.post pre,.post code { -webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -ms-user-select:text; -moz-user-select:text; }

• Silahkan simpan (save) template anda dan coba tes hasilnya

Sebagai tambahan kode anti copy paste ini hanya berupa css sehingga tidak berpengaruh pada loading blog yang memasangnya.

• Cara kedua

Pada cara yang kedua ini akan membuat semua isi tulisan artikel artikel kita di blog tidak bisa di copy paste. Langsung saja untuk cara yang kedua cara pemasangannya sebagai berikut:

• Pada dashboard blog anda klik template dan klik edit HTML
• Cari kode </head> dan simpan kode dibawah ini letaknya dibawah kode </head> tadi

<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script >

• klik save template dan silahkan tes hasilnya.

Sebaiknya untuk blog yang artikel artikelnya berisi tentang tutorial tutorial blog yang didalamnya berisi membagikan kode kode atau script, saya sarankan tidak menggunakan anti copy paste cara yang kedua ini karena bisa membuat para pengunjung blog tidak bisa mengcopy kode script yang kita bagikan di blog.

• Cara ketiga

Cara yang ketiga ini bisa berfungsi tidak hanya sebagai anti copy paste tetapi juga bisa berfungsi sebagai anti klik kanan, dobel fungsi kira kira begitu hehe...

Untuk cara ketiga ini cara pemasangannya sebagai berikut:

• Seperti biasa anda klik menu template dan klik juga edit HTML
• cari kode <body>
• Selanjutnya apabila sudah ketemu, ganti kode <body> atau bisa juga menambahkan kode yang saya kasih warna merah dibawah ini pada kode tadi (seperti contoh dibawah)

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

• Save template anda dan tes hasilnya

Sebagai catatan, cara yang ketiga ini mempunyai beberapa efek yang menyebabkan beberapa fungsi pada blog akan menjadi error apabila anda memasangnya seperti contohnya akan mengakibatkan widget search pada blog bisa error.

Selain dengan memasang script anti copas seperti caranya diatas tidak ada salahnya lagi anda bisa mendaftar di DMCA protection. DMCA protection merupakan sebuah situs yang bergerak dalam hal perlindungan konten-konten dari suatu blog atau website sehingga bisa lebih menguatkan dalam melindungi artikel artikel yang telah anda buat dan telah anda pubikasikan melalui blog atau website yang anda kelola dari para pencuri atau copaser nekad yang hanya bermodal copy paste.

Itulah tutorial cara untuk memasang anti copy paste yang bisa saya sampaikan semoga membantu meminimalisir artikel artikel di blog kita dicuri orang lain dan semoga bermanfaat...

Read more »

Cara Membuat dan Memasang Generator Kode Warna di Blog

Cara Membuat Kode Warna di Blog. Bagi anda yang suka mengutak atik, mengedit atau mendesain dan memodifikasi template web atau template blog pastinya tidak asing dengan yang namanya kode warna.

Sedangkan untuk penerapannya masing-masing warna mempunyai kode-kode tersendiri dan kode-kode inilah yang diletakan pada template blog maupun situs. Selain itu fungsi dari kode warna ini adalah bisa mempercantik tampilan web atau tampilan blog.

Kode warna HTML biasanya digunakan untuk warna line atau garis, warna huruf, warna border, warna background, warna kotak dan warna yang lainnya. Untuk memodifikasi tampilan blog disarankan untuk tidak memakai warna warna yang terang karena bisa menyilaukan mata pengunjung yang datang ke blog kita.

Warna warna yang terang bisa digunakan untuk elemen elemen tertentu misalnya untuk warna kotak button atau bisa juga diterapkan pada menu. Pilihlah warna warna yang user friendly contohnya warna biru, hijau dan warna gelap yang lainnya yang tidak menyiluakan mata.

Nah, untuk lebih jelasnya mengenai macam-macam warna, anda bisa memasang generatornya pada blog dengan 2 cara sebagai berikut:

• cara pertama

Pada bagian ketika menulis artikel atau post ganti ke mode HTML bukan pada mode Compose dan masukan kode dibawah

<center>
<div style="text-align: center;">
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess" /> <param value="http://www.2createawebsite.com/build/col.swf" name="movie" /> <param value="high" name="quality" /> <param value="#ffffff" name="bgcolor" /> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"></embed> </object></div>
</center>

maka seperti ini hasilnya

• cara kedua

Apabila anda masih bingung dengan cara generator kode warna yang pertama tadi diatas, anda bisa mencoba memasang generator warna yang ke dua dan cara pemasangannya di blog pun sama seperti cara pemasangan yang pertama yaitu dengan cara pada penulisan artikel atau post rubah dulu dari mode Compose ke mode HTML dan masukan kode dibawah

<center>
<div style="text-align: center;">
<object getflashplayer="" go="" http:="" type="application/x-shockwave-flash pluginspage=" www.macromedia.com="">
<a href="http://www.blogger.com/null" name="colorgenerator"></a>                      
<param name="movie" value="http://www.2createawebsite.com/build/color.swf">
<param name="quality"value="High"><embed src="http://www.2createawebsite.com/build/color.swf"  name="obj1" quality="High" height="485" width="485">
</embed></object></div>
</center>

dan hasil generator warnanya adalah seperti ini

Tips cara untuk mengetahui warna yang ada pada blog

Jika anda ingin mengetahui apa kode kode warna yang ada pada template blog anda atau ingin mengikuti warna yang ada pada blog orang lain. Bisa dilakukan dengan cara :

1. silahkan arahkan cursor mouse anda ke elemen warna yang akan dilihat kodenya
2. klik kanan mouse anda dan pilih inspect element
3. dan akan terlihat kode warnanya yang diawali oleh tanda "#"

silahkan anda copy atau ganti sesuai dengan yang anda inginkan

Nah cukup mudah kan membuat dan memasang generator warna pada blog, selamat mencoba dan berkreasi dengan warna warna untuk mempercantik tampilan blog anda. Untuk kurang lebihnya saya mohon maaf dan semoga bermanfaat.

Read more »