Breaking News

Definition List

Flickr Images

Monday, May 25, 2015

Simple BT - Template Blog SEO Responsive Super Simple & Minimalis

Simple BT - Template Blog SEO Responsive Super Simple & Minimalis
BLOGGER yang ingin tampilan blognya super sederhana, minimalis, tapi tetap SEO Friendly, Fast Loading, dan Mobile Friendly, maka Simple BT  ini menjadi alternatif.

Template blog ini "Super Simple" & "Super Minimalis". Ora neko-neko. Sing penting kontennya berkualitas. Cocok buat blog pribadi yang postingnya pendek-pendek, coretan harian, atau sekadar menyimpan kata mutiara, atau apalah yang simple-simple tapi berguna bagi pengunjung.

Tampilan halaman depan judul posting doang, tanpa gambar. Jika merasa tertanggu dengan "post-info" dan tanda "readmore", bisa di-hide atau dihapus.

Mobile-Friendly Test: Awesome! This page is mobile-friendly.

PageSpeed Insights: Mobile 74/100. Desktop: 90/100. GT Metrix: Page Speed Grade (86%) AYSlow Grade (92%) dengan Page load time 0.89s alias gak nyampe sedetik! Kenceng banget!

Skor SEO Chkme memang kecil. SEO Score for http://easy-links-bt.blogspot.com/ 36 %. Well, you can fix it easily... Ini karena Deskripsi dan Keywordnya masing kosong. Bisa kok jadi 100%

SimpleBT is a free responsive 1 column blogger template best suited for personal blogs and status blogs. It is not the limit simple blogger template can be used for many purposes including professional status blogs. Like our previous blogger template simpleBT is coming with plenty of features including ease of changing background and changing color schemes.

Features of Simeple Blogger template:

  1. Responsive design
  2. Simple related posts widget
  3. Easily customize using template designer
  4. 1 Column blogger template
Anda juga bisa memodifikasi tampilan blog ini dengan mudah dan simple pula. 

Caranya: Klik "Template" > "Customize" 
Di sinilah segalanya diutak-atik sesuai dengan selera Anda.

Anda bisa ganti background dan warnanya. Minat?
Read more ...

Heading Tag H1 Lebih dari Satu, Bagus atau Buruk buat SEO?

Heading Tag H1 Lebih dari Satu
Tag H1 Lebih dari Satu di Blog, Bagus atau Buruk buat SEO?

TANYA: Malem mas. Begini mas, saya tidak tahu apakah itu settingan yang memang disetting oleh CB sendiri atau kesalahan CB, yang pasti CB paling pinter dalam membuat dan redesign template.

Saya menggunakan NJW Versi 2 dan saya gunakan pada blog saya. Nah pada Home semuanya berjalan lancar, Tag beraturan kok, bagus.

Masalahnya ada pada postingan artikel. Kenapa pada postingan artikel, saya cek di SEO Quacke, H1 nya ada 2 ya mas? Itu settingan CB sendiri atau bagaimana? Terima kasih sudah membantu.

JAWAB: Hasil cek homepage NJW V2 di Chkme mengatakan: "Headings H1: 1, that is Good". SEO Score for http://newjohnywussv2.blogspot.com/ 100 % Congratulations!

Hasil cek halaman posting: H1: 2, that is Good, but 1 (one) is Better. Artinya, gak masalah, meski satu lebih baik.

Kalaupun di SEO Checker lain ada indikasi double H1 Tag atau H1-nya dinyatakan ada dua, itu karena Logo Teks dan Image (Gambar) di NJW V2 menggunakan H1 biar aman.

Lagipula, H1 lebih dari satu di satu halaman blog, TIDAK MASALAH. 

Berikut ini penjelasannya:
  • It's now not only possible to have multiple <h1> level headings per webpage that will make sense to search engines, but in most cases it's actually the recommended course. (Sumber)
  • Google use multiple h1 in some of their web pages. It is allowed to use wisely more than one H1 in a page. (Sumber)
  • Matt Cutts says you can use multiple H1s (Source)
