Website Iklan Tayang Selamanya
Promo spesial hari ini posting iklan di situs web Iklan Jawa Barat murah sekali
setidaknya satu iklan Anda harus ada di Iklan Jawa Barat unikbaca.com ini, agar pengunjung
atau pengakses dapat mencari dan tahu usaha Anda, posting iklan di Iklan Jawa Barat murah
🎁 Hari ini sebar iklan massal murah ke 1.050 web! DISKON!

Tampilkan postingan dengan label Desain Blog. Tampilkan semua postingan
thumbnail

Cara Menghindari & Mengatasi Komentar Spam di Blog

Komentar Spam di Blog
Banyak cara mengatasi komentar Spam di Blog, mulai dari menghapus link otomatis dengan kode css & script anti-spam hingga settingan kolom komentar.

SPAM merupakan musuh para blogger. Komentar Spam mengotori blog. Komentar spam (spam comment), umumnya berupa link hidup (live link) atau tautan aktif (active link), masuk kategori komentar sampah (junk comment). Blogger yang suka nyepam dan 'nyampah" antara lain penjual obat online, setidaknya di blog CB ini.

Jangan pernah biarkan komentar di blog Anda muncul secara otomatis. Harus dimoderasi. Seiring perkembangan bisnis online, berkembang pula "strategi pemasaran" dengan cara nyepam atau nyebar link.

Komentar spam merusak reputasi blog Anda, juga blog spammer. Komentar spam juga bisa menurunkan SEO blog Anda jika link aktif mengarah ke blog "berkualitas rendah".

Tips Mengatasi Komentar Spam dari Google

Sebagai pemilik blogger, Google sudah membantu para blogger mengatasi komentar spam secara otomatis. Google juga memberikan panduan mengatasi komentar spam dalam Prevent unwanted comments and comment spam.

Dengan panduan ini, jelas sekali Google juga benci banget sama komentar spam. Makanya, tadi diebutkan menurunkan ranking seo dan reputasi blog di mata mesin pencari dan pengguna.

Menurut Google, semua link di kolom kementar menggunakan tag rel="nofollow". Dengan begitu, komentator spam tidak akan mendapatkan PageRank (they'll receive no PageRank boost). Google menyarankan kotak komentar dimoderasi.

Melindungi Blog dari Komentar Spam: Moderasi Komentar

Untuk memoderasi komentar yang masuk, maka lakukan setting berikut ini:
1. Settings > Posts and comments
2. Comment moderation > Always!

Hapus Otomatis Komentar Spam: Pasang Kode

Banyak sekali kode anti-komentar spam yang dibagikan sejumlah blogger. Kita bisa memilih salah satu saja yang berfungsi.

1. Template > Edit HTML
2. Copas salah satu kode di bawah in di atas kode </body> 

<script type='text/javascript'>
$(function() {
    $('#comment-holder p').find('a').remove();
});
</script>

ATAU

<script>
$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>

ATAU

<script type='text/javascript'>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script>

ATAU

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> No SPAM Here!!!";
            content[i].className = "spammer-detected";
        }
    }
}
blockLinks('comment-holder', 'p');
//]]>
</script>

Bingung? Pilih saja kode terakhir, ditambah kode CSS di bawah ini, biar mantap!

Kode CSS Anti Komentar Spam

Ada juga kode css anti komentar spam. Link hidup atau tautan aktif tidak akan muncul. Kode ini hanya menyembunyikan link, bukan menghapusnya.

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

#comment-holder p a {display:none;}

ATAU

.comment-content a {display: none;}

