--> Skip to main content
Home Bootstrap Pemrograman Web Web Programming Membuat Tombol Share Pada Artikel Web Dengan CSS Dan FontAwesome

Membuat Tombol Share Pada Artikel Web Dengan CSS Dan FontAwesome


Media social menjadi sebuah keharusan maupun kebutuhan dalam mempromosikan atau berbagi sebuah konten yang kita miliki. Pertumbuhan media socail pun terus meningkat, hal ini dengan ditandainya dengan kemunculan social media yang baru.

 Saat ini sangat banyak beredar tutorial pembuatan tombol social media, namun rata-rata ditujukan untuk pembuatan tombol sharing pada Blogger ataupun Wordpress. Walaupun secara prinsip tidak terlalu jauh perbedaannya, namun ada hal-hal yang tetap memiliki perbedaan.

Dalam percobaan ini, kita akan membuat tombol social media untuk : Twitter, Facebook, Google+, Pinterest dan Linkedin serta menerapkannya pada sebuah artikel berita pada web, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Gambar.1

Langkah-langkah Pembuatan Tombol Media Social

Dalam contoh ini, kita akan fokus hanya dalam pembuatan tombol media social. Pengaturan untuk style tombol media social dilakukan oleh sebuah file css, sedangkan untuk iconnya kita menggunakan fontawesome.

 1. Buat file social-button.css untuk pengaturan tombol social media
File ini bertujuan untuk membuat frame untuk penempatan tombolnya, apakah berada ditengah atau dikirim, serta pengaturan background untuk framenya dan backrground untuk masing-masing tombolnya.
.frame-tombol{
    
    padding: 20px 12px;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #428bca;
    border-color: #357ebd;
    }

.tombol-twitter {
    background-color: #00acee;
    border-radius: 0;
    color: #fff
}
.tombol-twitter:link, .tombol-twitter:visited {
    color: #fff
}
.tombol-twitter:active, .tombol-twitter:hover {
    background-color: #0087bd;
    color: #fff
}
.tombol-facebook {
    background-color: #3b5998;
    border-radius: 0;
    color: #fff
}
.tombol-facebook:link, .tombol-facebook:visited {
    color: #fff
}
.tombol-facebook:active, .tombol-facebook:hover {
    background-color: #30477a;
    color: #fff
}
.tombol-googleplus {
    background-color: #e93f2e;
    border-radius: 0;
    color: #fff
}
.tombol-googleplus:link, .tombol-googleplus:visited {
    color: #fff
}
.tombol-googleplus:active, .tombol-googleplus:hover {
    background-color: #ba3225;
    color: #fff
}
.tombol-pinterest {
    background-color: #cc2127;
    border-radius: 0;
    color: #fff
}
.tombol-pinterest:link, .tombol-pinterest:visited {
    color: #fff
}
.tombol-pinterest:active, .tombol-pinterest:hover {
    background-color: #c7371e;
    color: #fff
}
.tombol-linkedin {
    background-color: #0e76a8;
    border-radius: 0;
    color: #fff
}
.tombol-linkedin:link, .tombol-linkedin:visited {
    color: #fff
}
.tombol-linkedin:active, .tombol-linkedin:hover {
    background-color: #0b6087;
    color: #fff
}
Jika menginginkan penempatan tombol sosial berada pada sisi kiri, dapat dilakukan perubahan text-aling:left untuk class frame-tombol.

 Perubahan untuk warna latar pada frame-tombol, dapat dimodifikasi pada bagian background-color, begitu juga dengan perubahan warna latar untuk masing-masing tombol media social.

 2. Penambahan icon untuk masing-masing tombol media social
Dalam tahap ini kita akan memanggil dan menggunakan :
  • File social-button.css, 
  • Menggunakan librari font-awesome sebagai pembuat iconnya 
  • Dan Bootstrap untuk menempatkan icon tersebut dalam Button
Jadi sebelumnya harus dipastikan kita telah memanggil terlebih dahulu file css dari librari font-awesome.

Misal : kita asumsikan file librari css font-awesome.min.css, bootstrap.min.css dan social-button berada pada folder : assets/css/nama-file.css maka proses pemanggilannya :
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/social-button.css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
Kemudian lakukan pembuatan icon dan penempatan icon terserbut dalam button seperti script berikut :
<div class="frame-tombol" >
    <a href="" class="btn tombol-twitter"><i class="fa fa-twitter"></i> Twitter</a>
    <a href="" class="btn tombol-facebook"><i class="fa fa-facebook"></i> Facebook</a>
    <a href="" class="btn tombol-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
    <a href="" class="btn tombol-pinterest"><i class="fa fa-pinterest"></i> Pinterest</a>
    <a href="" class="btn tombol-linkedin"><i class="fa fa-linkedin"></i> LinkedIn</a>
</div>

Berikut ini kode lengkapnya yang telah dimplementasikan ke dalam sebuah artikel :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Pembuatan Tombol Share </title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <link rel="stylesheet" href="assets/css/social-button.css">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    
    <style>
        .recent{
            padding-top:20px;
            
        }
        .info-meta{
            padding-top: 10px;
            color:#9999;
        }
        a:focus, 
        a:hover {
        text-decoration: none;
        outline: none;
        color: #9c9c9c;
        }
        .footer-bottom {
        background-color:#3b5998;
        color:#fff;
        padding-top:10px;
        padding-bottom:10px;
        }
        .post-detail{
         padding-bottom :30px
        }
        
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
    
<div class="container" style="margin-top:40px">
    <div class="row">
        <div class="col-md-9">
              <div class="panel panel-default">
               <div class="panel-body">
                <div class="post-detail">
                  <h3>Latih Balita Anda Dalam Merangsang Saraf Motorik</h3>
                  
                    <div class="info-meta">
                        <ul class="list-inline">
                            <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </li>
                            <li><i class="fa fa-eye"></i>21k</li>
                            <li><i class="fa fa-heart-o"></i>372</li>
                            <li><i class="fa fa-user"></i> Posting by Ilmu Detil</li>
                            <li class="pull-right">Category : Technology</li>
                        </ul>
                    </div>
                  <hr>
                  <p>
                  <img src="images/education.jpg" width="300px" alt="..." style="float:left;padding:5px 10px 5px 10px;">A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. <p>It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page.</p> <p>It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).</p>
                  
                  <p>It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page.</p>
                  
                  <p>It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).</p>
                 
                  </p>
                
                  </div>
                <div class="frame-tombol" >
                    <a href="" class="btn tombol-twitter"><i class="fa fa-twitter"></i> Twitter</a>
                    <a href="" title="Share on Facebook" target="_blank" class="btn tombol-facebook"><i class="fa fa-facebook"></i> Facebook</a>
                    <a href="" title="Share on Google+" target="_blank" class="btn tombol-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
                    <a href="" class="btn tombol-pinterest"><i class="fa fa-pinterest"></i> Pinterest</a>
                    <a href="" class="btn tombol-linkedin"><i class="fa fa-linkedin"></i> LinkedIn</a>
                </div>                
                  
               </div>
               
            </div>
         </div>
        <div class="col-sm-3">
            <div class="panel panel-default">
               <div class="panel-heading"><h4 class="text-center">Latest News</h4></div>
               <div class="panel-body">
                    <div class="recent">
                        <a href="#"><img class="img-responsive" src="images/sport.jpg" alt="" /></a>                
                        <div class="info-meta">
                            <ul class="list-inline">
                                <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </a></li>
                                <li><i class="fa fa-eye"></i>21k</li>
                                <li><i class="fa fa-heart-o"></i>372</li>
                            </ul>
                        </div>
                        <h4>
                            <a href="">Pertandingan Basket NBA berlangsung sangat sengit</a>
                        </h4>
                    </div>
                    
                    <div class="recent">
                        <a href="#"><img class="img-responsive" src="images/technology.jpg" alt="" /></a>                           
                        <div class="info-meta">
                            <ul class="list-inline">
                                <li><i class="fa fa-clock-o"></i> Jan 5, 2016</li>
                                <li><i class="fa fa-eye"></i>21k</li>
                                <li><i class="fa fa-heart-o"></i>372</li>
                            </ul>
                        </div>
                        <h4 class="entry-title">
                            <a href="">Tip dan Trik dalam memilih laptop untuk penyuka game</a>
                        </h4>
                    </div><!--recent-->
                </div>
            </div>      
        </div>          
    </div>          
</div>
<!--FOOTER-->
<div class="footer-bottom">
    <div class="container-fluid text-center">
        <p>Copyright &copy; 2016,  DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
    </div>
</div>  
</div>   
</body>
</html>

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar