Cara Membuat Menu List Download (Free dan Premium) Keren di Blog

Menu list ini merupakan menu yang biasa digunakan untuk fitur download dengan dua versi yaitu Free version dan Premium Version. Fitur download pada menu ini biasanya digunakan untuk download template, download Ebook, Download Hosting dan domain dan lain sebagainya.

Walaupun biasanya digunakan untuk fitur download, sobat bisa merubah dan mengeditnya untuk digunakan dalam hal lain seperti menu list, daftar nama, urutan angka dan lain sebagainya.

Oke, langkah untuk membuatnya juga sangat sederhana dan mudah, sobat tidak perlu repot-repot mencari kode CSS dan HTML nya, sebab saya sudah menyediakan dan memodifikasinya sehingga fitur ini sudah bisa langsung digunakan.

Selain itu, Menu ini juga RESPONSIVE lho !

DEMO - Free and Premium Version

Free Version

• 1. Full Content
• 2. Update Version
• 3. Support 24 Hours
• 4. Tutorial
• 5. Diskon  
• Download Now
  Free Version

Premium Version

• 1. Full Content
• 2. Update Version
• 3. Support 24 Hours
• 3. Support 24 Hours
• 3. Support 24 Hours
• $10 Buy Now
  Premium Version

Nah, bagi sobat yang berminat untuk mencobanya di blog sobat, silahkan ikuti langkah-langkah berikut ini.

A. Menempatkan di dalam Template/Tema Blog

Jika menu ini dipakai berkali-kali, maka sebaiknya sobat menempatkan kode CSS nya ke dalam menu template/tema blog, hal ini bertujuan agar sobat tidak berkali-kali harus menyalin kode CSS nya ke dalam HTML postingan blog.

Dengan menempatkan kode CSS ini ke dalam tema/template blog, maka sobat cukup menggunakan kode HTML nya saja, tanpa harus mengikutsertakan kode CSS di dalamnya. Oke, sobat bisa langsung menerapkannya dengan cara:

1. Klik menu "Tema"
2. Klik menu "Edit HTML", (Sebelum mengedit, sebaiknya simpan terlebih dahulu kode yang lama untuk berjaga-jaga)
3. Copy dan paste kode CSS di bawah ini, kemudian letakkan di atas kode </head>

