Cara Menambahkan Social Media With Opacity Pada Blog
Menambah blog dengan menambahkan widget merupakan cara yang terbaik untuk membuat desain template blog menjadi bagus. Tidak hanya membentuk keindahan pada blog, widget ini mempunyai peranan yang sangat penting. Terutama untuk penghubung membantu proses sosialisasi antara Administrator blog dengan visitor atau pengunjung.
Peran dari widget inilah yang paling diutamakan dari sebuah blog ketika kalian ingin menjalin hubungan baik dengan para pembaca sehingga dengan ini mereka akan betah dan berlama-lama dalam blog yang anda miliki. Seperti, jika mereka ingin bertanya lebih jauh mengenai situs anda, maka mereka akan menghubungi lewat sarana komunikasi. Sarana komunikasi ini dapat berupa sosial media.
Note: Sebelumnya terapkan CSS berikut ini pada HTML blog, letakkan di bawah kode
Terakhir, ganti tanda "#" dengan pranala (tautan) milik Anda, pertinjau hasilnya.
Jika ada pertanyaan silahkan di tanyakan di kolom komentar. Terima kasih..
Peran dari widget inilah yang paling diutamakan dari sebuah blog ketika kalian ingin menjalin hubungan baik dengan para pembaca sehingga dengan ini mereka akan betah dan berlama-lama dalam blog yang anda miliki. Seperti, jika mereka ingin bertanya lebih jauh mengenai situs anda, maka mereka akan menghubungi lewat sarana komunikasi. Sarana komunikasi ini dapat berupa sosial media.
Note: Sebelumnya terapkan CSS 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. Pastikan sudah sudah login ke Blogger menggunakan akun google, masuk ke Dashboard blog, lalu pilih "Template" dan pilih "Edit HTML".
2. Salin dan letakkan kode CSS berikut ini sebelum kode
</style>.
Untuk mempermudah pencarian gunakan tombol CTRL + F pada keyboard.
/* 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 atau Simpan Template.
3. Pergi ke "Tata Letak", klik "Tambahkan Gadget" terserah ingin di sidebar atau yang lainnya, tambahkan HTML/JavaScript.
4. Terapkan HTML berikut ini pada kolom pengisian (text area) "HTML/JavaScript", lalu 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>
Terakhir, ganti tanda "#" dengan pranala (tautan) milik Anda, pertinjau hasilnya.
Jika ada pertanyaan silahkan di tanyakan di kolom komentar. Terima kasih..
Leave a Comment