Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly

Berikut ini Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly.

1. Klik Tema  / Template > Edit HTML

<b:section class=’navbar’ id=’navbar’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Navbar1′ locked=’true’ title=’Navbar’ type=’Navbar’>
</b:includable>
</b:widget>
</b:section>

dengan kode:

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

4. Cari dan Ganti kode:

<b:if cond=’data:blog.isMobile’>
<meta content=’width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0′ name=’viewport’/>
<b:else/>
<meta content=’width=1100′ name=’viewport’/>
</b:if>

dengan:

<meta content=’width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0′ name=’viewport’/>

5. Simpan kode berikut ini di atas kode </head>

<style type=’text/css’>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width:800px){
.sidebar .widget,.sidebar .widget img {width:100%}
#menu {width: 95%;}
.main-inner .columns {padding-left: 0px;padding-right: 240px;}
.main-inner .fauxcolumn-right-outer {width: 230px;}
.main-inner .column-center-inner {padding: 0;}
.main-inner .column-right-outer {width: 250px;margin-right: -250px;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
.content {position: relative;word-wrap: break-word;width: 97%;margin: 0 5px;}
body {background:#fff}
}
@media screen and (max-width:400px){
.main-inner .column-center-inner {padding: 0 15px 0 0;}
.sidebar {margin:10px 0 5px}
}
</style>

Kini template blogger Anda sudah responsive. Lakukan langkah berikutnya dengan klik  menu Tema (Themes) dan setting template mobile sebagaimana gambar berikut:

Jika pilih “Yes”, maka yang tampil di HP nanti masih template bawaan blogger. Makanya, pilih “No”. Setting ini pula yang harus Anda lakukan jika menggunakan template blog yang sudah responsive lainnya.

Sekarang, tes blog Anda di Mobile-Friendly Test

Selesai!

Cara Membuat Template Blogger Jadi Responsive sudah selesai. Anda bisa berhenti di sini jika sudah merasa cukup.

Namun, jika ingin lebih menjadikannya SEO Friendly, maka lakukan perubahan di Title Tags.

1. Memasukkan Meta Tags SEO Friendly

– Tema > Edit HTML

– Cari dan Hapus Kode:

Ganti dengan kode Title Tags SEO berikut ini:

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> – <data:blog.title/></title>
</b:if>
<b:if cond=’data:blog.metaDescription != &quot;&quot;’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
</b:if>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<meta content=’noindex, nofollow’ name=’robots’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta expr:content=’data:blog.title’ name=’keywords’/>
<meta content=’index, follow’ name=’robots’/>
</b:if>
<b:else/>
<b:if cond=’data:blog.pageTitle != data:blog.title’>
<meta expr:content=’data:blog.pageName’ name=’keywords’/>
</b:if>
</b:if>
<meta content=’global’ name=’distribution’/>
<meta content=’all’ name=’audience’/>
<meta content=’general’ name=’rating’/>
<meta content=’all’ name=’robots’/>
<meta content=’id’ name=’language’/>
<meta content=’Indonesia’ name=’country’/>
</b:if>

1. Membuat Auto Readmore


Dengan memasang kode-kode di bawah ini, tampilan blog yang menggunakan template bawaan blogger akan menjadi berupa judul, gambar thumbnail, dan ringkasan yang diambil dari alinea pertama postingan blog.

– Simpan kode berikut ini di atas kode ]]></b:skin>

.thumbnail-post {width:100px !important; height:100px !important;float:left;margin:0px 10px 0px 0px;}

– Hapus dan ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<!– Auto Read More start –>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:post.firstImageUrl’>
<a expr:href=’data:post.url’><img class=’thumbnail-post’
expr:alt=’data:post.title’ expr:title=’data:post.title’ expr:src=’data:post.firstImageUrl’/></a>
<b:else/>
<a expr:href=’data:post.url’><img class=’thumbnail-post’
expr:alt=’data:post.title’ expr:title=’data:post.title’ src=’https://lh3.googleusercontent.com/-qJ5VVlQsLfY/VOBUcH3BV_I/AAAAAAAAGsA/MkUD8LKAhTE/s220-Ic42/noimage.png’/></a>
</b:if>
<div class=’post-snippet’>
<data:post.snippet/>
</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>
<!– Auto Read More end –>

Simpan Template!

2. Menampilkan Related Posts– Copy & Paste kode berikut ini di atas kode ]]></b:skin>

#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

– Copas kode berikut ini di atasnya kode </head>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=’text/javascript’>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type=’text/javascript’>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type=’text/javascript’>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel==”alternate”){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write(“<h3>”+relatedpoststitle+”</h3>”)}document.write(“<ul>”);while(b<relatedTitles.length&&b<20&&b<maxresults){document.write(‘<li><a href=”‘+relatedUrls[c]+’”>’+relatedTitles[c]+”</a></li>”);if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write(“</ul>”);relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

– Copas kode berikut ini di atas kode <div class=’post-footer’>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class=’clear’/>
<div style=’clear: both;’/>
</b:if>

Save Template! Simpan.

3. Menambahkan Breadcrumbs

Breadcrumb adalah link internal dan navigasi blog yang menunjukkan halaman depan (home), label, dan judul postingan.

– Copas kode berikut ini di atas kode ]]></b:skin>

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:90%; line-height:1.4em; border-bottom:1px solid #f1f1f1}

–  Copas kode berikut ini di bawah kode <div class=’post hentry’> atau <div class=’post hentry …. ‘>

<b:if cond=’data:blog.homepageUrl == data:blog.url’> <b:else/> <b:if cond=’data:blog.pageType == &quot;item&quot;’> <div class=’breadcrumbs’> <a expr:href=’data:blog.homepageUrl’>Home</a> &#187; <b:if cond=’data:post.labels’><b:loop values=’data:post.labels’ var=’label’> <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a> <b:if cond=’data:label.isLast != &quot;true&quot;’> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

– Save Template!

Selesai!

Untuk menyembunyikan tanggal posting di atas judul, sekaligus menyembunyikan kode obeng dan tang (quickedit), copas kode berikut ini di atas kode ]]></b:skin>

Anda sudah Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly. Selamat! (www.komunikasipraktis.com).*