Tunggu Sebentar...

10/12/2016

Cara Membuat Widget Box Sosmed Lengkap Keren V1 di Blog

Baca Juga



Cara Membuat Widget Box Sosmed Lengkap Keren V1 di Blog ~ Halo sobat Blogger kembali lagi ya dengan saya Aldi Andreansyah selaku Author dari Blog ini yang Alhamdulilah di postingan kali ini saya membagi kan lagi nih yang bertentangan Blogging yaitu Cara Membuat Widget Box Sosmed Lengkap Keren V1 di Blog .

Mengapa saya membuat Widget Box Sosmed V1 ini ? karena InsyaAllah saya kedepan akan membagi kan Versi Versi lain nya maka jangan lupa ya selalu ke blog ini karena tiap hari nya dalam keadaan waktu yang luang nya InsyaAllah saya selalu membagi kan artikel pengalaman lain nya, Amin .

Seperti biasa nya sebelum kita membuat widget tersebut ada kala nya kita mengetahui tentang widget Sosmed tersebut , Widget tersebut terdapat :

1 . Terdapat Box dan di dalam nya terdapat Menu Background dan Border (Garis Tebal)

2 . Terdapat Heading Teks Lengkap keren



3 . Terdapat Tombol Like halaman Fanspage



4 . Terdapat Tombol Follow Otomatis di akun Twitter


 
5 . Terdapat Tombol Otomatis Follow di Google+ 

Oke mungkin cukup sekian pembahasan terdapat isi dalam widget Box tersebut .

Langsung saja kita ke tujuan Cara Membuat Widget Box Sosmed Lengkap Keren V1 di Blog nya :

Langkah Pertama pastikan sobat sudah Log~In di akun Blogger -> Tata Letak -> Tambah Gadget isi Script HTML di bawah ini di menu yang di inginkan jika sudah sobat lalu klik Simpan/save .

<div style="background:#016fba;font-weight:bold;font-size:150%;text-align:center;padding:10px 0;"><a href="http://www.blogger.com/follow-blog.g?blogID=7559214632370258218" target="_blank" title="Follow this blog"><span style="color:#fff">Ikuti</span> <span style="color:#fff">Blog Ini</span></a></div><div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;border-top:none'><div style='background:#fff;margin:0;'><div class="fb-like-box" data-href="https://www.facebook.com/kivliiesholawaters" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div><div style="background:#fff; border-top:1px solid #ccc;margin:0; padding:5px 0 5px 40px"><a href="https://twitter.com/mr.kivliie" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @mr.kivliie</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://aldiandreansyah.blogspot.com"></div></div></div><div class="g-person" data-href="//plus.google.com/+aldiandreansyah" data-layout="landscape" data-rel="author"></div>

KETERANGAN :
Ubah Link sobat dengan warna yang saya sudah beri tersebut

Langkah kedua letak kan lah javascript font awesome ini di bawah tepat di atas </head> jika sobat sudah memiliki javascript font awesome nya sobat pun dapat tidak menaruh nya lagi .

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Mungkin cukup sekian Artikel Cara Membuat Widget Sosmed Lengkap Keren V1 di Blog , Semoga Bermanfaat dan Work 100% , Amin

Artikel Terkait

Seorang Pelajar yang Ingin Berbagi Ilmu Pengalaman yang diketahui nya kepada seluruh Umat Manusia, dan Semoga Ilmu yang ia bagikan tersebut bermanfaat. Amin

12 komentar

dicoba dulu min.. siapa tau cocok pake widget ini :D

Kalau untuk masang wiget instagam bisa gak mas ?

nice info gan soalnya ane masih kurang paham cara ngatur widget

Coba dulu deh gan... Kalau dari tampilan keren banget ini. Mirip milik kang mousir.

sangat bermanfaat gan :D
lain kali bikin dong widget yang buat nampilin foto instagram biar nongol di sidebar blog gitu :D

coba ah siapa tau enak diliatnya blog gua

bagus gan, tapi di wordpress udah ada widget2 begituan

================================================================
~ Jika ingin men Copy Paste harap masuk kan sumber link artikel saya di postingan sobat
~Dilarang Berkomentar link aktif , jika ada yang memasuk kan link aktif maka kami akan Hapus dan kami anggap Spam
~ Komentar lah dengan Bahasa yang Baik dan Relevan dengan sesuai artikel terkait tersebut . Terimakasih
================================================================
EmoticonEmoticon