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.
2. Salin dan letakkan kode berikut ini di sebelum kode
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".
Note*
Ganti tanda "#" dengan Url Social Media Kalian, Dan Silahkan Lihat Hasilnya.
Silahkan Di Creasikan Sendiri Apabila Ingin Menambahkan Social Media Yang Lain.
Baiklah silakan ikuti tutorial berikut ini.
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"}
#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>
<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
Reviewed by SDF
on
10:21:00 AM
Rating:
Reviewed by SDF
on
10:21:00 AM
Rating:
No comments:
KETENTUAN BERKOMENTAR
↳ Berkomentarlah Sesua Topik Dan Relevan
↳ Dilarang menyisipkan (link) AKTIF
↳