Selama ini para pengguna NJW V2 baik-baik saja. CB Blogger pun fine-fine saja. So, it's not big deal! 

Kesimpulan: 
Heading Tag H1 Lebih dari Satu di halaman posting blog, gak masalah buat SEO. (http://contohblognih.blogspot.com).*
Read more ...

Sunday, May 24, 2015

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/AVvXsEjR1yvS3l86HZ3lm4UqhTvUOA5TqBCmeyqhusEOxDbIHrfoXr-cCZVBhOoY_m7IkPBmKChEJEGOj_fbyipYWBiUppa99Lv85WVdeWRAWeIvu9hAL54drldxwEJQnpvaKLVLxL8ZSqdFprY/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).*
Read more ...

Friday, May 22, 2015

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!

Read more ...

Tips 10 SEO Onpage Terbaru 2015

Tips SEO Onpage Terbaru 2015
Tips 10 SEO Onpage Terbaru 2015 untuk Meningkatkan Pengunjung dan Peringkat Blog.

ALGORITMA Google terus update. Terbaru bernama Mobilegeddon yang bisa mengacaukan peringkat hasil pencarian. Para blogger pun memerlukan strategi baru atau memperkuat tips SEO lama yang masih berlaku.

Berikut ini 10 On-Page SEO Tips to Use in 2015 dari Smart Bug Media. SEO Onpage yaitu optimisasi blog di dalam blog itu sendiri agar mudah terindeks mesin pencari dan mendapatkan rangking bagus di halaman hasil pencarian, terutama Google (SERP).

1. Optimalkan Blog Anda dengan Satu Kata Kunci atau Topik.
Optimize Your Site Page Around One Keyword or Topic. Era manipulasi kata kunci secara berlebihan (stuffing) telah berlalu. Kata kunci harus muncul di elemen halaman yang penting, seperti judul halaman, judul posting, alt teks gambar, dan secara alamiah tersebar di naskah tulisan. 

Anda harus tetap menulis untuk manusia (pembaca), bukan untuk mesin. Jadi, susunlah naskah secara wajar. Jika tidak, postig Anda --karena berlebihan mengulang kata kunci-- akan dianggap spam dan diabaikan mesin pencari.

2. Ingat bahwa Kata Kunci Itu Penting tapi Bukan dalam Arti Harfiyah.
Remember that Keywords Are Important But Not Verbatim. Anda harus pandai membuat variasi kata kunci yang semakna atau satu tema. Contoh kata kunci bahasa Inggris, keywords “inbound marketing tactics” (plural) itu ekuivalen dengan ,"inbound marketing tactic" (singular). Keduanya bisa digunakan.

3. Struktur URL Harus Pendek, Deskriptif, dan Membantu Kategorisasi Situs Anda.
URL Structure Should Be Short, Descriptive and Help to Categorize Your Website. Jumlah katakter judul sebaiknya di bawah 60 huruf agar semuanya trindeks mesin telusur. Sejumlah kata itu pula yang ditampilkan di halaman hasi pencarian Google.

4. Optimisasi Judul Halaman
Optimize Page Titles. Bisa dikatakan ini tips SEO Onpage paling penting untuhk tahun 2015.  Judul halamalan atau judul tulisan digunakan oleh mesin pencari untuk menampilkan sebuah halaman (link) dalam hasil pencarian juga muncul di bagian atas browser (address bar). 

Sejak Google hanya menampilkan 50-60 karakter title tag, Anda harus menulis judul posting di  bawah 55 karakter. Anda juga harus menempatkan kata kunci (keywords) atau topik tulisan di awal judul.

5. Gunakan Heading Tags yang Pas.
Utilize Proper Heading Tags. Heading tags yaitu penggunakan tag judul H1, H2, H3, H4 dst. yang biasanya dibedakan dengan ukuran, tebal, dan warna. Tag heding posting harus menggambarkan isi tulisan kepada pembaca dan mesin pencari tentang topik bahasan.

