Cara Mempercepat Loading Blog: Hapus CSS yang Tidak Digunakan

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

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:

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%.

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:

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://contohblognih.blogspot.com).*

Read more ...

7 Alasan Harus Menggunakan 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://contohblognih.blogspot.com).*

Read more ...

Cara Menghapus Tulisan Read More di Halaman Depan Blog

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):

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://contohblognih.blogspot.com/).*

Sumber:
Knowing Itech
PB Templates
All Blogger Tips

Read more ...

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://contohblognih.blogspot.com).*

Read more ...

Cara Pasang 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.

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:

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(http://1.bp.blogspot.com/-IWFniHoyd3A/T-YdTpaOuKI/AAAAAAAAG-0/tB_K-9hn02U/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/contohblognih" target="-blank">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=contohblognih" 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://contohblognih.blogspot.com/).*

Read more ...

Google Page Rank (PR) Tidak Penting Lagi 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 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://contohblognih.blogspot.com).*

Read more ...

Ini Dia Tips SEO yang Langsung Terbukti Hasilnya!

Ini Dia Tips SEO yang Langsung Terbukti Hasilnya. Rahasia Indeks Google!

BELUM lama ini CB share tentang sebuah tips SEO blog. Terbilang "sederhana", tapi ternyata, ini pengalaman CB nih, benar-benar terasa!

Hasilnya luar biasa! Maklum, tips seo itu 'kan sumbernya dari Google sendiri. Tips SEO Onpage.

Dalam sehari, jumlah pengunjung bertambah sekitar 200-an. Dalam seminggu, naik seribu lebih. Nah, dalam dua minggu, jumlah PageViews naik hingga 2000 lebih! Luar biadab, eh, luar biasa!

Itulah fungsi utama tips SEO. Mengoptimalkan posting blog kita agar mendapatkan peringkat yang baik di mesin pencari, bahkan bisa tampil di urutan nomo satu SERP Google.

Makin tinggi posisinya, makin tinggi pula potensi menarik pengunjung. Secara gitu, postingan yang ada di halaman depan Google itu masuk kategori konten berkualitas menurut Google.

CB jarang banget lho blogwalking, jarang komentar, apalagi komentas sampah (spam) dengan memasukkan link alamat blog dalam komentarnya, ihhhh... nggak banget deh!  CB fokus mengandalkan SEO (Onpage). Hasilnya, alhamdulillah, blog CB ramai pengunjung dan ramai komentar.

Nah, ingin tahu Ini Dia Tips SEO yang Langsung Terbukti Hasilnya itu? CB akan buka di Forum Blogger! Silakan gabung di sana, kita buka-bukaan di sana saja, sekaligus bebas menuliskan link blog Anda di sana. (http://contohblognih.blogspot.com/).*

Yuk, Gabung Forum Blogger Indonesia (FBI)!

Read more ...

Gambar Thumbnail Popular Post Pengaruhi Skor SEO

Gambar Thumbnail (Image Thumb) Widget Popular Posts Mempengaruhi Skor SEO versi Chkme. Jika Alternative (Alt) Text <img>-nya dibiarkan kosong, maka skor seo berkurang. (Rahasia Skor SEO 100%).

ALTERNATIVE teks (alt text) untuk gambar, image, atau foto sangat penting bagi SEO blog. ALT text <img> ini merupakan elemen utama bagi mesin pencari untuk mengidentifikasi sebuah gambar.

Mesin pencari mengindeks tag ALT text. Gambar yang menggunakan deskripsi dan kata kunci akan menjadikannya menempati peringkat yang baik di mesin pencari (SERP).

Baca juga: 5 Cara Optimisasi Gambar untuk SEO Blog

Image ALT text is one of the major elements in <img> tag which defines search engines what the image is about. Search engines index the ALT text. So the more descriptive and keyword rich image ALT text is, your image will rank better on search engines. (Blogger Tricks).

Contoh penggunaan alt tag: 

<img src='URL Gambar' alt='nama gambar'/>

<img alt='nama gambar' src='URL Gambar'/>

Eh.... judul posting ini 'kan soal Gambar Thumbnail Popular Post dan Skor SEO! Ok, kita bahas.

Gambar Thumbnail Popular Post Pengaruhi Skor SEO

Link gambar thumbnail (image thumbnail) widget Popular Posts itu biasanya sudah ada di dalam template, baik bawaan blogger (default template) maupun "third party" template atau yang dibikin para desainer template.

Masalahnya, tag alt text-nya masih kosong, seperti ini: <img alt=' ' src='url gambar'/> Nah, karena kosong, maka skor seo blog pun berkurang. Satu image missing descriptions mengurangi skor seo blog sekitar 3-4 poin, setidaknya itu menurut Chkme.

Hal itu CB alami saat mengecek skor seo tenplate New Johny Wuss V4 yang CB gunakan untuk blog CB Network. Saat dicek, skor seonya 89 dan ada pemberitahuan "missing descriptions" terhadap tiga gambar yang muncul di widget Popular Posts.

Missing Descriptions. For an image the description is fundamental. Correct this for a successful optimization. (Chkme)

Saat Popular Posts-nya diubah menjadi judul doang, skor seonya 100%. Artinya, ada missing tag alt tag di thumbnail image. Maka, CB lakukan perbaikan dengan menambahkannya di template. Just like this:

Menambah Alt tag di Gambar Thumbnail Popular Post untuk SEO

Aslinya, kode yang di-highlight kuning itu alt=' ' alias kosong. Diubah menjadi alt='thumbnail image' dan tralaaaaa...... skor seo NJW V4 tetap 100% saat di widget Popular Postnya disetting lenglap menampilkan judul, gambar, dan snippets (ringkasan/kutipan).

UPDATE!!!

1. Atas masukan dari Bung Achmad Muharya, di kolom komentar, CB juga jadi "tersadarkan", sebagaiknya alt tag yang kosong itu diganti dengan expr:alt='data:post.title' (agar alternative teksnya sama dengan judul posting) sehingga menjadi begini: expr:alt='data:post.title'
2. Satu lagi, kode border='0' yang ada setelahnya DIHAPUS saja. Kata orang-orang, kode itu useless dan mengurangi validasi CSS/HTML.

Silakan cek template Anda. Jika kosong, kontrakkan, eh... isi! Jika sudah ada isinya, biarkan, Anda beruntung!!! Good Luck! (http://contohblognih.blogspot.com).*

Read more ...

Mulai 23 Maret Google Blogger Akan Sikat Blog Porno

SEBAGAI blogger positif, CB menyambut baik kebijakan baru Blogger yang diumumkan sejak kemarin kepada para admin blogger: mulai 23 Maret 2015 Google Blogger akan menyikat habis blog berkonten pornografi, cabul, atau "konten dewasa".

Kebijakan itu dicantumkan dalam "Adult content policy on Blogger".

Anda yang mempunyai "blog porno" atau blog bisnis online berkonten pornografi untuk menarik pengunjung, siap-siap aja "gulung tikar".

Blog yang jelas-jelas menampilkan video seks vulgar alias "sexually explicit content" memang tidak dihapus sama sekali, tapi hanya akan otomatis menjadi "private". Hanya admin dan user tertentu yang bisa mengaksesnya.

"Sejak 23 Maret 25, Anda tidak akan bisa berbagi kepada publik gambar dan video seks vulgar atau menunjukkan gambar telanjang di Blogger," tulis Blogger.

Namun, Blogger memberi catatan, pihaknya masih membolehkan "gambar bugil" yang bernilai artistik serta dalam konteks pendidikan, dokumenter, atau ilmiah.

Note: We’ll still allow nudity if the content offers a substantial public benefit, for example in artistic, educational, documentary, or scientific contexts.

Khusus blog porno yang dibuat setelah 23 Maret 2015, Google akan menghapusnya atau melakukan tindakan lain.

Google meminta pengguna Blogger lama untuk segera menghapus semua konten melanggar aturan itu. Jika pengguna tetap keras kepala, Google sudah mewanti akan memaksa pengguna menghapusnya.

UPDATE!!!
https://support.google.com/blogger/answer/6177281?p=policy_update&rd=1

Nah, wahai para blogger, Google sudah mendukung banget blog positif dan anti-pornografi. Secara gitu, sekarang ini banyak blog yang mengandalkan konten porno, cabul, video b*kep, dsb. untuk menarik pengunjung.

Banyak juga iklan, khususnya iklan obat kuat, yang menampilkan grafis yang "sangat vulgar dan menantang", agar diklik pengunjung.

Kok CB tau, ya taulah... secara gitu, CB "bisa memantau" blog-blog yang menggunakan template hasil modifikasi. Makanya, CB juga tau kok para blogger menjijikkan yang suka menghapus credit link footer! (http://contohblognih.blogspot.com).*

Read more ...

Cara Mengatur Posisi Gambar (Foto) di Posting Agar SEO Friendly

TULISAN atau tips seo blog Cara Mengatur Posisi Gambar (Foto) di Posting Agar SEO Friendly ini CB buat usai "jalan-jalan" di twitter menyusuri hashtag #blog dan #blogging. Bagi CB, penempatan gambar ilustrasi yang seo friendly ini sesuatu yang baru.

credit: youbabymemummy.com

Tips SEO Image. Katanya, gambar, image, foto, atau ilustrasi itu harus kita posisikan setelah teks, misalnya di alinea kedua atau ketiga! Jangan simpan gambar di awal atau sebelum teks! Don’t put an image first.

Sebaiknya, sebelum memasukkan gambar, tulis dulu semacam "ringkasan" atau "lead" (teras, alinea pertama) dengan memasukkan kata kunci (keywords) yang jadi target.

Baca juga:  5 Cara Optimisasi Gambar untuk SEO Blog

Kebanyakan kita selama ini menempatkan gambar di awal posting. Benar 'kan? Itu tidak masalah dan kebanyakan blogger melakukannya.

Namun, ingat, mesin pencari --termasuk Google-- akan meng-crawl atau mengindeks bagian awal sebuah postingan! Karenanya, bagian awal tulisan harus mengandung kata kunci. Ya... contohnya kira-kira seperti awal postingan ini lah... Satu alienea, baru ada gambar.

Gambar yang diletakkan di awal posting tidak akan membantu SEO blog. Maka, awali posting Anda dengan alinea pendek (termasuk kata kunci), baru sisipkan gambar lengkap dengan "Title" dan "Alt Text" (Properties).

Siapa yang bilang begitu? Ini CB kutipkan selengkapnya. Ini kata "seorang tante" yang juga blogger di luar sana. Nama blognya juga "lucu": You Baby Me Mummy.

Don’t put an image first.  Lots of people, (myself included for a long time), put the image as the first thing in their posts.  The first thing in a post is what search engines will trawl and so this needs to include your keywords.  An image first won’t help as much in terms of SEO.  So start your post with a short paragraph (including keywords) then the image (with title on it if appropriate)... So a short paragraph containing your keywords, then your picture is the best way forward. (You Baby Me Mummy)

Itu dia sharing "si tante bule" yang menginspirasi sekaligus menjadi sumber utama posting "Cara Mengatur Posisi Gambar (Foto) di Posting Agar SEO Friendly" ini.

Make sense? Bagi CB, ya! Masuk akal banget. Bukankah selama ini juga banyak blogger, termasuk CB, yang suka "mengulang" judul posting di awal dan di akhir tulisan? Nyatanya, bagus 'kan buat SEO blog? Good Luck! (http://contohblognih.blogspot.com).*

Read more ...

Google Update Structured Data Testing Tool

SEJAK 15 Januari 2015, Google memperbarui Structured Data Testing Tool. Ini dia penampakannya. Blogger yang biasa berkunjung ke sana untuk mengecek blognya, pasti sudah tahu dong...!

Dalam pengumumannya di New Structured Data Testing Tool, Google menyatakan, penampilan terbaru ini lebih simple dan lebih baik.

Structured data markup helps your content get discovered in search results and across Google properties. We’re excited to share several updates to help you author and publish markup on your website: 

• A new Structured Data Testing Tool to better reflect Google’s interpretation of your content

• Improved documentation and policy guidelines for Google features powered by structured data on the web.

• Expanded support for the JSON-LD markup syntax

Beberapa Demo Template Blog yang tadinya ada error, di alat uji yang baru ini jadi hilang atau dinilai tidak error.

Blog Demo Johny Wusss misalnya, di alat lama ada error author dan update. Kini "tidak ada masalah". (http://contohblognih.blogspot.com/).*

Read more ...

Cara Menampilkan Tulisan di Blog yang Baik & User Friendly

BANYAK blogger yang menulis, menyajikan, atau menampilkan posting "asal jadi" di blognya. Kurang memperhatikan "aturan main" tampilan naskah teks di internet (media online).

Akibatnya, tulisan atau postingannya "bertumpuk", tidak enak dibaca, bikin pusing mata, alias tidak user friendly.

Tulisan ini sekadar "penegasan" atas posting sebelumnya: Format Posting Blog yang Baik.

Ini Dia Aturan Main Tampilan Tulisan (Naskah) yang Baik di Internet, Website, atau Blog:

1. No Indent

Tidak ada awal kalimat yang menjorok ke dalam. Perhatikan gambar di atas. Tidak ada tekuk atau menjorok ke dalam seperti berita koran atau tulisan makalah ilmiah dan surat resmi. 

Biasanya, jika ada posting yang menggunakan indent, itu adalah COPAS tugas kuliah, makalah, atau copas tulisan dari MS Word. Termasuk salah satu ciri "blogger amater" alias "newbie". Bakalan susah diterima Google Adsense tuh!

Ini contoh naskah tulisan yang ada tekuk ke dalam. Ini tampilan media cetak, koran, atau buku, juga tampilan karya ilmiah/makalah. Tidak cocok untuk blog atau situs web.

2. Align Left

Gunakan Rata Kiri agar lebih mudah discan (dipindai). Perhatikan gambar di atas. Tampilan naskah sebelah kanan lebih enak dibaca ketimbang yang sebelah kiri. (Silakan simak: Best Way to Align Text on The Web).

Tampilan naskah rata kiri bisa disetting di template. Cari saja kode "text-align:justify;" dan ganti dengan "text-align:left;".

3. Short Paragraph

Gunakan alinea Pendek. Idealnya, maksimal 5 baris per alinea. Hasil penelitian menunjukkan, alinea pendek lebih mudah dipindai dan dibaca. 

Alinea panjang, apalagi "bertumpuk", sulit dibaca dan tidak user friendly. Akibatnya, pengunjung tidak akan kembali karena tampilan naskah di blog gak enak dibaca.

Perhatikan contoh terbaik sajian naskah tulisan di BBC Indoensia ini. Enak 'kan? Alineanya bahkan ada yang cuma satu kalimat! Bandingkan dengan tulisan di blog Anda :)

4. White Space

Ada jarak/spasi antar alinea, seperti naskah di BBC di atas. "Ruang putih" antar-paragraf ini sangat penting intuk kenyamanan mata user. Naskah jadi mudah dipindai (scannable) dan tentu saja user friendly.

5. Highlights

Usahakan ada variasi huruf tebal (bold), miring (italic), warna, "quoted" (kutipan), terutama jika naskah/tulisannnya panjang.

6. Bullet & Numbering

Naskah posting berupa tips, tutorial, atau panduan lebih baik disajikan dalam bentuk bullet and numbering.

Sebagai referensi, silakan simak cara menulis yang terbaik di website atau blog di NN Group.

Apakah tulisan di blog Anda sudah memenuhi kriteri di atas? Jika belum, silakan edit. Jika maerasa malas edit, dan merasa gak apa-apa, silakan saja.... Bukan pelanggaran pidana kok! Yang pidana mah koruptor yang harus dihukum mati. #SaveKPK !!! (http://contohblognih.blogspot.com).*

Read more ...

Kepada Yth. Para Admin Blog Penjual Obat

Kepada Yth. Para Admin Blog Penjual Obat. Setiap hari di antara Anda adaaaaa saja yang nyepam alias nulis komentar spam cendeung sampah (junk comment) di blog ini.

Bahkan, kadang ada 10 komentar spam di 10 posting berbeda!

CB kasian aja. Sudah diingatkan di pesan komentar, jangan nyepam dan jangan sertakan link/nama blog dalam isi komentar, karena otomatis tidak akan muncul dan/atau dihapus.

Ini sekadar contoh komentar spam dari salah satu di antara Anda, wahai para admin penjual obat online:

• Mantaap gan infonya :) Ditunggu info yang bermanfaat lainnya Izin share ya http://...../ http://..../ on Cara Membuat Tabbed Content di Sidebar Blog.
• Mantap dah artikelnya gan... http://jualobatherbalnaon.... http://obatherbalesexmasdukanaon...
• Ini gan yang saya cari, keren, terimakasih http//jualobatantikomentarspam....

CB buat "surat terbuka" ini karena kasihan dan "simpati" banget sama Anda. Capek-capek "blogwalking" dan tulis komentar, namun tak satu pun muncul. 

Maka, demi Stabilitas Nasional dan Keutuhan Negara Kesatuan Republik Indonesia (NKRI), juga demi #SaveKPK dan #HukumMatiKoruptor, segera hentikan kebiasaan nyepam alias nulis komentar spam di blog ini maupun di blog lain.

Siapa yang mengajari Anda-Anda untu rajin blogwalking dan nyepam? Jika Anda mau menjadi "murid" CB dalam hal komentar di blog orang lain, maka silakan klik "cara komentar di blog".

Semangat Anda sungguh luar biadab, eh... luar biasa! Setiap hari Anda nulis komentar di blog CB dan blog-blog lain yang nge-link ke CB. Luar binasa, eh... luar biasa!!! 

Namun, apa daya.... komentar Anda gak bisa muncul sesuai dengan peraturan perundangan yang berlaku berdasarkan Pancasila dan UUD '45 yang dituangkan dalam SK CB No. 00/Kom/X/2014 sebagaimana tercantum dalam Pesan Komentar.

Para Admin Blog Penjual Obat yang sama-sama ingin banyak pengunjung atau pembeli. Marilah kita bangun blogging yang sehat dan beradab. Bwahahaha..... lebay!!! Ringkasnya, jangan nyepam terus woiiiii!!!!! Percuma!!! (http://contohblognih.blogspot.com/).*

Read more ...

Mengatasi Gambar Salah (Tidak Muncul) Saat Posting Share ke Facebook

Cara mengatasi gambar (thumbnail image) posting blog yang salah atau tidak muncul saat share ke Facebook.

KADANG bahkan sering, saat posting atau tulisan di-share ke Facebook, gambar yang nongol di Facebook bukan foto yang ada di tulisan, tapi yang lain. Kadang juga yang muncul cuma judul doang.

Kalo soal mengatasi judul doang yang muncul, sudah ada solusinya:  Memunculkan Deskripsi (Alinea Pertama) Posting di Share Facebook.

Share ke Facebook merupakan salah satu trik SEO untuk mengundang pengunjung dan menyebar link ke blog kita, minimal "link effect".

Mengatasi Gambar Salah (Tidak Muncul) Saat Posting Share ke Facebook

Untuk memunculkan gambar, foto, atau image posting yang benar di Facebook, lakukan dua hal ini:

1. Pastikan gambar yang diupload berukuran minimal 200x200 Pixel atau lebih besar.
2. Tambahkan kode meta tag "Open Graph Image Property" berikut ini ke dalam template Anda.
3. Copas kode berikut ini bagian kode <head> di bawah kode <b:include data='blog' name='all-head-content'/> 

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl 'property='og:image'/>
<b:else/>
<meta content='URL Alternate Image' property='og:image'/>
</b:if>

4. Ganti URL Alternate Image dengan link gambar yang akan muncul jika postingan tidak ada gambarnya.

Ingat, ukuran gambarnya juga minimal 200 x 200px.

5. Save!

Facebook butuh waktu sekitar 24 jam untuk mengenali perubahan itu di blog Anda. Namun, kita bisa mempercepatnya dengan memasukkan salah satu link posting sekalius mengetesnya di  Facebook's Open Graph Debugger Tool. Good Luck! (http://contohblognih.blogspot.com).*

Sumber

Read more ...

Cara Mengatasi Pesan Komentar yang Ada di Bawah Kolom Comment

KADANG ada template yang pesan komentar (comments message)-nya ada di bawah Kotak Komentar (Comments Box). Tips berikut ini panduan mengubah posisi atau cara mengatasi agar pesan komentar berada di atas kotak komentar.

Kalau pesan komentar ada di bawah kolom komentar, pesan itu mungkin tidak terbaca atau dibacanya belakangan setelah pengunjung menulis komentar.

Jika ada di atas kolom komentar, tentu saja akan dibaca dulu oleh komentator sehingga pesan kita nyampe dan pengunjung akan berkomentar sesuai dengan "aturan main" admin blog yang dikomentarinya.

Ini penampakan pesan komentar yang tadinya ada di bawah kolom komen:

Ini penampakan pesan komentar setelah diperbaiki, seperti juga bisa dilihat di blog CB ini.

Cara Mengatasi Pesan Komentar yang Berada di Bawah Kotak Komentar

1. Template > Edit HTML
2. Temukan atau Cari (Ctrl+F) Kode:

<b:includable id='threaded-comment-form' var='post'>

Akan tampak rangkaian kode seperti di bawah ini:

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

3. GANTI / Replace semua kode di atas dengan kode berikut ini:

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
<b:else/>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

4. Temukan kode:

document.getElementById(domId).insertBefore(replybox, null);

5. GANTI dengan kode berikut ini:

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

6. Save Template!

Kini pesan komentar Anda sudah pindah dan berada di atas kolom komentar. 

CARA MEMBUAT PESAN KOMENTAR

Pesan komentar (comment message) yaitu aturan main yang kita tentukan di blog tentang cara berkomentar, misalnya larangan nyepam, anjuran menggunakan akun Google Plus, dan sebagainya. Contohnya ada di bawah posting blog ini.

1. Setting > Posts and Comments

2. Isi kolom "Comments Form Message" sesuai dengan keinginan Anda!

3. Save Setting!

Demikian cara memperbaiki posisi pesan komentar plus cara membuat pesannya di Dashboard Blog. Good Luck!

Sumber

Read more ...

Cara Membuat Top Menu Bar Mirip Google

TOP Menu Bar atau bar navigasi menu di atas header blog menjadi salah satu trend desain website modern. Menu ini statis, sticky, alias floating (melayang), yakni tetap muncul saat discroll. Ini penampakannya:

Tips Cara Membuat Top Menu Bar Mirip Google ini melengkapi sekaligus alternatif dari posting sebelumnya tentang Cara Membuat Navigasi Menu di atas header atau  Top Nav Menu Mirip Facebook.

Cara Membuat Top Menu Bar Mirip Google (Google Style Top Fixed Menu Bar)

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

.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}

.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}

.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}

.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}

.menu ul li{
padding:0;
float:left;
}

.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}

.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;

/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}

.active ul{
display:block !important;
}

.single ul{
display:block !important;
}

.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;

/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}


/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}

.active a:hover{
background-color:white;
color:#3366CC;
}

.active ul a:hover{
background-color:#e4ebf8;
}

.active ul a{
border:0 !important;

/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}

.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}

.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}

3. Copas kode berikut ini di bawah kode <body>

<div class="menu">
<ul>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="http://plus.google.com">+You</a>
</li>
<!-- Using class="current" for the link of the current page --> <li class="current">
<a target="_blank" href="#">Web</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="#">Drive</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="http://gmail.com">Gmail</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="https://www.google.com/calendar">Calendar</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="https://docs.google.com">Documents</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
</li>
<li><!-- Do not add any class for links with dropdown --> <a href="#">More<span class="arrow"></span></a>

<!-- Drop Down menu Items --><ul>
<li><a href="http://www.google.co.in/reader">Reader</a></li>
<li><a href="https://sites.google.com">Sites</a></li>
<li><a href="http://groups.google.co.id">Groups</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.id">Images</a></li>
<li><a href="http://maps.google.co.id/maps">Maps</a></li>
<li><a href="http://translate.google.co.id/">Translate</a></li>
<li><a href="http://books.google.co.id">Books</a></li>
<li><a href="http://scholar.google.co.id/">Scholar</a></li>
<li><a href="http://blogsearch.google.co.id">Blogs</a></li>
<li>