<style type="text/css">
b.free-but {width: 80px !important;}
b.free-but .lprice {margin: 10px 10px;}
.blocks {float: left;padding: 20px 0;}
.detail_template b i, .free_template b span, .paid_template b span {font-size:60px;color:#fff;}
span.lprice {font-size: 45px !important;}
b.free-but, b.paid-but {border-right:none;}
.free-txt, .paid-txt {font-size: 22px;color:#fff;font-weight:bold;}
.free-desc, .paid-desc {color:#fff;font-weight:normal;font-size: 16px;}
.sb.sb_orange {clear: both;}
.temp-sub {margin-top: 15px;clear: both;display: block;float: left;}
.temp-sub li {margin-left: 0 !important;}
.template_free {width: 49.5%;float: left;}
.template_paid {width: 49.5%;float: right;}
.template_name, .template_free, .template_paid {border:1px solid #FDD761;box-sizing: border-box;font-size: 13px;margin-bottom: 20px;padding:0;position: relative;}
.template_free h4, .template_paid h4 {border-bottom:1px solid #FDD761;color: #4599BD;font-size: 20px;font-weight: bold;margin: 0;padding: 10px;text-align: center;background:#FDD761;}
.template_free ul {margin: 0;padding: 0;}
.template_free li {border-bottom:1px solid #FDD761;display: block;float: left;width: 100%;}
.free_template b, .paid_template b {color: #4e5563;float: left;padding: 10px;text-align: center;}
b.free-but, b.paid-but {width: 120px;}
.sublocks {border-left:1px solid #FDD761;color: #7a7f7d;float: right;font-size: 14px;padding: 10px;text-align: center;min-width: 15px;}
.sublocks i.fa.fa-check {margin-right: 0;}
span.sublocks.green{background-color: #2ecc71;color:#fff;}
span.sublocks.red {background-color: #e74c3c;color:#fff;}
.template_paid ul {margin: 0;padding: 0;}
.template_paid li {border-bottom:1px solid #FDD761;display: block;float: left;width: 100%;}
li.free-box, li.paid-box {background: #4599BD;border-bottom: none;cursor: pointer;}

@media screen and (max-width: 768px) {
.template_free, .template_paid {width: 100% !important;float: none !important;clear: both;overflow: hidden;}
</style>

4. Klik "Simpan"
5. Langkah selanjutnya adalah memanggil kode CSS nya dengan HTML
6. Silahkan masuk ke menu postingan, kemudian copy kode HTML dibawah ini.

<div class="temp-sub">
<div class="template_free">
<h4>Contoh: Free Version</h4>

<ul>
<li><span class="free_template">
<b>Isi Tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li><span class="free_template">
<b>Isi tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li><span class="free_template">
<b>isi tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li><span class="free_template">
<b>isi tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li><span class="free_template">
<b>isi tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li class="free-box">
<a href="http://www.terwujud.com/" target="_blank">
<span class="free_template">
<b class="free-but">
<span class="lprice">
<i class="fa fa-download"></i></span></b>
<span class="blocks free-txt">
Download Now
<br/>
<span class="free-desc">Free Version</span>
</span>
</span>
</a>
</li>
</ul>
</div>

<div class="template_paid">
<h4>Premium Version</h4>
<ul>
<li><span class="paid_template">
<b>Isinya</b>
<span class="sublocks green">
<i class="fa fa-check fa-6"></i>
</span></span></li>

<li><span class="paid_template">
<b>Isinya</b>
<span class="sublocks green">
<i class="fa fa-check fa-6"></i>
</span></span></li>

<li><span class="paid_template">
<b>Isinya</b>
<span class="sublocks green">
<i class="fa fa-check fa-6"></i>
</span></span></li>

<li class="paid-box">
<a href="http://www.terwujud.com/">
<span class="paid_template">
<b class="paid-but">
<span class="lprice">$9.95</span></b>
<span class="blocks paid-txt">
Buy Now
<i class="fa fa-shopping-cart"></i>
<br/>
<span class="paid-desc">Premium Version</span>
</span></span></a></li></ul>
</div>
</div>

7. Silahkan sesuaikan tulisan yang ingin ditampilkan
8. Selesai

B. Menempatkan di dalam Postingan Blog

Bagi sobat yang ngak mau repot edit HTML di dalam template blog, maka sobat bisa langsung menempatkan kodenya ke dalam postingan blog. Caranya cukup dengan Copy dan Paste kode di bawah ini.

<style type="text/css">
b.free-but {width: 80px !important;}
b.free-but .lprice {margin: 10px 10px;}
.blocks {float: left;padding: 20px 0;}
.detail_template b i, .free_template b span, .paid_template b span {font-size:60px;color:#fff;}
span.lprice {font-size: 45px !important;}
b.free-but, b.paid-but {border-right:none;}
.free-txt, .paid-txt {font-size: 22px;color:#fff;font-weight:bold;}
.free-desc, .paid-desc {color:#fff;font-weight:normal;font-size: 16px;}
.sb.sb_orange {clear: both;}
.temp-sub {margin-top: 15px;clear: both;display: block;float: left;}
.temp-sub li {margin-left: 0 !important;}
.template_free {width: 49.5%;float: left;}
.template_paid {width: 49.5%;float: right;}
.template_name, .template_free, .template_paid {border:1px solid #FDD761;box-sizing: border-box;font-size: 13px;margin-bottom: 20px;padding:0;position: relative;}
.template_free h4, .template_paid h4 {border-bottom:1px solid #FDD761;color: #4599BD;font-size: 20px;font-weight: bold;margin: 0;padding: 10px;text-align: center;background:#FDD761;}
.template_free ul {margin: 0;padding: 0;}
.template_free li {border-bottom:1px solid #FDD761;display: block;float: left;width: 100%;}
.free_template b, .paid_template b {color: #4e5563;float: left;padding: 10px;text-align: center;}
b.free-but, b.paid-but {width: 120px;}
.sublocks {border-left:1px solid #FDD761;color: #7a7f7d;float: right;font-size: 14px;padding: 10px;text-align: center;min-width: 15px;}
.sublocks i.fa.fa-check {margin-right: 0;}
span.sublocks.green{background-color: #2ecc71;color:#fff;}
span.sublocks.red {background-color: #e74c3c;color:#fff;}
.template_paid ul {margin: 0;padding: 0;}
.template_paid li {border-bottom:1px solid #FDD761;display: block;float: left;width: 100%;}
li.free-box, li.paid-box {background: #4599BD;border-bottom: none;cursor: pointer;}
@media screen and (max-width: 768px) {
.template_free, .template_paid {width: 100% !important;float: none !important;clear: both;overflow: hidden;}
</style>

<div class="temp-sub">
<div class="template_free">
<h4>Contoh: Free Version</h4>

<ul>
<li><span class="free_template">
<b>Isi Tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li><span class="free_template">
<b>Isi tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li><span class="free_template">
<b>isi tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li><span class="free_template">
<b>isi tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li><span class="free_template">
<b>isi tulisan</b>
<span class="sublocks red">
<i class="fa fa-times"></i>
</span></span></li>

<li class="free-box">
<a href="http://www.terwujud.com/" target="_blank">
<span class="free_template">
<b class="free-but">
<span class="lprice">
<i class="fa fa-download"></i></span></b>
<span class="blocks free-txt">
Download Now
<br/>
<span class="free-desc">Free Version</span>
</span>
</span>
</a>
</li>
</ul>
</div>

<div class="template_paid">
<h4>Premium Version</h4>
<ul>
<li><span class="paid_template">
<b>Isinya</b>
<span class="sublocks green">
<i class="fa fa-check fa-6"></i>
</span></span></li>

<li><span class="paid_template">
<b>Isinya</b>
<span class="sublocks green">
<i class="fa fa-check fa-6"></i>
</span></span></li>

<li><span class="paid_template">
<b>Isinya</b>
<span class="sublocks green">
<i class="fa fa-check fa-6"></i>
</span></span></li>

<li class="paid-box">
<a href="http://www.terwujud.com/">
<span class="paid_template">
<b class="paid-but">
<span class="lprice">$9.95</span></b>
<span class="blocks paid-txt">
Buy Now
<i class="fa fa-shopping-cart"></i>
<br/>
<span class="paid-desc">Premium Version</span>
</span></span></a></li></ul>
</div>
</div>

Sangat Penting

• Saat di dalam postingan, pilih menu HTML bukan Compose
• Pastikan pada menu (Setelan Entri ⇒ Pilihan ⇒ Baris Baru) klik tulisan "Gunakan tag <br>", kemudian, ketika sobat mempublish artikelnya, maka setelan entri tidak akan berubah, jika mau merubahnya kembali, klik menu "tekan "Enter" untuk baris baru"
• Pada tulisan yang berwarna MERAH, silahkan ganti dengan yang sobat inginkan
• Pada kode yang berwarna KUNING, ganti dengan URL sobat

^^ Mungkin ini saja penjelasannya, jika ada pertanyaan, saran dan komentar, silahkan hubungi saya atau beri komentar pada form yang telah tersedia. Jika artikel ini bermanfaat, mohon di share ya !