Cara menjadikan template blogger responsive

CARA MENJADIKAN TEMPLATE BAWAAN BLOGGER AGAR RESPONSIVE

Cara menjadikan template blogger 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
Cara menjadikan template blogger responsive

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.

Cara menjadikan template blogger responsive1
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 != &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 -->
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(&#39;screen and (min-width: 992px)&#39;);if (mql.matches){
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;<h4>You Might Also Like</h4>&quot;,
numPosts:6,
summaryLength:0,
titleLength: &quot;auto&quot;,
thumbnailSize: 200,
noImage: &quot;http://2.bp.blogspot.com/-pcWHSqKq44g/U6ZtZ5js6SI/AAAAAAAADu0/iR9lOJhGLKE/s1600/no-image.png&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
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.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)+"&hellip;":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)+"&hellip;":"";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

Cara menjadikan template blogger responsive3
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 == &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>
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

0 Response to "Cara menjadikan template blogger responsive"

Posting Komentar

Terimakasih telah membaca artikel di Blog Orang IT , berikut ini aturan yang saya buat untuk pengunjung yang mau memberikan komentar :

1. Semua komentar diblog akan saya hapus setiap akhir bulan karena file backup terlalu besar

2. Komentar yang relevans akan saya setujui sementara sara rasis akan saya hapus langsung

3. Jangan spam link aktif dan url langsung karena percuma saya admin yang selektif

4. Jika ada link mati atau link yang mengarah kehalaman lain kosong 404 tolong beritahu melalui komentar

5. Anda boleh meninggalkan jejak sekedar doa atau ucapan terimakasih hal itu sudah membuat saya sangat senang dan bersemangat

6. Jika mau request judul artikel juga bisa langsung melalui kotak komentar

7. Tidak menerima kerja sama berbayar dalam bentuk apapun , jika anda ingin menyumbangkan artikel / guest post silahkan kirim melalui email tidak dipungut biaya dan anda boleh mencantumkan situs bisnis anda

Semoga anda berbesar hati untuk mentaati aturan yang saya buat dan jangan lupa kunjungi lagi Blog Orang IT esok hari

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel