$type=carousel$cols=3

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

COMMENTS

BLOGGER
loading...
loading...
Nama

Android,3,Blog,382,Info,245,Islami,46,Software,75,Tutorial,121,Web,18,
ltr
item
BLOG ORANG IT: Cara menjadikan template blogger responsive
Cara menjadikan template blogger responsive
Bagaimana cara membuat template default bawaan blogger menjadi responsive dan lebih SEO
https://1.bp.blogspot.com/-98iKkZCzOrw/WkuzkZiwdYI/AAAAAAAAHNE/f_EChkotro8eibN-_yrQGhDdz3NQ-GSegCLcBGAs/s400/blog%2Borang%2Bit%2Bnew.PNG
https://1.bp.blogspot.com/-98iKkZCzOrw/WkuzkZiwdYI/AAAAAAAAHNE/f_EChkotro8eibN-_yrQGhDdz3NQ-GSegCLcBGAs/s72-c/blog%2Borang%2Bit%2Bnew.PNG
BLOG ORANG IT
https://www.helmykkediri.com/2018/01/cara-menjadikan-template-blogger.html
https://www.helmykkediri.com/
https://www.helmykkediri.com/
https://www.helmykkediri.com/2018/01/cara-menjadikan-template-blogger.html
true
7204675838149040268
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy