Membuat Tombol Demo dan Download Efek Slide Keren di Blog

Membuat Tombol Demo dan Download efek Slide keren di Blog. dengan efek Slide CSS tanpa java script di Blog, sehingga memiliki loading yang lebih cepat dibandingkan java script.

_Masuk ke Blogger >> Template >> Edit HTML. Cari kode ]]></b:skin> atau </style>, dan letakkan kode berikut ini di atas kode ]]></b:skin> atau </style>.

#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }

_Kemudian cari kode </head>, simpan kode di bawah ini di atas kode </head>. Dan Simpan Template.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Catatan : Untuk menggunakannya dalam postingan, pastikan postingan yang akan diberi efek dalam mode HTML/ Bukan Compose letakan kode HTML di bawah ini sesuai keinginan, dan jangan lupa untuk mengganti kode berwarna merah dengan alamat link yang dituju.

<div id="wrap">
<a class="bie-slide" href="http://belajar-dasar-seo.blogspot.com" 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="bie-slide2" href="http://belajar-dasar-seo.blogspot.com" 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>

_Simpan dan hasilnya seperti berikut :

Demo Click here

About IBNU MUBAROK

Terima Kasih Sudah Membaca Artikel Yang Berjudul Membuat Tombol Demo dan Download Efek Slide Keren di Blog . Jika Ingin Copas, Mohon Sertakan Link Sebagai Sumbernya. Semoga Bermanfaat.