Cara Membuat Widget Sticky Sosial Media di Blog
Seotechman.com, Bogor 16/01/2019. Memanfaatkan media sosial, adalah sebuah teknik yang cukup baik untuk kemajuan suatu projek kedepannya.
Seperti yang telah kita 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?
Disini kita akan membuatnya hanya menggunakan CSS untuk mempercantik widget tersebut.
Simak dan perhatikan cara pembuatannya dibawah ini.
Cara Membuat Widget Sosial Media di Blog
1. 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.
Kode CSS
.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;
}4. 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.
Kode HTML
<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.
Seperti itulah Cara Membuat Widget Sticky Sosial Media di Blog.
Semoga bermanfaat!
