Home Widget Membuat Widget Media Sosial Sticky Minimalis

Assalamualaikum warahmatullahi wabarakatuh.

Salam bertemu lagi di blog yang acak acakan ini, setelah malam tadi dan pagi jelang siang tadi saya agak kesulitan jaringan internet sehingga tidak semua Blog Sahabat saya kunjungi, Wajar saja buat pemblogging yang masih baru ini jika tak berkunjung pasti tak akan ada yang balik mengunjungi. Malahan yang saya kunjungi saja malaes untuk balik berkunjung manusiawi kali ya sob..? Membuat artikel seperti dalam perlombaan karena berharap sesuatu yang menggiurkan. Padahal menurut saya antara artikel dan visitor/pengunjung sama pentingnya lho..? Terserah apa yang punya blog aja dah yang penting saya mah tetep setia ikhlas berbagi biar Rizky mah Allah yang ngatur. Santai saja malah jika anda merasa lelah jangan di paksa mendingan Istirahat yang baik adalah : Tidur. Nahh penggalan kalimat diatas itu hanya iklan saja bebas kan iklan mah gak harus sesuai dengan nihe blog juga jangan di ambil hati mendingan buat pangarti yah Sob..?. Pada kesempatan kali ini saya hendak berbagi kalau tidak salah saya baca komentar nya Mas Buret yang merekues ini. Dan baca komentar nya Mas Yanto di blog teman saat komen bareng. Sebetulnya saya bingung untuk memberi judul post pada kali ini. Namun dengan bijak saya namakan saja tutorial ini. "Membuat Widget Media Sosial Sticky Minimalis" Karena bentuknya yang kecil ramping cantik camprenik unik dan menarik. Yang tertarik silahkan di lirik biar asyik.

Widget sosial Media :

Makin maraknya dunia sosial media sangat penting sekali bagi seorang pemblogging tapi yang menggunakanya. Karena tidak semua pemblogging suka dengan sosmed tersebut. Kalau saya ngafans banget sih nggak yah sebatas berbagi dan untuk mempopularkan blog saja. Beranekan nama dan jenis nya sosmed itu. Jika saya pajang semua di blog ini mungkin halaman blog akan habis di lalap sosial media. Tetapi tidak baik juga jika blog terlalu ramai dengan berbagai jenis widget, Sudah pasti semua itu akan membuat pengunjung tidak nyaman walaupun anda sebagai pemilik blog merasa bangga dan senang. Alangkah baik petik salah satu widget yang paling membawa artikel anda cepat di kenal publik contoh nya Facebook, Twitter, Google plus, dan sebagai pelengkap sarana berbagi saya tambahkan widget follower blog (GFC) Pada post ini agar lengkap satu paket instan tinggal siap saja dan langsung di hidangkan pada pengunjung.

01. Cara memasang Widget Media Sosial Sticky Minimalis :

Baik buat sobat yang berminat memasang kumpulan widget sosial sticky minimalis plus widget Follower blog yang unik dan menarik ini. Seperti biasa masuk dashboard blog jangan lupa sign in. Selanjutnya jika dalam template blog anda belum ada tag meta fabebook nya silahkan kode di bawah ini copy di bagian tag meta template anda atau lebih mudah nya di bawah kode : <head>. Jika sudah ada lewati saja kode di bawah ini.

<b:if cond='data:blog.pageType == "item"'>
<meta content='100000605174799' property='fb:admins'/>
<meta content='515105825198911' property='fb:profile_id'/>

Keterangan :

Kode diatas meta tag yang berwarna MERAH itu ID Profile facebook anda. Sedangkan yang berwrna BIRU itu ID Fans page facebook anda. jika anda berminat memasang atau tidaknya, tidak apa apa hanya saja blog anda dengan facebook dan fans facebook nya kurang berkesinambungan menurut saya.

02. Cara Memasang Kode CSS dan HTML :

Masih dalam edite template cari kode ]]></b:skin> atau kode </style> Tekan Ctrl + F untuk memudahkan penarian kodenya. Setelah ketemu copy kode CSS di bawah ini dan paste kan tepat diatas kode ]]></b:skin> atau diatas kode </style>

.sticky {
position:fixed;
top:85px;
z-index: 100;
width:300px;
}
#stickywidget {
display:block;
clear:both;
background:#00fa9a;
padding:15px;
}
#stickywidget h3 {color: #666 !important;padding: 5px 0px 15px 0px !important;  margin: -1px -1px 0;font-weight:normal;}

03. Selanjutnya masih di bagian edite template cari kode pada pada kolom bagian HTML wideget sidebar jika template anda sama dengan saya cari kode : </aside> Selanjutnya copy kode di bawah ini dan pastekan tepat diatas kode </aside> :

<div id='stickywidget'>
<h3>;Sosial Media Karrysta</h3>
<a href='http://www.blogger.com/follow-blog.g?blogID=157331295234574147' target='_blank' title='Follow this blog'><img alt='Follow blog' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkUaSlhmOfDUdz_D664OwxYHKZWO3v3ujBCngbhemK2GP7xvvieAZ8W-zJCBuYFcP882ypoPrsR-2VIdiYPJLy4mtxNAyNi8IzYMuOmamdBkiCHTdaUlAFXDpwCw1vwXPvabwmvinXB3DB/s1600/Follow+my+blog.gif' title='Follow blog Karrysta' width='127'/></a><br/>
<a class='twitter-follow-button' data-lang='id' href='https://twitter.com/saudkarrysta'>Ikuti @SaudKarrysta</a>
<script type='text/javascript'>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
  <div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/03028304356873120390' data-rel='author'/>
<div class='g-plusone' data-count='true' data-href='http:http://karristaent.blogspot.com' data-size='medium' data-width='100'/>
<div class='fb-like-box' data-header='false' data-href='https://www.facebook.com/Karristaent.Blogspot' data-show-border='false' data-show-faces='false' data-stream='false' data-width='292'/&gt;
</div>

Keterangan kode diatas :

Yang berwarna Merah silahkan ganti dengan URL Sosial media dan link blog anda. Setelah semuanya terpasang dengan benra save/template anda dan silahkan buka blog anda pada side bar. jika Akun sosial anda belum muncul berarti anda belum memasang jquery sdk fabeook. silahkan jika yang belum pasang jquery di bawah ini copy kode nya dan paste kan tepat di bawah kode : </head> atau di bawah kode <body> :

 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<div id='fb-root'></div><script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.async=true;js.src="//connect.facebook.net/id_ID/all.js#xfbml=1";fjs.parentNode.insertBefore(js,fjs)}(document,'script','facebook-jssdk'));</script>

DEMO

Save lagi template anda dan cek lagi jika like google + dan add G+ Muncul berarti anda harus pasang lagi jquery g+ silahkan diskusikan saja pada kolom komentar jika bisa saya bantu akan saya jawab. mengenai tutorial ini. Tapi semoga artikel ini bisa di pahami sehingga anda mudah untuk menerapkanya. salam ceria selalu dari semoga anda tetap semangat dalam berkarya dan berbagi. salam sukses buat semuanya dan . Salam Blogging.

Berlangganan lewat email pada post baru Blog : Karrysta.