- Buka blogger > Template > Klik Edit HTML dan terapkan kode dibawah sebelum kode </style> atau ]]></b:skin>
CSS
#wrap {
margin: 20px auto; text-align: center;}#wrap br { display: none;}.btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s;}.btn-slide2 { border: 2px solid #ca0002;}.btn-slide:hover { background-color: #0099cc;}.btn-slide2:hover { background-color: #ca0002;}.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;}.btn-slide2:hover span.circle2 { color: #ca0002;}.btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0;}.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px;}.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%;}.btn-slide2 span.circle2 { background-color: #ca0002;}.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s;}.btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #ca0002; left: 80px;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff;}
Simpan Template
Kemudian untuk kode pemanggil silahkan terapkan pada postingan tab HTML. Agar tampilannya rapi saat memasukan kode HTML ke dalam postingan sebaiknya gunakan Tekan "Enter" untuk baris baru Pada menu "PILIHAN" Seperti gambar di bawah ini .
<center><div id="wrap"><a class="btn-slide" href="#" target="_blank"><span class="circle"><i class="fa fa-rocket"></i></span><span class="title">Demo</span><span class="title-hover">Click here</span></a><a class="btn-slide2" href="#" target="_blank"><span class="circle2"><i class="fa fa-download"></i></span><span class="title2">Download</span><span class="title-hover2">Click here</span></a></div></center>
