Cara Membuat Icon Media Sosial di CSS3

Pada hampir setiap website, blog, majalah atau bisnis yang Anda temui di internet, memiliki beberapa konten atau tombol media sosial. Apakah itu share sosial, link profil atau “like”, “follow”, dll. Dan meskipun diluar sana pun ada tool atau plugin yang instan tapi alangkah lebih baik kita belajar dari yang dasar terlebih dahulu dengan buatan sendiri. Tutorial ini akan menunjukan cara membuat kustom icon media sosial langkah demi langkah. Jadi mari kita mulai!

Step 1 – Membuat Tombol

Untuk mulai membuat tombol media sosial kita, kita akan mulai dengan membuat tombol yang sebenarnya. Mari kita mulai dengan menambahkan kode HTML sederhana dibawah ini untuk membuat button.

<html>
<head>
</head>
    <a class="share__btn" href="#">Tweet</a>
</div>
    <a class="share__btn" href="#">Like</a>
</div>
    <a class="share__btn" href="#">+1</a>
</div>
</html>

Saat ini kita telah menambahkan HTML dasar kita sekarang dapat menambahkan beberapa style dan mulai membentuk tombol keluar. CSS dibawah ini akan digunakan sebagai border dan style untuk kedua tombol dan counter share.

body {
    font: 0.875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 42px 40px;
}
 
a {
    text-decoration: none;
}
 
.share {
    display: inline-block;
    margin-right: 20px;
}
.share__count {
    background-color: #fff;
    border: solid 1px #a5b1bd;
    border-radius: 3px;
    /* add in vendor rules */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* add in vendor rules */
    color: #424a4d;
    float: left;
    font-weight: bold;
    margin-right: 10px;
    padding: 4px 10px;
    position: relative;
    text-align: center;
}

TutIMG1

Sekarang, kita belum selesai membuat layout dasar untuk kedua tombol share dan counter share dengan kode diatas. Kita sekarang perlu menambahkan kode CSS dasar untuk dapat menyelesaikan dan membentuk sebuah tombol.

.share_size_large > .share__count {
    display: block;
    float: none;
    font-size: 18px;
    margin-right: 0;
    margin-bottom: 12px;
    padding: 10px 0;
}
 
