Cara Memasang Social Media Widget with Opacity di Blog

Menambah blog dengan tambahan widget merupakan cara yang baik untuk memperindah desain template blog. Tidak hanya membentuk keindahan pada blog, widget juga mempunyai peranan yang lumayan penting. Terutama dalam segi penghubung yakni untuk membantu proses sosialisasi antara Administrator blog dengan visitor atau pengunjung.

Peran dari widget inilah yang paling diutamakan ketika Anda ingin menjalin hubungan baik dengan para pembaca sehingga dengan ini mereka akan betah dan berlama-lama di dalam situs 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.

Untuk pada kesempatan kali ini saya akan membagikan sebuah artikel yang mengeni Cara Memasang Social Media Widget with Opacity di Blog. Tentunya widget ini bisa membantu anda dalam bersosialisasi dengan pengunjung blog lewat jejaring media sosial seperti facebook, twitter, dan google+. Tertarik untuk membuatnya? Baiklah silakan ikuti tutorial berikut ini.

Cara Memasang Social Media Widget with Opacity di Blog

Cara Memasang Social Media Widget with Opacity di Blog

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. Pastikan sudah sudah login ke Blogger menggunakan akun google, masuk ke Dashboard blog, go to "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.

Cara Membuat Widget Social Media Lengkap di Blog

Cara Membuat Widget Social Media Lengkap di Blog

Cara Membuat Widget Social Media Lengkap di Blog

4. 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>

Terakhir, ganti tanda "#" dengan pranala (tautan) milik Anda, pertinjau hasilnya.

Demikianlah artikel Cara Memasang Social Media Widget with Opacity di Blog, semoga bermanfaat untuk anda semua khususnya para blogger.

Berlangganan: Masukkan e-mail Anda untuk memperoleh kiriman artikel teraktual dari librasbr.com tepat di pesan kotak masuk.

feedburner

45 Komentar untuk "Cara Memasang Social Media Widget with Opacity di Blog"

avatar

halo, kok ada kesalahan dalam widget yah?
jadi wkt aku mau hapus widget dan semua yg diatas, malah ngga bisa dihapus widgetnya, yg keluar tulisan "Invalid widget: HTML2
Error 400"

avatar

Itu karena Anda tidak sengaja melakukan crash, laman dinyatakan tidak benar sebagai akibat dari : Mengedit widget di kedua tool (HTML editor dan Tata Letak). Usahakan jgn seperti itu, muat ulang bila terjadi error (refresh laman)

avatar

mantab gan, untuk menambahkan instagram gimana ya ? apakah imagenya juga harus diganti ?

avatar

tinggal ditambahkan Font Awesome Icon beserta CSS dan HTML saja, sama seperti yg lainnya

avatar

cara ngerubah ukurannya gimana gan buat dipasang di versi mobile kalo kegedean kan agak gimana gitu keliatannya

avatar

Tambahkan kode berikut di bawah CSS widget social media, ini untuk responsif layar 320px.

@media screen and (max-width:320px) {
.smGlobalBtn {width:35px;height:35px;font-size:17.5px;}
}

avatar

Mantap gan tapi gak responsive ya gan, bisa gak dibikin responsive tlng bantuannya terima kasih.

avatar

Saudara Dani, untuk saat ini ikon tersebut tidak tersedia di Font Awesome Icon.

avatar

Saudara Dani, kalau ikon Instagram sudah tersedia. Kode ikonnya adalah sebagai berikut.

<i class="fa fa-instagram"></i>

avatar

Dan unicode untuk ikon Instagram ialah \f16d

avatar

kode untuk youtube dan flickr ada ga kak? unicodenya? Makasih.

avatar

Ada Mbak, silakan cek di Font Awesome Icon (Search di Google).

avatar

saya suka cara agan. memberikan tutorial dengan jujur dan tidak culas dengan menyelipkan link blog agan di kode html.
banyak saya jumpai blogger mahir yang menipu blogger pemula dengan menyelipkan backlink atau bahkan sengaja membuat button2 itu linked ke page mereka.
saya fikir cara seperti agan ini patut dihargai.

avatar

mohon bantuannya gan. kenapa button2 tersebut hanya muncul di homepage, sedangkan di page content tidak muncul. mohon bantuan bagaimana agar juga muncul di page content.

terimakasih

avatar

Terima kasih atas penilaian Anda tentang blog ini. Semoga dapat menjadi dukungan agar blog ini tetap memberikan ilmu positif kepada khalayak umum di internet.

avatar

Mungkin ada kode conditional tag pada template blog yang Anda gunakan. Coba pindahkan widget ke tempat yang lain.

avatar

mbak kode ikon instagramnya ditaruh dimana ya? trus kok di template saya ndak ada tag style ya?

makasih

avatar

Kalau tidak ada bisa dibuat sendiri, terus juga bisa disatukan dengan widget-nya dengan cara menambahkan/mengapitkan tag style ke kode CSS.

avatar

mas, mau tanya , kok ngelinknya ke blog kita lagi ya? gak langsung ke link sosial medianya? maksud # diganti tautan itu tautan sosial media atau apa ya mas? terimakasih sebelumnya (:

avatar

Kalau diklik mengarah ke blog kita itu berarti tanda # belum diganti dengan URL profil sosial media. Maka, silakan diganti dengan URL sosmed, Mbak.

avatar

Maksud ini apa ya bro? maklum nubie.

Note: Sebelumnya terapkan CSS stylesheet Font Awesome berikut ini pada HTML blog, letakkan di bawah kode <head

avatar

Itu link tag CSS untuk menampilkan icon-icon dari Font Awesome.

avatar

Saya sudah nambah icon instagram tapi ko hanya icon instagram aja yang gak nyala ketika kursornya nyentuh ?

avatar

saya salah memasukan link twitter dan facebook saya, tapi ketika dihapus tidak bisa dan yg muncul tetap link twitter dan facebook saya yang salah. bagaimana cara menghapus widget social media seperti diatas?

avatar

Makasih banget ilmunya mastah.
Keren, udah saya coba di blog sendiri dan berhasil.
Mampir juga ke blog lama yang baru aktif kembali mastah http://ketikanriang.blogspot.co.id/ :)

avatar

Mohon untuk lebih teliti lagi, Mbak. Mungkin Mbak khilaf. :D

avatar

Anda harus mengatur CSS dan penerapannya dengan benar.

avatar

makasih, keren... tapi kok di bog saya hanya muncul di beranda, kalo post tidak tampil padahal saya pasang di footer

avatar

Makasih, Oke banget ni tampilan share button-nya. Penerapannya juga mudah buat pemula.

avatar

tapi kok hanya muncul judulnya.....
contentnya tidak muncul kenapa ya..?

avatar

Coba diperhatikan betul-betul, Mas. Kalau tetap tidak bisa silakan berikan link offline (goo.gl) terkait.

avatar

ndak tahu, soalnya aku kan download template...

avatar

Apakah langkah-langkah di atas sudah dijalani sepenuhnya?

Kalau belum, mulailah dari memberikan tag Font Awesome Icon ke dalam template.

avatar

sebelumnya tidak bisa tambah gadget. ada beberapa kode yang harus di edit..

avatar

Pemicunya adalah template. Mohon coba eksperimen dengan template lain.

avatar

Terimakasih ka, mau tanya sekalian kalau tambah instagram gimana ya?

avatar

Caranya gimana om,..? saya kutak-katik gak nemu nih

avatar

mksih om..kebetulan lagi cari kyak gini hehe..
kunbal om jalan-tembuss.blogspot.co.id

avatar

thanks, sangat membantu untuk blog baru ane,
silahkan mampir bila berkenan ke blog ane www.elbaregetta.com

KETENTUAN BERKOMENTAR

↳ Berkomentarlah sesuai isi dan topik artikel
↳ Dilarang menyisipkan PRANALA (link) AKTIF