Jangan Gunakan Gambar untuk Background (Fast Loading Tips)

Fast Loading Tips
SALAH satu cara mempercepat loading time blog adalah dengan tidak menggunakan background (latar) blog dengan gambar, image, atau foto. Makin cepat & ringan tampilan blog, maka akan makin user friendly dan disukai mesin pencari.

Gambar latar belakang biasanya berulang secara horizontal atau vertikal. Sekitar 50% penyebab blog tampil lambat adalah karena image background, menurut MBT. GT Metrix juga suka memberikan catatan khusus soal gambar latar blog ini.

Maka, ganti saja background berupa gambar itu dengan kode warna atau kode CSS/HTML. Dijamin, loading time blog akan lebih cepat dari sebelumnya.

Kode CSS latar belakang blog biasanya seperti ini:
body { background: #7AA1C3 url(http://xyz.com/bg-image.jpg);

Intinya, diawali dengan tulisan body {background:

Cara Mengubah Background Blog

Untuk mengubah latar belakang blog dari gambar menjadi kode CSS/HTML sangat mudah.
1. Template > Edit HTML
2. Temukan (Ctrl+F) kode body {background:# ....}
3. Ganti dengan kode berikut seperti ini:

body {background:#000;}

Catatan:
- Di belakang kode warna biasanya ada kode lain, seperti color:#444 dsb. Jangan sampai kehapus!
- Kode #000 adalah warna hitam. Silakan pilih warna lain di Kode Warna HTML.

Menggunakan Color Gradient

Kita juga bisa menggunakan warna gradient atau gradasi untuk background blog. Blog CB ini juga sekarang menggunakan Color Gradient.

Gak perlu repot-repot membuat sendiri kode warna gradient untuk background, cukup:
1. Buka Gradient Generator.
2. Pilih warna
3. Copy kodenya
4. Paste di kode body { 

Ini kode warna gradient  backgriund blog CB. Silakan jika mau menggunakannya:

body {background: rgba(255,255,255,1);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(38%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );

Loads time blog CB (Cek: 3 Maret 2015)

Loads time blog CB

Kenapa Harus Fast Loading?

Sering dibahas, kecepatan tampilan blog merupakan rekomendasi Google. Menurut Google, didukung survei, 75% pengunjung akan meninggalkan dan tidak akan membuka lagi blog yang tampil lambat, berat, lama, lemot, alis "lamberta".

Google rekomendasikan kecepatan blog di bawah 4 detik. Paling lambat 5-6 detik lah!
Banyak faktor yang memperlambat loads time blog, terutama gambar (image). Yang lainnya seperti flash, animasi, javascript, termasuk widget hit counter, statistik pengunjung, widget alexa rank, dll.

Tidak menggunakan latar belakang blog berupa gambar merupakan salah satu saja dari sekian cara mempercepat loading time blog. Good Luck! (http://jurusampuhseo.blogspot.com).*

Cara Mempercepat Loading Blog: Hapus CSS yang Tidak Digunakan

Cara menghapus kode CSS yang tidak terpakai secara otomatis untuk mempercepat loading blog.

blog cepat loading
SALAH satu cara mempercepat loading time blog adalah dengan menghapus kode-kode CSS yang tidak digunakan atau tidak terpakai di template.

Apa itu CSS? Kita tanya Wikipedia aja deh. Katanya, CSS itu singkatan dari Cascading Style Sheet (CSS). CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. (Cascading Style Sheets; CSS defines how HTML elements are to be displayed).

Di template blog, kode-kode CSS yang menentukan "hitam-putih" tampilan blog kita itu ada di antara kode <b:skin> dan </b:skin>. Semua kode yang ada di situ, itulah kode CSS.

Agar loding time blog kita bagus, idealnya di bawah empat detik saja (silakan cek kecepatan loading blog Anda di GT Metrix), salah caranya adalah dengan memastikan tidak ada kode CSS yang "useless", tidak berguna, di dalam template, hanya memberatkan loading.

Salah satu tools online yang bisa kita gunakan adalah Unused CSS. Dari namanya saja sudah jelas, situs itu akan mengecek "CSS yang tidak terpakai".
  1. Buka Unused CSS.
  2. Masukkan link url atau semua kode CSS template Anda
  3. Klik tombol yang ada dan tunggu hasil dan rekomendasinya.
CB sendiri sudah mengeceknya. Hasilnya, bersih! Semua kode CSS di template CB digunakan, tidak ada yang tidak terpakai, sehingga tak perlu bersih-bersih lagi:

kode css terpakai

Kompres CSS

Selain menghapus kode CSS yang tidak dipakai, cara lain untuk mempercepat loading time blog adalah mengkompress kode tersebut (CSS Compresse).

Kita bisa gunakan CSS Drive untuk melakukan kompres:

1. Buka situs CSS Drive
2. Copas saja semua kode antara kode <b:skin> dan </b:skin>
3. Klik "Compress It!"
3. Akan terbuka halaman baru berisi CSS yang telah di kompresi.

CB sendiri sudah melakukan kompress ini, namun 'gak CB pakai. Soalnya 'ga terlalu ngaruh. Secara blog CB ini sudah bagus loading timenya, di bawah empat detik. Cuma "keganggu" sama Google Adsense doang. Lagian, bedanya css asli dan hasil kompress cuma dikit, hanya 6%.

hasil komprs kode css

WARNING!
Langkah kompress css hendaknya dilakukan setelah Anda memutuskan tidak akan lagi memodifikasi blog. Soalnya, nanti kode-kode tersebut "rapat" dan akan sulit menemukan kode yang akan diubah.

Masih banyak cara lain untuk mempercepat loading blog, selain menghapus kode CSS yang tidak dipakai, seperi rekomendasi GT Metrik:

rekomendasi gt metrik

Di antaranya soal:
  1. HTML Compression
  2. Image Compression. 
  3. JavaScript Compression
Untuk pemula, daripada blognya error, cukup dengan langkah sebagai berikut dulu:
  1. Jangan terlalu banyak menampilkan jumlah post di halaman depan (Home). Google  menyaranakan maksimal 10 judul post.
  2. Gunakan widget dan javascript dari blogger. Namun jika ingin menggunakan javascript dan widget dari pihak ketiga, pastikan penempatannya bagian bawah blog atau dibawah sidebar.
  3. Kurangi ukuran gambar.
  4. Jangan gunakan flash, jam, animasi.
  5. Jangan memasang widget hit counter (statistik pengunjung), alexa rank, dll. yang hanya akan membenani loading blog.
Demikian Cara Mempercepat Loading Blog, khsusunya soal menghapus kode CSS yang Tidak Digunakan. Good Luck! (http://jurusampuhseo.blogspot.com).*

7 Alasan Harus Menggunakan Template Blog Responsive

 Template Blog Responsive
Kenapa Harus Menggunakan Template Blog Responsif? "Responsive or Go Home!" tulis Elegent Themes dalam ulasannya tentang trend desain website 2015 sebagaimana CB share di posting Top 5 Trend Webdesain.

Google, sebagai situs mesin pencari terpopuler di dunia, juga merekomendasikan para webmaster dan blogger agar mendesain atau menggunakan template responsif: "make it (your site) responsive" kata Google plus penjelasannya tentang yang dimaksud "Responsive Web Design".

Rekomendasi Google berdasarkan fakta: kini semakin banyak orang (user) yang mengakses internet menggunakan mobile device (HP/SmartPhone) yang memiliki ukuran layar serta resolusi yang berbeda satu sama lain.
Responsive desain membuat website/blog sangat "user friendly" alias "bersahabat dengan pengguna".

Trend tampilan responsif berada di urutan pertama dalam daftar "Web Design Trends To Look Out For In 2015" versi Elegant Themes. "Responsive or Go Home," katanya. Bahasa kitanya gini kali: responsif atau ke laut aja!

Alasan Utama: Responsive Rekomendasi Google

Alasan utama menggunakan template blog responsif adalah karena desain web responsif direkomendasikan oleh Google.  "Make your site look great on mobile devices," kata Google.

Dalam ulasan Creative Market, sedikitnya ada 7 alasan kenapa kita harus menggunakan template blog responsif:
  1. Template Blog Responsif membuat user nyaman membukanya. Istilahnya, "offer better UX (User Experiences)."
  2. Template Blog Responsif mengurangi waktu yang dibutuhkan untuk mengelola blog.
  3. Template Blog Responsif memungkinan kita "keep track" terhadap pengunjung blog.
  4. Template Blog Responsif membantu meningkaykan SEO Blog (boost your SEO).
  5. Template Blog Responsif menjadikan blog kita fleksibel untuk mengikuti perkembangan teknologi masa depan.
  6. Template Blog Responsif efektif dan efisien.
  7. Template Blog Responsif punya keungulan "Pay-Per-Click".
Bagaimana jika template blog kita tidak responsif? Itu tadi, ...Go Home aja!

Untuk blogger, jangan cemas, ada pilihan "default template" responsive jika Anda sudah telanjur sayang dengan template yang Anda gunakan saat ini. Namun, tentu lebih baik jika Ganti Template Blog dengan Template Blog SEO & Responsive. Good Luck! (http://jurusampuhseo.blogspot.com).*

Cara Menghapus Tulisan Read More di Halaman Depan Blog

Cara Menghapus Tombol Read More di Halaman Depan
Cara menghilangkan, menyembunyikan, atau menghapus tulisan/tombol "Read More" (Readmore Button) di Halaman Depan Blog.

RINGKASAN posting di halaman depan (home) sangat populer digunakan para blogger. Biasanya, setelah judul, thumnbail, dan ringkasan tulisan, ada readmore button --tombol "read more" atau "continue reading"-- untuk membuka link posting.

Namun, banyak blogger tidak suka ada tombol readmore ini di halaman depan. Lagi pula, Google, Yahoo, Facebook, Google Plus, dan media-media berita tidak menggunakan tombol readmore ini. Pasalnya, user (pengguna) diasumsikan sudah paham bahwa jika ingin membuka posting, mereka tinggal klik saja judul posting yang mengandung hyperlink/link.

Sejauh ini, tidak ada keluhan soal tampilan posting halaman depan tanpa readmore. Artinya, dalam konteks UX (User Experience), tidak masalah.

Berikut ini contoh tampilan Google, Yahoo, dan Detikcom yang tanpa tombol readmore di Summary Post halaman depan (Homepage):

detikcom tanpa readmore

Google tanpa readmore

yahoo tanpa readmore

Itulah kenapa banyak blogger ingin menghapus atau menghilangkan tombol readmore di halaman depan. Apalagi, tombol readmore itu "hanya" akan menjadikan adanya link ganda di halaman depan (hyperlink di judul posting & tombol).

Cara Menghapus Tombol Read More di Halaman Depan Blog

1. Template > Edit HTML
2. COPAS kode berikut ini di atas kode </head>


<b:if cond='data:blog.pageType == "static_page"'>
<style>.readmore {display:none;}</style>
</b:if>

3. Save!

Jika tidak berhasil, karena kode templatenya beda, maka lalukan langkah ini:

1. Template > Edit HTML.
2. Cari kode seperti di bawah ini:

</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div><a expr:href='data:post.url'>Read more &#187;</a></div>
</b:if>
</b:if>


3. Hapus kode yang berwarna merah.
4. Hapus pula kode CSS Readmore yang biasa ada di atas kode ]]</b:skin>
5. Save!

Kini tombol autoreadmore sudah terhapus alias hilang di halaman depan blog Anda.

KEBALIKANNYA: MENAMPILKAN POSTING PENUH
Ada juga blogger, dengan alasan apakah tidak tahu, justru ingin menghapus sama sekali auto readmore. Artinya, ingin posting di halaman depannya utuh, tidak terpoting readmore.

Caranya gampang saja, gunakan saja template bawaan blogger! Namun, jika sudah telanjur sayang sama template yang digunakan, tapi ingin menghapus summary/snippets berupa auto readmore itu, maka lakukan langkah ini:

1. Template > Edit HTML
2. Cari kode seperti di bawah ini:

<script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
 s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div><a expr:href='data:post.url'>Read more &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>


3. HAPUS tuh semua kode tersebut dan ganti DENGAN kode:

<data:post.body/>

CARA LAINNYA:

1. Cari kode  


<div class='post-body entry-content'>

2. Akan ada kode seperi ini di bawahnya:

<b:if cond='data:blog.pageType != "static_page"'><br />
<b:if cond='data:blog.pageType != "item"'><br />
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br />
<div class='readmorecontent'>
</div>
</b:if><br />
</b:if><br />
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><br />
<br />
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

3. HAPUS dan GANTI dengan kode

<data:post.body/>

BERES!!!
Itu dia Cara Menghapus Tombol Read More di Halaman Depan dan sebaliknya: menampilkan posting secara utuh di halaman depan. Good Luck! (http://jurusampuhseo.blogspot.com/).*

Sumber:
Knowing Itech
PB Templates
All Blogger Tips

Contoh Komentar Berkualitas di Blog CB

Contoh Komentar Berkualitas di Blog CB
KOMENTAR yang masuk di blog CB ini lumayan banyak. Dalam sehari bisa sampai 20-an komentar, namun tidak semuanya bisa dipublish, karena banyak juga yang "nyepam" alias komentar spam, bahkan "sampah" (junk comments). Umumnya komentar spam itu dari blogger yang jual obat online.

Sejak CB menerapkan sebuah trik SEO ada penambahan jumlah pengunjung sekitar 2000-an per hari. Jumlah komentar pun bertambah banyak, banyak yang baru lagi! (Terima kasih kepada "new visitors" yang langsung mau komentar di blog ini).

Yang menggembirakan, di antara 4.405 komentar yang sudah dipublish hingga posting ini dibuat (26/2/2015), banyak komentar yang berkualitas, yaitu memberikan masukan, tambahan, relevan alias "nyambung" dengan isi tulisan.

Kebanyakan komentar yang masuk sih, komen berupa pertanyaan yang tentu "bikin repot aja" (JK). Risiko blog tips & trik memang begitu, banyak pertanyaan masuk, apalagi CB juga buka Ruang Konsultasi, meski tidak semua bisa dijawab --karena kelewat, gak sempet, atau CB sendiri belum tahu :)

Banyak juga komentar "modus", pura-pura tanya lah, nulis "nice info" tapi nyepam lah, dan banyak lagi, yang dikategorikan dalam 7 jenis komentar blog.

Contoh Komentar Berkualitas

Sebagai apresiasi atas komentar-komentar yang baik tersebut, sekaligus sebagai contoh komentar berkualitas yang layak ditiru blogger lain (khususnya newbie), CB tampilkan beberapa di antaranya. Mohon maaf, tentunya banyak yang tidak dimuat di sini, ini hanya "sample".

Yang ditampilkan di urutan pertama adalah komentar dari Maskolis, sekaligus penegasan bahwa CB bukan Maskolis, tapi "muridnya". Soalnya, banyak lho yang nyangka CB itu Maskolis, sampai-sampai manggilnya juga "Mas Kolis" (terutama via email).
  1. Makasih mas, jarang ngeblog/online belakangan. Iseng jalan2 eh nyantol kesini. Saya hanya bisa bilang anda seorang blogger sejati... salut mas. Salam jabat erat dari saya.
  2. Om CB kenapa gak pakai yang begini aja: expr:alt='data:post.title' kalau begitu kan sesuai dengan judul artikelnya?
  3. sedikit tambahan aja om cb , di title nya di kasih H3 (di popular post) biar h3 gak zero.
  4. Ternyata tidak semua tips SEO bisa kuikuti termasuk tips ini sebab menurutku tidak rapi kelihatannya kalau memakai tulisan rata kiri saja. Aku lebih suka memakai rata kiri dan kanan (justify) saat tulisan yang kubuat panjang karena terlihat lebih rapi. Tulisan pendek baru rata kiri saja. Btw, mau tanya kenapa blog ini tidak punya PR padahal raking Alexanya bagus sekali? Hehehehe!
  5. begitulah mas, komentar seperti itu memang sudah biasa dan sudah lumrah... kadang orang ingin mendapat keuntungan dengan menghalalkan segala cara termasuk spam komentar :)
  6. Sempet ngakak juga sebernanya pas jalan-jalan lihat spam dari penjual obat. eh, ktemu ni post, ntar ah kalo udah rame cukup share aja :3. ane ijin lanjutkan ya min, baru ngutak atik seo ma tampilan blog :3
  7. Yang suka porno yah..... gunakan MEMEX pasti disalah gunakan Yang tau gunakan teknologi....... 'MEMEX' salah satu solusi untuk kemajuan bangsa
  8. Ingatlah anak bangsa jangan dirusak mental, jiwa dan pribadimu oleh teknologi tapi kalahkan teknologi itu sendiri buat orang banyak
  9. Semoga blogger banyak yang insyaf dengan cara ini dan korban dari konten dewasa berkurang, makasih infonya mas.
CB batasi 9 saja contoh komentarnya, secara angka 9 itu 'kan angka tertinggi, 'tul gak?

Anda bisa seleksi dan nilai sendiri komentar-komentar yang masuk di blog ini, termasuk di daftar "Top 5 Most Commented :Posts" yang ada di sidebar.

Mari biasakan komentar yang baik dan berkualitas, bukan nyepam! Good Luck and Happy Blogging! Komentar Anda juga Diindeks Google lho! Nanti kita bahas. (http://jurusampuhseo.blogspot.com).*

Cara Pasang Widget Akun Media Sosial dengan CSS Sprite

Widget Akun Media Sosial dengan CSS Sprite
Cara Menampilkan, Membuat, atau Memasang Widget Akun Media Sosial di Sidebar Blog dengan Gambar CSS Sprite agar Fast Loading.

WIDGET akun media sosial di sidebar blog berupa ikon (icon) logo seperti Facebook, Twitter, Google Plus, dll. bisa memperlambat loading blog, jika image-nya besar, tidak menggunakan dimensi ukuran, juga bisa mengurangi skor SEO jika gambarnya tanpa deskripsi (alt tag).

Contohnya, blog CB ini sebelumnya menggunakan sidebar ikon akun media sosial berupa gambar biasa. Meskipun skor seo tetap 100%, namun saat dicek di GT Metrix kecepatan loading berkurang cukup besar alias mengurangi loads time.

kecepatan loading cb


Hasilnya cek: 88% (B) dan 75% (C). Ada banyak catatan, salah satunya: The following images served from blogspot.com should be combined into as few images as possible using CSS sprites.

Kata GT Metrix, gambar-gambar ikon sosmed itu sebaiknya digabungkan menggunakan CSS Sprites. CB menggantinya dengan tips Pasang Widget Akun Media Sosial dengan CSS Sprite dari Spiceup Yourblog. Hasilnya sebagai berikut:

load time cb blog A

Hasilnya menjadi 91% (A) dan 80% (B) dengan Page load time: 3.90s alias di bawah 4 detik saja. Mantap 'kan? Mau juga?
CSS Sprite sendiri artinya koleksi beberapa gambar yang disatukan dalam satu gambar (collection of images put into a single image). Bagus banget untuk mempercepat loading blog. (CSS Images Sprites).

Cara Pasang Widget Media Sosial di Blog dengan Image CSS Sprite 

1. Klik "Template" > "Customize"
2. Klik "Advanced" > "Add CSS"
3. Copy & Paste kode berikut ini di kolom yang tersedia:

#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XVX-eWgMviF34s0W7V5HVft0NV6_KmilAnvwiwlFMZ4a6S0I8GmIPIkfj9sgQ4SKjy1RrXpSC5rbKSzyUeKk0knZgm19FKFAn10O-uODW15DwQLcrjg8y9NpQLhzc-wTf5DkUNz260_X/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}

4. Klik "Apply to Blog"

Catatan:
- Kode CSS di atas terpasang di atas kode ]]</b:skin>
- Anda juga bisa memasangnya dengan cara Template > Edit HTML dan Copas kode tersebut di atas kode ]]</b:skin>

5. Klik "Back to Blogger Dashboard"
6. Klik "Layout" > Add a Gadget > pilih "HTML/Javascript"
7. COPAS kode berikut ini di kolom "Content". Judul gadget kosongkan.

<!--Social Sprite Html-->
<div id="head-soc" style="margin: 0 0 20px -10px">
<ul>
<li id="g"><a href="https://plus.google.com/106869251529186655236/posts" target="-blank">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/jurusampuhseo" target="-blank">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=jurusampuhseo" target="_blank">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/cbblogger" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/contohblog" target="-blank">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/in/cbblogger" target="-blank">LinkedIn</a></li>
<li id="youtube"><a href="https://www.youtube.com/user/CBBloggerz" target="-blank">YouTube</a></li>
</ul>
</div>

8. Jangan lupa, ganti tulisan berwarna merah dengan ID akun medsos Anda. Jika belum punya, minjem dong, eh... ya bikin dulu lah...! Banyak akun medsos Bagus lho buat SEO blog!

9. Save!

Kini Widget Akun Media Sosial dengan image CSS Sprite yang Fast Loading sudah terpasang dan mestinnya sudah muncul di sidebar blog Anda. Good Luck! (http://jurusampuhseo.blogspot.com/).*

Google Page Rank (PR) Tidak Penting Lagi bagi Blog

Kini Page Rank (PR) Tidak Penting bagi Blog
POSTING ini dibuat guna merespons komentar yang bagus dari pengunjung blog CB ini. Dia tanya, kok Pagerank (PR) blog CB nol (0), padahal Rank Alexa bagus?

CB sudah jawab di reply comment tulisan  Tampilan Posting yang Baik dengan link searching Google yang intinya PR "tidak berguna lagi" dan abaikan soal PR!

Posting ini jadinya mirip soal Valid HTML5 yang gak ngaruh sama SEO blog. Jangan lagi terlalu ngurusin Valid HTML. Sekarang, tambah satu: Jangan Lagi Pedulikan Pagerank (PR) karena dia "tidak berguna" (useless).

PR tidak lagi diperhitungkan buat seo blog dan tidak usah dipedulikan adalah kesimpulan CB setelah Googling soal "Pagerank Useless". Sudah banyak juga blogger Indonesia yang menulis soal isu "kematian PageRank" ini, bahkan sejak 2013 lalu!

Artinya jika, PR blog Anda nol, jangan sedih. Gak ngaruh!

Benar sekali, Google PR blog CB ini NOL, tapi banyak postingnya yang nongol di peringkat atas SERP Google 'kan? 

Alexa Rank blog CB juga gak jelek-jelek amat, lumayan di angka 35-ribuan global dan di posisi 500-an Indonesia.
rank alexa contoh blog
Rank Alexa Contoh Blog 26 Februari 2015

Kok bisa? Tidak lain karena CB fokus ke konten, selain fokus juga ke SEO Onpage dan Fast Loading (Loading Time) atau kecepatan tampilan blog --meski "diganggu" dengan Google Adsense yang sedikit mengurangi loads time. Gak masalah, masih bagus kok loadingnya, masih terbilang kenceng.

Content is STILL the KING
Posting ini sebenarnya "kabar baik" bagi kita, para blogger. Intinya, abaikan PR dan fokus saja ke Konten Berkualitas. CONTENT is STILL and ALWAYS be the KING.
Pagerank tinggi bukan jaminan artikel mendapat peringkat yang lebih baik pada halaman hasil pencarian (SERP). Sebaliknya, Pagerank NOL sekalipun, seperti blog CB ini, bisa kok "menguasai klasemen" hasil penarian Google.

Berikut ini CB kutipkan beberapa ulasan mendalam yang menegaskan baha sekarang Google Page Rank (PR) Tidak Penting bagi Blog.

Menurut para pakar seo dan analis di luar sana, sudah lama berkembang rumor bahwa Google tidak lagi menggunakan Page Rank dan mengubahnya ke Trust Rank (TR) yang tidak dipublikasikan, namun TR itulah versi baru PR.

And there were rumors and suspicions that Google no longer used Page Rank and had moved to Trust Rank, which was not available publicly but was the new version of Page Rank.

Bahkan, dengan jelas Google mengatakan, Paga Rank tidak penting. "Even Google says Page Rank is not important. Google removed Page Rank from its webmaster tools because it is not important," tulis Hubspot.

Pekerja Google di bagian Webmaster Tools Analyst, Susan Moskwa menegaskan, para webmaster dan blogger gak usah terlalu "ngoyo" soal PR. 

"We've been telling people for a long time that they shouldn't focus on PageRank so much; many site owners seem to think it's the most important metric for them to track, which is simply not true. We removed it because we felt it was silly to tell people not to think about it, but then to show them the data, implying that they should look at it." And many other places Google tells you to not worry about Page Rank.

Dalam sebuah posting bagkan disebutkan, "PR payah" (Pagerank sucks). "Pagerank is a metric that Google has said themselves, just “isn’t that big of a deal“. Google tell’s you not to obsess over page rank," tulis Sem Impact dalam "Ini alasan PR tidak berguna".

Masih kurang yakin? CB tambahin satu referensi lagi: "Alasan Page Rank tidak berguna buat SEO".

Kembali ke Anda, masih mau "berburu" Page Rank atau mengabaikannya saja. Tidak salah juga jika Anda meneruskan usaha mengejar PR tinggi, silakan saja, tidak ada larangan dan bukan pelanggaran. Yang jelas, Google sendiri sudah menegaskan: PageRank tidak penting lagi. (http://jurusampuhseo.blogspot.com).*