Pasang Widget Social Media Di Blog

Pasang widget social media di blog. Di saat punya kelapangan masa ni, apa kata kalau saya kongsikan satu tutorial berkenaan perihal widget iaitu widget social media . Kalau anda kunjung di mana-mana blog pastinya anda akan terlihat widget social media ini yang dipasang di sudut kanan atas header blog.... selalunya akan disertakan bersama semasa anda guna template download...

Widget social media ini sangat diperlukan, supaya pengunjung tidak hanya dapat berinteraksi dengan anda di blog... malah di social media yang lain seperti Instagram, facebook, twitter dan sebagainya.

Pasang Widget Social Media Di Blog 

Anda boleh cuba pasang di dalam blog, seperti mana yang saya pasang di sudut kanan atas blog ini. Cuba lihat, penampilan widget social media yang moden ini agak menarik dan kemas kan, berbanding yang retro punya...

Okep. untuk membolehkan widget ini terpasang di blog anda. Sila ikuti beberapa langkah di bawah ini. Pertama sekali, anda perlu masuk ke ruangan edit HTML... pastikan backup template dulu ye.

Seterusnya salin kod di bawah ini, dan tampal di bahagian bawah kod /* FRAMEWORK */.... seperti mana yang di tunjukan dalam gambar ini.

/* CSS Social Network */<br /> #social_networks{width:100%;background:#585858; display:block;margin:0 auto;text-align:right;}<br /> #social_networks ul {display:block;height:32px;margin:0 auto;padding:5px;list-style:none;}<br /> #social_networks li{opacity:0.5;display:inline-block;margin:0 auto;width:32px;height:32px;background-position:left top;text-align:center;margin-left:5px;transition:All 0.4s ease;}<br /> #social_networks li:hover{opacity:1;background-position:left -32px;}<br /> #social_networks li a{display:inline-block;width:32px;height:32px;}<br /> #social_networks li a:hover{background:transparent;color:#ddd;box-shadow:none;}<br /> #social_networks li a span{display:none;}<br /> #social_networks li.facebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXtTn4uyt_b7BWo58-uP7-FGhiNZ4ztLWbJrSHzkLRY5InoYSB4bdZO0lHQYChPe2aQLqMaP51Xcq-bInd8Sir9fgc38kyZJITYNxyQ98Py1V90XY2ms45pVDSNv2jgL0GxmfWbU5Fue8/s1600/facebook32.png) ;}<br /> #social_networks li.twitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnAhs7LVZ1BkZqSMVcF1yaNPSvx-nlAgh415-yAw-EL3TIDCqaZgjeSkzhxIBpBNIe0N8whZWv3LW6dI9ER4lpna7rV8k-x33CU9BQMIFj9EaJbUHpPpQT8xGGMhvws26uCGlkFVYmuA/s1600/twitter32.png);}<br /> #social_networks li.googleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSA-yqasj3GjyH7h0DBzvZjzGDaMfS6ekaGfm3jDVtCamuxtgLRhgmfEFi6Cnmmu1PQHIPdEGUmINeARGfiik4D4bGq66U7DeNL4DzvPw-POnpX6dpvFKP3b4Y9UxTzSyOg73fOM8zVZk/s1600/googleplus32.png);}<br /> #social_networks li.instagram{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZz39fJ2uDKO-wYlbw-B5YXMIG4JsYpeHp7zMVZLoace2_aMVgIXILvae1zqmmzzjmpqGEDRKfIB9iS6sd6-_Mxsq01ne7gJqUemvNN6DNHBzxoPqYqTEmprgoBrv_lLQrWvRyk2iKlNk/s1600/instagram32.png);}

Contohnya :

Kemudian gunakan Ctrl + F untuk mencari kod ini - " <!-- navigation menu with social icon start --> ". 

Dah jumpa? Lebih kurang macam gambar ini laa.. Sebelum itu anda akan jumpa kod untuk senarai menu dulu, di bawahnya baru tampalkan dengan kod yang saya berikan itu.

<div id='social_networks'> <ul><!--Social Icons Started Started--> <li class='sorting-01 facebook'><a href='https://www.facebook.com/nur.ikaa.16' title='Facebook Admin'><span class='inv'>Facebook</span></a></li> <li class='sorting-02 twitter'><a href='https://twitter.com/ikaa_nur' title='Twitter Admin'><span class='inv'>twitter</span></a></li> <li class='sorting-03 googleplus'><a href='https://plus.google.com/u/0/105630220604245915012' title='Google Page Admin'><span class='inv'>googleplus</span></a></li> <li class='sorting-04 instagram'><a href='https://instagram.com/nurikaa90/' title='Instagram Admin'><span class='inv'>instagram</span></a></li> </ul> <!--Social Icons Started End--><br /> </div> </nav>

Jangan lupa gantikan apa yang patut - URL Facebook, Instagram, Twitter dan Google plus (G+) di atas. Tak pasal ter direct pada saya pula nanti... hehe.

Selamat mencuba.