.share__btn {
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    /* add in vendor rules */
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
    /* add in vendor rules */
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

Step 2 – Styling Tombol Share

Karena kita telah selesai membuat dasar layout tombol kita sekarang dapat mulai styling dengan menyisipkan kode HTML untuk menunjuk ke elemen CSS.

Mari kita tambahkan kode HTML dibawah ini untuk masing-masing tombol share kita. Sekarang, ingat, kita akan menambahkan style tombol melalui kode CSS kita akan menambahkannya nanti. Jika Anda ingin style tombol share Facebook, kemudian menambahkan “type_facebook”. Jika Anda ingin style tombol share Twitter juga, tambahkan “type_twitter” dan sebagainya. Anda selalu dapat menyesuaikan warna dan style dari tombol yang berbeda berdasarkan profil media sosial Anda.

.share_size_large > .share__btn {
    padding: 5px 0;
    width: 100%;
}
 
.share_type_twitter > .share__btn {
    background-color: #4099FF;
}
 
.share_type_facebook > .share__btn {
    background-color: #3B5999;
}
 
.share_type_gplus > .share__btn {
    background-color: #F90101;
}

TutIMG2

Step 3 – Membuat Share Counter

Kita sekarang akan menambahkan counter share ke tombol media sosial. Mari kita mulai dengan menambahkan kode HTML sederhana untuk masing-masing dan salah satu tombol kita dimana kita ingin menampilka counter media sosial. Anda selalu dapat menerapkan counter sosial sharing kedalam tombol Anda; Yang telah menunjukan Anda bagaimana untuk melakukannya di “Step 5”.

Sekarang, kita ingin menambahkan beberapa style ke sosial counter. Pada dasarnya, ini akan menambahkan beberapa layout ke kotak counter.

.share__count:before, .share__count:after {
  content: '';
  display: block;
    height: 0;
    top: 50%;
  position: absolute;
    right: -14px;
  width: 0;
    margin-top: -6px;
}
 
.share_size_large > .share__count:before, .share_size_large > .share__count:after {
  content: '';
  display: block;
    height: 0;
    left: 50%;
  position: absolute;
    top: auto;
  width: 0;
}

Step 4 – Menyelesaikan Style Tombol Media Sosial

Kita sekarang akan menyelesaikan style tombol media sosial yang off dengan menyelesaikan counter sosial dengan menambahkan stylenya dan menambahkan pointer kecil menuju tombol yang sebenarnya. Kode berikut juga memperbaiki setiap masalah border dan layout tombol yang mungkin Anda miliki.

.share__count:before {
    border: solid 7px transparent;
    border-color: transparent transparent transparent #a5b1bd;
}
 
.share_size_large > .share__count:before {
  border-color: #a5b1bd transparent transparent transparent;
    bottom: -14px;
  margin-left: -7px;
}
 
.share__count:after {
    border: solid 6px transparent;
    border-color: transparent transparent transparent #fff;
    right: -12px;
    margin-top: -5px;
}
 
.share_size_large > .share__count:after {
  margin-left: -6px;
  bottom: -12px;
  border-color: #fff transparent transparent transparent;
}

TutIMG3

Step 5 – Menambahkan Counter dapat Berfungsi

Karena kita telah selesai sampai tombol dan desain counter saatnya untuk membuat counter benar-benar dapat digunakan. Untuk itu, kita akan menggunakan PHP. Sekarang jika Anda ingin counter bekerja dengan baik, pergi menuju Facebook/Twitter/Google Plus API counter untuk share, like, komentar dll, dari situs jaringan sosial dan mengganti URL setelah file_get_contents dengan URL API Anda.

Kode PHP dibawah, pastikan untuk menamai file dengan social.php jika Anda tidak ingin mengubah kode dari tutorial ini.

'; $fbend = '';
        $fbpage = $facebook;
        $fbparts = explode($fbbegin,$fbpage);
        $fbpage = $fbparts[1];
        $fbparts = explode($fbend,$fbpage);
        $fbcount = $fbparts[0];
        if($fbcount == '') { $fbcount = '0'; }
}
function twit_count() {
        global $tcount;
        $twit = file_get_contents('http://api.twitter.com/YOURPOST/PAGE');
        $begin = ''; $end = '';
        $page = $twit;
        $parts = explode($begin,$page);
        $page = $parts[1];
        $parts = explode($end,$page);
        $tcount = $parts[0];
        if($tcount == '') { $tcount = '0'; }
}
?>

Karena kita sekarang telah membuat file social.php, sekarang kita dapat menghubungkan tombol media sosial untuk counter sebenarnya. Tempatkan kode PHP kecil dimana nomor counter Anda berlokasi didekat tombol Anda. Pastikan untuk mengganti fbcount dengan nama sosial yang benar dalam file PHP.

Membuat counter dengan Google+ sedikit berbeda, dan perbedaan yang sedikit itu untuk sebagian besar. Cukup tambahkan kode berikut dimana Anda ingin menampilkan nomor counter. Dengan Google+ counter Anda mungkin ingin membuat layout untuk sedikit counter sedikit lebih luas, yang hanya akan membuatnya terlihat sedikit lebih baik, karena counter Google+ berbeda dari Twitter dan Facebook API.

preview

DEMO

Sekarang kita telah selesai membuat tombol media sosial Anda sekarang dapat menerapkannya kedalam CMS atau website Anda. Pastikan untuk memperoleh posting/halaman Facebook API counter sebelum Anda mencoba untuk menggunakan counter. Kami harap postingan ini bisa bermanfaat untuk Anda.

Comments

comments