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.
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
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
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>
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
Membuat Template Responsive
CARA KEDUA1. 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)6. Save Template
{/* 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
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
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