Skip to main content
JEJAK UNIK

follow us

Membuat Tombol Button Social Media Ringan Hanya Dengan CSS

Membuat Tombol Button Social Media Ringan Hanya Dengan CSS

Membuat Tombol Button Social Media Ringan Hanya Dengan CSS - Sebelumnya kita sudah melihat bagaimana Memasang Tombol Share Terbaru Ala Kompi Ajaib di Sidebar Blog dan pada kesempatan ini kembali kita akan membuat tombol button social media yang tidak kalah keren dari postingan sebelumnya.

Tombol share atau button social media merupakan salah satu element penting dalam sebuah blog sebab dengan memasang tombol berbagi seperti ini akan memudahkan kita atau visitor untuk berbagi ke medsos masing-masing. Namun kendalanya terkadang untuk membuat tombol share di blog yang bagus itu selalu melibatkan javascript atau jQuery yang tentunya dapat menggangu loading pada blog kita.

Untuk itu di disini saya mempunyai solusi buat Anda yang ingin memasang button social media namun tidak menggangu loading blog hanya dengan menggunakan CSS. 

Jika kalian ingin lebih meringankan size atau ukuran CSS dari tombol button ini kalian bisa gunakan tools yang sudah saya sediakan Minifier CSS. Oke dari pada terlalu panjang kita langsung saja OTW ke langkah pemasangan Membuat Tombol Button Social Media Ringan Hanya Dengan CSS sebagai berikut.



Langkah pertama
Masuk ke dalam editor template dan letakan kode CSS di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style>
#buttonbg {width: 260px;margin: 10px 20px;padding: 0;}
#buttonbg li {cursor: pointer;height: 48px;position: relative; list-style-type: none;}
#buttonbg .icon {background: #D91E76 url(http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/s1600/blsocial12.png) 0 0 no-repeat;
    background-color: rgba(217, 30, 118, .42);
    border-radius: 30px;
    display: block;
    color: #141414;
    float: none;
    height: 48px;
    line-height: 48px;
    margin: 5px 0;
    position: relative;
    text-align: left;
    text-indent: 90px;
    text-shadow: #333 0 1px 0;
    white-space: nowrap;
    width: 48px;
    z-index: 5;
    -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
    -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
    box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    text-decoration: none;}
#buttonbg span:hover {
    visibility: hidden;}
#buttonbg span {
    display: block;
    top: 15px;
    position: absolute;
    left: 90px;}
#buttonbg .icon {
    color: #fafafa;
    overflow: hidden;}
#buttonbg .fb {
    background-color: rgba(45,118,185, .42);
    background-position: 0 -382px;}
#buttonbg .twit {
    background-color: rgba(0, 161, 223, .42);
    background-position: 0 -430px;}
#buttonbg .pint {
    background-color: rgba(204, 0, 0, .42);
    background-position: 0 -526px;
#buttonbg .linked {
    background-color: rgba(0, 87, 114, .42);
    background-position: 0 -574px;}
#buttonbg .ytube {
    background-color: rgba(170, 0, 0, .42);
    background-position: 0 -670px;}
#buttonbg .rss {
    background-color: rgba(255,109, 0, .42);
    background-position: 0 -718px;}
#buttonbg li:hover .icon {width: 250px;}
#buttonbg li:hover .icon {
    background-color: #d91e76;}
#buttonbg li:hover .fb {
    background-color: #2d76b9;
    background-position: 0 2px;}
#buttonbg li:hover .twit 
    background-color: #00A1DF;
    background-position: 0 -46px;}
#buttonbg li:hover .google {
    background-color: #A70000;

    background-position: 0 -94px;}
#buttonbg li:hover .pint {
    background-color: #C00;

    background-position: 0 -142px;}
#buttonbg li:hover .linked {
    background-color: #005772;
    background-position: 0 -190px;}
#buttonbg li:hover .deviant {
    background-color: #4C7A4A;
    background-position: 0 -238px;}
#buttonbg li:hover .ytube {
    background-color: #A00;
    background-position: 0 -286px;}
#buttonbg li:hover .rss {
    background-color: #EC5601;
    background-position: 0 -334px;}
#buttonbg .icon:active {
    bottom: -2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;}
</style>

Jika sudah langsung save template

Langkah ke dua
Saya asumsikan untuk pemasangan widget tombol social media ini pada sidebar blog namun jika kalian ingin meletakannya dalam posisi lain silahkan sesuaikan sendiri letak kode CSS di bawah ini dan masuk lagi ke dalam editor template.

Membuat Tombol Button Social Media Ringan Hanya Dengan CSS

<ul id="buttonbg">
  <li>
    <a href="https://www.jejakunik.com/" class="icon fb">
      Like us on Facebook
    </a>
    <span>
      Like us on Facebook
    </span>
  </li>
  <li>
    <a href="https://www.jejakunik.com/" class="icon twit">
      Follow us on Twitter
    </a>
    <span>
      Follow us on Twitter
    </span>
  </li>
  <li>
    <a href="https://www.jejakunik.com/" class="icon pint">
      Follow us on Pinterest
    </a>
    <span>
      Follow us on Pinterest
    </span>
  </li>
  <li>
    <a href="https://www.jejakunik.com/" class="icon linked">
      Follow us on LinkedIn
    </a>
    <span>
      Follow us on LinkedIn
    </span>
  </li>
  <li>
    <a href="https://www.jejakunik.com/" class="icon ytube">
      Follow us on Youtube
    </a>
    <span>
      Follow us on Youtube
    </span>
  </li>
  <li>
    <a href="https://www.jejakunik.com/" class="icon rss">
      Subscribe via RSS
    </a>
    <span>
      Subscribe via RSS
    </span>
  </li>
</ul>

Kalian hanya tinggal mengganti URL https://www.jejakunik.com/ dengan URL sosmed kalian dan kemudan save.

Catatan: Jika ada button sosmed yang tidak Anda pakai kalian bisa hapus mulai dari baris kode CSS ini

   <a href="https://www.jejakunik.com/" class="icon ytube">
      Follow us on Youtube
    </a>
    <span>
      Follow us on Youtube
    </span>
  </li>
  <li>


Mudah bukan? Sekian dulu ulasan Membuat Tombol Button Social Media Ringan Hanya Dengan CSS, jika ada hal yang kurang dimengerti mari kita diskusikan bersama pada kolom komentar di bawah ini.

You Might Also Like:

Jika tertarik dengan artikel yang anda baca saat ini, berikan tanggapan melalui kolom komentar di bawah ini. Berkomentarlah yang cerdas, karena pintar saja tidak cukup.
Buka Komentar