iDebagus - Pada kesempatan kali ini saya akan membahas seputar artikel sederhana yang berkaitan dengan widget blogger. Sebelumnya pernahkan sobat melihat sebuah situs blog yang memiliki tombl slide Demo dan Downloadnya seperti gambar di atas keren bukan sobat pernahkan anda berkeinginan ingin membuat tombol slide demo dan download seperti itu di situs blog anda masing-masing mungkin sebahagian ada yang berminat dan sebahagian mungkin ada yang belum tertarik. Nah buat anda yang tertarik dan masih bingung bagaimana cara menghias situs blog anda dengan membuat tampilan slide tombol demo dan download menjadi unik seperti gambar diatas bisa mengikuti caranya di bawah sobat, caranya cukuplah mudah kita hanya perlu memodifikasi sedikit kode html yang ada di dalam template dan menambahkannya dengan kode html yang baru yaitu kode html dari widget tombol demo dan download tersebut begitulah sobat caranya cukuplah mudah nah buat anda yang masih bingung bisa melihat langkah-langkahnya di bawah ini.
Contoh Gambar
Sumber : Arlina Design
1. Login ke akun blogger anda masing-masing
2. Masuk ke menu Template / Edit Template Setelah itu letakkan kode HTML di bawah ini tepat di atas kode : </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>3.Setelah itu letakkan pula kode CSS di bawah ini tepat di atas kode : ]]></b:skin> Atau </style>
/* 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. Jika sudah simpan template yang baru saja di edit tadi
5. Nah untuk memangil widget dari demo dan download tersebut anda bisa menggunakan markup kode ini
Kode Pemanggil untuk Widget Demo & Download
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.idebagus.co.id/" target="_blank" title='Demo'>Demo</a></li>
<li><a class="download" href="http://www.idebagus.co.id/" target="_blank" title='Download'>Download</a></li>
</ul>
</div>
<div class="clear"></div>
EmoticonEmoticon