Hai sobat MD, jumpa lagi di tutorial blogging bersama master dzgn. Kali ini kita akan membahas tentang tutorial membuat modul box pada template fletro. Template fletro merupakan sebuah karya dari jagodesain.com yang hadir dengan tampilan/user interface menarik, elegan dan yang paling utama yaitu smooth.
Beberapa waktu ini template fletro menjadi salah satu incaran para blogger atau bisa dibilang favoritnya blogger saat ini. Inilah yang menjadi salah satu alasan kami membuat tutorial yang khusus membahas tentang template fletro, mulai dari widget, modifikasi tampilan dan sebagainya.
Bagi sobat yang baru pertama kali mengunjungi situs master dzgn, bisa cek ulasan kami tentang tutorial blogging tingkat dasar yang sudah disusun sedemikian rupa dengan rapi agar memudahkan sobat dalam memahami konsep di setiap modul.
Jika sobat tertarik untuk membuatnya maka silahkan simak tutorial kali ini sampai habis, dijamin 100% berhasil diterapkan. Untuk tampilan demo-nya bisa lihat pada laman Partner Blog atau dengan cara klik tombol di bawah ini.
Baik langsung saja simak langkah-langkahnya sebagai berikut :
1. Pertama, Login ke dashboard Blogger. Lalu pilih Tema > Edit HTML
2. Kedua, cari kode ]]></b:skin> kemudian taruh script di bawah ini sebelum kode ]]></b:skin> tersebut dan Klik Simpan Tema
.kotak-panduan{font-size:14px;line-height:1.5em;padding:15px 18px;border-radius:10px;background-color:rgba(255,255,255,.7);box-shadow:0 4px 18px 0 rgba(9,32,76,.035)}
.kotak-panduan:not(:last-child){margin-bottom:12px}
.kotak-panduan .judul-panduan h4{margin-top:0}
.kotak-panduan .judul-panduan h4 span{display:inline-block;color:#989b9f;font-weight:400;font-size:12px;margin-left:7px}
.kotak-panduan ul{list-style:none;margin:20px 0 0;padding:0;counter-reset:panduan-count;font-size:14px;font-family:'Ubuntu', sans-serif}
.kotak-panduan li:not(:last-child){margin-bottom:10px}
.kotak-panduan li{display:flex;align-items:flex-start;}
.kotak-panduan li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:45px;font-family:'Ubuntu', sans-serif;font-weight:700;font-size:26px;line-height:1em;color:#989b9f;text-align:center;padding-right:12px}
.kotak-panduan li a{display:inline-block;color:#161617}
.kotak-panduan li a:after{content:'Baca artikel';display:block;color:#989b9f;font-size:11px;line-height:1.3em}
.kotak-panduan li a:hover:after{text-decoration:underline}
.kotak-panduan.mulai{background-color:rgba(255,255,255,.5)}
.kotak-panduan.mulai .judul-panduan h4{font-size:1rem;margin-bottom:12px}
.kotak-panduan.mulai .ringkasan p{margin:0}
.kotak-panduan.mulai .ringkasan a{color:#505050}
.kotak-panduan.mulai .ringkasan a span{display:inline-block;color:#989b9f;font-size:11px}
.kotak-panduan.mulai .ringkasan a span:after{content:'0b7';margin:0 8px 0 5px}
.product-detail, .payment-method{display:flex;flex-wrap:wrap;}
.product, .payment{position:relative;width:48.5%;margin:0 3% 15px 0;padding:15px;background-color:#CFEDEB;border-radius:10px;box-shadow:0 6px 18px 0 rgba(9,32,76,.05);line-height:1em;}
.product:after,.payment:after{content:'';display:block;position:absolute;bottom:0;right:0;width:100px;height:90px;background:rgba(0,0,0,.025);border-radius:100px 0 10px 0;}
.product:nth-child(2n), .payment:nth-child(2n){margin-right:0}
.product .p-title, .payment .p-title{margin-bottom:10px;color:#161617;font-size:13px;font-weight:700;font-family:'Ubuntu', sans-serif}
.product .p-title span{display:inline-block;font-weight:400;font-size:11px;margin-left:5px;color:#505050}
.product .p-info, .payment .p-info{position:relative;display:flex;align-items:center;min-height:68px;z-index:2}
.product .p-info .p-price, .payment .p-price{width:45%;padding-right:15px;font-size:35px;font-weight:500;font-family:'Ubuntu', sans-serif;line-height:normal;color:#1a0e0e}
.product .p-info .p-price span, .payment .p-price span{display:inline-block;font-size:12px;}
.product .p-info .p-include, .payment .p-include{width:55%;margin:0;padding:0;list-style:none;font-size:11px;color:#505050}
.product .p-info .p-include li, .payment .p-include li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.product .p-info .p-include li:before, .payment .p-include li:before{content:'';display:inline-block;vertical-align:bottom;width:16px;height:15px;background:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z' fill='%234d4d4d'/></svg>") center / 16px no-repeat;}
.payment{padding:15px 20px}
.payment.paypal{background-color:#34ADE3}
.payment.themeforest{background-color:#da4c3e}
.payment .p-title{font-weight:400}
.payment .p-title span{display:block;font-size:22px;font-weight:700;line-height:normal;}
.payment .p-icon{flex-grow:1;text-align:right;}
.payment .p-icon svg{width:50px;height:50px}
.payment .p-icon .bank{fill:none;stroke:#161617;stroke-linejoin:round;stroke-width:2px;}
.product, .payment{width:100%;margin-right:0}
.page-1 .landing-box .title{font-size:1.8rem}
.kotak-panduan .judul-panduan h4{font-size:1.1rem}
3. Ketiga, pilih menu Halaman dan buat halaman baru. Paste-kan script berikut ini pada mode HTML bukan COMPOSE
<div class='kotak-panduan biru'><div class='judul-panduan'><h4>Nama Judul Panduan<span>Bab 1 </span></h4></div><div class='ringkasan'>Keterangan singkat dari modul atau panduan yang akan disajikan. <ul><li><a href='https://www.masterdzgn.com/' title='Judul Modul'>Judul Modul 1</a></li>
<li><a href='https://www.masterdzgn.com/' title='Judul Modul'>Judul Modul 2</a></li>
<li><a href='https://www.masterdzgn.com/' title='Judul Modul'>Judul Modul 3</a></li>
<li><a href='https://www.masterdzgn.com/' title='Judul Modul'>Judul Modul 4</a></li>
<li><a href='https://www.masterdzgn.com/' title='Judul Modul'>Judul Modul 5</a></li>
<li><a href='https://www.masterdzgn.com/' title='Judul Modul'>Judul Modul 6</a></li>
<li><a href='https://www.masterdzgn.com/' title='Judul Modul'>Judul Modul 7</a></li>
</ul></div></div>
Ganti keterangan diatas sesuai instruksi berikut :
| Instruksi | Keterangan |
|---|---|
| Nama Judul Panduan | Isi sesuai keinginan sobat, contoh : Tutorial Blogging |
| Keterangan Singkat | Isi dengan keterangan singkat atau sesuai topik, contoh : Pada bagian ini kita akan membahas tentang tutorial blogging bagi pemula |
| Url www.masterdzgn.com | Silahkan ganti dengan link postingan pada blog sobat |
| Judul Modul 1 | Silahkan ganti dengan judul postingan sobat, contoh : Modul 1 Tutorial Membuat Blog |
4. Keempat, klik Publikasikan halaman, lalu cek previewnya. Jika terdapat error maka cek kembali apakah script sobat sudah sesuai, apabila masih saja error bisa tanyakan pada kolom komentar di bawah
Mungkin sekian pemaparan materi singkat tentang tutorial membuat modul box pada template fletro. Nantikan update tutorial terbaru selanjutnya, buat sobat yang ingin request template blog juga bisa pada laman contact us atau dengan cara klik tombol di bawah ini. Admin akan bagikan template blog koleksi secara gratis, khusus bagi sobat yang beruntung.
Jangan lupa tinggalkan jejak atau komentar di bawah ya, jika berminat untuk menjadi partner blog bisa lihat panduan pada laman Partner Blog atau dengan cara klik tombol di bawah ini. Terima kasih dan semoga harimu menyenangkan.