Untuk Demo bisa lihat dibawah ini.
Untuk cara penerapannya sangat mudah, berikut ini cara untuk menerapkannya.
Masuk ke www.blogger.com
Buka Template dan Klik Edit HTML
Letakan kode dibawah ini diatas kode
]]></b:skin>/* -- Kang Ismet Button --*/
.button{float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both}
.button ul{margin:0; padding:0}
.button li{display:inline; margin:0; padding:0}
.demo{border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 80px !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:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 80px !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:#454242; 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:#454242; 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}
Kemudian Simpan Template / Save Template. Selesai.
Untuk menggunakan di postingan blog anda, silahkan copy code ini di HTML.
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blog.kangismet.net" target="_blank">Demo</a></li>
<li><a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Keterangan :
Kode yang bercetak Tebal, Miring, dan Berwarna Merah adalah URL Tujuan untuk Demo.Kode yang bercetak Tebal, Miring, dan Berwarna Biru adalah URL Tujuan untuk Download.
Sekian dari saya, semoga artikel ini bermanfaat untuk anda.
Terimakasih.
Source Code by : http://blog.kangismet.net/
Terlalu susah gan, ane blogger mobile.
ReplyDeleteKujungan balik ke rismawangpr.blogspot.com
oh, usahakan main di komputer/laptop ^^
DeleteL :v L, sama postinganya sama blog ane :v, ketauan ga ada ide posting :v
ReplyDelete#nothingtodohere
ah kampred, lu juga gitu...
Deletemalah banyak lu daripada gw, gw palingan baru ini :v
ngoahahahah
L :v L kampred, gw baru 1 :v, yg CSS Komentar G+ :v
Deletelo udh banyak :v
dih, memutar balikkan fakta :p
Delete:v
Deletesudah sudah jangan bertengkar,, saling bunuh aja lah |o| wkwkwkwkwk
Deletehey, aku tidak bertengkar @@,
Deletehey hey manusia aku tidak bertengkar @@.
Deleteyoo wes lah -_- ,, tadinya gwe mau taruhan ^_^
DeleteBagus gan :)
ReplyDeletecomment back ya Rafinblog.blogspot.com
bagus tipsnya, tapi garisnya kok lewat gitu sih .-. nanti saya coba tipsnya, smoga berhasil :)
ReplyDeletegaris yang mana ? -_-
Deleteblockquotenya nday, mungkin resolusi kompi die kecil :v
Deleteoh iya, blockquote belom gw benerin, itu gara" pseudo element terus width nya pake persentasi -_-
Deletetar gw benerin :v