Mengganti Dan Menambah Style Font Blog

Mengganti Dan Menambah Style Font Blog -- Banyak blogger yang tidak merasa nyaman dengan font yang formal dan ingin menggantinya dengan font yang lebih menarik. Sebenarnya ini sangat mudah jika template blog anda dilengkapi fungsi variabel untuk mengganti font. Lalu bagaimana jika template blog anda tidak dilengkapi dengan variabel itu?

Kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut:

MEMILIH JENIS FONT

• Buka halaman http://www.google.com/webfonts/#
• Sebaiknya anda set dulu ukuran fontnya untuk melihat tampilan font tersebut dalam ukuran yang anda inginkan. Pilih ukuran huruf dalam drop down size.

• Jika jumlah font terlalu banyak, anda bisa memperkecil opsi dengan melakukan filter pada jenis font. Lihat pada sidebar kiri ada serangkaian alat filter. Pilih type font, ketebalan, kemiringan, dan lebar huruf.
• Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik ADD TO COLLECTION pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperlukan

• Jika anda sudah selesai memilih huruf silahkan klik USE

• Anda akan dialihkan ke halaman baru. Pada halaman baru ada 3 hal yang harus anda lakukan

• Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya....

• Kedua, pilih language style yang diinginkan. Saran saya tidak usah mengubah bagian yang ini

• Ketiga, copy kode yang diberikan untuk dipasang di blog

 

MENAMBAHKAN FONT PADA BLOG

• Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
• Pilih menu TEMPLATE lalu EDIT HTML
• Cari kode  <![CDATA[/* dan paste kode yang tadi anda copy
• Jangan lupa untuk menambahkan kode / sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' />

• Simpan Perubahan

MENGGUNAKAN FONT
Setelah melakukan langkah di atas anda sudah menambahkan jenis font pada blog anda. Ada dua cara untuk mengganti font pada blog anda.
1. Mengganti Semua Font
Misalnya, anda ingin mengganti semua font Arial dengan font baru bernama BenchNine

• Masuk ke menu TEMPLATE >> EDIT HTML
• Centang Expand Template Widget
• Copy semua kode yang muncul
• Buka notepad dan paste kode yang dicopy tadi
• Tekan Ctrl+H untuk membuka Tool Replace
• Isi kolom Find What dengan Arial
• Isi kolom Replace With dengan BenchNine
• Klik tombol REPLACE ALL
• Copy kode yang sudah berubah tadi.
• Hapus semua kode pada blogger Edit HTML tadi dan gantikan dengan kode dari notepad
• Simpan Perubahan

2. Mengganti Font Elemen Tertentu Saja
Di sini anda bisa menggunakan Edit HTML, atau Fitur ADD CSS pada Perancang Template
Kali ini saya akan menggunakan Add CSS saja. Jadi silahkan ikuti contoh berikut:

• Setelah jendela Add CSS terbuka, silahkan pilih element yang ingin anda ganti.
• Kali ini saya akan mengganti element h2 normal, h2 link, dan h2 link:hover pada postingan blog saya. Jadi inilah kode yang akan saya ketikkan pada kolom Add CSS...

.post h2 {

font-family: BenchNine;

}

.post h2 a, .post h2 a:visited, .post h2 strong {

font-family: BenchNine;

}

.post h2 strong, .post h2 a:hover {

font-family: BenchNine;

}

• Simpan Template 

font-family: NamaFont; adalah kode yang perlu anda tambahkan pada elemen style apa saja yang ingin anda ganti font-nya. Bagian terpentingnya adalah mengetahui nama elemen yang ingin anda ganti. Kalau anda sama sekali belum tahu nama elementnya, maka anda harus masuk ke Edit HTML untuk menemukan nama elemen style yang mengendalikan suatu komponen pada template anda.

Belajar HTML dasar Div dan Stylenya

Belajar HTML dasar Div -- Div bisa dikatakan sebagai kontainer untuk kode HTML apa saja yang ingin anda tampilkan di dalamnya. HTML Div bisa anda gunakan untuk melakukan sedikit modifikasi pada tampilan blog anda. Pengetahuan ini benar-benar standar saja bagi blogger, tapi mungkin beberapa blogger pemula belum mengetahui HTML yang sangat dasar ini. Jadi tidak apa-apa kita bahas sedikit.

Bentuk dasar HTML div adalah seperti di bawah ini

<div>

ISI DARI DIV HTML TAG

</div>

Jika anda membentuknya seperti ini, maka isinya akan standar saja, ukurannya akan mengikuti isi yang ada di dalamnya. Lihat contoh yang ada di bawah ini:

ISI DARI DIV HTML TAG

Benar-benar standar saja tampilannya. Jadi ada baiknya anda juga mengenal perintah style untuk memberi variasi pada tag ini. Jadi mari kita masukkan satu persatu element style untuk melihat perubahan-perubahan yang akan terjadi:

Style background

Style background ini anda gunakan untuk memberikan warna latar apa saja yang anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat mudah cukup tambahkan kode berikut ke dalam kode awal tadi. Lihat contoh berikut ini:

<div style="background: #9fc5e8">

ISI DARI DIV HTML TAG

</div>

Kode #9fc5e8 yang anda lihat di atas adalah kode warna yang saya inginkan, yaitu biru muda. Anda bisa mengganti kode #9fc5e8 dengan kode warna apa saja yang anda mau. Jika menginginkan warna lain coba lihat daftar warna HTML hexadecimal di http://www.computerhope.com/htmcolor.htm.

Jadi setelah diberi kode warna, maka tampilannya seperti di bawah ini:

ISI DARI DIV HTML TAG

Style Font Color

Mungkin anda kurang nyaman dengan tampilan ini dan ingin memberi warna pada tulisan di dalamnya. Untuk itu anda bisa memakai perintah color:kode warna di dalam style. Tapi sebelumnya tutup dulu kode background tadi dengan titik koma (;). Lihat contoh di bawah:

<div style="background: #9fc5e8; color:#0000cc">

ISI DARI DIV HTML TAG

</div>

Kode warna #0000CC bisa anda ganti menurut kode yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada kode HTML div kita ini.

ISI DARI DIV HTML TAG

Style Padding

Mungkin anda menginginkan agar tulisan tidak terlalu menempel pada dinding kontainernya. Anda bisa menggunakan kode style padding untuk itu: Kodenya adalah padding: atas kanan bawah kiri. Sebagai contoh lihat pengaturan tambahan di bawah, tapi sebelumnya kita tutup dulu kode color tadi dengan tanda titik koma (;).

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px ">

ISI DARI DIV HTML TAG

</div>

Dari pengaturan di atas anda ingin menaruh "ganjalan" setebal 10px di atas, 20px di kanan, 30px di bawah, dan 25px di kiri. Tampilannya akan berbentuk seperti ini:

ISI DARI DIV HTML TAG

Style Text Align

Mungkin sekarang anda ingin mengatur agar tulisan di dalam div rata kiri, rata kanan, sama rata, atau di tengah? Untuk itu anda bisa mengguakan kode text-align:value. Nilai value bisa anda ganti dengan left, right, justify, atau center. Dalam kasus ini saya akan menggunakan nilai center saja... Tapi ingat, ditutup lagi kode sebelumnya dengan tanda penutup ;

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center ">

ISI DARI DIV HTML TAG

</div>

Sekarang mari kita lihat hasilnya...

ISI DARI DIV HTML TAG

Style Font Family

Kalau anda ingin mengubah bentuk font, maka kode font-family: Nama Font harus anda tambahkan ke dalam kode ini. Adapun nama font yang bisa anda gunakan hanya yang disediakan oleh blogger seperti Arial, Courier New, Impact; Times New Roman, Verdana, Georgia, dan lain-lain. Ok, ekali lagi anda harus menutup style sebelumnya dengan penutup ; sebelum menambahkan style ini.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact">

ISI DARI DIV HTML TAG

</div>

Hasilnya bisa anda lihat di bawah ini.

ISI DARI DIV HTML TAG

Style Font Size

Kalau anda merasa perlu memperbesar hurufnya, maka tinggal tambahkan saja kode font-size: ukuran yang anda inginkan. Ukuran bisa dalam px atau pt. Tapi kali ini saya akan menggunakan satuan pixel (px). Lihat contoh di bawah.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px">

ISI DARI DIV HTML TAG

</div>

Hasilnya akan terlihat seperti di bawah ini.

ISI DARI DIV HTML TAG

Style Width

Mungkin anda tidak suka jika ukuran div ini terlalu penuh. Anda bisa mengatur ukurannya dengan menambahkan atribut width: ukuran. Satuannya bisa dalam pixel(px) ataupun persen(%). Kali ini saya akan memakai pixel saja.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

Hasilnya seperti ini:

ISI DARI DIV HTML TAG

Ada juga HTML style height, tapi sama saja pemakaiannya dengan width, jadi terserah jika anda mau memasukkan atau tidak. Jika anda memasukkan, maka tingginya akan menjadi terbatas. Saya tidak akan membahas style ini di sini.

Center Div
Jika anda ingin div anda berada di tengah-tengah kolom, maka anda bisa mengapitnya dalam kode <center></center>. Seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

</center>

Hasilnya akan terlihat seperti berikut:

ISI DARI DIV HTML TAG

Style Border

Apakah anda ingin memberi garis pembatas pada kode ini? Jika ya maka anda perlu menambahkan kode border: [tebal] [gaya] [warna]. Tebal bisa anda isi dengan angka berapa saja dalam satuan px. Gaya anda bisa isi dengan solid, outset, dotted, dashed, double, dan lain-lain. Sedangkan warna bisa anda isi dengan kode warna dari situs di atas. Coba jika kita tambahkan kode seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6">

ISI DARI DIV HTML TAG

</div>

</center>

Maka hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Style Border Radius

Mungkin rekan blogger suka model kapsul dan tidak ingin kotaknya bersudut tajam seperti di atas. Anda bisa menambahkan kode border-radius: value, di mana nilai value ini bisa diganti angka dalam satuan pixel. Angka ini menjadi perwakilan jari-jari radius yang anda inginkan. Supaya tidak bingung lihat contoh di bawah saja.

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px">

ISI DARI DIV HTML TAG

</div>

</center>

Hasilnya akan terlihat seperti di bawah ini:

ISI DARI DIV HTML TAG

Div dengan Bayangan
Kalau anda ingin menambahkan bayangan, maka kode yang perlu anda tambahkan adalah:
-moz-box-shadow: 2px 2px 5px 4px #999; -webkit-box-shadow: 2px 2px 5px 4px #999; box-shadow: 2px 2px 5px 4px #999;
Silahkan mengubah nilai kode-kode di atas sesuka anda untuk bereksperimen. Lalu masukkan ke dalam kode di atas. Hasilnya seperti contoh di bawah ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px; -moz-box-shadow: 0px 0px 5px 4px #6fa8dc; -webkit-box-shadow: 0px 0px 5px 4px #6fa8dc; box-shadow: 0px 0px 5px 4px #6fa8dc">

ISI DARI DIV HTML TAG

</div>
</center>

Hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Ok, itu saja dulu. Silahkan berekperimen sendiri. Jika ada satu atau dua atribut di atas yang kalian hilangkan, maka efeknya juga akan hilang. Sebagai catatan ini bisa anda lakukan saat membuat artikel atau hendak memasukkan widget HTML/JAVASCRIPT. Mudah-mudahan ini bisa membantu anda.

Cara memasang CSS pada Blogspot

Cara memasang CSS pada Blogspot -- Berhubung materi SEO Blogspot sudah cukup memadai, sekarang saya akan membahas lebih kepada variasi dan modifikasi blog. Untuk itu anda perlu mengetahui cara memasang CSS pada blog anda. Sebenarnya caranya sekarang sudah sangat mudah dengan fitur yang disediakan oleh blogger.com.

Kenapa anda perlu mengetahui cara memasang CSS ini? Karena CSS ini sebenarnya sangat dibutuhkan untuk membuat variasi apapun di dalam blog anda. Semua komponen di dalam blog anda bisa terlihat lebih "moderen" jika anda menguasai CSS ini.

Jadi langsung saja, untuk memasang CSS ikuti prosedur berikut ini:

• Masuk ke akun blogger anda
• Buka Menu TEMPLATE
• Cari tombol CUSTOMIZE atau SESUAIKAN
• Akan terbukan jendela TEMPLATE EDITOR atau PERANCANG TEMPLATE
• Pilih menu TINGKAT LANJUT
• Akan muncul submenu baru, silahkan scroll ke bawah sampai anda menemukan ADD CSS. Klik pada sub menu tersebut
• Akan terbuka jendela editor CSS. Silahkan copy paste CSS anda ke dalam jendela editor tersebut dan klik TERAPKAN KE BLOG
• Jika anda ingin mengcopy lebih dari satu CSS, maka langsung saja paste berderet terus ke bawah, setelah itu klik TERAPKAN KE BLOG
• CSS sudah terpasang, anda tinggal menerapkan CSS tersebut dengan memakai attribute class="name"

Jendela editor CSS

Sangat mudah sekali untuk memasang CSS. Tunggu artikel CSS untuk membuat template blog anda lebih sesuai dengan selera anda.

Kontes SEO, Nasib Newbie Vs Master!

Kontes SEO, Nasib Newbie Vs Master! Belakangan ini kita sedang dibombardir oleh fenomena kontes SEO. Kontes ini diadakan oleh website-website yang ingin mengejar popularitas dunia maya dari aktifitas review para blogger pesertanya. Adapun peserta kontes SEO itu sudah jelas sangat beragam. Mulai dari master SEO, sampai pemula mencoba peruntungannya.

Lalu bagaimanakah performa pemula di kontes SEO? Saya akan mereviewnya sedikit....

Secara garis besar dari yang saya amati selama ini, para pemula hanya menjadi penggembira di dalam kontes SEO. Tentu saja semakin banyak penggembira, maka semakin senang pula penyelenggara kontes SEO. Tapi review saya kali ini bukanlah untuk menyenangkan para penyelenggara kontes SEO. Saya lebih suka berpihak kepada para blogger....termasuk yang pemula.

Sebenarnya sangat kesal juga melihat banyak blogger pemula yang menghabiskan waktunya di dalam kontes SEO. Bisa anda bayangkan menghabiskan waktu hingga 3 bulan untuk suatu hal yang masih di luar kemampuan anda. Ada baiknya blogger pemula ini mengembangkan kemampuan SEO-nya secara bertahap dulu sebelum mengikuti kontes SEO.

Jangan sampai anda seperti petinju yang baru mencicipi sasana kemarin sore, sudah mau menantang Manny Pacquiao, atau bahkan Klitschko. Masih bagus kalau anda cuma kalah, kalau sampai babak belur dan sekarat di ICU apa untungnya buat anda? 

Mungkin anda berkata "Babak belur di ICU? Berlebihan sekali..." Tentu saja anda tidak akan babak belur di ICU saat blogging. Babak belur ini adalah cara saya menggambarkan bahwa anda sudah merugi mengikuti kontes SEO. Mungkin anda bingung lagi dan berkata "Merugi bagaimana maksudnya?"

Begini, coba bayangkan jika anda mengikuti dua kontes SEO saja. Itu berarti anda sudah membuang waktu anda yang berharga untuk mengoptimisasi 2 halaman saja dalam 6 bulan. Itupun kalah telak dan halaman itu menjadi sampah dunia maya. Bagaimana seandainya anda menghabiskan waktu 6 bulan itu jadi blogger biasa saja?

Anda bisa membuat satu blog yang berisikan ratusan artikel dengan banyak backlink untuk persaingan kata kunci yang tidak sekejam kontes SEO. Tentu dengan cara begini anda tidak akan memenangkan hadiah apapun, tapi kalau anda meneruskan ini dengan disiplin selama 6 bulan lagi.... traffic blog anda bisa menembus angka ribuan, dan blog anda akan mendapatkan penawaran untuk pemasangan iklan.... 

Kalau sudah begitu, blog anda mulai menghasilkan ratusan ribu perbulan, dan bisa menjadi jutaan rupiah jika artikel dan backlinknya terus bertambah. Diharapkan setelah dua tahun, blog anda sudah menghasilkan uang, dan sudah siap untuk diadu di kontes SEO. 

Jadi kalau anda merasa benar-benar seorang pemula, mungkin saat ini kendalikan diri anda dan tidak gelap mata membaca besarnya hadiah kontes SEO. Anggap saja blog anda ini sebagai banteng aduan. Jangan dibawa ke lapangan adu saat masih berusia 3 bulan. Tunggu saat umurnya sudah dua tahun. Saat itu "otot-ototnya" benar-benar siap membantu anda untuk mengejar hadiah.

Pernah saya berkata seperti ini ke seorang blogger, dan jawabannya.... "Lantas bagaimana setelah dua tahun blog saya masih sepi dan tidak menghasilkan....?!" Mudah saja.... Kalau anda diberi waktu dua tahun dan tidak bisa membuat blog anda ramai, lantas apa yang membuat anda berpikir bisa memenangkan kontes SEO?

Kebanyakan blogger pemula menghabiskan waktunya untuk onpage. Segala cara dipakai untuk menjadi SEO friendly, bahkan kepadatan kata kunci dihitung dan artikel diedit terus. Padahal pengeditan yang terlalu sering justru merusak poin laman anda. 

Blogger yang katanya Master tidak perlu melakukan hal seperti ini.... templatenya sudah "paten" sejak semula. Selain itu tidak perlu mengedit kepadatan kata kunci. Bahkan menggunakan artikel hasil translate yang masih berantakan sekalipun, blog seorang master masih akan memperlihatkan "taringnya". Teknik mencari backlink "berkualitas" pun sudah matang. Segala trik yang tidak akan dibaginya siap diluncurkan saat kontes-kontes SEO.

Jadi jika anda benar-benar seorang pemula, saran saya:

• Jangan ikut kontes seo dan membuang waktu anda!
• Disiplin besarkan blog anda terlebih dahulu!
• Saat Anda dan Blog anda sudah mencapai kelas "menengah" (alexa rank <400.000), coba saja dijual untuk pemasangan iklan atau ikut kontes SEO yang juga kelas "menengah" (hadiah utamanya maksimal Rp.2.000.000)
• Saat blog anda sudah kuat (alexa rank <200.000), dan anda yakin kemampuan SEO dan stok backlink anda sudah mumpuni. Go Ahead! Silahkan masuk kontes SEO kelas berat. Setidaknya peluang anda kali ini sudah cukup untuk diperjuangkan.

Ini juga sekedar saran, karena saya kasihan melihat para blogger pemula membuang-buang waktu untuk sesuatu yang nyaris 100% peluang gagalnya. Padahal waktunya bisa dipakai untuk membangun sesuatu yang bisa lebih produktif....

Membuat Navigasi Halaman Berupa Angka

Membuat Navigasi Halaman Berupa Angka - Untuk blogger, biasanya link navigasi halaman ini berupa link POSTING LEBIH BARU atau POSTING LAMA. Yang menjadi masalah dari sistem navigasi seperti ini, pengunjung blog hanya bisa berpindah halaman demi halaman. Ini bisa diatasi dengan membuat navigasi angka yang bisa menampilkan beberapa halaman sekaligus.

Ini adalah salah satu widget yang mulai banyak digunakan. Jika anda tertarik untuk memasang navigasi angka seperti ini, maka ikuti prosedur sederhana berikut ini. Tapi untuk keamanan blog anda sebaiknya backup dulu template anda.

Berhubung trik seperti ini kadang berhasil pada suatu template namun bermasalah pada template lain saya mencoba menghidangkan dua metode. Yang pertama dengan memasang internal script pada template anda. Yang kedua menggunakan external script.

METODE 1: INTERNAL SCRIPT

• Masuk ke akun blogger saudara

• Masuk ke menu TEMPLATE, lalu pilih EDIT HTML. CENTANG EXPAND TEMPLATE WIDGET
• Cari kode  ]]></b:skin>
• Taruh kode berikut tepat di atas ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

• Sekarang cari kode di bawah ini

<b:section class='main' id='main' showaddelement='yes'>

• Jika sudah ketemu, maka carilah terus ke bawah sampai menemukan kode penutupnya, seperti di bawah ini.

</b:section>

• Hati-hati dalam mencari karena antara tag pembuka <b:section... dan tag penutupnya </b:section> terdapat kode yang sangat panjang.

• Kalau sudah ketemu tag penutupnya, maka tepat sesudah kode tersebut, masukkan kode di bawah ini.

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

Perhatikan kode di bawah ini:
var pageCount = 5;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';

Keterangan:

• var pageCount itu adalah jumlah posting per halaman
• var displayPageNum itu jumlah link halaman yang ditampilkan di bawah postingan

JIKA SUDAH SELESAI SIMPAN PERUBAHAN. JIKA ANDA MELAKUKANNYA DENGAN BENAR, MAKA TAMPILANNYA KURANG LEBIH SEPERTI DI BAWAH INI...

 METODE 2 EXTERNAL SCRIPT

• Upload kembali template yang sudah anda simpan terlebih dahulu di awal....
• Cari kode </head>
• Taruh kode berikut tepat di atas </head>

<!--pengaturan tampilan-->
<style type='text/css'>
.showpageArea {
padding: 0 2px;
margin-top:50px;
margin-bottom:5px;
}
.showpageArea a {
color: #000000;
font-weight:normal;
background:#fff;
padding: 3px 6px !important;
font-size:11px;
margin:0px 2px;
text-decoration:
none;-moz-border-radius:5px;
}

.showpageNum a {
font-weight:normal;
font-size:11px;
padding: 3px 6px !important;
margin:0px 2px;
text-decoration: none;
-moz-border-radius:5px;
}
.showpagePoint {
font-size:11px;
-moz-border-radius:5px;
padding: 2px 5px 2px 5px;
margin: 2px;
font-weight: bold;
}
.showpage {
font-size:11px;
-moz-border-radius:5px;
}
.showpage a:hover {
font-size:11px;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
font-weight:normal;
}
.showpage a:hover {
color: #FFFFFF;
background-color: #3d85c6;
}
.showpagePoint {
color: #FFFFFF;
background: #3d85c6;
border: 1px solid #3d85c6;
}
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #3d85c6;
border: 1px solid #3d85c6;
}
.showpageNum a:hover {
color: #FFFFFF !important;
background: #3d85c6 !important;
border: 1px solid #3d85c6;
}
.showpageArea a {
border: 1px solid #3d85c6;
}
.showpageArea a:hover {
border: 1px solid #3d85c6;
color: #FFFFFF !important;
background: #3d85c6 !important;
}
</style>
<!--akhir pengaturan tampilan-->

• Kode #3d85c6 adalah untuk biru muda. Silahkan diganti sesuka anda
• Cari kode </body> dan taruh kode di bawah tepat di atasnya

<!--navigasi halaman mulai dari sini-->
<script type='text/javascript'>
var pageCount=2;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://rickynavigation.googlecode.com/files/rickynavigation.js' type='text/javascript'/>
<script src='http://rickynavigation.googlecode.com/files/rickynavigation2.js' type='text/javascript'/>
<!--akhir dari navigasi halaman-->

• var pageCount=2; adalah jumlah posting per halaman
• var displayPageNum=5; adalah jumlah tombol pada sisi kiri sebelum menambah tombol baru
• Simpan Perubahan Template anda....
• Masuk ke menu SETELAN dan pilih POS DAN KOMENTAR
• Atur agar jumlah postingan pada halaman utama sama dengan  nilai var pageCount
• Simpan Setelan (lihat gambar dibawah)

Lihat demonya klik di sini

Pilih Blogspot Atau Wordpress?

Mana Yang Lebih Baik Blogspot Atau Wordpress? -- Apakah anda sedang kebingungan mau memilih platform blog yang mana. Sebenarnya penyedia jasa blog sangat banyak, tapi kali ini saya hanya akan membahas dua platform terbesar yaitu blogspot dan wordpress.

Perhatikan poin perbandingan antara blogger dan wordpress yang ada di bawah ini....

Pengeditan Template

Menurut saya untuk masalah yang satu ini blogger lebih unggul karena blogger memberi banyak keleluasaan untuk mengedit template maupun layout. Berbeda dengan wordpress, waktu pertama mencoba saya tidak bisa menemukan cara mengedit style sheet dari template. Ternyata harus pakai hosting dan nama domain untuk itu. Belakangan sudah terbuka cara yang gratis, yaitu memanfaatkan nama domain gratis dan layanan hosting gratis. Tapi apapun itu bagi penggemar gratisan ...ini merepotkan.
Saya memilih Blogspot

Template Default

Waktu dulu saya berhenti dari dunia blogging, stok template asli blogger masih sangat terbatas. Waktu itu wordpress terlihat cukup memimpin dalam hal ini. Tapi saat ini dengan fitur perancang template yang sangat menyenangkan, blogspot dari blogger.com ini semakin menyenangkan buat saya....
Pemenangnya untuk poin ini masih Blogspot

Tutorial Blog

Sampai saat ini masih lebih banyak tutorial untuk blogspot dibandingkan untuk wordpress. Jadi bagi pemula akan lebih mudah mempelajari blogger daripada wordpress. Tapi beberapa pengguna wordpress yang sudah terbiasa mengatakan bahwa wordpress bisa sangat mudah. Tapi tetap saja untuk poin ini blogger masih lebih banyak tutorialnya. Jadi dalam hal tutorial blogging yang tersedia ....
masih unggul Blogspot

Banyaknya Plugin

Untuk urusan yang satu ini saya melihat wordpress masih unggul dari blogger. Bahkan plugin SEO yang ada di wordpress membuat SEO bisa sangat praktis. Berbeda dengan blogger yang settingan SEO kebanyakan harus bermain pada EDIT HTML.... bisa sangat membuat pusing para pemula
Kali ini saya memilih Wordpress

Kode Yang Digunakan

Blogspot dibangun dengan kode HTML, XML, dan CSS. Ini adalah bahasa coding yang termasuk sangat mudah. Berbeda dengan wordpress yang juga menggunakan PHP. Walaupun saya tidak ada masalah dengan PHP tapi saya yakin, jauh lebih sedikit orang yang menguasai PHP daripada HTML. Namun di sisi lain PHP juga memungkinkan kreasi yang lebih luas. 

Jadi jika anda menyukai kemudahan, maka Blogger adalah pemenang....tapi bagi yang menyukai kreasi fungsi yang jauh lebih variatif, maka wordpress menjadi pilihan yang tepat. Hanya saja, karena kebanyakan orang lebih menguasai bahasa sederhana seperti HTML, maka untuk poin ini....
Kembali memimpin, Blogspot

Variasi Template Gratis

Saat ini template gratis masih lebih banyak untuk blogspot, karena memang membuat template blogspot itu sendiri sangat mudah. Bahkan banyak template wordpress yang diadopsi ke dalam platform blogspot. Hanya saja perlu menjadi catatan di sini, hanya karena template gratis blogspot sangat banyak ... bukan berarti kita bisa ganti-ganti template sesering mungkin.

Jadi kali ini, semakin jauh di depan ... Blogspot

Tampilan Dashboard

Untuk orang yang baru memulai lagi untuk blogging 6 bulan lalu. Saya berhadapan dengan dashboard baru dari blogspot dan juga wordpress. Ternyata saya memang lebih cepat terbiasa dengan dashboard blogger dan sistem navigasinya. Berarti untuk masalah dashboard ini pemenangnya adalah....

Mulai bosan mengatakan ini, tapi kali ini masih... Blogspot


Menggganti Template

Kalau membandingkan dua provider blog ini untuk masalah mengganti template, jelas sekali saya masih mengunggulkan blogspot. Wordpress harus punya hosting dan nama domain dulu kalau mau mengganti template. Ini memang bisa diakali dengan menggunakan host gratis dan nama domain gratis. Tapi tetap saja memesan hosting gratis hanya untuk ganti template rasanya merepotkan. Belum lagi domain gratisan sama sekali tidak SEO friendly, khususnya co.cc.

Jadi kali ini ... masih Blogspot


Variasi Widget

Saat ini semakin banyak pengembang widget untuk para blogger, tapi perbandingan antara widget yang dibuat menurut kompabilitas blogspot sendiri jauh meninggalkan jumlah widget buat wordpress. Tapi kalau bisa jujur saya juga tidak terlalu banyak memakai widget yang macam-macam. Entah kenapa widget bisa sebanyak itu padahal yang berperan penting hanya sedikit. Jadi siapa pemenangnya? Berhubung jika bicara masalah variasi, maka kita bicara angka, dengan demikian pemenangnya....

untuk poin variasi widget masih Blogspot


Fitur Komentar

Wordpress mempunyai banyak kelebihan di sini. Selain bisa dimoderasi, komentar juga bisa diedit. Selain itu proteksi spamnya juga sudah terkenal (walaupun kadang agak keras). Form komentar dari wordpress juga lebih visitor friendly. Di sisi lain Google hanya menawarkan moderasi saja dan captcha. Jadi dalam perbandingan kali ini saya memilih...

pemenangnya adalah Wordpress

SEO Friendly

Kalau dilihat dari segi kepraktisan, maka saya harus angkat jempol buat wordpress, karena wordpress mempunyai plugin untuk kebutuhan SEO. Harus diakui plugin ini sangat memudahkan dalam proses optimisasi onpage. Berbeda dengan blogspot yang harus main di EDIT  HTML, dan ini benar-benar bisa memusingkan untuk pemula.

Jadi kali ini pemenangnya adalah Wordpress

SERP (Search Engine Result Page) Rank

Banyak yang mengatakan di sini blogspot kalah telak. Benarkah? Kenapa Google harus menganaktirikan produknya sendiri? Sebenarnya dalam hal ranking tidak ada yang dianakemaskan oleh Google. Semua platform sama, asal webmasternya bisa mengadakan pengaturan yang memenuhi standar mutu dari Google.

Jadi untuk masalah SERP hasilnya adalah IMBANG

Pembatasan Komentar

Blogspot bisa membatasi komentar hanya dari pengguna akun google, Open ID, atau bahkan Anonim. Sedangkan Wordpress tidak mengenal pembatasan komentar seperti ini. Jadi untuk fitur yang satu ini sudah jelas wordpress bukan pilihan saya.
Pilihan saya masih Blogspot


Impor Blog

Blogspot sepertinya harus mengakui keunggulan wordpress di sini. Blogspot hanya menerima impor blog dari sesama blogspot. Sedangkan wordpress jauh lebih fleksibel. Wordpress bisa menerima impor blog dari Blogger, Yahoo! 360, LiveJournal and Movable Type dan TypePad.

Jadi kali ini pemenangnya adalah Wordpress

Batas Kapasitas Penyimpanan Video

Setahu saya blogspot memberikan batas penyimpanan video sebesar 1GB, sedangkan wordpress memberikan 3GB. Wordpress memberi akses untuk mendapat kapasitas yang lebih besar jika kita melakukan upgrade. Jadi dalam masalah kapasitas video sudah jelas siapa pemenangnya...

Kembali memimpin Wordpress

Batas Kapasitas Penyimpanan Gambar

Produk Google ini menyedikan kapasitas penyimpanan gambar hanya sebesar 1GB pada Picasa Web Albums. Bagi saya kapasitas ini sangat kecil sekali. Kapasitas penyimpanan gambar yang disediakan kompetitornya masih lebih menyenangkan, yaitu 3GB. Kapasitas ini masih bisa diperbesar bila melakukan upgrade.

Dengan demikian poin ini juga dikuasai oleh Wordpress

TAPI! JIKA ANDA MENGHUBUNGKAN BLOG ANDA DENGAN AKUN GOOGLE+, MAKA SEMUA GAMBAR YANG BERADA DI BAWAH UKURAN 2048 x 2048 PIXELS DAN VIDEO YANG BERDURASI DI BAWAH 15 MENIT TIDAK AKAN MEMOTONG JATAH GRATIS ANDA. JADI JIKA ANDA ADALAH PENGGUNA GOOGLE+ MAKA WORDPRESS AKAN KALAH TELAK DALAM HAL KAPASITAS PENYIMPANAN GRATIS INI DAN PEMENANGNYA ADALAH BLOGGER.COM

Jenis File Yang Bisa Diupload

Blogger hanya mengizinkan tampilan grafis untuk diupload seperti gambar dan video. Berbeda dengan Wordpress yang juga menerima file ppt, pdf, doc, dan odt. Jenis file pun bisa ditambahkan saat melakukan upgrade. Bagi anda yang ingin membuat blog yang juga menawarkan dokumen, maka blogspot mungkin bukan pilihan terbaik....

Poin ini dimenangkan oleh Wordpress

KESIMPULAN:

Pendapat saya pribadi masih menganggap blogspot dari  blogger.com adalah provider blog yang lebih sesuai dengan kebutuhan saya. Di sisi lain blogger.com memang menyediakan 3 hal yang sangat dibutuhkan para blogger, yaitu: Fleksibilitas pengeditan template, Penyimpanan Video, dan Penyimpanan Gambar. Ini adalah karunia tersendiri bagi jutaan anak muda di seluruh dunia yang minim budget untuk melakukan aktifitas onlinenya.

Di sisi lain wordpress pun punya beberapa keunggulan, seperti plugin SEO-nya. Jadi provider blog ini pun punya fansnya sendiri. Tapi sekali lagi ini cuma pendapat sepihak dari saya. Jika ada yang punya pendapat lain, mungkin bisa dibagikan di sini untuk membantu para blogger pemula membuat pertimbangan.

Keluar Dari Hukuman dengan Google Link Disavow

Keluar Dari Hukuman Google dengan Google's Link Disavow. Banyak blogger pemula yang melakukan optimisasi dengan cara yang tidak berimbang. Akibatnya bukan mendapatkan peringkat, malah mendapatkan hukuman seperti sandbox atau banned. Salah satu hal yang bisa mendatangkan hukuman adalah backlink. Adalah perkara mudah menyingkirkan jika masalah link ada di blog kita. Tapi bagaimana jika backlink kita bermasalah? Bisakah backlink yang sudah "menempel" di blog orang itu kita hapus?

Rasanya mustahil menghapus backlink yang sudah tertanam tanpa membajak blognya. Jadi sekarang apa kita mau bertamu dan mengatakan "kemarin saya sudah pasang backlink dan sepertinya saya tidak butuh lagi,...tolong dihapuskan". Cara ini juga bisa dilakukan. Yang jadi masalah bagaimana kalau backlink menempel pada situs kualitas rendah yang terbengkalai? Adminnya sudah tidak aktif lagi dan tidak bisa menanggapi permintaan kita?

Masih ada satu cara lagi yaitu dengan memanfaatkan tool link disavow dari Google. Dengan alat ini anda bisa menyangkal bahwa link yang ada pada suatu blog adalah backlink anda dan dengan demikian Google tidak akan memperhitungkan backlink yang buruk ini sebagai backlink anda.

Jadi jika ada backlink yang ingin anda sangkal silahkan menuju Google's Link Disavow.

Pada halaman pertama anda akan mendapatkan peringatan seperti ini:

If you believe your site's ranking is being harmed by low-quality links you do not control, you can ask Google not to take them into account when assessing your site.  

Yang artinya:

Jika anda yakin ranking situs anda sedang dirugikan oleh link-link berkualitas rendah yang tidak bisa anda kontrol, anda bisa meminta Google untuk tidak memperhitungkannya saat menilai situs anda.

"google link disavow tool"

Jika anda tidak bermasalah dengan peringatan ini, maka silahkan PILIH SALAH SATU blog dari akun anda yang ingin anda proses penyangkalan tautannya. Setelah itu klik tombol MENOLAK TAUTAN. Jangan takut mengklik tombol ini, karena belum akan terjadi apa-apa.

Anda akan dibawa ke sebuah halaman dengan peringatan baru seperti berikut:

Ini adalah fitur lanjutan dan sebaiknya selalu digunakan dengan hati-hati. Jika digunakan secara tidak semestinya, fitur ini berpotensi membahayakan kinerja situs Anda di hasil penelusuran Google. Sebaiknya Anda hanya menampik tautan balik jika Anda yakin Anda memiliki jumlah tautan spam, palsu, atau berkualitas rendah yang cukup banyak yang menunjuk ke situs Anda, dan jika Anda yakin bahwa tautan tersebut menyebabkan masalah.

Peringatan ini penting, karena jangan sampai anda menghapus semua backlink anda karena kecerobohan. Itu benar-benar masalah besar bagi blog anda. Tapi jika anda sudah yakin ada tautan yang ingin anda hapus, silahkan klik tombol MENYANGKAL TAUTAN.

Anda akan diminta memilih file yang berisi daftar backlink yang ingin anda hapus. Jadi pastikan file ini HANYA berisi link-link yang ingin anda hapus. Jika anda sudah punya filenya klik tombol PILIH FILE.

Belum punya filenya? Kalau begitu dibuat dulu. Buka notepad dan ketikkan menurut contoh berikut:

# I have asked the owner of domainA.com on 10/12/2012 to

# remove my backlinks from his site but got no response

http://www.spamdomain1.com

# Owner of domainB.com removed most links, but missed these

http://www.domainB.com/contentA.html

http://www.domainB.com/contentB.html

http://www.domainB.com/contentC.html

Perhatikan bahwa teks harus dibuat dalam baris per baris. Setiap baris yang bukan link (saya beri warna merah) harus diberi tanda pagar # untuk menyatakan bahwa baris itu harus diabaikan. Sedangkan baris yang berisi link jangan diberi tanda pagar. Masukkan semua link yang ingin anda hapus dan simpan file ini untuk kemudian diupload.

Metode ini tidak akan langsung memperlihatkan hasil, karena setelah penyangkalan dan pengabaian backlink oleh Google, proses iterasinya akan menentukan poin baru anda. Jika anda berhasil menghapus backlink bermasalah, maka poin anda akan diperbaiki, tapi jika anda malah membuat kekeliruan dan menghapus backlink yang menguntungkan, maka bisa sebaliknya.

Dalam kasus over optimization, metode ini bisa dipakai sebagai usaha untuk menyangkal banyak backlink. Misalnya seminggu lalu website anda baik-baik saja, lalu minggu ini setelah anda membombardir blog anda dengan backlink dalam jumlah berlebihan, blog anda malah hilang dari peredaran. Maka cobalah menyangkal separuh dari backlink yang anda pasang minggu ini.

Mudah-mudahan metode ini bisa membantu anda mengendalikan faktor-faktor yang sebelumnya tidak bisa kita kendalikan yang bernama backlink. Sukses buat anda dan terima kasih sudah mampir di blog ini.

Bagaimana Cara Membuat Text Area di Blog?

text area HTML

Bagaimana Cara Membuat Text Area Dengan Highlight? - Text area adalah sebuah kolom yang dibuat sebagai kontainer tulisan atau kode html yang ingin kita hidangkan kepada para pengunjung blog. Selain sebagai kontainer text biasa, text area juga bisa dibuat dengan fungsi highlight agar memudahkan pengunjung melakukan copy isi text area

Langsung saja kita mempelajari bagaimana cara  membuat kode HTML untuk text area. Kode ini bisa saudara masukkan di website ataupun blog anda:

Membuat Text Area Biasa

<p align="center"><textarea name="mytextarea" rows="5" cols="40" readonly=""> ISI DENGAN KONTEN YANG DIINGINKAN </textarea></p>

hasilnya akan terlihat seperti di bawah ini :

<a href="http://trikmudahseo.blogspot.com" target="_blank">Belajar Blog dan SEO</a> Ini adalah format untuk membuat link dalam bahasa HTML

Ada dua parameter yang perlu anda perhatikan, yang pertama adalah cols, yang berarti jumlah karakter yang ditampilkan per baris. Parameter kedua adalah rows yang berarti jumlah baris yang akan ditampilkan oleh text area, jika jumlah baris yang diketik lebih panjang dari yang disediakan makan text area akan menampilkan scrolling.

Membuat Text Area dengan Tombol Highlight

Text area juga bisa dibuat dengan menambahkan fungsi highlight, di mana fungsi ini akan menyorot semua text yang berada di dalam text area. Ini akan membantu pengunjung blog jika ingin mengcopy isi dari text area yang terlalu panjang. Langsung saja kita lihat contoh kode html berikut ini:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">Masukkan text yang diinginkan di sini. Jika terlalu panjang akan muncul scroll untuk membantu anda membaca keseluruhan teks</textarea></p></div></form>

Sebagai contoh :

Masukkan text yang diinginkan di sini. Jika terlalu panjang akan muncul scroll untuk membantu anda membaca keseluruhan teks

Kode di atas mempunyai dua bagian utama, yaitu yang membuat fungsi highlight dan yang membuat fungsi text area. Dari semuanya ada beberapa kode yang bisa diubah yaitu:

• Height: 100px yang menyatakan tinggi text area anda nantinya
• Width: 200px yang menyatakan lebar dari text area
• Value="Highlight All" adalah text yang akan ditampilkan pada tombol

Jadi silahkan diedit text area ini sesuai kebutuhan anda.

Cara Membuat Breadcrumbs Pada Postingan Artikel

Cara Membuat Breadcrumbs pada postingan artikel sebenarnya sangat mudah. Breadcrumbs ini adalah sebuah teknik yang mulai menjadi trend sejak tahun 2009. Breadcrumbs atau "remah roti" adalah istilah yang sering digunakan oleh orang barat untuk hal-hal yang membantu mereka menelusuri posisi mereka dari suatu titik awal.

Banyak pelaku SEO meyakini bahwa teknik breadcrumbs ini membantu googlebot untuk lebih cepat mengenali struktur dari blog, karena halaman-halaman yang berada pada hirarki atas akan mendapat lebih banyak aliran poin dibandingkan halaman-halaman yang lebih di bawah hirarki.

Secara teknis saya meyakini bahwa teknik breadcrumbs ini membawa efek positif bagi SEO, karena bagaimana pun link antar halaman itu selalu memberi efek positif dalam aliran pagerank. Bagi yang ingin memasang breadcrumbs bisa mengikuti prosedur berikut:

• Masuk ke akun blogger saudara
• Pilih menu TEMPLATE
• Simpan dulu Full Template saudara dengan mengklik tombol Cadangkan/Pulihkan
• Klik tombol EDIT HTML
• Centang Expand Widget Template
• Cari kode ]]></b:skin
• Letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi
  

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}

• Setelah itu cari kode seperti di bawah:

<b:includable id='main' var='top'>

• Ganti kode di atas dengan kode di bawah

<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 Perubahan. Breadcrumbs akan terlihat seperti contoh berikut (lihat gambar di bawah)

Dengan demikian selesai sudah pemasangan breadcrumbs pada halaman-halaman artikel blog saudara.

Bagaimana Cara Menulis Artikel Berkualitas Standar SEO

Bagaimana Cara Menulis Artikel Berkualitas Standar SEO? Ini adalah tahap ke 3 dari 4 tahap SEO. Usahakan untuk membuat artikel berkualitas dari kata-kata kunci yang sudah diriset. Jika belum mengetahui tentang cara riset kata kunci bisa baca dari artikel berikut:

# Cara Melakukan Riset Kata Kunci

Setelah menentukan kata kunci yang akan dibuatkan artikel, maka kita siap untuk memulai. Perhatikan faktor-faktor penting di saat menulis artikel berikut ini:

#1 Memilih Judul Artikel

Tahap pertama adalah menentukan judul artikel. Pastikan judul ini mengandung kata kunci yang terpenting di dalam artikel. Panjang judul artikel sebaiknya sekitar 5-7 kata saja, karena semakin panjang akan semakin berkurang kerapatan kata kunci di dalamnya. Kalau mau membuat judul artikel heboh sebaiknya jangan sampai mengorbankan kata kunci di dalamnya. Sebagai contoh, jika judul artikelnya "Harga Ipad 3 Turun Lagi" cukup diubah menjadi "Astaga! Harga Ipad 3 Turun Lagi"

#2 Memilih URL Artikel

Jika judul artikel yang dipilih cukup panjang, maka bisa jadi tidak dimuat semua di URL artikel. Bagi pengguna blog berplatform blogger.com bisa mengubah URL dengan cara berikut. Lihat di bagian kanan dari tempat mengetik artikel anda. Di situ ada satu menu bernama Tautan permanen. Klik menu tersebut, maka akan terbuka tampilan seperti di bawah ini.

Anda cukup mengetikkan bagian terakhir dari URL. Sebagai contoh, jika URL yang saya inginkan adalah http://trikmudahseo.blogspot.com/2012/08/bagaimana-cara-menulis-artikel-berkualitas-standar-seo.html, maka yang saya ketikkan adalah bagaimana-cara-menulis-artikel-berkualitas-standar-seo (jangan lupa tanda hubung - diikutkan dalam url). Dengan begini URL akan menjadi lebih SEO friendly.

#3 Gunakan Label Di Setiap Artikel

Sebaiknya menggunakan label untuk artikel-artikel saudara. Pilih label yang paling tepat untuk mendiskripsikan artikel yang dibuat. Untuk memasukkan label klik Menu Label di bagian kanan kolom mengetik artikel. Jika memakai lebih dari satu label pisahkan dengan koma. Jika blog anda bertema campuran dan tidak fokus pada satu topik, maka sebaiknya pasang gadget label pada sidebar untuk membantu aliran pagerank ke halaman-halaman artikel blog anda.

#4 Pastikan Memasang Meta Deskripsi

Meta deskripsi ini yang akan ditampilkan pada snippet hasil pencarian Google, jadi pastikan meta deskripsi ini juga menggunakan kata kunci yang ada di artikel anda. Panjang meta deskripsi itu tidak perlu terlalu panjang, 150 karakter itu sudah memadai. Tapi untuk mengaktifkan fitur input meta deskripsi di pembuatan artikel, silahkan ikuti panduan di artikel cara pasang meta description.

#5 Membuat Artikel Yang Teroptimisasi

Artikel yang saudara buat sebaiknya mengikuti beberapa aturan berikut ini:

• Panjang artikel minimal 500 kata
• Setiap kata kunci setidaknya diulangi 3 kali di dalam artikel, (harus menjaga kepadatan sekitar 3-6% itu hanya isu)
• Kata kunci yang muncul pertama kali harus di bold atau italic
• Gunakan bahasa yang baku agar kualitas artikel tidak berkurang
• Jika bisa, buat lagi satu frasa dengan kata kunci di dalam artikel dan beri tag Heading H2 atau H3.

#6 Memasang Gambar Di Dalam Artikel

Pastikan gambar yang anda pasang mengandung Alt tag. Alt tag ini bertugas memberitahu Google tentang isi gambar, karena Googlebot belum bisa mengenali gambar. Kalau bisa ukuran file gambar jangan terlalu besar, karena bisa mempengaruhi waktu loading halaman. Bagi pemakai blogspot, gambar sebaiknya diupload saat menulis artikel, dan jangan dihosting di image hosting yang lain. Karena kadang hosting lain tidak bisa mengimbangi kecepatan loading gambar dari blogspot pada jam-jam sibuk.

#7 Memasang Link Di Dalam Artikel

Jika anda benar-benar perlu memasang link di dalam artikel, maka ikuti beberapa aturan berikut:

• Pastikan semua link terbuka di tab baru
• Bedakan link yang keluar dan link yang menuju halaman blog anda sendiri. Untuk link yang keluar pastikan menggunakan rel="nofollow", sedangkan yang menuju artikel sendiri tidak perlu nofollow.
• Penting!!! Usahakan dalam artikel anda setidaknya ada dua link menuju artikel lain di blog anda jika memang ada kaitannya. Interlink seperti ini sangat penting untuk meningkatkan kemampuan robot mesin pencari mengindeks blog anda.

#8 Pastikan Artikel Anda Mampu Menyelesaikan Masalah Atau Menghidangkan Informasi yang dicari Pembaca

Tujuannya sederhana, agar pembaca tertarik membaca artikel lainnya, atau bahkan datang berkali-kali ke blog anda. Ini akan sangat baik untuk reputasi blog anda.

Delapan poin di atas bisa membantu saudara untuk meningkatkan kualitas artikel blog. Mudah-mudahan ini bisa membuat artikel blog anda terindeks lebih baik lagi.... Sebagai pelengkap pengetahuan saudara silahkan dibaca kelanjutan proses SEO ini pada tahap ke 4 dari 4 tahap SEO, yaitu cara mendapatkan backlink. Terima kasih sudah mau mampir dan membaca artikel cara menulis artikel berkualitas standar SEO.