Itulah ragam Cara Menghindari & Mengatasi Komentar Spam di Blog, demi keamanan nasional dan keutuhan negara kesatuan blogger Indonesia. Merdeka! (http://contohblognih.blogspot.com/).*

Sumber:
  • https://www.linkedin.com/pulse/20140613095244-132778290-how-to-automatically-remove-spam-links-from-blogger-comments
  • http://www.dte.web.id/2012/07/no-live-links.html
  • http://www.mybloggerlab.com/2014/05/how-to-automatically-remove-spam-links-from-blogger-comments.html
  • http://www.bloggingtipsandtricks.com/2014/05/prevent-spam-comments-blogger.html (ilustrasi)
thumbnail

Featured Post Image Slider untuk Blog - Manual dan Otomatis

Featured Post Image Slider
Cara Membuat atau Memasang Featured Posts Image (Content Slider Carousel) untuk di Halaman Depan Blog Blogspot.

MEMASANG, menampilkan, atau membuat Featured Content Post Image Slider (Carousel) untuk blog tidak disarankan oleh sebagian pakar SEO dan Web Usability.

Pasalnya, selain membuat berat loading blog (karena ada javascript dan gambar), posts slider juga tidak user friendly.

Slider akan membuat "silau" mata pengunjung. Slider juga jarang diklik. Sejumlah studi dan survei tentang slider di web menunjukkan, slider yang diklik pengunjung hanya di bawah 1%. Itu pun yang diklik hanya gambar pertama.

CB sudah share soal featured content slider ini:  Featured Content Slider di Homepage Blog Tidak Bagus buat SEO.  Namun, toko online atau blog foto kayaknya cocok pake Featured Slider, asalkan diatur slide-nya jangan terlalu cepat dan lebih baik di-off-kan otomatis slidenya.

Btw... posting ini "sekadar" menyimpan dokumentasi. Soalnya, suka adaaaaa aja klien Layanan Premium CB yang "keukeuh" ingin memasangnya, meski sudah dikasih tau.

Cara Membuat Featured Post Slider Manual

Tutorial Featured Post Slider Manual sangat banyak bahkan kebanyakan. Salah satunya ada di Windows Reloded. Sebanyak 17+ lainnya ada di Blogspot Tutorials.

Yang dimaksud "manual" adalah kita harus memasukkan link gambar, link posting, judul, dan deskirpnya satu per satu di widget Featured Content Slider ini. Ribet bener! Tapi gampang banget pasangnya. Silakan cek cara memasangnya ada di kedua link tadi.

Cara Memaang Featured Post Slider Otomatis

Yang dimaksud otomatis adalah kita gak perlu pasang satu per satu gambar, link, dan judul di widget ini. Gambar plus link dan judul akan muncul otomatis, bisa posting terbaru, bisa juga per label (kategori tertentu).

Yang otomatis sudah di-share dari maskolis. Featured post di halaman depan atau ala New Johy Wuss juga sudah. Berikut ini ada dua lagi sebagai tambahan dan alternatif:

Featured Image Slider Otomatis #1
Yang ini dari Help Blogger. Tampilannya keren banget, beda dengan yang biasa. Silakan klik link tersebut untuk detailnya.

Featured Image Slider Otomatis #2
Yang ini dari DTE. Demonya bisa dilihat di halaman depan Cara CB. Caranya gampang banget.

1. Layout → Add Widget → HTML/JavaScript
2. Copy & Paste kode berikut ini:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
.slider-rotator {
  width:430px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 13px/1.4 Arial,Sans-serif;
  color:white;
  border:1px solid black;
}
.slider-rotator .slider-item {
  background-color:white;
  height:240px; /* Same with `.slider-rotator` height */
  padding:0 0;
}
.slider-rotator h4 {margin-top:0;color:#ff6}
.slider-rotator p {margin:2px 0 0}

/* Slider details as caption */
.slider-rotator .detail-wrapper {
  position:absolute;
  top:auto;
  right:0;
  bottom:0;
  left:0;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  padding:.5em 1em;
  z-index:4;
}
.slider-rotator-nav {
  text-align: center;
  background: #777;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
    makeSlider({
    url: "http://cara-cb.blogspot.com", // Your blog URL
    thumbWidth: 430 // Thumbnail width in pixels (same with slideshow width)
});
</script>

3. Ganti alamat blog warna merah dengan alamat blog Anda.
4. Save!

Itu dia ragam cara membuat Featured Post Image Slider untuk Blog, baik versi manual maupun otomatis. Sekali lagi, NOT RECOMMENDED untuk blog pribadi atau yang fokus ke loading blog yang cepat. (http://contohblognih.blogspot.com).*
thumbnail

Cara Membuat Sitemap Daftar Isi Blog Fast Loading

Daftar Isi Blog Fast Loading
DI era serba cepat, tentu banyak blogger yang mencari kode sitemap atau daftar isi (table of content) blog fast loading alias ringan, cepat, bin nggak lambat.

Ada? Bisa dikatakan: tidak ada! Pasalnya, yang namanya daftar isi, tentu membutuhkan waktu untuk tampil.

Sang kodok, eh... sang kode, membutuhkan waktu untuk "memanggil" satu per satu posting yang ada. Apalagi jika posting blognya sudah ratusan atau ribuan.

Kalo postingnya cuma 5 biji, misalnya, dijamin cepat!

Jadi, klo ada yang "ngaku" punya script daftar isi fast loading, jangan percaya dulu, cek aja kodenya, pasti sama saja dengan kode lainnya.

Jenis-Jenis Tampilan Daftar Isi
Sebelumnya CB sudah share dua tips cara membuat daftar isi versi simple dan versi tabulasi.

Desain tampilan Daftar Isi Blog bermacam-macam. Terpopuler adalah daftar isi simple, gaya tabulasi, dan model accordion. Anda bisa bandingkan loading time ketiganya dengan melihat demonya berikut ini:

  1. Daftar Isi Blog Versi Simple 
  2. Daftar Isi Blog Gaya Tabulasi
  3. Sitemap Gaya Accordion

Cara Membuat Sitemap Daftar Isi Blog Fast Loading

Meski daftar isi fast loading tidak ada yang bisa fast loding, namun kita bisa "berusaha" mengurangi beban loadingnya dengan cara:

Cara 1 : Menyimpan Sendiri Kode JavaScriptnya

Sebagai contoh, misalkan kita menggunakan kode sitemap simple. Kode aslinya seperti ini:

<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-
results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

1. Buka link file javascript tersebut dengan cara copas ke address bar.
2. Copas semua kode yang terbuka
3. Paste di Notepade
4. Klik Save!

5. Tulis nama file dengan menambah .js  di belakangnya (misalnya: simplesitemap.js)
5. Pilih Save as type: All Files
6. Encoding: UTF-8
7. Klik Save!

8. Buka situs penyimpanan javasrcipt seperti Your Java Script.
9. Upload file yang disave tadi.
10. Buka inbox email. Akan ada link file JS Anda untuk me-replace link JS yang lama.

Cara 2 : "Ekstrak" Kode JavaScriptnya
1. Lakukan langkah no.1 & 2 di atas
2. Simpan langsung kode yang ada dalam kode sccript seperti ini:

<script type="text/javascript">

Paste Kode JavaScript di Sini

</script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-
results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Setahu CB yang "newbie" ini, hanya dua cara itulah untuk Cara Membuat Sitemap Daftar Isi Blog Fast Loading. Lainnya, semoga ada yang bisa share di kolom komentar. Good Luck! (http://contohblognih.blogspot.com).*
thumbnail

Cara Menambah Gambar Ikon di Navigasi Menu Blog

Gambar Ikon di Navigasi Menu Blog
Cara Menambah Gambar Ikon di Samping Daftar Navigasi Menu Blog

BANYAK template blog menggunakan ikon, simbol, atau gambar kecil di samping navigasi menu. Misalnya, menu HOME dilengkapi ikon rumah dan menu KONTAK disertai ikon gambar telepon atau email.

Dengan begitu tampilan blog tampak terkesan lebih profesional. Namun, jadinya "rame" dan mengurangi "clean" dan ke-simple-an blog. CB sendiri tidak memasangnya dengan alasan itu plus bisa mengurangi loading blog.

Bagi Anda yang ingin menambahkan gambar di samping daftar Menu blog, berikut ini caranya. Anda juga bisa langsung ke sumber tips ini.

Kita ambil contoh tiga menu atau halaman statis (static page): Home, About, dan Kontak. Kode link menunya umumnya seperti ini:



<div id="menu-items">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/kontak">Kontak</a></li></li>
</ul>
</div>

1. Tambahkan kode <span class> sehingga menjadi begini:


<div id="menu-items">
<ul>
<li><span class="home"><a href="/">Home</a></span></li>
<li><span class="about"><a href="/p/about.html">About</a></span></li>
<li><span class="contact">;<a href="/p/kontak">Kontak</a></span></li></li>
</ul>
</div>

2. Saatnya membuat link URL gambar ikon.

* Pilih gambar ikon yang dikehendaki, ukurannya disesuaikan dengan lebar dan tinggi area navigasi menu, sekitar 30x30 Pixel.

* Upload gambarnya ke Picasaweb Album di akun Blogger Anda

* Copas url link gambarnya dan simpan di kode-kode seperti ini:

#menu-items ul li {display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
#menu-items li span.home { background: url('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.about { background: url('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.contact { background: url('link gambar ikon di sini') no-repeat; padding: 0 0 0 20px; }

* Setelah link gambarnya terisi, Copas semua kode di atas dan tempatkan di atas kode ]]</b:skin>

3. Save template!

Kini, mestinya, menu blog Anda sudah disertai gambar ikon atau symbol. Kalo ternyata hanya bikin "rame" dan mengurangi "kebersihan" tampilan blog, gak usah dipasang, apalagi jika mengurangi keceparan loading. (http://contohblognih.blogspot.com).*
thumbnail

Mengatasi Remove Render-Blocking JavaScript untuk Loading Blog

Mengatasi Remove Render-Blocking JavaScript dan Optimize CSS Delivery
Cara Remove Render-Blocking JavaScript dan Optimize CSS Delivery untuk Mempercepat Loading Blog.

SAAT kita ngecek kecepatan loading blog di Google Page Speed Insights, suka muncul saran-peringatan "Harus Diperbaiki" (Should Fix) "Remove Render-Blocking JavaScript". Itu jika template blog kita ada JavaScriptnya. 

Google juga ngasih tau Cara Mengatasi Render-Blocking JavaScript itu sebagai berikut:

Ubah kode JavaScriptnya dari yang semula:
<script type="text/javascript" src="kode.js"></script>

MENJADI begini:

<script type="text/javascript">
/* Isi File JavaScript di Sini */
</script>

Contohnya, dari semula begini:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>

Diubah menjadi:
<script type="text/javascript">
/*! jQuery v1.8.3 jquery.com | jquery.org/license */
(function(e,t){function _(e) ... dan seterusnya dst... hingga (window);
</script>

Cara mengetahui isi kodenya: copas link http://........... min.js di address bar, akan muncul deretan kode js nan panjang bingits.

Optimize CSS Delivery

Se,ain itu, saran Google lainnya di Page Speed adalah Optimize CSS Delivery, yaitu mengubah kode CSS agar blog lebih fast loading. Caranya, masih dari Google, adalah sebagai berikut:

Conrohnya, kode CSS yang tadinya seperti ini:
<link rel="stylesheet" href="http://..... small.css">

Isi small css-nya dibuka dulu (copas link http://..... small.css di address bar) dan akan muncul, misalnya, kode seperti ini:

.blue {color: blue;}
Diubah Menjadi begini:

<style>
.blue{color:blue;}
</style>

Tutorial Mengatasi Remove Render-Blocking JavaScript dan Optimize CSS Delivery ini CB posting sekadar menyimpan salah satu dokumentasi tips mempercepat loading blog, biar gak buka Panduan Google terus jika butuh. 

Banyak template yang dimodif, di antaranya dengan cara di atas, sehingga loading time-nya lebih baik alias lebih fast loading. (http://contohblognih.blogspot.com).*
thumbnail

Cara Membuat Template Blog Sendiri

Cara Membuat Template Blog Sendiri
Membuat Template Blog Sendiri Itu Butuh Skills, Wawasan, Waktu, Tenaga, Pikiran. 

JIKA Anda ingin menggunakan template blog tanpa link credit, maka membeli template premium adalah langkah praktis. Namun, jika "males" beli template, meski template blog itu relatif murah, rata-rata 10-20 dolar saja (sekitar Rp100-200 ribuan), maka membuat template blog sendiri adalah solusinya.

Caranya?
Tunggu dulu. Kita harus faham dulu kode-kode yang digunakan membuat template. Terdiri dari tiga bagian:

  1. HTML
  2. CSS
  3. Script
HTML singkatan dari HyperText Markup Language, yaitu bahasa markup standar yang digunakan untuk membuat halaman web. Kita bisa belajar di HTML Introduction.

CSS itu Cascading Style Sheets, merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Selengkapnya bisa baca-baca di CSS Tutorial.

Script merupakan bahasa pemrograman. Selengkapnya bisa dibaca di Script in HTML.

Pusing Bin Bingung?
Makanye, hargailah para desainer template. Jangan hapus credit link mereka di blog Anda! 

Kita akan merasakan betul betapa nge-desain template itu butuh waktu, tenaga, pikiran, dan... skills! Orang-orang mah sampai kuliah jurusan teknik informatika lho untuk mendalamai kode-kode itu.

Cara Membuat Template Blog Sendiri

Tips ini sekadar pengantar aja. Kalo cuma nganter, 'kan bisa sampai pintu doang, setelah itu silakan yang diantarkan masuk sendiri. Yang nganter balik lagi, masih ada kesibukan lain... he he..

1. Masuk ke Dashboard Blog
2. Klik Template > Edit HTML
3. Select All dan HAPUS SEMUA kode yang ada di template bawaan blogger.

Setelah itu, silakan menuju ke TKP untuk panduan detail dan lengkap:

  1. Create Blogger Template from Scrath
  2. Blogger Template Design Scratch Section Widget

Yang bahasa Indonesia ada 'gak? Ada... Ini dia: Cara Membuat Template Sendiri.

Nah loh.... Susah 'kan Cara Membuat Template Blog Sendiri? Kalo gak bisa ya susah banget.... Tapi kalau bisa dan sudah terbiasa mah, ya... mudah. Good Luck! (http://contohblognih.blogspot.com).*
thumbnail

Variasi Tampilan Posting di Halaman Depan Blog - Judul, Gambar, Dua Kolom

halaman depan cb online store
Variasi Tampilan Posting di Halaman Depan Blog: Judul Saja, Gambar Saja, Dua Kolom Auto Readmore.

HALAMAN depan blog (beranda, home, homepage) merupakan "etalase". Di halaman depan inilah semua konten diperkenalkan dan mulai ditelusuri, meskipun kebanyakan pengunjung menemukan blog kita dari single post (single page) sebuah posting.

Banyak juga pengunjung yang awalnya membuka halaman dalam, lalu "penasaran" ingin tahu tampilan halaman depan blog yang dikunjunginya. Jika bagus, ia mungkin akan lebih lama di blog itu.

Ada banyak variasi tampilan halaman depan, mulai dari posting penuh hingga yang terpopuler digunakan: Auto Readmore Style.

Tampilan halaman depan autoreadmore pun macam-macam, ada yang berupa daftar judul, judul dan gambar (thumbnail image), judul plus gambar thumbnail dan ringkasan, ada yang satu kolom, ada juga yang dua kolom seperti tampilan blog CB ini.

Tips desain blog berikut ini akan berbagi kode dan cara membuat variasi halaman depan blog. Silakan pilih sesuai dengan selera.

Halaman Depan dengan Daftar Judul Posting Saja (1)

Homepage hanya judul posting, tanpa gambar dan tanpa ringkasan (summary/snippets). Source & Demo.

1. Template > Edit HTML
2. GANTI kode


<b:include data='post' name='post'/>

DENGAN

<!--Post Titles Only-->
<b:if cond='data:blog.pageType != "item"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Post Titles Only-->


3. Save Template!

Kini tampilan halaman depan blog Anda hanya judul posting. Fast Loading!

Halaman Depan dengan Daftar Judul Posting Saja (2)

Hasilnya akan sama dengan yang di atas, namun caranya berbeda. (Source & Demo.)

1. Template > Edit HTML
2. Copas kode berikut ini sebelum atau di atas kode </head>

<style type='text/css'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</b:if>
</style>

3. Save Template!

Halaman Depan dengan Gambar Thumbnail Saja

Dikenal dengan sebutan "grid posts", berupa gambar posting saja yang tampil dalam 2-3 kolom di halaman depan. (Sumber). Cocok untuk blog video, foto, atau toko online. Lihat DEMO

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

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var width = 200;
    var height = 170;
    var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0RSmwoXDv5s1zHzJD_3e5ucmaZPoh9PwUkelVF461aaYAjkeaPL06LKPWBzc964lYeGtM9mcIDKPNOr13gXfMN9TBPSkQgnUj7RqZnubtOWvpjcYgVxfGiD99fCRnft7LKUCA95Fp_Zo/s1600/no-thumb.png';
    var margins = "0px 0px 10px 10px";
    var fitThumb = 1;
    var titleTopPadding = 5;
    var titleBottomPadding = 8;
    var titleLeftRightPadding = 5;

    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper) {
        var wrapper = $(wrapper);
        var image = $(wrapper).find('img').first();
        var link = wrapper.parent().find('h3 a');
        var linkURL = link.attr('href');
        var linkTitle = link.text();

        $(link).remove();
        wrapper.empty();

        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');
            var thumbParent = $(image).parent();

            wrapper.append(thumbParent);

            if (fitThumb) {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width + '-c')
                    });
                image.attr('width', width).attr('height', height);
            } else {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width)
                    });
                image.attr('width', width);
                var changeHeight = (thumbHeight / thumbWidth * width).toFixed(0);
                image.attr('height', changeHeight);
            }

        } else {
            var image = $('<img>').attr('src', placeholder).attr('height', height).attr('width', width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }

        thumbParent.attr('href', linkURL).css('clear', 'none').css('margin-left', '0').css('margin-right', '0').addClass('postThumbnail');

        var thumbTitle = $('<div>').prepend(linkTitle).css('padding', titlePadding).css('opacity', '0.9').css('filter', 'alpha(opacity=0.9)').css('width', width).appendTo(thumbParent);
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top', '-' + summary + 'px');
        wrapper.css('float', 'left').css('height', height).css('width', width).css('margin', margins).css('overflow', 'hidden');
    });
    $('#blog-pager').css('clear', 'both');
});

