Cara Membuat Tombol Demo dan Download di Blog - Button diatas merupakan contoh tombol "DEMO" dan "DOWNLOAD" yang bakal NTechno kasitau , lumayan tombol - tombol berikut bisa digunakan bukan sekedar demo dan download tapi bisa kita tujukan dengan link - link dan tujuan lainnya .
Oke langsung saja :
1. Login ke Dasboard Blogger
2. Klik " Template "
3. Edit HTML
Cari kata </style> atau ]]></b:skin> kemudian letakkan script dibawah ini tepat diatas </style>atau ]]></b:skin> itu .
#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; }
#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. Kemudian lanjutkan dengan mencari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head> .
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
5. Klik " Simpan Template "
Jika kamu ingin membuat tombol demo dan download nya pada postingan , copy kan script dibawah ini , dan mode postingan harus HTML dahulu baru diubah ke Compose :
<div id="wrap">
<a class="bie-slide" href="http://www.newbietechnoo.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://www.newbietechnoo.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>
<a class="bie-slide" href="http://www.newbietechnoo.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://www.newbietechnoo.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>
6. Selesai , Simpan lalu lihat hasil nya .
Masih muda dan giat belajar dalam hal coding,sangat tertarik dengan dunia internet marketing , kerja keras demi sebuah pencapaian!
2 komentar
Click here for komentarbring your computer with great feature please contact :-At hand Galaxy S6 Skins more to bounce as well as long desires of belongings that can be accessible. Moderately we can originated depressed to the IPhone 6 Skins new activities all on the foundation of belongings IPhone Skins are controlled by the fashionable as well as good overweight of evidences in the opinion of evocative directive. Now we are as a collection help you to whole get that article Macbook Skins.
Replykeren min, terbantu sekali, makasih ...
Replyhttp://danielledellorto.com/dapatkan-kemudahan-fungsi-4-in-1-hanya-di-solder-uap-cody-909/
Aturan Berkomentar :
1. Berkomentarlah dengan Bijak
2. Tanyakan pertanyaan yang sesuai dengan Topic
3. Jangan menyisipkan link aktif
4. Gunakan bahasa yang sopan dan lugas!
Terima Kasih
ConversionConversion EmoticonEmoticon