<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
<li>
<div class="mid-line">
</div>
</li>
</ul>
</li>
</ul>
</div>

Ganti nama-nama dan link menu!

4.  Copas kode berikut ini di atas kode </head>

UPDATE!!! Kode sudah diperbaiki! No Error Again Lah...!!!

<script>
$(function ($) {
$.fn.fixedMenu = function () {
return this.each(function () {
var menu = $(this);
$("html").click(function() {
menu.find('.active').removeClass('active');
});

menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass('single-link') &amp;&amp; !$(this).parent().hasClass('current')) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
//displaying the drop down menu
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
}
else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find('.active').removeClass('active');
}
})
});
}
})(jQuery);
</script><script>
$('document').ready(function(){
$('.menu').fixedMenu();
});
</script>

4. Save Template!

Kini Top Menu Bar Mirip Google sudah muncul di atas header blog Anda.

Top Menu Bar Cara CB (Recommended!)

Bagi CB, setelah ujicoba, cara Membuat Top Menu Bar Mirip Google dari Lab Strike di atas agar "ribet" dan terlalu banyak kode.

CB rekomendasikan Anda mengggunakan cara berikut ini yang lebih simple. Tinggal ganti atau tambah aja nama-nama menunya dengan menu-menu mirip Google Top Bar itu.

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

<!-- Static Top Menu Bar Google Style -->
* html #top{position:absolute}
#top {margin: auto;padding:0 10px 15px 10px;width: 100%;background: #2d2d2d;border-bottom: 2px solid #777;z-index: 100;height: 20px;}
#top-wrap {margin:auto;padding: 0;width: 950px;background:#2d2d2d;}
#navwrap {margin: 0px auto; width:100%; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-size:13px;display:block;padding:10px 10px;color:#f2f2f2;text-decoration:none;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#444; color:#f2f2f2;}

3. Copas kode berikut ini tepat di bawah kode <body>

<div id='top' style='position:fixed'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
  <li><a href='#'>Google Plus</a></li>
  <li><a href='#'>Gmail</a></li>
  <li><a href='#'>Tips SEO</a></li>
  <li><a href='#'>Desain</a></li>
  <li><a href='#'>Posting</a></li>
  <li><a href='#'>Free Templates</a></li>
  <li><a href='#'>Naon Deui</a></li>
  </ul>
</div>
</div>
</div>

4. Tambahkan kode padding-top: 45px; dalam kode .header-wrapper atau #header-wrapper

Contoh:
.header-wrapper {padding-top: 45px; ... }

Itu dia Cara Membuat Top Menu Bar Mirip Google untuk mempercantik blog sekaligus membuat navigasi menu tambahan dan internal link. Good Luck! (http://contohblognih.blogspot.com).*

Read more ...

New Thesis SEO V3 - Template Blog SEO Friendly Terbaru 2015

New Thesis SEO V3 - Template Blog SEO Friendly Terbaru 2015. Setelah meluncurkan New Johny Wuss V3, CB luncurkan New Thesis SEO V3, update dari New SEO Thesis V1 dan New Thesis SEO V2.

Alasan update sederhana saja, banyak pengguna yang minta tampilan New SEO Thesis V1 tapi Responsive. Beberapa update dan perbaikan juga dilakukan sehingga LEBIH bersahabat dengan mesin pencari.

Tidak banyak basa-basi lagi, ini dia penampakan dan data New SEO Thesis V3 yang tentu "lebih" SEO Killer untuk mendongkrak ranking dan trafik (pengunjung) blog Anda.

JUARANYA TEMPLATE SEO & SIMPLE !!!

SEO Score for http://newthesisseov3.blogspot.com/
100 %
Congratulations!

Fitur:

Responsive - Mobile Friendly

Drop Down Navigation Menu

SEO Heading Tags

Fast Loading

Markup Schema Ready

SEO Breadcrumbs

No Error at Rich Snippet Google

SEO Meta Tags (Dynamic SEO Meta Tags)

Easy Customized Design

Simple, Minimalis, Ringan!

New Thesis SEO V3 - Template Blog SEO Friendly Terbaru 2015

Live DEMO

DOWNLOAD

Read more ...

Cara Membuat Navigasi Menu Bar Statis di Footer Blog

SEBENARNYA menu bar gak pas disebut navigasi menu. Bahasa Inggrisnya "Floating Sticky Footer Bar", setidaknya menurut Help Blogger yang membagikan tips desain mempercantik blog ini.

Contoh atau demonya bisa Anda lihat di CB Blogger Lab. Lihat bagian bawah, bagian Footer. Kayaknya bisa juga dipasang di atas blog, seperti dalam tips Membuat Toolbar di Atas Header Blog.

Footer bar statis ini, selain mempercantik blog, juga menambah menu navigasi dan elemen lain yang ingin kita tonjolkan di halaman depan. Kelebihannya, static footer menu bar ini bisa dihilangkan oleh pengguna jika meras tertanggu, dengan satu klik saja.

Cara Membuat Navigasi Menu Bar Statis di Footer (Sticky Footer Bar)

1. Seperti biasa, awali dengan klik "Template" > "Edit HTML".
2. Copy & paste kode berikut ini di atas kode ]]></b:skin>

#custom-toolbar {overflow: auto;position: fixed;

background: #1B1B1B url("http://1.bp.blogspot.com/-0XYBiDXh7Vo/Uupp-CQrhJI/AAAAAAAAF_8/qKBKfmooBVQ/s1600/pagelist.png") repeat-x scroll 0 bottom;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
height: 33px;margin: 0 auto;width: 100%;bottom:0px;right:0;}

.close-toolbar {float: right;margin-top:6px;padding-right: 10px;cursor: pointer;}
.search-text {color: #D1D1D1;text-align: center;border-radius: 10px;}

.google_translate:hover img {filter:alpha(opacity=0.90);-moz-opacity: 0.90;opacity: 0.90;border:0;}

3. Copy & paste kode berikut ini di atas kode </head>

<script type='text/javascript'>
// Custom Toolbar for Blogger (helplogger.blogspot.com)
//<![CDATA[
var toolbar_blogger = new Array();
var toolbar_clear = new Array();
function toolbarFloat(toolb) {
toolbar_blogger[toolbar_blogger.length] = this;
var ftrpointer = eval(toolbar_blogger.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolbar_blogger[toolbpointer]);
var toolbbar = 'toolbar_clear['+toolbpointer+'] = setInterval("toolbarFloatInit(toolbar_blogger['+toolbpointer+'])",1);';
toolbbar = toolbbar;
eval(toolbbar);
}

function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}

return toolbTotOffset;
}

function toolbarFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}

function closeTopAds() {
document.getElementById("custom-toolbar").style.visibility = "hidden";
}
//]]>
</script>

4. Terakhir, Copy & paste kode berikut ini di atas kode </body>

<div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='http://1.bp.blogspot.com/-eGh5FWRNbHo/Uvf_Q2nYXLI/AAAAAAAAGDs/8Q2pMCs2OsU/s1600/close_button.png' title='Close' width='17'/>
<table border='0' cellpadding='2'>
<tr>

<td style='padding-left:30px; padding-right:50px;'><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>

<input class='search-text' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form></td>

<td style='padding-left:20px;'><a href='http://facebook.com/cbblogger' title='Follow on Facebook'><img src='http://4.bp.blogspot.com/-qF-13gWPCho/Uvftq1v5ApI/AAAAAAAAGCo/hoFWKPCSUro/s1600/facebook-icon.png'/></a></td>

<td><a href='http://twitter.com/contohblog' target='_blank' title='Follow on Twitter'><img src='http://4.bp.blogspot.com/-OSxpeBNLK4A/UvfuiIkU5RI/AAAAAAAAGC4/Cq4TdM5fmhs/s1600/twitter-icon.png'/></a></td>

<td><a href='http://feeds.feedburner.com/contohblognih' target='_blank' title='Subscribe to Feed'><img src='http://1.bp.blogspot.com/-wRI1rmbhV0M/Uvfvq5ZBMjI/AAAAAAAAGDU/6BSlAgac3sw/s1600/rss-feed-icon2.png'/></a></td>

