Terwujud

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



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
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.
Menu Download
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

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 !


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 4 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. Langsung praktik deh :D Moga2 aja bisa. :D

    ReplyDelete
  2. atraktif dan responsive... selebihnya menarik mas... dipakai beberapa web keren fitur ini mas... makasih tutorialnya.

    ReplyDelete
  3. Nah, ijin bookmark tutornya gan, buat blogger pemula kyak ane,, hehe...

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved