Tips Blogger - Cara Membuat Tombol Demo dan Download Di Blog – bagi sobat yang sering membagikan sesuatu dari blog baik itu berbagi Software, Template, Filem dan lain sebagainya pastinya akan membutuhkan tombol Demo dan Download ini.
Tombol demo dan download yang saya berikan kali ini terbilang unik dan SEO, karena memakai Flat UI dengan tambahan Icon Font Awesome. Para pakar SEO dan blogger yang mempunyai pengunjung yang sangat banyak sudah menggunakan tombol ini, seperti Ganool.com, Cinema21.tv dan lain sebagainya. Bagi sobat yang belum tahu mengenai cara membuat Tombol Demo dan Download, ini adalah kesempatan baik untuk belajar Cara Membuat Tombol Demo dan Download Di Blog Terbaik. Langsung saja kita Cari tahu caranya Berikut ini.
Cara membuat Tombol Demo dan Download Flat UI
Witget ini menggunakan Font Awesome, jadi silahkan tambahkan Kode CSS berikut ini tepat di atas kode </head>
HTML
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
1. langkah pertama masuk ke Blog Sobat > emplate > Edit HTML
2. Pastikan di dalam Template Blog sobat terdapat Script Pemanggil CSS style Fout awesome seperti di bawah ini yang terletak di atas kode </head>. Jika tidak ada silahkan letakkan Script Pemanggil CSS style Fout Awesome di bawah ini tepat di atas kode </head>
3. Letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>
Stayel 1
/* CSS Button Style 1 by www.arlinadzgn.com */.button{float:left;list-style:none;text-align:center;width:95%;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:#f39c12;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:#3498db}.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.demo:after,.button li a.download:after{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:#fff;padding:11px;font-family:fontawesome}.button li a.download:after{content:'\f019'}
Style 2
/* CSS Button Style 2 by www.arlinadzgn.com */.button2{float:left;list-style:none;text-align:center;width:95%;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:#f39c12;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:170px;margin:auto;overflow:hidden}.button2 li a.download{background:#3498db}.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-animation: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)}}
4. Simpan Template
5. untuk menggunakannya, silahkan gunakan kode berikut ini ketika membuat posting (Tambahkan Dalam Teb HTML Artikel)
Stayl 1
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="http://www.arlinadzgn.com" target="_blank">Demo</a></li> <li><a class="download" href="http://www.arlinadzgn.com" target="_blank">Download</a></li> </ul></div><div class="clear"></div>
Stayl 2
<div style="text-align: center;"> <ul class="button2"> <li><a class="demo" href="http://www.arlinadzgn.com" target="_blank">Demo Link</a></li> <li><a class="download" href="http://www.arlinadzgn.com" target="_blank">Download Link</a></li> </ul></div><div class="clear"></div
Demikianlah tutorial tentang Cara Membuat Tombol Demo dan Download Di Blog. Dengan begini di harapkan sobat bisa lebih banyak membagi, bukan hanya dengan tulisan namun juga data, Vidio dan lain sebagainya. semoga bermanfaat dan selamat Mencoba.
0 Komentar