12 Kode CSS @Media-Queries untuk Responsive Blogger Templates

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

Lagi buat dan mengembangkan tema blogger milik pribadi; dan ternyata, kode CSS agar template blog berubah menjadi Mobile Friendly tidak ada? Kami punya solusinya!

Kami kutip langsung dari laman Github oleh Gokul Krish dan tambahan 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 kamu lakukan, mencomot salah satunya atau semuanya jika perlu.

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

Pic: Github

Kalau kamu bingung 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 contoh kode @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
https://tipsseokiller.blogspot.com/2018/04/css-media-queries-mobile-friendly.html

Labels: Tutorial Blogger

Thanks for reading 12 Kode CSS @Media-Queries untuk Responsive Blogger Templates. Please share this article.

Share this post