Cara Memasang Slide Button Di Blog
Pada kesempatan kali ini, aku akan memperlihatkan tutorial cara memasang slide button di blog dengan tampilan yang menarik. Disini Anda sanggup mengedit tombolnya sesuai harapan ibarat mengubahnya menjadi tombol download, listen, review, demo, dan lain-lain sesuai selera. Menariknya lagi Anda akan mendapati tombol ini mempunyai dampak hover dan insert yang cantik sehingga tidak membebani kinerja blog Anda. Cara pemasangannnya pun sangat gampang bahkan penarapannya terbilang simple, selain itu niscaya menarik untuk dipandang. Lalu bagaimana cara memasang slide button ini blog? simak aja tutorialnya berikut.
Cara Membuat Slide Button di Blogger
1. Langkah awal silahkan Anda login dulu ke Blogger
2. Pilih Template → Edit HTML
3. Kemudian cari kode ]]></b:skin> atau </style>
4. Lalu Copy kode CSS berikut, dan sehabis itu Paste diatas atau sebelum kode ]]></b:skin> atau </style>
/* Slide Button by lk21.news */ .button { background: #3D4C53; margin : 20px auto; width : 200px; height : 50px; overflow: hidden; text-align : center; transition : .2s; cursor : pointer; border-radius: 3px; box-shadow: 0px 1px 2px rgba(0,0,0,.2); } a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;color:#fff;font-size:17px;} .btnTwo { position : relative; width : 200px; height : 100px; margin-top: -100px; padding-top: 2px; background : #26A69A; left : -250px; transition : .3s; } .btnText { margin-top :10px; color : white; transition : .3s; } .btnText2 { margin-top : 47px; margin-right : -130px; color : #FFF; } .button:hover .btnTwo{ /*When hovering over .button change .btnTwo*/ left: -130px; } .button:hover .btnText{ /*When hovering over .button change .btnText*/ margin-left : 65px; } .button:active { /*Clicked and held*/ box-shadow: 0px 5px 6px rgba(0,0,0,0.3); } 6. Lalu Simpan atau Save Templatenya
7. Selanjutnya ketika Anda ingin memasan slide button ini pada postingan, maka gunakanlah instruksi berikut ini dan letakan di Tab HTML dan bukan Compose.
<div class="button"><a class="btn" href="#"> <p class="btnText">Ready?</p> <div class="btnTwo"> <p class="btnText2"><i class=" fa fa-download fa-2x float shadow"></i></p></a> </div> </div> <div class="button"><a class="btn" href="#"> <p class="btnText">Review</p> <div class="btnTwo"> <p class="btnText2"><i class=" fa fa-eye fa-2x float shadow "></i></p> </div></a> </div> Silahkan ganti tanda # dengan link url Anda, dan disini Anda sanggup mengubah font awesomenya sesuai selera, atau menganti tulisannya sesuai harapan Anda entah itu download, listen, review, demo, dan lain-lain.
8. Terakhir tinggal Anda Publikasikan dan lihat hasilnya, biar cantik ya!!!
Nah itulah langkah singkat pemasangan slide button di blog, yang mana akan menciptakan blog Anda semakin menarik. Sekian dulu artikel kali ini kalau ada yang ingin Anda tanyakan atau tidak mengerti silahkan komentar dibawah ini terima kasih.
