logo blog
Selamat Datang Di Info Blog
Terima kasih atas kesediaan anda berkunjung di Info Blog ini,
Semoga apa yang Info Blog share dan tulis di sini dapat bermanfaat dan memberikan motivasi pada kita semua
untuk terus berkarya dan berbuat sesuatu yang dapat berguna bagi masyarakat, khususnya masyarakat Indonesia.

Info Blog, ciri-ciri Responsive Template

Info Blog, responsive templateInfo Blog. Algoritma Google MobileGeddon telah dilansir per tanggal 21 April 2015 kemarin, algoritma ini pada dasarnya menitik beratkan pada pemakaian Responsive Template untuk sebuah website atau blog bilamana ingin tetap dapat eksis dalam persaingan memperebutkan posisi terbaik pada hasil SERP mesin pencari semacam Google search engine. Responsive Template ini dapat dengan otomatis menyesuaikan diri dengan ukuran layar (device) yang dipergunakan untuk mengakses website atau blog yang bersangkutan.

Responsive Web Design sebagai salah satu alternatif, merupakan desain web yang dapat dengan mudah menyesuaikan 'diri' di berbagai ukuran layar device dan berbagai browser yang dipergunakan untuk membukanya. Jadi web tersebut dapat beradaptasi secara otomatis dengan berbagai ukuran layar device. Fokus utamanya adalah pada ukuran layar perangkat mobile (smartphone).

RWD berguna agar web tersebut dapat tampil dengan baik dan bagus di berbagai ukuran layar device tanpa harus menggunakan "mobile template". Sehingga tampilan web di mobile/phone sesuai dengan yang diinginkan, bukan dengan template default untuk mobile/phone.

Dengan RWD, ciri khas suatu web akan tetap muncul jika dilihat dari layar device ukuran apapun. Berbeda bila menggunakan mobile template, ciri khas web akan hilang. Hm.. terus RWD dibuatnya gimana?

RWD ini dibuat dengan memanfaatkan Media Query pada CSS3. Berikut kutipan mengenai Media Query.

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). -Wikipedia

Kembali kepada masalah Responsive Template, berikut ini adalah contoh kode-kode HTML yang membuat template tersebut menjadi responsive.

@media screen and (max-width:980px){
#luarnya{width:100%}
#mnceo-tr{float:none;width:100%;margin:0;padding:0}
#sdv-right{float:none;width:auto;margin:20px 0 0}
#topTas{margin:0;padding:20px;overflow:hidden}
#topTas1{float:none;width:100%;margin:0 0 20px;padding:0;text-align:center}
#topTas2{float:none;width:100%;margin:10px 0 0;padding:0;text-align:center}
#header-inner img{max-width:100%;width:100%;margin:0 auto;padding:0;text-align:center}
#navitions{background:#2C2C2C;border-bottom:none}
#mobilenav{display:block;text-indent:-9999px;width:52px;top:0;left:0;position:absolute;height:46px;outline:0;background-color:#0011ff;color:#FFFFFF;text-decoration:none}
#mobilenav.active{color:#D16400}
.menu a.home:before{display:none}
#mobilenav:before{content: url(http://4.bp.blogspot.com/-kI66lcJRxS4/U32avs2xWeI/AAAAAAAAAoI/loVD0Vbvuck/s37/resnav.png);position:absolute;top:2px;text-indent:0;left:8px;font-size:30px}
#menunav{float:none;display:none;position:absolute;top:46px;left:0;right:0;z-index:99;background-color:#2C2C2C;padding:5px}
#menunav li{float:none;margin:0}
#menunav > li{margin:1px 0}
.menu a.home,.menu a{text-indent:0;margin-left:0;width:auto;height:auto;padding:0 10px;line-height:30px;background-color:#1D1D1D}
.menu ul{position:static;padding-top:0}
.menu ul li,.menu ul ul li{background-color:transparent}
.menu ul a{padding-left:20px}
.menu ul ul a{padding-left:30px}
.menu li:hover > ul,.menu li.sfHover > ul{display:none}
.menu li:hover > a,.menu li.sfHover{background-color:transparent}
.menu a.home,.menu li:hover > a.home,.menu > li > a.current{color:#FFFFFF;background-color:#0011ff}}
@media screen and (max-width:960px){
#luarnya{width:100%}}
@media screen and (max-width:768px){}
@media screen and (max-width:384px){
#topTas{margin:0;padding:10px 10px 5px;overflow:hidden}
#w-ctf{margin:0;padding:10px}
.sidebar .widget-content,.ads-banner .widget-content{margin-bottom:10px;}
#comments{margin:10px  0 0;padding:10px}
.comment_avatar, .comment_avatar img{display:none}.comment_header{float:none;width:100%;}.respond{float:right;margin:0;padding:0}.comment_body{background:#0011ff;border:1px solid #ccc;margin-left:0;padding:10px;}.comment_child .comment_wrap{padding-left:0}}

Demikianlah uraian tentang ciri-ciri Responsive Template yang dapat saya sampaikan, semoga dapat bermanfaat untuk menambah pengetahuan tentang model-model responsive template tersebut.

Sebagai akhir dari artikel ini, berikut ini saya sampaikan pula tentang link download salah satu model Responsive Template yang dapat anda pergunakan untuk template blog anda secara gratis.

Free Responsive Template

Enter your email address to get update from Info Blog.
Print PDF
Next
« Prev Post
Previous
Next Post »

Silahkan meninggalkan komentar yang sesuai dengan artikel di atas, komentar anda sangat berguna bagi perkembangan blog ini di masa-masa mendatang.
Mohon jangan melakukan spam, atau promosi produk atau apapun yang tergolong hal-hal negatif
Mohon maaf bilamana terjadi keterlambatan balasan komentar.

Copyright © 2015. Info Blog 97 - All Rights Reserved | Template Created by Info Blog Proudly powered by Blogger