Info Blog, ciri-ciri Responsive Template

Info 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHhjjfG742ZeqLlkSrRBhmg_HgoslTPj3QQfFp8LDXGCTcLHGBodXiOuLPCBSMgsFzLPXYN3hwKBxsUxC_JdHKfA51rReOlJ3CMUQvokBNPC5GOvZQwSXMk6VcHTo8PLCJQ-R6YUq4lXvW/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