Mesin pencari mampu mengidentifikasi heading ketika ia ditag dengan kode <h1> dalam halaman HTML. Heading tags juga membantu mesin pencari untuk menentukan tingkat kepentingan konten dengan tag <h2> dan <h3>

Hindari penggunan Heading Tags untuk kata generik seperti “Home” atau “Products”. Jangan letakkan informasi penting yang ditag H1 sebagai gambar (image).

6. Optimalkan Alt Text Gambar.
Optimize Image Alt Text. CB sudah bahas  soal SEO Gambar ini. Intinya, gunakan nama file (file name), judul gambar (image title), dan alternative text (alt text) dalam gambar ilustrasi posting. (Lihat: 5 Cara Optimisasi Gambar untuk SEO Blog).

7. Kembangkan Tautan Alami
Grow Natural Links. Meski backlink sudah tidak sepenting masa lalu, inbound link berkualitas tetap diperhitungkan. Inbound links berkualitas datang dari situs berkualitas. (Baca: 6 cara mendapatkan backlink berkualitas). Komentar spam atau "hanya modus" untuk mendapatkan backlink akan diabaikan Google.

8. Tingkatkan Kecepatan Loading Blog Anda!
Increase Site Speed! Sejak 2011 Google mengginakan loading time atau kecepatan tampilan blog dalam menentukan peringkat pencarian (search rankings). Kecepatan loading akan terus menjadi faktor penentu peringkat. Pengunjung juga tidak suka blog yang lemot alias butuh waktu lama untuk tambil.

Anda harus menggunakan template fast loading, simple, bersih, dan tentu saja SEO Friendly dan Responsive. (Lihat: Koleksi Template SEO Friendly).

9. HTTP vs. HTTPS
Bagi pengguna blog selfhosting, sebailnya Anda menggunakan Hyper Transfor Protocal Secure (HTTPS) ketimbang Hyper Text Transfer Protocal (HTTP) demi keamanan situs. Google lebih suka mengindeks halaman yang aman bagi pengguna.

10. Pengaruh Pencarian Mobile
Mobile Search Implications. Pastikan blog Anda responsive (mobile friendly) dan tampil cepat di perangkat mobile pengguna. Algoritma MobileGeddon menegaskan pentingnya blog yang ramah mobile.

