Cara Mudah Memasang Social Media Widget with Opacity

Pada kesempatan kali ini Ane akan membagikan Tutorial Cara Cara Mudah Memasang Social Media Widget with Opacity. Tentunya widget ini Sangat membantu Anda untuk bersosialisasi dengan pengunjung lewat sosial media seperti facebook, twitter, dan google+ Dll. 
Baiklah silakan ikuti tutorial berikut ini.


http://news-ellas.blogspot.com/2016/05/cara-mudah-memasang-social-media-widget.html


1. Login Ke Blogger Dan Edit Html
Ada yg harus di perhatikan Sebelumnnya ente terapkan dulu CSS stylesheet Font Awesome berikut ini pada HTML blog dan letakkan di bawah kode <head>:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Salin dan letakkan kode  berikut ini di sebelum kode </style>.


/* CSS Social Media */
#sosmed{margin:20px 0;padding-top:15px;}
.nengah{text-align:center!important}
.smGlobalBtn{display:inline-block;position:relative;width:40px;height:40px;padding:0px;text-align:center;color:#fff!important;font-size:20px;font-weight:normal;line-height:2em;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px}
.facebookBtn{background:#3b5998;opacity:0.4}
.facebookBtn:before{font-family:"FontAwesome";content:"\f09a"}
.facebookBtn:hover,.twitterBtn:hover,.googleplusBtn:hover,.linkedinBtn:hover,.pinterestBtn:hover,.rssBtn:hover{color:#fff;opacity:1}
.twitterBtn{background:#00ABE3;opacity:0.4}
.twitterBtn:before{font-family:"FontAwesome";content:"\f099"}
.googleplusBtn{background:#e13138;opacity:0.4}
.googleplusBtn:before{font-family:"FontAwesome";content:"\f0d5"}
.linkedinBtn{background:#0094BC;opacity:0.4}
.linkedinBtn:before{font-family:"FontAwesome";content:"\f0e1"}
.pinterestBtn{background:#26ae91;opacity:0.4}
.pinterestBtn:before{font-family:"FontAwesome";content:"\f0d2"}
.rssBtn{background:#fb5a03;opacity:0.4}
.rssBtn:before{font-family:"FontAwesome";content:"\f09e"}

Save Template.

3. Kalo Sudah simpan, selanjutnya Pergi ke "Tata Letak", klik "Tambahkan Gadget" tambahkan HTML/JavaScript.


4. Copy HTML berikut ini pada "HTML/JavaScript", kemudian klik "Simpan".



<div class="sosmed"><div class="nengah">
<a rel="nofollow" class="facebookBtn smGlobalBtn" title="Facebook" href="#" target="_blank"></a>
<a rel="nofollow" class="twitterBtn smGlobalBtn" title="Twitter" href="#" target="_blank"></a>
<a rel="nofollow" class="googleplusBtn smGlobalBtn" title="Google +" href="#" target="_blank"></a>
<a rel="nofollow" class="linkedinBtn smGlobalBtn" title="Linkedin" href="#" target="_blank"></a>
<a rel="nofollow" class="pinterestBtn smGlobalBtn" title="Pulsk" href="#" target="_blank"></a>
<a rel="nofollow" class="rssBtn smGlobalBtn" title="RSS Feeds" href="#" target="_blank"></a><br><br>
</div></div>

Note*
Ganti tanda "#" dengan Url Social Media Kalian, Dan Silahkan Lihat Hasilnya.
Silahkan Di Creasikan Sendiri Apabila Ingin Menambahkan Social Media Yang Lain.
Cara Mudah Memasang Social Media Widget with Opacity Cara Mudah Memasang Social Media Widget with Opacity Reviewed by SDF on 10:21:00 AM Rating: 5

No comments:

KETENTUAN BERKOMENTAR

↳ Berkomentarlah Sesua Topik Dan Relevan
↳ Dilarang menyisipkan (link) AKTIF

Powered by Blogger.