Berbagi tips dan trik seputar blogging dan seo

Modifikasi Templat Ala 3 Master Templat

Cara modifikasi templat bawaan blogger ala 3 developer templat, memang tak dapat di pungkiri sebuah wabsite pasti menggunakan sebuah tampilan dari templat yang menarik, responsiv , Seo dan mobile frendly , menurut master templat yang udah kesohor, templat untuk mendaftar Google adsense sebaiknya menggunakan templat bawaan blogger, nah kebanyakan templat bawaan blogger gak responsif tuh , di sini dbloger.Com akan merangkum cara modifikasi templat bawaan blogger jadi lebih Seo dan responsif dari 3 master templat .

Modifikasi templat bawaan blogger ala CB blogger.

Sebelum sobat mengedit tampilan templat sobat pilih templat blogger yang akan sobat Oprek  ,kemudian pilih tata letak kemudian sesuaikan warna jenis font atau ukuran font.

Setelah udah sesuai ke inginginan sekarang klik templat pada dasbord blog sobat klik edit templat ,

Copy kode di bawah ini :

@media screen and (max-width: 1230px){ #header { float:none; max-width:none; text-align:center; } #header-inner { margin-bottom:0px; } #header h1 { margin-right:0px; } #header p.description { margin:0; } #header-right { position:relative; right:0; text-align: center; margin : 0 !important; } .header-right-inner { margin: 0 30px ! important; } .main-nav-top{ clear:both; float:none; } .main-nav-main { margin:10px 0 0 0; } #nav-search { float:none; margin:0; } } @media screen and (max-width: 960px) { .sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; width:auto; margin: 0 -15px; background: none; } .subscribe_outer { margin: 0 -20px; } .main-wrapper{ margin-right:0; width:100%; min-height: 0px; } .ct-wrapper{ padding:0 15px; } #content { padding: 5px; clear: both; border-radius: 0; } .sidebar-wrapper .sidebar{ margin: 15px; } .sidebar-wrapper .widget{ border: none; margin: 0px auto 10px auto; padding: 10px 20px; } } @media screen and (max-width: 768px){ .header-wrapper { margin-right: 0; min-height: 0; width: 100%; } #header { text-align: center; width: 100%; max-width: none; } #header-inner { margin:30px 0 0; } #header h1 { font-size:35px; } .main-nav-top, .main-nav-main, .main-nav-top ul, .main-nav-main ul{ text-align:center; } .related-post { width:auto; } #comment-editor { margin:10px; } .footer { margin:15px; width:auto; } .footer-credits .attribution{ display:none; } } @media screen and (max-width: 500px){ #header img { width:100%; } } @media screen and (max-width: 420px){ #header h1 { font-size: 30px; margin: 10px; } .main-nav-main ul li{ margin:4px 10px; float:none; } .comments .comments-content .datetime{ display:block; float:none; } .comments .comments-content .comment-header { height:70px; } } @media screen and (max-width: 320px){ .ct-wrapper{ padding:0; } .footer .footer-inner { padding: 45px 10px 10px 10px; } .comments .comments-content .comment-replies { margin-left: 0; } }

Letakan kode di tersebut di atas kode :

]]></b:skin>

Kemudian simpan

2. Cara modifikasi templat bawaan blogger yang ke dua adalah dari kompi ajaib. Sebelum edit html templat non aktifkan nafbar terlebih dahulu.


Kemudian cari code seperti di bawah ini pada templat

.post-body img, .post-body .tr-caption-container {
 padding: $(image.border.large.size);
}

Ganti dengan kode di bawah

.post-body img, .post-body .tr-caption-container {

padding: 0;

width:auto;

max-width:100%;

height:auto;

}


Cari lagi dalam templat sobat kode berikut:

<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>

Ganti kode di atas dengan :

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Lalu copy kede dibawah dan letakkan 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>


Yang terakhir simpan templat.

3. Cara modifikasi templat bawaan blogger yang ke tiga sobat lihat di blog Mas Sugeng “ Modifikasi Template Blogger Jadi SEO Friendly

Untuk memperbaiki templat blog yang error pada struktur data silahkan baca artikel saya :

MENGATASI ERROR DI STUKTUR DATA BLOG.

Untuk mengganti warna sobat bisa lihat DISINI untuk memilih kode warna html

Semoga artikel ini bermanfaat buat sobat blogger .

3 Responses to "Modifikasi Templat Ala 3 Master Templat"

  1. Trimakasih gan cara modifikasi templat blogger ini sangat bermanfaat buat saya yang masih newbie.

    Ijin nyoba gan mudah mudahan berhasil..

    BalasHapus
    Balasan
    1. Silahkan di coba gan .. Maaf terlambat balesnya ,maklum sibuk kerja..

      Hapus
    2. Silahkan di coba gan .. Maaf terlambat balesnya ,maklum sibuk kerja..

      Hapus