Banyaknya pertanyaan di group bagaimana cara membuat tombol Download dan Tombol Preview atau Tombol DEMO membuat saya tertarik bertapa pentingnya tutorial ini, hal ini selain wawasan juga bisa menambah ilmu dan bisa menambah cantiknya model tombol yang kita gunakan di blogger kita.
Tentu saja ini membuat tampilan blog dan situs anda semakin terlihat elegan, nah bagaimana cara membuat tombol seperti di situs masterdesain.com, silahkan simak baik-baik cara dibawah ini :
1. Masuk ke Blogger → Tema → Edit HTML
2. Masukan kode script dibawah ini sebelum kode </head>
Masuk ke Blogger → Tema → Edit HTML
Masukan kode script dibawah ini sebelum kode </head>
<!-- before </head> -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
.buttondownload {
list-style: none;
text-align: center;
width: 95%;
margin: 10px;
padding: 2px;
font-size: 16px;
clear: both
}
.buttondownload a {
position: relative;
padding: 9px 48px 9px 16px;
background: #3498db;
color: #fff !important;
font-weight: 700;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 0px;
box-shadow: 0 1px rgba(0, 0, 0, 0.1);
line-height: normal;
transition: all .3s
}
.buttondownload a:before {
content: "\f019";
background: rgba(0, 0, 0, 0.1);
position: absolute;
right: 0;
top: 0;
font-weight: normal;
display: inline-block;
margin: 0 0 0 10px;
color: #fff;
padding: 11px;
font-family: "fontawesome";
}
.buttondownload a:hover {
background: #5C5C5C
}
.buttondownload:active {
cursor: pointer
}
.buttondemo {
float: left;
list-style: none;
text-align: center;
width: 95%;
margin: 10px;
padding: 2px;
font-size: 16px;
clear: both
}
.buttondemo a {
position: relative;
padding: 9px 48px 9px 16px;
background: #E55E48;
color: #fff !important;
font-weight: 700;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 0px;
box-shadow: 0 1px rgba(0, 0, 0, 0.1);
line-height: normal;
transition: all .3s
}
.buttondemo a:before {
content: "\f135";
background: rgba(0, 0, 0, 0.1);
position: absolute;
right: 0;
top: 0;
font-weight: normal;
display: inline-block;
margin: 0 0 0 10px;
color: #ffffff;
padding: 11px;
font-family: "fontawesome";
}
.buttondemo a:hover {
background: #666
}
.buttondemo:active {
cursor: pointer
}
</style>Jika kurang jelas diatas bisa kopas pada script dibawah ini :
<!-- before </head> -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
.buttondownload {
list-style: none;
text-align: center;
width: 95%;
margin: 10px;
padding: 2px;
font-size: 16px;
clear: both
}
.buttondownload a {
position: relative;
padding: 9px 48px 9px 16px;
background: #3498db;
color: #fff !important;
font-weight: 700;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 0px;
box-shadow: 0 1px rgba(0, 0, 0, 0.1);
line-height: normal;
transition: all .3s
}
.buttondownload a:before {
content: "\f019";
background: rgba(0, 0, 0, 0.1);
position: absolute;
right: 0;
top: 0;
font-weight: normal;
display: inline-block;
margin: 0 0 0 10px;
color: #fff;
padding: 11px;
font-family: "fontawesome";
}
.buttondownload a:hover {
background: #5C5C5C
}
.buttondownload:active {
cursor: pointer
}
.buttondemo {
float: left;
list-style: none;
text-align: center;
width: 95%;
margin: 10px;
padding: 2px;
font-size: 16px;
clear: both
}
.buttondemo a {
position: relative;
padding: 9px 48px 9px 16px;
background: #E55E48;
color: #fff !important;
font-weight: 700;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 0px;
box-shadow: 0 1px rgba(0, 0, 0, 0.1);
line-height: normal;
transition: all .3s
}
.buttondemo a:before {
content: "\f135";
background: rgba(0, 0, 0, 0.1);
position: absolute;
right: 0;
top: 0;
font-weight: normal;
display: inline-block;
margin: 0 0 0 10px;
color: #ffffff;
padding: 11px;
font-family: "fontawesome";
}
.buttondemo a:hover {
background: #666
}
.buttondemo:active {
cursor: pointer
}
</style>
Keterangan :
Code di atas adalah style dari tombol yang dibuat, dimana di dalam tombol tersebut terdapat icon dari fontawesome.
Gunakan code HTML dibawah ini setiap postingan untuk menampilkan tombol DOWNLOAD NOW maupun DEMO THEME
<div class="buttondemo"><a href="http://www.masterdesain.com/"target="_blank">DEMO THEME</a></div>
<div class="buttondownload"><a href="http://www.masterdesain.com/"target="_blank">DOWNLOAD NOW</a></div>
Silahkan cek hasilnya seperti disini
Selamat Mencoba
Surat Ad Dukhaan terdiri atas 59 ayat, termasuk golongan surat-surat Makkiyyah, diturunkan sesudah Az Zukhruf.
BalasHapusDinamai Ad Dukhaan (kabut), diambil dari perkataan Dukhaan yang terdapat pada ayat 10 surat ini.
Menurut riwayat Bukhari secara ringkas dapat diterangkan sebagai berikut: Orang-orang kafir Mekah dalam menghalang-halangi agama Islam dan menyakiti serta mendurhakai Nabi Muhammad s.a.w. sudah melewati batas, karena itu Nabi mendoa kepada Allah agar diturunkan azab sebagaimana yang telah diturunkan kepada orang-orang yang durhaka kepada Nabi Yusuf yaitu musim kemarau yang panjang. Do’a Nabi itu dikabulkan Allah sampai orang-orang kafir memakan tulang dan bangkai, karena kelaparan. Mereka selalu menengadah ke langit mengharap pertolongan Allah. Tetapi tidak satupun yang mereka lihat kecuali kabut yang menutupi pandangan mereka.
Akhirnya mereka datang kepada Nabi agar Nabi memohon kepada Allah supaya hujan diturunkan. Setelah Allah mengabulkan doa Nabi, dan hujan di turunkan, mereka kembali kafir seperti semula; karena itu Allah menyatakan bahwa nanti mereka akan diazab dengan azab yang pedih.
Pokok-pokok isinya.
1. Keimanan:
Dalil-dalil atas kenabian Muhammad s.a.w.; huru-hara dan kehebatan hari kiamat; pada hari kiamat hanya amal-amal seseorang yang dapat menolongnya; azab dan penderitaan yang ditemui orang-orang kafir di akhirat serta nikmat dan kesenangan yang diterima orang-orang mukmin.
2. Hukum-hukum:
Kisah Musa a.s dengan Fir’aun dan kaumnya.
3. Dan lain-lain:
Permulaan turunnya Al Quran pada malam lailatul Qadar; orang-orang kafir hanya beriman kalau mereka ditimpa bahaya, kalau bahaya telah hilang mereka kafir kembali; dalam penciptaan langit dan bumi itu terdapat hikmat yang besar.