12 Arahan Css @Media-Queries Untuk Responsive Blogger Templates

Tutorial: Tips & Trik Cara semoga Template Blogger Berubah Menjadi Fully Responsive dan Mobile Friendly

Lagi buat dan berbagi tema blogger milik pribadi; dan ternyata, instruksi CSS semoga template blog bermetamorfosis Mobile Friendly tidak ada? Kami punya solusinya!

Kami kutip eksklusif dari laman Github oleh Gokul Krish dan pelengkap dari penulis; kumpulan kode-kode CSS @Media-Queries yang akan mengatur tata letak widget/gadget untuk desktop (komputer/laptop), tablet, dan smartphone.

12 Kode CSS @Media-Queries untuk Responsive Blogger Templates

Kode-kode @Media-Queries untuk template blogger Responsive ini terbagi atas 12 macam. Yang perlu kau lakukan, mencomot salah satunya atau semuanya kalau perlu.

@media (min-width: 1281px) { ...letak instruksi CSS... } @media (min-width: 1025px) and (max-width: 1280px) { ...letak instruksi CSS... } @media (min-width: 768px) and (max-width: 1024px) { ...letak instruksi CSS... } @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { ...letak instruksi CSS... } @media screen and (max-width:980px){ ...letak instruksi CSS... } @media screen and (max-width:960px){ ...letak instruksi CSS... } @media screen and (max-width:800px){ ...letak instruksi CSS... } @media screen and (max-width:640px){ ...letak instruksi CSS... } @media screen and (max-width:600px){ ...letak instruksi CSS... } @media (min-width: 481px) and (max-width: 767px) { ...letak instruksi CSS... } @media screen and (max-width:384px){ ...letak instruksi CSS... } @media (min-width: 320px) and (max-width: 480px) { ...letak instruksi CSS... }

Pic: Github

Kalau kau resah bagaimana cara meng-implementasikannya di template blogger; coba lihat coding di bawah ini:

@media screen and (max-width:960px){ #search-form{width:100%;background:#263142;padding:5px 0} #search-form td.search-box{padding-right:0;width:100%} #search-form input#search-box[type="text"]{background:#fff} #search-form input#search-box[type="text"]:focus{background:#fefefe;outline:none} }  @media only screen and (max-width:768px){ .nav li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1)} #nav{background:#3a89b9} .nav{float:none;width:100%;max-width:100%} .active{display:block} .navigasimenu > li > a.active{background:#263142} .navigasimenu > li > a.active:hover{background:#263142}  #search-form{margin:0} .nav > li{float:none;overflow:hidden} .nav ul{display:block;width:100%;float:none} .navigasimenu li ul{background:#f6f6f6;box-shadow:none} .navigasimenu li ul li a{background:#f0f0f0} .navigasimenu > li > a{background:#323;height:40px;line-height:40px} .navigasimenu li li a:hover{background:#263142;color:#fff} .nav > li.hover > ul,.nav li li.hover ul{position:static} .navigasimenu li .parent:after,.navigasimenu li ul li .parent:after{content:"\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0} .navigasimenu li:active .parent:after,.navigasimenu li ul li:active .parent:after{color:#c5cbd0} #search-form td.search-box{padding:0 0 0 10px} #search-form td.search-button{width:1%} #search-form input#search-box[type="text"]{margin:0;background:#fff} #search-form input#search-box[type="text"]:focus{background:#fdfdfd;outline:none} }  @media only screen and (max-width:640px){ #nav{background:#3a89b9;margin:0;height:46px;line-height:46px} }

Di atas merupakan pola instruksi @Media-Queries yang kami ambil dari SEO Kraken Blogger Theme.

Itulah 12 Kode CSS @Media-Queries untuk Responsive Blogger Templates. Ada hal yang mau ditanyakan, mungkin? Atau mau menambahkan CSS tertentu?

Source:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
candysweet-aina.blogspot.com/search?q=seo-kraken-seo-killer-fast-loading
Sumber http://addbloggerthemes.blogspot.com

Share this post