Cara Membuat Tombol Demo Dan Download Keren Di Postingan
Cara Membuat Tombol Demo Dan Download Keren Di Postingan - Waktu pertama saya bermain blogger saya sering kali melihat tombol demo dan download keren yang ada pada blog template, tombol ini sangat bagus dan kelihatan rapi jika kita mengeshare sebuah artikel tentang template, bagi kalian yang blog template silahkan di coba menggunakan tombol ini semoga kamu suka deh dengan tombol ini berikut ini gambar tombolnya.
Screen Shoot :
Berikut itulah tombol download dan demo yang saya akan share untuk kamu, semoga bermanfaat ya untuk sobat yang sedang mencari tombol ini.
Screen Shoot :
Berikut itulah tombol download dan demo yang saya akan share untuk kamu, semoga bermanfaat ya untuk sobat yang sedang mencari tombol ini.
CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD
- Loggin ke akun blogger
- Pilih Dashboard > Template > Edit Html
- Cari Kode ]]></b:skin>, Lalu Letakan kode ini di atas kode ]]></b:skin>
.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;border-radius:2px;padding: 8px 19px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;}
.download {border: none;border-radius:2px;padding: 8px 19px !important; background: #2ecc71; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;}
.demo:hover { background: #454242;text-decoration:none }.downloadx:hover { background: #454242;text-decoration:none }
#putar-putar-bro
{
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#putar-putar-bro:hover { -moz-transform:scale(1.5) rotate(-360deg); -webkit-transform:scale(1.5) rotate(-360deg); -o-transform:scale(1.5) rotate(-360deg); -ms-transform:scale(1.5) rotate(-360deg); transform:scale(1.5) rotate(-360deg);cursor:pointer;color:#2295b5; } - Lalu tambahkan kode Jquery tepat di atas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
- Untuk menaruh tombol demo dan download taruh kode ini di postingan yang ingin di berikan tombol dan pilih bagian HTML
<ul class="button"> <li><a class="demo" href="http://sshkita.com"><i class="icon-desktop"></i>Demo</a></li> <li><a class="download" href="http:/sshkita.com"><i class="icon-cloud-download"></i>Download</a></li> </ul><div class="clear">
Mengerti ? mudah bukan memasang tombol download dan demo pada blogger langsung di test di blogger kalian ya sobat semoga postingan saya kali ini bermanfaat untuk kalian ya jangan lupa untuk berkunjung kembali ke sini.
Categories:
Cara Seo
Mantap nih tutorialmu. Saya punya 2 blog download tapi baru ada ide buat tombol download di postingan. Thanks gan
BalasHapus