Cara Membuat Tombol Share Social Media CSS3

kevinservis TIPS BLOG 27 Mar 2013

<p>Your browser does not support iframes.</p>

Selamat pagi sobat blogger,,seperti yang kita social media seperti facebook, twitter dll, adalah tempat yang paling bagus untuk kita melakukan kegiatan promosi. Bagi sobat blogger yang menekuni dunia blogging dan bisnis online rasanya tidak akan terlepas dari social media ini, karena selain penggunaanya yang mudah, social media ini bisa kita gunakan secara gratis. Jadi tunggu apalagi, segera promokan apapun bisnis sobat blogger melalui social media ini.  kali ini, yang akan saya share adalah cara membuat tombol share social media CSS3. Dengan adanya widget ini, sobat akan lebih mudah untuk melakukan kegiatan promo ke social media, selain widget ini super kereen, cara pembuatanya pun juga cukup mudah. Mau tau bagaimana cara membuatnya ?

Cara Membuat Tombol Share Social Media CSS3 :

1. Seperti biasa, login ke blogspot
2. Masuk ke bagian pengeditan HTML
3. Cari kode ]]></b:skin>
4. Letakan kode dibawah ini, diatas ]]></b:skin> 
 

.social{
    max-width:300px;
}
 
.social li{
    min-height:40px;
    clear:both;
    float:none;
    margin-bottom:10px;
}
 
.social a{
    color:#232323;
    position:relative;
    display:block;
    line-height:40px;
    padding-left:55px;
}
 
.social span{
    display:block;
    width:40px;
    height:40px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9h41DOsDn_PTx73EhqGdQa7Q-SF5eFlwG5BSdJzepY65jATRbd754eEikaqePDoyewtb3AhIRdpU0dSgkYcfzg9cfWqOQDb2m75AwVuf1ikk0z0JcxvgHt0_B4sDCNfXQI-tPPLZJ/s1600/social.png) no-repeat;
    position:Absolute;
    left:0;
    border-radius:32px;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
 
.social .facebook{
    background-color:#2d309a;
}
 
.social .twitter{
    background-color:#00FFFF;
    background-position:0 -40px;
}
 
.social .pinterest{
    background-color:#FF0000;
    background-position:0 -80px;
}
 
.social .email{
    background-color:#00FF00;
    background-position:0 -120px;
}
 
.social .rss{
    background-color:#ffba16;
    background-position:0 -160px;
}
.social a{
    /*--code trước--*/
    z-index:1;
    -moz-transition:color 0.4s ease;
    -webkit-transition:color 0.4s ease;
    -o-transition:color 0.4s ease;
    transition:color 0.4s ease;
}
 
.social span{
    /*--code trước--*/
    z-index:-1;
    opacity:0.8;
    -moz-transition:opacity 0.4s ease,width 0.4s ease;
    -webkit-transition:opacity 0.4s ease,width 0.4s ease;
    -o-transition:opacity 0.4s ease,width 0.4s ease;
    transition:opacity 0.4s ease,width 0.4s ease;
}
 
.social a:hover{
    color:white;
    text-shadow:0 1px 0 rgba(0,0,0,0.5);
}
 
.social a:hover span{
    width:300px;
    opacity:1;
}

5. Save Template.
6. Masukan kode berikut ke add gadget HTML

<ul class="social">

    <li><a href="#"><span class="facebook icon"></span>Join Us on Facebook</a>

    </li>
    <li><a href="#"><span class="twitter icon"></span>Follow Us on Twitter</a>

    </li>
    <li><a href="#"><span class="pinterest icon"></span>Join Us on Pinterest</a>

    </li>
    <li><a href="#"><span class="email icon"></span>Send Us Email</a>

    </li>
    <li><a href="#"><span class="rss icon"></span>Subscrible RSS Feed</a>

    </li>
</ul>

7. Save dan selesai.

Nah sekarang sobat sudah mempunyai Tombol Share Social Media CSS3 yang akan memudahkan sobat dalam melakukan promo ke social media.

Terima kasih