Demikian 10 Teknik SEO Onpage yang berlaku tahun 2015 dan seterusnya. Meski akan terus ada update algoritma yang baru, trik seo blog terpopuler di atas tampaknya akan terus berlaku karena tidak rawan manipulasi. Good Luck! (http://contohblognih.blogspot.com).*
Read more ...

Wednesday, May 20, 2015

Kesalahan Umum Pebisnis Online & Blog Toko Online

Blog Toko Online
Daftar Kesalahan Umum Pebisnis Online & Blog Toko Online yang Harus Dihindari Newbie.

BELAJAR dari kesalahan adalah salah satu jalan menuju sukses. Demikian pula dalam bisnis online berupa blog toko online (online store/online shop).

Bersyukurlah, banyak para pelaku, pengamat, dan pakar bisnis online yang berbagi tentang kesalahan atau hal-hal yang harus dihindari dalam memulai bisnis online, termasuk blog toko online.

Dari sekian poin kesalahan pebisnis online, CB share beberapa di antaranya. Ini hasil "riset online" alias Googling, khususnya yang terkait dengan desain dan SEO Blog Toko Online.

1. Mengira Konsumen Langsung Datang

Kesalahan pertama adalah menganggap bahwa begitu bikin blog toko online, maka konsumen akan segera datang" "If You Build It They Will Come".

Tidak. Membangun bisnis (dan trafik) membutuhkan waktu, energi, dan usaha. Menurut Internet Live Stats, di internet ada lebih dari 1,2 milyar situs. Jika saat ini misalnya sudah mencapai angka 1,300.000.000, maka situs atau toko online yang Anda buat adalah yang ke 1,300.000.001.

Nah, bagaimana bisa tiba-tiba toko online Anda banjir pengunjung dan konsumen? How are people going to find you? Solusinya: Gunakan Teknik & Strategi SEO! Bukan dengan "nyepam" karena  komentar spam adalah "musuh bersama" para blogger.

2. No Logo

Blog Anda tidak punya logo, hanya berupa teks --standar header blog. Logo biasanya adalah hal pertama yang dilihat pengunjung dan membangun "kesan pertama" atas toko online Anda. Logo membangun "trust" (kepercayaan) dan "credibility", juga kesan profesional.

Bahkan, logo yang "asal" pun masih belum cukup. Sekarang sangat banyak situs untuk membuat logo secara online, gratis! Googling aja dengan kata kunci "free online logo maker", maka akan tersedia banyak link menuju ke sana.

3. Tidak Ada Menu "About" dan "Kontak"

No Proper About or Contact Page. Halaman "About Us" (Tentang Kami) termasuk halaman yang paling banyak dibuka pengunjung, setelah itu halaman "Kontak". Calon konsumen ingin meyakinkan diri dulu bahwa toko Anda terpercaya, profesional, kredibel.

Halaman "About" harus berisi profil toko, manajemen (jika berupa tim atau kelompok usaha), admin atau pemilik (jika sendirian), juga menjelaskan tentang produk dan proses produksinya.

Di halaman "Kontak" disebutkan secara detail bagaimana konsumen bisa menghubungi Anda. Pembeli juga ingin tahu alamat atau lokasi kantor Anda.

Lebih OK lagi jika email Anda bukan "Generic Email Address" sepeti gmail.com atau yahoo.com, meskipun keduanya juga baik dan kredibel.

4. Strategi SEO

Seperti disebutkan di nomor 1, toko online Anda akan bersaing dengan jutaan-milyaran situs lain. Di sinilah diperlukan strategi SEO.

SEO adalah salah satu perangkat dahsyat (one of your most powerful tools) untuk mengundang pengunjung dan calon pembeli. Maka, gunakan teknik SEO, mulai dari pemilihan template atau desain yang SEO Optimized, Fast Loading, Mobile Friendly (Responsive), hingga optimisasi posting tentang produk/jasa.

5. Loading Blog Berat!

Your website is too slow – Statistics show that customers are much more likely to leave your site if the loading time exceeds 4 seconds.

Statistik menunjukkan, konsumen akan meninggalkan situs Anda jika loading time-nya lebih dari 4 detik. Maka, gunakan template atau desain blog yang kenceng, ringan, optimalkan gambar yang diupload. Istilah Google: Make Your Blog Loads Faster!

Itu saja yang CB share soal Kesalahan Umum Blog Toko Online. Cuma lima? Nggak, masih ada yang lainnya. Silakan cek langsung sumber posting ini:
Seperti situs web dan blog pada umumnya, kunci utama kesuksesan blog toko online pun adalah banyaknya jumlah pengunjung (traffic), jumlah halaman yang dibuka (pageviews), dan kredibilitas. Teknik SEO dan template fast loading memainkan peran sangat penting. 

Jangan tanya CB soal kiat sukses bisnis online ya, CB sendiri baru belajar alias newbie. Posting ini sekadar dokumentasi pribadi dan berbagi dengan Anda. Good Luck! (http://contohblognih.blogspot.com).*
Read more ...

Tuesday, May 19, 2015

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/AVvXsEgNITstkXzDqbPqB3Th-OVJiHe7BzwOHV4VFkZccxkXR6Zh7VLYu64M1eRlzaDnDjDaN9gFj8IF0MY4tyC6o8Gz28a70xQGZBq6FHPk9gKgmeUBxUL_FozyaOQUjHeFbLMVWou15AVwzF5M/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).*

Read more ...
Designed By