Cara Membuat Widget Sticky Sosial Media Di Blog
Penerbit: ( Seo Techman )

Cara Membuat Widget Sticky Sosial Media Di Blog

Cara Membuat Widget Sticky Sosial Media
Memanfaatkan media sosial, adalah sebuah teknik yang cukup baik untuk kemajuan suatu projek kedepannya.

Seperti yang telah kalian ketahui, bahwa peran sosial media pada saat ini sangat penting. Kenapa penting? Karena di jaman yang serba canggih seperti sekarang ini telah terbukti hampir beberapa persen dari perusahaan atau yang lainnya, telah menargetkan dan memasarkan produk mereka melalui sosial media dan di tambah lagi dengan beragam sosial media lainnya yang saat ini bermunculan.

Nah maka dari itu, untuk kesempatan kali ini saya akan memberikan sebuah tutorial cara membuat widget stikcy sosial media yang lumayan bagus menurut saya.

Apakah Terdapat Javascript Didalam nya?

Tidak sama sekali, karena disini kita akan membuatnya hanya menggunakan CSS untuk mempercantik widget tersebut. Untuk langkah pembuatnya sangat mudah tidak sulit, bisa kalian simak dan perhatikan dibawah ini.

Langkah-langkahnya:
1.Seperti biasa login ke dashboard Blogger -> Click Tema -> Edit Html.
2.Cari kode ]]></b:skin> atau </style>
3.Lalu Copy Paste kode CSS dibawah ini, dan letakan tepat di atas ]]></b:skin> atau </style> tersebut.


.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

Langkah selanjut nya adalah, memasang kode html nya. Copy Paste kode dibawah ini, terserah mau diletakan di bagian mana. Bisa didalam kode <body> atau dibagian lainnya.


<div class="icon-bar">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
Silahkan ganti kode # dengan alamat sosial media kalian. Dan kalian juga bisa menambah sosial media lain jika kalian menginginkanya.
Kreasikan kode diatas sesuai dengan imajinasi kalian masing-masing. Mungkin saya rasa cukup untuk pembahasan kali ini.

Itulah widget sticky sosial media, sedikit atau kurangnya semoga bermanfaat. Dan bilamana ada kesalahan dalam kode tersebut, silahkan berkomentar.

Akhir kata saya ucapkan, Terimakasih.

Load comments