Judul : Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome
link : Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome
Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome
Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome - Tentunya kita sangat senang kalo artikel diwebsite kita banyak dapat share dari pengunjung karena semakin banyak share maka semakin banyak pula kemungkinan artikel kita dikunjungi, untuk itu Juragan pengen berbagi code buat tombol share yang sederhana tapi tetap keca badai :DUntuk penggunaan icon, Juragan menggunakan Font Awesome, website resminya dimari.
Baca juga : Cara Memasang Font Awesome Di Web
Pertama, tentunya harus membuat koneksi Font Awesome, tulis code ini didalam header webste
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Dengan begitu, kamu sudah mengkoneksikan Font Awesome secara online.
selanjutnya buat code HTML berikut
<!-- Twitter -->
<a href="http://twitter.com/share?url=URL-ARTIKEL" target="_blank" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=URL-ARTIKEL" target="_blank" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=URL-ARTIKEL" target="_blank" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=URL-ARTIKEL" target="_blank" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<!-- LinkedIn -->
<a href="http://pinterest.com/pin/create/button/?url=URL-ARTIKEL" target="_blank" class="share-btn pinterest">
<i class="fa fa-pinterest"></i>
</a>
<!-- Email -->
<a href="mailto:?subject=HMTL%20Share%20Buttons&body=URL-ARTIKEL" target="_blank" class="share-btn email">
<i class="fa fa-envelope"></i>
</a>
Udah mulai terbentuk kan? hehe, sekarang mulai mempercantik tombol share kamu dengan CSS
.share-btn {
display: inline-block;
color: #ffffff;
border: none;
padding: 0.5em;
width: 4em;
opacity: 0.9;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
outline: none;
text-align: center;
}
.share-btn:hover {
color: #eeeeee;
}
.share-btn:active {
position: relative;
top: 2px;
box-shadow: none;
color: #e2e2e2;
outline: none;
}
.share-btn.twitter { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook { background: #3B5998; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.reddit { background: #ff5700; }
.share-btn.linkedin { background: #4875B4; }
.share-btn.pinterest { background: #AB0909; }
.share-btn.email { background: #444444; }
Kalo udah jadi begitu jadinya, keren kan, tinggal dikembangin aja biar makin kece :D
see you
NB : text URL-ARTIKEL pada code HTML ganti dengan URL web kalian, misal facebook :
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.juragancoding.com/2015/11/membuat-tombil-share-sederhana.html" target="_blank" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
Demikianlah Artikel Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome
Sekianlah artikel Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome dengan alamat link https://jendeladuniainternet.blogspot.com/2015/11/membuat-tombol-share-sederhana.html
0 Response to "Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome"
Posting Komentar