Saya memberikan tutorial ini karna ,ada yang bertanya begini "ko template bawaan blogger ga bisa muncul widget-widget nya ,seperti popular post ,label dan lain-lain nya kalau di mode mobile dan kalau di mode dekstop tampil tapi tampilan nya pengen kaya seperti di mode mobile".
Kesimpulan nya ,template nya ingin di responsive kan ,karna template bawaan blogger belum responsive.
Kalau gitu kita langsung saja ke tutorial nya.
Cara membuat default template blogger/template bawaan blogger jadi responsive.
Agar widget-widget nya muncul di mode mobile dan halaman homepage nya menjadi berpetak/rapih.
Pertama anda nonaktifkan dulu navbar nya dengan centang No seperti gambar di bawah ini :
.post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }
Hapus kode tersebut lalu ganti dengan kode di bawah ini :
.post-body img, .post-body .tr-caption-container {padding: 0;width:auto;max-width:100%;height:auto;}
Cari lagi kode seperti di bawah ini :
<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>
Hapus kode tersebut lalu ganti dengan kode di bawah ini :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Sekarang copy kode Responsive di bawah ini tepat 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: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;} } </style>
Sekarang template default blogger anda sudah responsive.
Sekarang tinggal kita buat halaman homepage nya agar tersusun rapih.
Cari kode <data:post.body/> (yang kedua)
Lalu hapus saja kode <data:post.body/> tersebut dan ganti dengan kode di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></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>
Lalu cari lagi kode </head> dan pasangkan kode berikut ini tepat di atas </head>
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '
Langkah terakhir klik roda gigi lalu centang ke mode dekstop ,seperti gambar di bawah ini :
Ini sudah saya tes di template default blogger yang 'simple/sederhana' dan berhasil. Untuk yang lain nya belum saya coba.
Maap kode script yang di coret ada kesalahan.
Copy dan pastekan kode script yang ini di atas </head> nya :
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Keterangan : anda bisa mengganti ukuran gambar/thumbnail nya dengan mengubah nominal angka hight 120 dan widht 120 nya sesuai selera.Atau jika anda tidak ingin untuk mempraktekan nya ,anda bisa langsung download file xml nya disini :
Klik disini jika ingin yang praktis.
Semoga tutorial ini bisa bermanpaat dan selamat mencoba…