Selamat datang di Kios-Tutorial

Membuat Template Responsive

Saturday, November 29, 20140 komentar

Responsive Template - Kadangkala kita sering bertanya dalam hati, apa sih Responsive Template? Sebenarnya template bawaan blogspot juga sudah cukup bagus kalau kita bisa memaksimalkan tampilannya. Tetapi kebanyakan orang (saya juga termasuk) pengennya yang instan-instan, bukan mie instan lho. He-he-he

Template responsive adalah tampilan blog atau website kita jika dibuka dengan berbagai ukuran layar, baik itu layar monitor atau gadget akan tetap terlihat enak dibaca. Cara melihat responsive atau tidak silahkan melakukan eksperimen sendiri dengan membuka blog orang lain atau bisa juga blog sendiri di komputer dan dengan menggunakan gadget. Jika blog tersebut masih rapi dan masih enak dibaca, berarti blog tersebut memakai template yang responsive.

Dengan kata lain, template responsive dibuka menggunakan media apapun akan selalu menyesuaikan. Jika dengan cara diatas merasa terlalu ribet, silahkan cek template blog kalian melalui situs yang sudah disediakan
  • designmodo.com/responsive-test
  • www.studiopress.com/responsive
Kalau dari hasil tersebut ternyata template yang kalian gunakan belum responsive, silahkan ikuti langkah-langkah dibawah ini untuk merubah template menjadi responsive.
Template Responsive - kios-tutorial.tk

Membuat Template Responsive

CARA PERTAMA
1. Login ke akun blogger kalian
2. Pilih bagian Template lalu klik Edit HTML
3. Dengan menggunakan Ctrl + F, cari kode berikut ]]></b:skin
4. Paste kode dibawah ini tepat diatas  ]]></b:skin
@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; }
}

 5. Save Template, dan coba cek ulang sudah responsive apa belum

Membuat Template Responsive

CARA KEDUA
1. Login ke akun blogger kalian
2. Pilih Template lalu Klik Edit HTML
3. Dengan menggunakan Ctrl + F, cari kode berikut <head>
4. Paste kode dibawah ini tepat dibawah  <head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″/>
5. Lalu cari kode ]]></b:skin kemudian letakkan atau paste kode dibawah ini diatas kode ]]></b:skin
@media screen and (max-width : 1280px)
{/* CSS FOR DESKTOP OR ABOVE 1280 PIXEL—-*/}
@media screen and (max-width : 1024px)
{/* CSS FOR TABLETS WITH BIG DISPLAY ————*/}
@media screen and (max-width : 768px)
{/* CSS FOR TABLETS WITH SMALL DISPLAY————*/}
@media screen and (max-width : 640px)
{/* CSS FOR SMARTPHONES / IPHONE ————*/}
@media screen and (max-width : 480px)
{/* CSS FOR MOBILES ————*/}
@media screen and (max-width : 320px)
{/* CSS FOR SMALL RESOLUTION MOBILES ————*/} - See more at: http://www.triposoft.com/2014/06/create-responsive-blogger-template-css.html#sthash.idE083QH.dpuf
6. Save Template

Jika setelah memasang salah satu dari kedua cara diatas template blog kalian masih belum responsive, berarti ada penambahan atau pengurangan kode HTML didalam template kalian yang membuat template tidak bisa responsive.

Kalau tujuan kalian membuat template responsive untuk dapat diterima google adsense, menurut saya itu salah. Kenapa bisa saya bilang salah ? Karena template blog ini juga tidak responsive. Dan saya sudah coba kedua cara diatas, hasilnya sama saja tidak bisa responsive. Untuk lebih jelasnya bagaimana blog ini bisa diterima google adsense silahkan baca Pengalaman Pertama Diterima Google Adsense

Sampai disini dulu tutorial dari saya, sampai jumpa dilain waktu yang pasti dengan tutorial-tutorial unik lainnya. Baca juga : Memasang Iklan Diatas Dan Dibawah Artikel

Terima kasih sudah berkunjung dan meluangkan waktu untuk membaca artikel

Membuat Template Responsive

Tutorial Tips & Trik Photoshop | Illustrator | Cinema 4D | Blog & Seo

Share this article :

Post a Comment

- Maaf, komentar LINK AKTIV / IKLAN akan saya HAPUS
- Komentar sara / spam akan saya hapus
- Jika ada link gambar yang mati laporkan disini
- Berkomentarlah dengan bijak sesuai dengan artikel
- Komentar anda merupakan undangan buat saya

 
Support : Cara Gampang | Creating Website | Johny Template | Mas Templatea | Pusat Promosi
Copyright © 2013. Tutorial Tips & Trik - All Rights Reserved
Template Created by Creating Website Re-Design by Kios
Proudly powered by Blogger