function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length;++i) {
        images[i].onmouseover = function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}

if (window.addEventListener) {
    window.addEventListener('load', hideLightbox, undefined);
} else {
    window.attachEvent('onload', hideLightbox);
}
//]]>
</script>
<style>
.post {
    border-bottom: 0 dotted #E6E6E6;
    margin-bottom: 0;
    padding-bottom: 0;
}

h2,.post-footer {
    display: none;
}

a.postThumbnail div {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    background: rgb(125,126,125);
 /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;
    #7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}

a.postThumbnail:hover div {
    display: block;
}

.post-body img {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.post-body img:hover {
    -ms-filter: &quot;
    progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;
    ;

filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}
</style>
</b:if>

3. Save Template!

Kini tampilan halaman depan blog Anda berupa grid image (gambar). Bagus buat blog galeri foto, video, atau online shop!

Daftar Posting Auto Readmore 2 Kolom di Halaman Depan

Membuat Dua Kolom Posting Homepage Blogspot ini banyak ditanyakan pengunjung blog CB. Ini tampilan khas Template Johny Wuss Series. Bedanya di kode.

Johny Wuss Series menggunakan kode Table of Content. Tips di bawah ini menggunakan kode "rekayasa" sehingga tampilan dua kolomnya mirip banget bahkan sama dengan Johny Wuss. (Lihat DEMO).

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {width:49%;height:auto;margin:0 20px 5px 0;overflow:hidden;float:left;}
</style>
</b:if>

Ket:
Jika hasilnya masih satu kolom, atur besaran persentasenya jadi lebih kecil, misalnya 48%, 47%, dan seterusnya hingga "pas".

3. Save Template!

Itu dia Variasi Tampilan Posting di Halaman Depan Blog. Bisa  Judul Posting doang, Gambar doang, Gambar dan Judul, hingga yang berupa dua kolom. Good Luck! (http://contohblognih.blogspot.com).*
thumbnail

Widget Komentar Terbaru plus Gambar (Foto) Komentator

Widget Komentar Terbaru plus Gambar
POSTING cara memasang atau membuat widget komentar terbaru plus gambar (foto) komentator (recent comments with thumbnail image) ini dibuat setelah CB memasangnya di sidebar sekaligus demo.

Widget Komentar Terbaru, Recent Comments, atau Latest Comments berfungsi sebagai navigasi sekaligus internal link untuk meningkatkan pageviews.

Daftar komentar juga terindeks Google, termasuk widget komentar yang disertai kutipan isi komentar.

Widget Komentar Terbaru plus Gambar (Foto) Komentator makin menarik karena menampilkan avatar G+ komentator. Ini akan mendorong pengunjung "tertarik dan rajin" berkomentar di blog Anda karena foto sang komentator muncul di sidebar blog.

Sebelum ke cara membuat Widget Komentar Terbaru plus Gambar (Foto) Komentator, CB mulai dulu dengan yang kutipan isi saja, lalu tanpa gambar, baru yang plus thumbnail image.

Komentar Terbaru: Kutipan Isi Saja

Tips berikut untuk membuat widget komentar terbaru berupa daftar judul saja:
1. Klik "Layout" atau "Tata Letak".
2. Klik "Add a gadget" di salah satu sidebar atau footer.
3. Pilih "Feeds"
4. Masukkan kode http://URL blog Anda/feeds/comments/default
5. Ganti nama Gadget dengan "Komentar Terbaru"
6. Save!

Komentar Terbaru: Kutipan Isi plus Nama Komentator

1. Layout > Add a Gadget > HTM/Javascript
2. Isi judul dengan "Komentar Terbaru"
3. Copas kode berikut ini di kotak isi:

<script style=text/javascript>
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");document.write('<div class="rcw-comments">');if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<span class="author-rc"><a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a></span> commented');if(n_rc==true)document.write(' on '+f_rc);
if(o_rc==0){
document.write('</div>');
}
else{
document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i></div>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i></div>');document.write('');}
}
}
}
</script>
<script style=text/javascript>
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
</script>
<script src=/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>
<style type="text/css">
.rcw-comments a {
text-transform: capitalize;
}
.rcw-comments {
border-bottom: 1px dotted;
padding-top: 7px!important;
padding-bottom: 7px!important;
}
</style>

4. Save!


Komentar Terbaru: Kutipan Isi, Nama, dan Foto Komentar

1. Layout > Add a Gadget > HTM/Javascript
2. Isi judul dengan "Komentar Terbaru"
3. Copas kode berikut ini di kotak isi

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

4, Save!
Kini widget komentar terbaru Anda sudah muncul, berupa nama komentator, kutipan isi, dan foto avatar Google Plus. Good Luck!

thumbnail

Membuat Related Posts dengan Gambar Responsive

Related Posts dengan Gambar
Cara Membuat Related Posts Widget for Blogger with Image Thumbnail. Tips Menampilkan Posting Terkait Berupa Gambar Thumbnail Responsive.

RELATED Posts, Related Articles, atau Posting Terkait merupakan salah satu widget yang wajib ada di blog. Umumnya ada di bawah tiap postingan.

Fungsi Related Posts adalah sebagai menu sekaligus internal links untuk meningkatkan pageviews dan mengurangi bounce-rate.

Untuk blog biasa, CB sarankan menggunakan related posts tanpa thumbnail gambar agar tidak memperlambat loading.

Namun, untuk blog toko online, blog foto, blog video, atau blog dengan posting yang didukung gambar yang keren, CB sarankan menggunakan Related Post plus Gambar Thumbnail agar lebih menarik sekaligus menjadi etalase di bawah postingan. (DEMO)

Cara Pasang

Tahapan Memasang atau membuat posting Terkait dengan Gambar Thumbnail di Bawah Postingan:

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

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->


Ket: yang merah itu ukuran gambarnya. Bisa diubah.

3. Copas kode berikut ini di atas kode <div class='post-footer'>
Jika kode tersebut ada ada dua, simpan di atas kode kedua!

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://contohblognih.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidNA7igSiuRl1WuZeeIWU8RBEsvDSx1IJARYrW26rtp2BlGM4tyS2cLjQpbnYj6aBAL8PqyXyoWFBusA5le7V32gR4RBzwdUfmfEYn2hxvp8ePdEEZe39zdYZ35VPL7KPrVOG4kwp4ZwI_/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

Ket: 
- Yang merah bisa diubah. 5 jadi 7 misalnya. 
- Related Posts bisa diganti menjadi Related Photos, Videos, atau "Produk Lainnya".

4. Save Template!

Tips membuat Related Posts dengan Gambar Thumbnail Responsive ini sudah diujicoba dan sukses! Lihat DEMO.

Untuk tutorial membuat related posts lainnya bisa dicek di Label Tags Related Posts. Good Luck! (http://contohblognih.blogspot.com).*

thumbnail

6 Kesalahan Besar dalam Desain Tampilan Blog

 Desain Blog
Pemilihan jenis huruf, gambar, dan background merupakan kesalahan besar para blogger dalam mendesain tampilan blognya.

Itu dikatakan Blog Tips Tricks dalam posting Horrible Mistake That You Make With Your Blog Design.

Kesalahan jenis dan warna huruf, juga gambar dan latar belakang, terutama berpengaruh pada aspek user friendly dan loading time (kecepatan blog). Jika sebuah blog tidak ramah pengguna, maka pengunjung tidak akan balik lagi. Google pun akan mendeteksinya sebagai blog yang tidak disukai pengguna.

Kesalahan ini biasanya terjadi karena sang blogger terlalu "banyak maunya", sehingga utak-atik modifikasi blog dengan berlebihan. Bukannya makin bagus, malah jadi "menor", tidak enak dilihat, dan berpengaruh pada kecepatan loading.

"Blogging and designing are two totally different things and sweet thing is that mostly designers are not bloggers, but bloggers are always designers," katanya.

Blogging dan desain memang dua hal yang berbeda. Kebanyakan desainer malah bukan blogger, namun blogger selalu menjadi desainer juga, yaitu ngedesain blognya.

Karena dasarnya bukan desainer, saat memodifikasi blognya, banyak blogger melakukan kesalahan fatal yang berdampak buruk bagi "nasib" blognya di mesin pencari.

6 Kesalahan Besar dalam Desain Blog

Berikut ini enam kesalahan desain blog yang disebut "Horrible Mistake That You Make With Your Blog Design":

1. Bad Fonts. Huruf yang Jelek.
Huruf memainkan peran sangat penting dalam desain blog. Karena huruf (teks) inilah yang discan atau dibaca oleh pengunjung. 

Yang dimaksud huruf jelek adalah soal ukuran terlalu besar atau terlalu kecil, terlalu banyak gaya alias hurufnya "aneh-aneh". Dikira bagus padahal susah dibaca. 

Solusi: pake huruf yang sesuai dengan pengalaman pengguna (user experience), seperti Arial, Tahoma, Georgia, Open Sans, Droid Sans. Mayoritas situs berita ternama menggunakan Arial dengan ukuran 13 hingga 16 Pixel.

Baca: Memilih Jenis Huruf (Font) Terbaik untuk Blog

2. Eyes Hurting Background. Latar Belakang yang Membuat Mata Sakit.
Background blog gak usah neko-neko. Apalagi di HP (mobile), latar itu gakkan muncul. Hindari penggunaan gambar di background karena membuat loding jadi lelet. 

Banyak blogger yang menggunakan gambar warna-warni untuk background blognya. Itu mengganggu kenyamanan pembaca. Latar belakang blog terbaik adalah putih, abu, atau warna gelap polos. (For most of blog niches, simple white background works just fine).

3. Inappropriate Logo. Logo yang Gak Pas.
Logo blog terlalu besar, terlalu kecil, gak pasa dengan area header, juga terlalu warna-warni. Logo yang bagus adalah yang simple dengan warna terang  (color light) tapi tidak membuat silau mata. 

Anda bisa membuat logo blog dengan aplikasi Sothink, Corel, Photoshop, atau secara gratis membuatnya di sejumlah situs Free Logo Maker. Untuk kesan profesional, Anda juga bisa membuat tagline di logo

Layanan Premium CB juga bisa membuatkan logo buat blog Anda.

4. Horrible Font Mixing
Terlalu banyak jenis huruf yang dipakai. Makin banyak jenis huruf, makin berat buat loading blog, juga makin tidak enak dipandang mata. Gunakan 2-3 huruf saja, itu pun sudah banyak. Arial untuk teks dan Oswald untuk judul sudah cukup.

Yang terpenting adalah kombinasinya. Menggunakan lebih dari satu jenis huruf terlihat profesional, tapi campuran yang gak pasa membuat jelek tampilan blog.

5. Images Size
Sebelum diupload, edit dulu ukuran filenya sekecil mungkin, biar tidak membebani loding. Jika gambar itu akan ditampilkan di area 300 pixel, misalnya, maka upload-lah image ukuran segitu. 

Gambar-gambar free bisa dipilih di Depositphotos

6. Font Color:
Warna huruf memainkan peran penting bagi kenyamanan pembaca blog. Pemilihan warna yang salah akan membuat blog Anda tidak nyaman bagi mata pengunjung dan mereka tidak akan kembali.

Soal warna ini CB sudah share beberapa posting:
Sebagai tambahan dari CB, untuk "perataan teks" (text alignment) tak kalah pentingnya. Jangan gunakan rata kiri-kanan (justify), tapi gunakan Rata Kiri (Align Left) karena rata kiri adalah Standar Website. (Lihat: Jangan Gunakan Justified di Blog Anda).

Demikian 6 Kesalahan Besar dalam Desain Blog yang harus kita hindari. Untuk sukses ngeblog memang butuh pengetahuan, skill, dan kesabaran. Good Luck! (http://contohblognih.blogspot.com).*
thumbnail

Cara Menghapus Tombol Newer Post, Home, dan Older Posts

Cara Menghilangkan/Menyembunyikan Newer Post, Home, dan Older Posts di Blog

BIASANYA di halaman depan dan halaman posting blog ada tulisan & tombol "Newer Posts" (Tulisan Lebih Baru), "Home" (Beranda), dan "Older Posts" (Posting Lebih Lama).

Banyak blogger yang ingin menghapus, menghilangkan, atau menyembunyikannya karena jadi banyak link. Lagi pula, tombol-tombol navigasi halaman yang dikenal dengan nama "Blog Pager" itu jarang digunakan atau diklik pengunjung.

Newer Post, Home, dan Older Posts

Cara Menyembunyikan Tombol Newer Post, Home, dan Older Posts

1. Template > Edit HTML
2. Cari kode ]]></b:skin>
3. Copas kode berikut di atasnya:

#blog-pager {display: none !important;}
body .pager {height:0px;}

4. Save Template!

Jika Anda ingin menghapusnya sama sekali, maka cari semua kode bertuliskan "Blog Pager" seperti kode berikut ini. Setiap template mungkin berbeda, tapi hampir pasti kodenya sama-sama bertuliskan "blog pager" (blog-pager).

Untuk menghapus kode Older Link Hapus kode:
#blog-pager-older-link {float: right;}

Untuk menghapus tombol "Newer Posts" hapus kode:
#blog-pager-older-link {float: right;}

Untuk menghilangkan link "Home", hapus kode:
#blog-pager {display: none;}

CARA LAINNYA:
Di template tertentu, kode Newer Post, Home, dan Older Posts antara lain sebagai berikut:

<data:newerPageTitle/> 
<data:olderPageTitle/> 
<data:homeMsg/>

Hapus semua kode tersebut untuk menghilangkannya.

Demikian Cara Menghapus Tombol Newer Post, Home, dan Older Posts di Blog Anda biar lebih bersih dan nambah cepat loading. (http://contohblognih.blogspot.com).*
thumbnail

Cara Memberi Warna & Background Judul Sidebar Widget

Warna & Background Judul Sidebar Widget
BANYAK yang tanya bagaimana Cara Memberi Warna & Background (Latar Belakang) Judul Widget di Sidebar, seperti pada blog CB ini.

Berikut ini tipnys, khususnya pengguna New Johny Wuss, yang bisa diterapkan di template blog mana pun. Tinggal sesuaikan saja kode-kodenya.

Harap diingat, warna terbaik untuk desain web adalah biru. Hindari warna terang seperti orange atau merah menyala yang menyilaukan mata pengunjung. (Baca: Warna Terbaik untuk Web).

1. Template > Edit HTML
2. Cari kode sidebar h2

Di template NJW Series kodenya seperti ini:

.sidebar h2 {
color: #fafafc;
font: 18px 'Marcellus SC',serif; margin: 0 10px;
padding: 5px 0 5px 8px;
border-bottom: 4px solid #ddd;
background: #48d;
}

Yang font itu jenis huruf dan ukurannya. Kode bagian bawah itulah backgroundnya. 

Kode tersebut yang digunakan blog CB ini. Anda bisa memilih warna lain  di Kode Warna HTML.

Demikian Cara Memberi Warna & Background Judul Sidebar Widget yang banyak ditanyakan pengnjung CB. Good Luck! (http://contohblognih.blogspot.com).*
thumbnail

Warna Terbaik untuk Website: Biru!

Warna Terbaik, Terpopuler, dan Terfavorit untuk Website: Biru (Blue)

SUDAH dua kali CB share soal warna (color) dalam desain blog/web, yaitu Hindari Dominan Warna Merah & Orange, Jangan Gunakan Merah & Orange sebagai warna Link, dan Gunakan Biru sebagai Warna Link.

Kali ini, untuk melengkapi kedua posting itu, CB share posting yang memperkuat biru (blue) merupakan warna terbaik, terfavorit, dan terpopuler.

Mari kita simak data statistik dari berikut ini:

Warna Terbaik untuk Website

Data yang dicopy dari laman Crazyegg di atas, di data warna favorit, menunjukkan dominasi biru (42%) sebagai warna terfavorit. Di posisi dua ada hijau (green) dan ungu (purle) dengan angka yang cukup jauh, hanya 14%. Lainnya --merah, hitam, oranye, kuning, cokelat, abu, putih-- di bawah 10%.

Di data kedua, warna yang sangat tidak disukai (least favorit), orange menempati posisi pertama dengan nilai 30%. Brown (cokelat) di urutan kedua dengan 23%. Warna biru 0% alias tidak masuk kategori warna yang tidak disukai.

Alasan utama biru menjadi warna favorit adalah "aman". "Blue is safe," tulis Crazzyegg. "Sekama warna teraman adalah biru. Bayangan apa pun dari biru bekerja dan kombinasi apa pun dari buru dalam skema warna adalah efektif."
  • Safe = Blue is the favorite color of the majority of the population, regardless of gender, age, etc.
  • Safe = Blue is a color that people associate with trust, authority, and reliability.
Biru, hitam, hijau, dan warna gelap lainnya lebih nyaman di mata pembaca (user friendly). Warna merah, orange, dan warna terang lainnya membuat silau mata user alias tidak nyaman dilihat di layar monitor.

Itulah sebabnya, mayoritas situs-situs ternama di dunia memilih warna biru sebagai warna utama, termasuk logo. Sedikit sekali situs terkemuka yang logonya berwarna orange. Tentu, blogger adalah pengecualian, namun tulisan "Blogger"-nya biru juga; hanya favicon / logo "B"-nya berlatar orange.

Tercatat Facebook, Twitter, Linkedin, Walmart, Bank of America, Citibank, memilih biru.

Salah satu sebab biru menjadi warna favorit dengan baik digambarkan laman OXP berikut ini:

Blue is an overwhelmingly "Popular Color". The color of the sea and sky, blue is seen as trustworthy, dependable and committed. We are surrounded by the color blue, from the blue skies above to the deep blue of the oceans.

Warna Merah dan Orange sangat baik digunakan untuk button (tombol), misalnya tombol download atau "beli", sebagaimana data Kissmetric berikut ini:

buy button

Warna biru bahkan dinilai tidak cocok untuk tombol khusus yang memerlukan perhatian khusus semacam "buy button".

"...blue is not a good color for grabbing the user’s attention because it doesn’t stand out as much against contrasting colors" (Codrops)
Kini pilihan ada pada kita: warna biru ataukah warna lain. Data di atas bukan aturan yang wajib dipatuhi. Google dan mesin pencari lain mengindeks posting blog kita bukan atas dasar warna, tapi kualitas.

Baca Juga:
1. Cara Mengubah Warna Tampilan Blog
2. Daftar Kode Warna HTML

Soal warna logo atau website lebih terkait dengan kenyamananan mata dan "pengalaman user" (user experience/UX). Biru adalah warna paling umum untuk website dan aplikasi. (http://contohblognih.blogspot.com).*
thumbnail

Cara Membuat Blog Ramah Mesin Pencari (Google Friendly)

Daftar situs untuk memperbaiki blog agar SEO Friendly, Mobile Friendly, User Friendly, dan Google Friendly sehingga mudah diindeks Google.


Membuat Blog Ramah Mesin Pencari
BLOG yang ramah Google (Google Friendly) akan mudan dan cepat terindeks Google, bahkan bisa berada ada peringkat teratas di halaman hasil pencarian (SERP).

Google memang bukan satu-satunya mesin pencari, namun hingga kini kayanya belum ada yang mengalahkan keunggulan dan popularitasnya sebagai search engine nomor satu di dunia.

Karena itu, sebagai blogger, apalagi blogspot itu milik Google, maka kita mesti "nurut" sama petunjuk Google dalam blogging.

Baca Juga: Cara Setting SEO Standar di Blog

Ada dua aspek yang diberikan Google dalam panduannya, yaitu menyangkut:
  1. Desain (tampilan) 
  2. Konten (isi).

Dari sisi desain, blog kita mesti Fast Loading dan Responsive. "Jadikan blog Anda tampil lebih cepat," kata Google.  Make your blog load faster!

Selain itu, Google merekomendasikan desain responsive: Responsive Web Design. Sejak 21 April 2015, Google bahkan memberlakukan algoritma baru benama MobileGeddon yang fokus ke blog mobile friendly dan "menyingkirkan" blog yang tidak responsive.

Dari sisi konten, Google sudah lama memberikan panduan agar blogger menyajikan Konten Berkualitas dan memberikan Panduan Menulis Konten Berkualitas.

Dengan mengikuti ketiga panduan Google itulah, maka blog kita akan ramah Google sehingga mudah diindeks dan bisa tampil di halaman pertama hasil pencarian.

Cara Agar Blog  Ramah Mesin Pencari (Google Friendly)

Berikut ini sejumlah perangkat (tools) untuk memperbaiki tampilan (desain) blog kita agar ramah mesin pencari Google. Cek atau tes blog Anda di situs-situs berikut ini:
  1. Mobile-Friendly Test. Untuk memastikan blog kita responsive/mobile friendly.
  2. Page Speed Insights. Untuk memastikan tampilan/loading blog kita cepat.
  3. Structured Data Testing Tools. Untuk memastikan struktur data blog kita tidak ada masalah.
  4. GT Metrix. Untuk melihat skor kecepatan dan loding time blog kita.
  5. Chkme. Untuk memastikan Meta Tags blog kita diisi dengan benar sekaligus skor SEO.
  6. Troy. Untuk melihat tampilan blog kita di berbagai ukuran layar monitor. (Baca: Troy Tester Responsive Terlengkap).
  7. CSS Compressor. Untuk mengkompress kode CSS agar loading blog lebih cepat.
  8. JavaScript Compressor. Untuk mengkompress JavaScript agar menambah kecepatan loading blog.
  9. Image Optimizer. Untuk mengubah ukuran gambar agar lebih ringan.
Demikian 9 alamat situs untuk memperbaiki blog kita sehingga ramah mesin pencari (Google Friendly) dan cepat/mudah terindeks Google juga ramah pengguna (user friendly). Good Luck and Happy Blogging! (http://contohblognih.blogspot.com).*
thumbnail

Cara Menambah Jumlah Ringkasan (Snippet) di Auto Readmore

 Ringkasan (Snippet) di Auto Readmore
Menambah Jumlah atau Mengubah Panjang-Pendek Ringkasan (Snippet/Summary) Posting di Home Blog yang Menggunakan Auto Readmore.

JUMLAH ringkasan, summary, snippet, atau alinea pertama tulisan (posting) yang ideal berjumlah sekitar 160 karakter (huruf) atau sekitar 25 kata (words), sama dengan jumlah ideal isi SMS (Text Message) biar efisien.

Sejumlah itulah kata yang diindeks dan ditampilkan Google di hasil halaman pencarian yang dikenal sebagai Rich Snippet, yakni dua baris "microdata" yang ditampilkan di bawah judul dan permalink posting:

snippet blog post

Jumlah kata default di Summary Text Popular Post blogger 140 karakter, sama dengan limit Twitter.

Jumlah karakter di auto readmore tanpa javascript rata-rata lebih sedikit lagi, yaitu sekitar 100 karakter. Ada juga yang diset menjadi 140 karakter, sama dengan popular post dan twitter.

Cara Menambah Jumlah Ringkasan (Snippet) di Auto Readmore

Jika template blog Anda menggunakan kode <data:post.snippet/> dan ingin menambah atau mengurangi jumlah karakter di ringkasan/summary posting di halaman depan, maka gunakan tips berikut ini:

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

<script type='text/javascript'>
snippet_count = 160;

//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var snippet = strx.split("<");
for(var i=0;i<snippet.length;i++){
if(snippet[i].indexOf(">")!=-1){
snippet[i] = snippet[i].substring(snippet[i].indexOf(">")+1,snippet[i].length);
}
}
strx = snippet.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 createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>


Note: Angka 160 bisa diubah menjadi 140, 180, 200, dan sebagainya

3. Replace atau GANTI semua kode <data:post.snippet/> dengan kode berikut ini:

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

4.  Save Template!

Contoh:
Jumlah snippet di Template Pro Adsense sudah ditambah dengan cara di atas. Aslinya, Responsive Template Free, hanya 100 karakter.

Itu dia cara Menambah Jumlah atau mengubah panjang-pendek ringkasan (snippet) posting home blog yang menggunakan Auto Readmore. (http://contohblognih.blogspot.com).*

Sumber
https://groups.google.com/forum/#!topic/bloggerdev/8jUR9uISmA0
thumbnail

MobileGeddon Akan Mengacaukan Pemenang di Pencarian Google

Mobilegeddon Google 2015
ALGORITMA baru Google yang mulai berlaku hari ini, Rabu 21 April 2015, bertepatan dengan Hari Kartini di Indonesia, akan mengacaukan para pemenang di Pencarian Google. "Mobilegeddon' could cause disruption in Google search winners," tulis USA Today.

Disebutkan, jika trafik situs web Anda tiba-tiba menurun tajam Selasa (20/4/2015), Anda bisa menyalahkan Mobilegeddon.

Google, yang mendominasi pencarian online, meluncurkan algoritma baru yang mengistimewakan situs/blog yang ramah mobil (mobile friendly) alias responsive. Itu artinya, para pengguna internet yang menggunakan SmartPhone mungkin tidak akan menemukan situs favoritnya di peringkat atas (top of the rankings), jika situs tersebut tidak responsive.

Search giant Google, which has a 65% market share of U.S. Internet searches, wants sites to load quickly and be easy to navigate on a mobile phone. (USA Today)

Google digunakan oleh 65% pengguna di Amerika Serikat, mungkin juga di seluruh dunia. Artinya, mayoritas pengguna internet menggunakan Google untuk mencari informasi di internet. 

Google, dengan algoritma barunya itu, ingin situs web tampil cepat dan mudah dibuka di ponsel, HP, atau SmartPhone. Google melakukan itu karena ngin konsumen "menemukan konten yang tidak hanya relevan dan aktual, tapi juga mudah dibaca dan mudah diakses di layar mobile yang lebih kecil".

MobileGeddon tidak akan berpengaruh terhadap hasil pencarian di desktop. "The update will not affect results from desktop searches," kata Google.

Google menyediakan "Mobile-Friendly" test page untuk membantu para blogger atau webdeveloper untuk memastikan situsnya responsive dan tidak kena dampak MobileGeddon. The URL: https://www.google.com/webmasters/tools/mobile-friendly/

Situs Web atau blog yang tidak mobile friendly akan dihukum. "Situs web yang tidak bisa diakses dengan baik di smartphone akan mulai dihukum oleh semua mesin pencari yang powerful milik Google," tulis situs CNBC.

Selamat datang MobileGeddon! Semoga Anda bersahabat dengan blog CB :) (http://contohblognih.blogspot.com).*