Tidak henti hentinya saya akan membagikan tutorial untuk para anda pecinta blogger. Kali ini Saya akan membagikan Cara memasang Tombol demo dan download yang di mana ini mempunyai fungsi untuk menuju link yang telah tersimpan di dalamnya apabila di klik.
Tombol Demo dan Download yang saya bawakan ini cocok untuk Anda yang blognya Flat Design.
Tombol Demo dan Download yang saya bawakan ini cocok untuk Anda yang blognya Flat Design.
Berikut tutorialnya dan simak baik-baik
1. Login Blogger
2. Template - Edit HTML
3. Simpan kode di bawah ini sebelum 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;
}4. Tambahkan kode di bawah ini di bawahnya kode <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Jika kode di atas sudah terdapat pada template anda maka tidak perlu lagi memasangnya
5. Save template Untuk kode format pemanggilan tombol tersebut pada Postingan Anda dengan menggunakan kode di bawah ini pada mode HTML
<div id="wrap"> <a href="http://www.juhdialfarhan.id/" class="bie-slide" 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 href="http://www.rumahmedia.id/" class="bie-slide2" 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>Ganti URL di atas dengan URL tujuan Anda
Cukup sekian tutorial ini selamat mencoba, dan semoga work