Haloo Sobat Joa, kali ini Joa akn share tentang tutorial blog yang baru saja Joa cobain dan berhasil. Sebelunya, Joa ingin menempelkan widget like facebook, follow twitter, dan lain sebagainya. Udah berhasil sih, namun gak tau kenapa widget tersebut mengurangi kecepatan loading blog Joa ini. Haddeh..
"Ku cari dan sealu ku cari, jalan terbaik..." lirik lagu tersebut selalu memotivasi Joa agar tetap berusaha mencari jalan keluar. Akhirnya, ketemu deh solusi terbaiknya. Kini Joa udah nemuin witget sosmed lengkap yang menurut joa tidak begitu jelek, melainkan simpel dan begitu ringan.
Tampilannya seperti gambar di atas sob. Ketika kursoor diarahkan, lambang/logo sosmed tersebut akan menyala. Yuhuu.. Langsung tutorialnya aja yah sob!
Note : Sebelumnya terapkan CSS stylesheet Font Awesome berikut ini pada HTML blog, letakkan di bawah kode <head>:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
1. Pertama-tama sobat harus log ini ke blogger. Kemudian masuk ke Template > Edit HTML
2. Salin kode CSS berikut sebelum kode </style>
Note : Tekan tombol CTRL + F untuk mempermudah pencarian kode.
/* 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"}
3. Setelah udah, Save / Simpan Tempatle sob. Jika udah, next ke langkah berikutnya.
4. Lanjutkan dengan menuju ke Tata Letak > klik Tambahkan Gadget (ingin ditampilkan dimana saja terserah kamu sob) > tambahkan HTML/JavaScript.
5. Terapkan HTML berikut ini pada kolom pengisian (text area) 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>
6. Terakhir nih sob, ganti tanda # dengan pranala (tautan) milikmu. Misal pada "facebookBtn smGlobalBtn" , pada bagian "#"nya Joa ganti menjadi "https://www.facebook.com/SobatJoa".
Gimana sob ? Mudah kan ? Sekian dari Joa, semoga artikel ini bermanfaat. Jika masih ada pertanyaan, silahkan tulis di kolom komentar. Salam #SobatJoa
ConversionConversion EmoticonEmoticon