Membuat Tombol Demo dan Download di Blogger
Oleh: ![Unknown]( "Unknown")
Unknown |
September 02, 2017
Membuat Tombol Demo dan Download di Blogger | Tombol demo dan download pada blog yang membahas seputar tutorial blogging sangat penting kehadirannya, dengan kedua tombol demo dan download ini visitor bisa melihat hasil secara langsung dari tutorial yang kita berikan, misalkan tutorial untuk membuat menu navigasi dalam blog, maka kita arahkan ke hasil dari tutorial yang kita berikan.
Melihat dari pentingnya tombol demo dan download pada blog ini, pada kali ini saya akan memberikan tutorial untuk membuat tombol demo dan download material design yang sangat elegan dan menarik.
Bagi Sobat yang ingin langsung menerapkan tombol demo dan download material desain ini pada blog sobat, silahkan ikuti tutorial dibawah ini:
Cara Membuat Tombol Demo dan Download di Blogger
Langkah 1 Silahkan masuk ke Blog>Theme>edit HTML Lalu letakan kode dibawah ini diatas kode </head>
Langkah 2 Setelah itu paste kode dibawa ini diatas kode </style> atau ]]></b:skin>
Langkah 3 Lalu Gunakan kode berikut pada saat posting dan letakan pada mode HTML
Keterangan
silahkan di ganti "your url name" dengan alamat URL blog sobat
Demikian dua style membuat tombol demo dan download di Blogger yang langsung bisa sobat pasang di blog sobat, semoga bermanfaat
Melihat dari pentingnya tombol demo dan download pada blog ini, pada kali ini saya akan memberikan tutorial untuk membuat tombol demo dan download material design yang sangat elegan dan menarik.
Bagi Sobat yang ingin langsung menerapkan tombol demo dan download material desain ini pada blog sobat, silahkan ikuti tutorial dibawah ini:
Cara Membuat Tombol Demo dan Download di Blogger
Langkah 1 Silahkan masuk ke Blog>Theme>edit HTML Lalu letakan kode dibawah ini diatas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel="stylesheet"/>
Langkah 2 Setelah itu paste kode dibawa ini diatas kode </style> atau ]]></b:skin>
Style 1
/* model flat ui 1 */ .button { float : left ; list-style : none ; text-align:center;width:160px;margin:10px;padding:2px;font-size:14px;clear:both} .button ul {margin:0;padding:0} .button li { display:inline;margin:5px;padding:0;list-style:none} .button li a.demo,.button li a.download{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:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s} .button li a.download{background:#e74c3c} .button li a.demo:hover,.button li a.download:hover{background:#666} .button li a.demo:active,.button li a.download:active{cursor:pointer} .button li a.after,.button li a.download:after{content:'\f135';bacground: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} .button li a.download:after{content:'\f019'}Style 2
/* model flat ui 2 */ .button2{float:left;list-style:none;text-align:center;width:200px;margin:10px;padding:2px;font-size:14px;clear:both} .button2 ul{margin:0;padding:0} .button2 li{display:inline;margin:5px;padding:0;list-style:none} .button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#3498db;display:block;color:#fff !important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:200px;margin:auto;overflow:hidden} .button2 li a.download{background:#e74c3c} .button2 li a.demo:hover,.button2 li a.download:hover{background:#666} .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer} .button2 li a.demo:after,.button2 li a.download:after{content:'\f054';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:16px 24px;font-family:fontawesome;transition:all .3s} .button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animaton:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} @webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}Langkah 3 Lalu Gunakan kode berikut pada saat posting dan letakan pada mode HTML
Style 1
<div style="text-align:center;"> <ul class="button"> <li><a class="demo" href="your url name" target="_blank">Demo</a></li> <li><a class="download" href="your url name" target"_blank">Download</a></li> </ul> </div> <div class="clear"></div>
Style 2
<div class="text-align:center;"> <ul class="button2"> <li><a class="demo" href="your url name" target="_blank">Demo Link</a></li> <li><a class="download" href="your url name" target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>
Keterangan
silahkan di ganti "your url name" dengan alamat URL blog sobat
Demikian dua style membuat tombol demo dan download di Blogger yang langsung bisa sobat pasang di blog sobat, semoga bermanfaat
