Sahabat Kabeka || Social media sudah tidak bisa terlepas dari kehidupan sehari hari, itulah yang terjadi zaman sekarang. beda orang beda kegunaan, 'mungkin' bagi seorang blogger sosial media adalah ladang berpromosi, komunikasi, dan hal lainnya. betulkah ? :D
baiklah. masih berlabel sama dengan postingan kemaren yaitu "Cara Custom Domain Blogspot ke TLD via Cpanel Terbaru 2015". Kabeka kali ini akan share "Cara Memasang Widget Sosial Media Yang Keren Super + Ringan" seperti yang Kabeka gunakan di blog ini tentunya :D
oke, selalu bosen dengan omongan Kabeka(?) :v silahkan langsung baca tutorial dibawah :)
Cara Pasang Widget Social Media di Blog
1. Pastikan terlebih dahulu sobat sudah mempunyai sebuah Blog :D 2. Login, buka Template >> lalu Edit HTML
3. Masukkan kode berikut dibawah kode <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
4. Cari kode </style>..Gunakan Ctrl+F untuk memudahkan pencarian.. lalu pastekan kode berikut diatas kode </style>
/* CSS Social Media by Kabeka.Net */
#sosmed{margin:20px 0;padding-top:15px;}
.nengah{text-align:center!important}
.byKabekaNet{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,.instagramBtn:hover,.youtubeBtn: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"}
.instagramBtn{background:#0094BC;opacity:0.4}
.instagramBtn:before{font-family:"FontAwesome";content:"\f16d"}
.youtubeBtn{background:#26ae91;opacity:0.4}
.youtubeBtn:before{font-family:"FontAwesome";content:"\f167"}
.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}
.byKabekaNet{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,.instagramBtn:hover,.youtubeBtn: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"}
.instagramBtn{background:#0094BC;opacity:0.4}
.instagramBtn:before{font-family:"FontAwesome";content:"\f16d"}
.youtubeBtn{background:#26ae91;opacity:0.4}
.youtubeBtn:before{font-family:"FontAwesome";content:"\f167"}
.rssBtn{background:#fb5a03;opacity:0.4}
.rssBtn:before{font-family:"FontAwesome";content:"\f09e"}
6. Langkah Terakhir, buka opsi Tata Letak pada dahsboard. pilih tempat dimana sobat ingin menampilkan widget tersebut lalu "tambahkan gadget"
7. Pilih "HTML/JavaScript"
8. Pada konten Pastekan Kode Berikut
<div class="sosmed"><div class="nengah">9. Ganti tanda '#' dengan tautan social medianya sobat :)
<a rel="nofollow" class="facebookBtn byKabekaNet" title="Facebook" href="#" target="_blank"></a>
<a rel="nofollow" class="twitterBtn byKabekaNet" title="Twitter" href="#" target="_blank"></a>
<a rel="nofollow" class="googleplusBtn byKabekaNet" title="Google +" href="#" target="_blank"></a>
<a rel="nofollow" class="instagramBtn byKabekaNet" title="Instagram" href="#" target="_blank"></a>
<a rel="nofollow" class="youtubeBtn byKabekaNet" title="Youtube" href="#" target="_blank"></a>
<a rel="nofollow" class="rssBtn byKabekaNet" title="RSS Feeds" href="#" target="_blank"></a><br /><br />
</div></div>
10. dann Selesai,, Silahkan dilihat hasilnya :)
okeee,, sekian dulu, mata sudah tidak bisa diajak kerjasama, hehe :) maaf jika tutornya agak berantakkan :D hehee..
terimakasih sudah berkunjung, semoga bermanfaat sobat :)
0 Response to "Cara Memasang Widget Social Media Keren di Blog"
Post a Comment