Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Bootstrap, Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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 :D
Untuk 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 http://jendeladuniainternet.blogspot.com/2015/11/membuat-tombol-share-sederhana.html

Tweet