<td style='padding-left:40px; padding-top: 5px;'><a class='twitter-share-button' data-count='horizontal' data-lang='en' href='http://twitter.com/share' target='_blank' title='Publish on Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><a href='http://www.facebook.com/sharer.php' target='_blank' name='fb_share' title='Publish on Facebook' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>

<td style='padding-left:60px;'><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cen&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='http://1.bp.blogspot.com/-sXhoGx5s2dg/T5xOeRCOuYI/AAAAAAAAARo/ldYJIGQldwQ/s1600/United+Kingdom(Great+Britain).png' width='24'/></a></td>

<td><a class="google_translate" href='Javascript:void(0)' onclick="window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cde&amp;hl=en&amp;ie=UTF8&quot;); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/-nX0ktPsJQTA/T5xOMiiOGQI/AAAAAAAAARY/VXhAPARvh9E/s1600/Germany.png" width="24"/></a></td>

<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cfr&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='http://2.bp.blogspot.com/-aklFaq6pPeQ/T5xOV1mPbcI/AAAAAAAAARg/CcBmt1ptN88/s1600/France.png' width='24'/></a></td>

<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Car&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='http://3.bp.blogspot.com/-cx9e66I48yM/T5xM9L7uzoI/AAAAAAAAAQY/ftpOVX9YZEE/s1600/Saudi+Arabia.png' width='24'/></a></td>

<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Czh-cn&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Chinese Simplified'><img align='absbottom' alt='Chinese Simplified' border='0' height='24' src='http://1.bp.blogspot.com/-eXup49w042c/T5xMxliSlmI/AAAAAAAAAQQ/v9efq8I4TI0/s1600/China.png' width='24'/></a></td>

</tr>

</table>

</div>

Jika mau menghilangkan menu atau link, hapus saja kode antara <td> ... </td>.  

Demikian juga jika mau menambah menu atau link baru, tinggal tambah dengan diapit kode <td> dan kode penutup </td>.

Demikian Cara Membuat Navigasi Menu Bar Statis di Footer Blog. Boleh dicoba. (http://contohblognih.blogspot.com).*

Sumber

Read more ...