Membuat Widget Follow Us Media Sosial Keren di Sidebar Blog

Membuat Widget "Follow Us" Media Sosial Keren di Sidebar Blog

Membuat Widget "Follow Us" Keren di Sidebar Blog

Widget "Follow Us" merupakan komponen yang populer dan penting dalam membangun kehadiran sosial media blog kamu. Dengan menambahkan widget ini di sidebar blog, kamu dapat memudahkan pengunjung untuk mengikuti akun media sosial kamu dan tetap terhubung dengan konten terbaru yang kamu bagikan. Dalam tutorial ini, kami akan membahas langkah-langkah untuk membuat widget "Follow Us" yang keren dan menarik di sidebar blog kamu.

Persiapkan Gambar Logo Sosial Media kamu

Pertama, pilih gambar logo sosial media yang ingin kamu tampilkan di widget "Follow Us". Pastikan logo tersebut berkualitas tinggi dan cocok dengan desain blog kamu. kamu dapat menggunakan logo resmi dari platform media sosial yang kamu gunakan atau merancang logo khusus dengan gaya yang sesuai dengan blog kamu.

Buat Daftar URL Media Sosial

Buat daftar URL profil media sosial yang ingin kamu tampilkan di widget "Follow Us". Ini termasuk URL profil Facebook, Twitter, Instagram, LinkedIn, YouTube, atau platform media sosial lainnya yang kamu gunakan. Pastikan untuk memeriksa keakuratan URL-URL ini agar pengunjung dapat terhubung dengan akun sosial media kamu dengan benar.

Gunakan Tag HTML dibawah ini

<style> 
  #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
  #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
  #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} 
  #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDGpV1HtRJ3DXQNArhOBuCuROZi3lb6VhLeye_yvs-m2AgoYKVMlBAwtLL931l9wllHjNzKS_M7qVQF1maBKWyvN7_k2SKKzPjE7e02idErr5qkDKY3oGwOOznu4GrTYIp9IlKZ2xI2o/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} 
  #tbisose .icon{overflow:hidden; color:#fafafa;} 
  #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
  #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
  #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
  #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
  #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
  #tbisose li:hover .icon, .touch 
  #tbisose li .icon{width:210px;} .touch 
  #tbisose li .facebook, 
  #tbisose li:hover 
  .facebook{background-color:rgba(59,89,152,1);} 
  .touch #tbisose li .twitter, #tbisose li:hover 
  .twitter{background-color:rgba(64,153,255,1);} 
  .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
</style> <ul id="tbisose"> 
  <li data-alt="Follow us on Facebook"> 
    <a class="icon facebook" href="#">Follow us on Facebook</a>
  </li> 
  <li data-alt="Follow us on Twitter"> 
    <a class="icon twitter" href="#">Follow us on Twitter</a>
  </li> 
  <li data-alt="Follow us on Google+"> 
    <a class="icon googleplus" href="#">Follow us on Google+</a>
  </li> 
  <li data-alt="Follow us on Pinterest"> 
    <a class="icon pinterest" href="#">Follow us on Pinterest</a>
  </li> 
  <li data-alt="Subscribe with RSS"> 
    <a class="icon rss" href="#">Subscribe with RSS</a>
  </li> 
</ul> 
<small>
  <div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;">
    <a href="https://www.askkuliah.my.id/2023/07/membuat-widget-follow-us-keren-di.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a>
  </div></small>

Pasang Widget di Sidebar Blog

Salin dan tempel kode HTML yang telah kamu buat ke dalam widget atau bagian sidebar blog kamu. Pastikan untuk menyimpan perubahan dan melihat pratinjau untuk memastikan widget "Follow Us" terlihat dengan baik dan berfungsi dengan benar di sidebar blog kamu.

Kesimpulan

Dalam tutorial ini, kami telah membahas cara membuat widget "Follow Us" yang keren dan menarik di sidebar blog kamu. Dengan mengikuti langkah-langkah ini, kamu dapat memperkuat kehadiran sosial media blog kamu dan memudahkan pengunjung untuk terhubung dengan akun media sosial kamu. Selamat mencoba dan semoga sukses dalam mengembangkan blog kamu!

Cek Hasilnya
Demo

Go to Link

BLOG ASKKULIAH