Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO

Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly
Template Bawaan Blogger Bisa Dijadikan Responsive (Mobile-Friendly) dan Lebih SEO Friendly.

TEMPLATE default blogger, kita pilih saja template Simple, bisa dijadikan responsive mobile-friendly dan lebih seo friendly.

Kita tinggal memodifikasinya dengan menambahkan kode-kode tertentu dan menambah elemen (widget) yang membuat template blog lebih ramah mesin pencari.

Saat membuat blog, pilih tema / template Simple seperti gambar ilustrasi di atas, lalu lakukan langkah di bawah ini.

Dengan menjadikannya responsive, maka blog Anda akan lebih ramah mesin telusur, juga bebas credit link karena Anda sendiri yang memodifikasinya.

Cara Membuat Template Blogger Jadi Responsive

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

1. Klik Tema  / Template > Edit HTML

Template Tema Edit HTML

2. Hapus Kode Navbar

Cari kode berikut ini dan hapus:

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

3. Cari dan Ganti kode:

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

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>

Kode Alternative (Recommended)


<style>
@media only screen and (max-width:568px){
.post{height:auto;width:100%!important;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}
.main-inner .column-right-outer{width:100%!important;padding-bottom:50px!important;padding-top:50px}
}
@media only screen and (max-width:800px){
.main-inner .column-center-inner {padding: 0px;}
.main-inner .columns{padding-left:0;padding-right:310px;width:100%!important;position:relative;right:0!important}
.main-inner .column-right-outer{width:310px!important;margin-right:0!important;position:relative;right:10px!important}
.main-inner .column-right-outer{padding-top:50px!important;padding-bottom 50px!important}
}
@media only screen and (max-width:1010px) {
body .navbar {height: 0px !important;}
body{min-width:0!important;width:100%!important;padding:0!important}
.content{width:100%!important;min-width:0!important;overflow:hidden!important}
.header-outer{width:100%}
.fauxborder-left{width:100%!important}
html body .region-inner{min-width:0!important;max-width:100%!important;width:100%!important;padding-left:0}
.header-inner .section{margin:0;width:100%!important}
.footer-outer{width:100%!important}
.content-outer,.content-fauxcolumn-outer,.region-inner{min-width:0!important;max-width:100%!important}
#sidebar-right-1{width:100%!important}
.main-inner .column-right-outer{width:45%!important;margin-right:-310px;position:relative;right:10px!important}
.main-inner .columns{padding-left:0;padding-right:310px;width:70%!important;position:relative;right:20px!important}
#sidebar-right-1 a img{max-width:100%!important}
.post-body img, .post-body .tr-caption-container {max-width: 100%;height: auto;}
}
</style>

6. Save. Simpan Template!

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

setting template mobile

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

test responsive blog

Selesai!


Simple Responsive Blogger Template




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.

Cara Membuat Template Blogger Lebih SEO Friendly

1. Memasukkan Meta Tags SEO Friendly

- Tema > Edit HTML
- Cari dan Hapus Kode:

<title><data:blog.pageTitle/></title>

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>

Save! Simpan Template.
Kini blog Anda sudah responsive sekaligus SEO Friendly.

Namun, tampilannya masih standar bawaan blogger. Lakukan langkah berikutnya di bawah ini.

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!

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

.quickedit,.date-header {display:none}

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

23 Comments

  1. Min pake browser apa ya yang cocok buat ngeblog.? .
    Ane pake crome sama uc browser susah banget ngedit HTML nya.

    Respon admin plis

    ReplyDelete
  2. Pake Chrome, UC Browser berbahaya, jangan digunakan

    ReplyDelete
  3. AnonymousJune 10, 2018

    This comment has been removed by the author.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. WORK gak bang kode2 di atas ?

    ReplyDelete
  6. Owalah khusus untuk template bawaan to mas, pantesan tak cari kode dari awal gak ketemu untuk yang jadikan responsiv, punya blog toko online sejak dulu sebelum responsiv tapi sekarang dah ketingalan.
    Thanks mas semoga sukses.
    www.modetorial.com

    ReplyDelete
  7. Template ane isinya beda gan

    ReplyDelete
  8. Maaf min, saya mau ngasih tahu, template ini pada bagian sidebarnya terpotong saat diakses di smartphone

    ReplyDelete
  9. belum bisa digunakan

    ReplyDelete
  10. Bang kalo blog yg gak responsive di ponsel, tapi di dekstop responsive gimana caranya bang?

    ReplyDelete
    Replies
    1. mana ada yang begitu, responsive = mobile-friendly.

      Delete
  11. bang, saya gagal coba cara diatas. Btw, saya boleh minta teemplate jadinya bang? Buat belajar.

    ReplyDelete
  12. Mantap..work..👍

    ReplyDelete
  13. mantap , semoga bermanfaat informasi ini gan ..

    ReplyDelete
  14. Terima sudah berbagi min. Sukses selalu.

    ReplyDelete
  15. Ini baru postingan mantab bermanfaat. Pokoknya joss mas bro..

    ReplyDelete
  16. informasi yang sangat bagus gan, terima kasih sudah berbagi

    ReplyDelete
  17. artiketlnya sangat bermanfaat sekali, terimakasih

    ReplyDelete
Previous Post Next Post