Cara Membuat Responsive Our Featured Widget di Blog

loading...

Selamat datang di The Royal Moringa. Pada kesempatan kali ini, saya akan membahas bagaimana cara membuat kotak fasilitas atau fitur pada menu utama blog anda. Apa itu sebenarnya kotak fasilitas? Sebenarnya kotak fasilitas hanya istilah yang saya gunakan untuk menggambarkan sebuah widget yang berisi fasilitas, kelebihan, keunggulan sebuah blog yang anda dirikan. Misalnya anda mempunyai blog untuk berjualan online, dengan kotak fasilitas anda akan menampilkan keunggulan dari web anda seperti pelayanan cepat, harga terjangkau, garansi pengiriman barang, dan pelayanan pelanggan 24 jam. Kalau anda punya hotel atau penginapan, tampilkan fasilitas hotel anda seperti wifi gratis di seluruh area, kolam renang dan sauna, ballroom dan meetingroom, free breakfast, pelayanan 24 jam, dan sebagainya. Semua kelebihan itu akan ditampilkan dalam bentuk gambar maupun logo beserta keterangan/penjelasan. Oke..langsung saja ke langkah-langkahnya.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > cari ]]></b:skin> kemudian copy dan paste kode CSS berikut diatasnya

                                      #responsive-container { width: 1200px; margin: auto; } #our-services { float: left; width: 100%; background-color: #FFF; padding-bottom: 75px; padding-top: 30px; margin: 0px 0px 55px 0px; font-family:Palatino Linotype; } #our-services li { display: block; float: left; margin: 12px 0px; font-size: 20px; } #our-services li h3 { margin: 10px 10px 10px 150px; float: left; font-size: 18px; } #our-services ul { margin: 0px; padding: 0px; overflow:hidden; } #our-services i { margin-left:70px; padding:16px; font-size: 48px; float: left; } #our-services h2 { font-size: 30px; font-weight: 300; margin: 25px 0px 58px 0px; width: 100%; text-align: center; } #our-services h3 { font-size: 160%; text-align: center; margin-top: 80px; } .col_1_of_4:first-child { margin-left: 0; } .span_1_of_4 { width: 16.25em; } .col_1_of_4 { display: block; float: left; margin: 1% 0 1% 6.5%; } @media screen and (max-width: 1110px) { #responsive-container { max-width: 800px; overflow: hidden; } #our-services li p { width: 266px; margin-top: 0; } .col_1_of_4:first-child { margin-left: 0; } .span_1_of_4 { width: 16.25em; } .col_1_of_4 { display: block; float: left; margin: 1% 0 1% 12.5%; } } @media screen and (max-width: 810px) { #responsive-container { max-width: 300px; overflow: hidden; } #our-services li p { width: 229px; margin-right: 0px; } .col_1_of_4:first-child { margin-left: 0; } .span_1_of_4 { width: 16.25em; } .col_1_of_4 { display: block; float: left; margin: 1% 0 1% 9.5%; } }

2. Setelah itu, silakan anda menuju bagian body > Cari tempat dimana anda akan meletakkan widget ini > Misal anda akan meletakkannya diatas widget postingan terbaru, maka letakkan kode HTML berikut diatas <div id='blog-posts'> atau setelah <div id='content-wrapper'>. Jika tidak menemukan, silakan temukan kode serupa karena setiap template pasti berbeda.

                                      <!-- Services Section--> <b:if cond="data:blog.url == data:blog.homepageUrl"> <div id="our-services"> <div id="responsive-container"> <h2> Our Services</h2> <div class="col_1_of_4 span_1_of_4"> <i class="fa fa-file-text-o" /> <h3> Judul 1</h3> <p align="justify"> Informasi 1</p> </div> <div class="col_1_of_4 span_1_of_4"> <i class="fa fa-percent" /> <h3> Judul 2</h3> <p align="justify"> Informasi 2</p> </div> <div class="col_1_of_4 span_1_of_4"> <i class="fa fa-users" /> <h3> Judul 3</h3> <p align="justify"> Informasi 3</p> </div> <div class="col_1_of_4 span_1_of_4"> <i class="fa fa-cogs" /> <h3> Judul 4</h3> <p align="justify"> Informasi 4</p> </div> </div> </div> </b:if>

3. Sekarang anda tinggal mengganti judul utama seperti our features, our facilities, fitur kami, keunggulan kami, dll atau mungkin tetap menggunakan our services serta mengganti judul dan Informasi pada setiap kolom sesuai kebutuhan anda > Save Template dan lihat hasilnya

Bagaimana hasilnya? Apakah anda tertarik? Anda juga bisa mengganti warna background sesuai selera pada kode CSS diatas. Background yang saya berikan kepada anda bewarna putih (#fff). Selain mengganti warna background, satu hal penting lainnya adalah logo yang ada pada tampilan setiap kolom widget ini. Anda dapat menggantinya disini.

Contoh gambar services widget diatas memiliki 4 kolom dalam 1 baris. Jika tampilan widget di blog/web anda memiliki 4 kolom dalam 2 baris itu artinya anda harus mengurangi jarak antar kolom dengan mengganti ukuran melalui kode CSS (.col_1_of_4) yang sebelumnya memiliki margin 1% 0 1% 6.5% menjadi 1% 0 1% 5.5% atau 1% 0 1% 4.5% sesuai kebutuhan anda. Perbedaan ukuran widget ini disebabkan adanya perbedaan dari template yang anda gunakan dengan yang saya uji coba. Seandainya anda menemukan permasalahan lain, silakan ketik permasalahan anda pada kolom komentar yang tersedia. Terima kasih telah membaca & Selamat mencoba!

loading...