Advertising

Membuat Button DEMO - DOWNLOAD Pada Blogger



Siomponk.Com - Untuk anda para blogger yang suka berbagi template blog biasanya terdapat 2 link wajib disertakan, yaitu DEMO dan DOWNLOAD. Adapun model link tersebut bermacam-macam, ada yang link biasa seperti ini, ada juga yang menggunakan bantuan gambar button (images), ada juga yang menggunakan CSS.

Nah, pada postingan saya ini saya akan membahas tentang Membuat Button DEMO - DOWNLOAD Pada Blogger menggunakan CSS sehingga loading blog masih tetap ringan. Sebagai contoh seperti pada gambar diatas.

Adapun cara membuatnya adalah sebagai berikut:

- Masukkan code berikut ini DIATAS code ]]></b:skin>
/* CSS Button */
.kotak-demo-download {
float:left;list-style:none;text-align:center;width: 100%;margin:8px 0!important;padding:0;font-size:14px;clear:both;font-family:Oswald, Open Sans, Arial, sans-serif;text-transform:uppercase;
}
.kotak-demo-download ul {
margin:0;padding:0
}
.kotak-demo-download li{
display:inline;margin:0;padding:0;
}
.demo {
border: 1px solid #d24932;border-bottom-color:#c84934;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px;
}
.download {
border: 1px solid #549dd4;border-bottom-color:#4b8cbe;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;
} .demo:hover {
background: #d94a33;box-shadow:none;border-color:#d0412a #d0412a #c43d27; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222;
}
.download:hover {
background: #4296d5;box-shadow:none;border-color:#378dcd #378dcd #2a80c0; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222}
- Letakkan code berikut ini DIATAS code </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
- Kemudian simpan template anda
- Lalu pemasangan pada postingan, gunakan code berikut ini pada isi postingan
<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="LINK-DEMO" target="_blank">Demo</a></li>
<li><a class="download" href="LINK-DOWNLOAD" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Untuk demonya, anda bisa melihat hasil dibawah ini:


Nah, demikianlah postingan saya ini tentang cara Membuat Button DEMO - DOWNLOAD Pada Blogger menggunakan CSS, dan semoga postingan saya ini dapat bermanfaat untukk anda.
Salam...




▶ INFO ARTIKEL :
OLEH:
LABEL: Tips Blog,
JUDUL: Membuat Button DEMO - DOWNLOAD Pada Blogger
URL: http://www.siomponk.com/2015/02/membuat-button-demo-download-pada.html
Loading...

Written by : - Part Time Blogger

author-photo Seorang publisher blogger asal kota Jogjakarta yang mencoba mencari jati dirinya dan yang selalu belajar dalam hidupnya. Sangat menyukai ungkapan
"Jangan lihat dari siapa kebenaran itu datang, tapi lihatlah isi dan makna dari kebenaran itu."

Follow On : Facebook | | Blogger

0 Response to "Membuat Button DEMO - DOWNLOAD Pada Blogger"

Poskan Komentar

PERATURAN BERKOMENTAR:

- Gunakan BAHASA yang baik dalam berkomentar
- Dilarang SPAM dalam berkomentar
- Dilarang SARA dan SARU dalam berkomentar
- Dilarang OOT dalam berkomentar

Jika terdapat hal demikian pada komentar anda, kami akan menghapus komentar anda tersebut.