Cara menjadikan template blogger responsive
CARA MENJADIKAN TEMPLATE BAWAAN BLOGGER AGAR RESPONSIVE
Selamat Datang di Blog Orang IT . Pada kesempatan kali ini saya akan share bagaimana cara membuat template default bawaan blogger menjadi responsive dan lebih SEO dari pada sebelumnya , defaut blogger template sebelumnya memang bisa dikatakan tidak responsive yaitu template yang hadir sebelum contempo , soho , emporeo dan terkemuka namun blogger menyediakan pengaturan mobile device pada pengaturan template sehingga anda bisa memastikan bahwa situs anda baik-baik saja jika dibuka diperangkat device mobile
Bagi anda yang selama ini sudah nyaman menggunakan template default bawaan blogger lawas seperti sederhana , dinamis , tanda air , kelembutan ,keren sekali dan perjalanan kemudian anda ingin membuatnya lebih responsive serta lebih seo lagi silahkan ikuti tutorial berikut karena kita akan melakukan sedikit perubahan dalam kode template
Dengan menjadikanya lebih responsive diperangkat HP anda tidak perlu mengganti template keversi terbaru atau harus repot mendownload template dari pihak ke 3 yang katanya premium gratisan tapi disisipi kode credit link blog lain
Cara membuat template bawaan blogger responsive
1. Nonaktifkan navigasi bar blogger
Buka layout / tata letak kemudian edit gadget bagian navigasi bar pilih Off
Selanjutnya buka menu template / tema pilih edit HTML sampai terbuka panel edit script template blog
2. Lalu cari kode ini , gunakan kombinasi Ctrl+F
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
Silahkan dihapus kode diatas lalu gantikan dengan script ini
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
3. Kemudian cari lagi kode berikut , biasanya dibagian atas kode template setelah head
<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>
Silahkan dihapus dan diganti dengan kode ini
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
4. Tambahkan CSS responsive
Silahkan copas kode berikut ini tepat diatas tag </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: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>
5. Selesai sampai disini template bawaan blogger anda sudah responsive , artinya template blog akan menyesuaikan tampilanya diperangkat yang berbeda . Karena sudah responsive berarti kita aktifkan saja versi mobie template nya dimenu tema - seluler - Tidak. Tampilkan tema desktop di perangkat seluler.
Selanjutnya kita tambahkan fitur penting agar template bawaan blogger menjadi lebih SEO yang tidak terdapat pada template default namun terdapat pada template premium
6. Menambahkan auto readmore , template blogger lama tanpa fitur read more membuat seluruh artikel anda tampil dihalaman depan secara manual anda bisa membatasinya dengan fungsi jump break tapi hal ituter kesan tidak rapi jadi mari kita tambahkan auto readmore
Silahkan masuk tema - edit HTML - cari kode ini ]]></b:skin> lalu tambahkan kode berikut tepat diatasnya
.thumbnail-post {width:100px !important; height:80px !important;float:left;margin:0px 15px 5px 0px;}
Kemudian cari kode ini <data:post.body/> , ada lebih dari satu tapi silahkan dihapus kode ke dua saja lalu ganti dengan 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/AVvXsEj57VKhVge-5H9c2IlvilGXnXHEu1QCcpmO-1CAb9b2m5lOBhJrUiU71JfSpFn2KwOD_bHZ15LIbPt-skXsMqPRqPlUMnSK6t0n5ywJBh8tUkX-3eS9nIcGOYUNZuZUcVNlmhFwMS9EwlTN/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 -->
7. Selanjutnya kita buat related post , widget penting yang biasanya muncul dibawah artikel dan menampilkan cuplikan artikel masa lalu dimana masih ada kaitanya dengan artikel yang dibaca oleh pengunjung berdasarkan label jadi fungsi utamanya untuk memperlihatkan related post yang mungkin menarik untuk dibaca oleh pengunjung pada template default tidak ada jadi kita buat secara manual
Silahkan masuk tema - edit HTML - cari kode ini ]]></b:skin> lalu tambahkan kode berikut tepat diatasnya
/* Related Posts */
.related-post{margin:30px 0 0;position:relative;padding:0 0 10px}
.related-post h4 {color:#333;text-align:center;letter-spacing:1px;font-size:120%;font-weight:700;text-transform:uppercase;position:relative;padding:15px 20px;margin:0 0 20px}
.related-post h4:after {content:"";position:absolute;width:4px;height:4px;background:#E73037;border-radius:50%;bottom:0;left:46%;box-shadow:1em 0 0 0 #E73037,2em 0 0 0 #E73037}
.related-post ul{margin:0;padding:0}
.related-post-style-3,.related-post-style-3 li{margin:auto;text-align:left;padding:0;list-style:none;word-wrap:break-word}
.related-post-style-3 li a{color:#64707a;font-weight:700;font-size:13px;line-height:1.4em}
.related-post-style-3 li:hover a,.related-post-style-3 li a:hover{color:#E73037}
.related-post-style-3 .related-post-item{display:inline-block;float:left;width:29.2%;height:220px;padding:0;margin-left:3%;margin-bottom:15px;position:relative;overflow:hidden}
.related-post-style-3 .related-post-item:focus{outline:none;border:none}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 10px;width:100%;height:125px;}
/* CSS Item Responsive */
@media only screen and (max-width:640px){.related-post-style-3 .related-post-item {width:45.4%;}}
@media screen and (max-width:414px){.related-post-style-3 .related-post-item {width:100%;margin:0;padding:10px;}}
Kemudian silahkan pasang HTML dan javascript berikut ini tepat diatasnya kode <div class='post footer'> yang kedua untuk menampilkan related post gambar yang responsive
<div class='related-post' id='related-post'>
<script type='text/javascript'>
var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>You Might Also Like</h4>",
numPosts:6,
summaryLength:0,
titleLength: "auto",
thumbnailSize: 200,
noImage: "http://2.bp.blogspot.com/-pcWHSqKq44g/U6ZtZ5js6SI/AAAAAAAADu0/iR9lOJhGLKE/s1600/no-image.png",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};}
</script>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script><script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>You Might Also Like</h4>",widgetStyle:1,homePage:"http://helmykkediri.blogspot.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(//s[0-9]+(-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</div>
Yang berwarna ungu terong silahkan diganti dengan nama blog anda masing-masing kemudian simpan template dan lihat hasilnya
8. Menambahkan breadcrumb
Breadcumbs merupakan fitur semacam navigasi yang terletak dibawah judul biasanya akan menampilkan label postingan , judul postingan sesuai saran google agar setiap template menyediakan fitur ini
Silahkan masuk tema - edit HTML - cari kode ini ]]></b:skin> lalu tambahkan kode berikut tepat diatasnya
.breadcrumbs {padding:5px 5px 5px 0;margin:0;font-size:95%;line-height:1.4em;border-bottom:1px solid #f1f1f1}
Kemudian cari kode <div class='post hentry'> , tempelkan script berikut tepat dibawahnya
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'> <a expr:href='data:blog.homepageUrl'>Home</a> » <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 != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div>
</b:if>
</b:if>
Simpan template dan lihat hasilnya sekarang
Demikian postingan bagaimana cara membuat template default blogger manjadi responsive dan lebih seo semoga bermanfaat , jika anda menggunakan template pihak ketiga silahkan diabaikan cara diatas karena biasanya semuanya sudah dilengkapi oleh sicreator template sekian dan terimakasih telah berkunjung jika mau menambahkan silahkan berkomentar yang relevans dibawah
Baca juga : Mempercepat template evomagz
Posting Komentar untuk "Cara menjadikan template blogger responsive"
Posting Komentar
Artikel di blog ini bersumber dari pengalaman pribadi penulis, tulisan orang lain sebagai posting tamu maupun bayaran oleh sebab itu segala hak cipta baik kutipan dan gambar milik setiap orang yang merasa memilikinya