Hello teman teman kembali dengan saya syahputra dalam tutorial sebelum nya saya telah menjelas kan bagaimana caea membuat template blogger.
Dan kesempatan pada kali ini saya akan menjelas kan bagaimana cara membuat blogger kita terlihat menjadi resposive.
Pada umum nya setiap orang paati ingin mempunyai hal terbaik dari yang lebih baik itu sudah menjadi sipat manusia yang normal rasa kepuasan yang tak kunjug habis pada diri kita.
Memiliki blog yang cukup keren dan terlihat responsive juga tampil Seo adalah keingin para blogger di seluruh dunia.
Lantas bagimaa xara nya agar kita menjadi blog keren dan responsive terlihat di Seo pencarian google.
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.
Kenapa saya menganjurkan template blog yang di pilih simple kerna template blog tersebut adalah blog yamg mudah unyu di edit stuktur html nya.
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
>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:
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.
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 == "index"'><title><data:blog.pageTitle/></title><b:else/><title><data:blog.pageName/> - <data:blog.title/></title></b:if><b:if cond='data:blog.metaDescription != ""'><meta expr:content='data:blog.metaDescription' name='description'/></b:if><b:if cond='data:blog.pageType == "archive"'><meta content='noindex, nofollow' name='robots'/><b:else/><b:if cond='data:blog.pageType == "index"'><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 != "static_page"'><b:if cond='data:blog.pageType != "item"'><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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW8IBlM0zmRFY2RnBasrehaTybwXpZ_kmjJppE2y_6neZYu7CuY18bNOcx2AB7AsU4UhIAiFKs1C7gEJahyphenhyphenTkmqP66rS81i14Ecg-f3DlF-s1d_Vs-_c0wgNKv-dpdrNYy-Pb7RwKhd3OC/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 == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMQJ8kZb4lp6XGB_mwotXvfdqWPtBF_UrNghzoNeAMMr8_uUEwwC7YL09t0PHVzrierGRbqBcTq_5NecMYLvqu3RksRUR-7M1Ekgr7F_o8RS4H_bIC6zWUWZaJHdy-2xqPGQFkDGq0O4/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="Related Posts";</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'>
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 .... '>
- 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>
Anda sudah Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly