Cara Membuat Widget Sosial Media Minimalis di Sidebar Blog

PADA dasarnya, SEO sendiri terbagi menjadi dua bagian, SEO on-page dan SEO off-page. Kalau penerapan teknik On-page lebih fokus ke blog untuk search engine, sedangkan teknik Off-page lebih fokus diluar website.

Pembuatan widget sosial media yang unik dan menarik kali ini berkaitan erat dengan teknik SEO off-page, dimana widget ini nantinya akan berfungsi sebagai menarik pembaca baru dan meningkatkan trafik blog.

Cara Membuat Widget Sosial Media Minimalis di Sidebar Blog

Berikut ini cara membuat, menambah atau memasangkan widget sosial media yang terdiri dari berbagai ikon sosial media, seperti facebook, twitter, youtube, google plus, feed RSS blog, dribbble, instagram, pinterest dan linkedin social button lengkap.

Cara Membuat Widget Sosial Media Minimalis di Sidebar Blog


1. Masuk ke Blogger
2. Pilih layout dan tambahkan Add a Widget
3. Pilih menu HTML/JavaScript
4. Pada kolom yang telah disediakan, COPAS kode dibawah ini:

<style>
/* Social Counter
*/
.socialcounter {
    margin-left: -4%;
}
.social_item-wrapper {
float: left;
width: 30.67%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 15px !important;
}
.social_item-wrapper:nth-child(3n+3) {
margin-right: 0 !important;
}
.social_item {
position: relative;
display: block;
padding: 10px 0;
border-radius: 4px;
font-size: 0.875rem;
overflow: hidden;
}
.social_item:before {
content: '';
height: 67px;
transform: translateY(67px);
display: block;
position: absolute;
bottom: -4px;
left: 0;
right: 0;
border-radius: 4px;
}
.social_item:hover {
transform: translateY(0);
background:#e84c4c;
color:#fff;
}

.social_item {
    color: #000;
}

.social_icon {
position: relative;
margin-bottom: 8px;
font-size: 1.2rem;
z-index: 2;
}
.social_num {
position: relative;
z-index: 2;
}
</style>
<div class="socialcounter"><ul class="social-counter"><li class="social_item-wrapper"><a href="linkURL" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><br /><span class="social_num">544268</span></a></li><li class="social_item-wrapper"><a href="linkURL" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><br /><span class="social_num">544268</span></a></li><li class="social_item-wrapper"><a href="linkURL" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><br /><span class="social_num">544268</span></a></li><li class="social_item-wrapper"><a href="linkURL" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><br /><span class="social_num">544268</span></a></li><li class="social_item-wrapper"><a href="linkURL" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><br /><span class="social_num">544268</span></a></li><li class="social_item-wrapper"><a href="linkURL" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><br /><span class="social_num">544268</span></a></li><li class="social_item-wrapper"><a href="linkURL" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><br /><span class="social_num">544268</span></a></li><li class="social_item-wrapper"><a href="linkURL" class="social_item social_pinterest"><i class="fa fa-pinterest social_icon"></i><br /><span class="social_num">544268</span></a></li><li class="social_item-wrapper"><a href="linkURL" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><br /><span class="social_num">544268</span></a></li></ul></div>

5. Simpan template blogger dan lihat hasilnya!

Informasi: LinkURL adalah link alamat yang Anda kehendaki.

KESIMPULAN

Widget social media diatas memiliki tampilan yang cukup elegan dan minimalis, serta berlatar-belakang putih.

Oh iya, perlu ditekankan disini adalah mengapa icon-icon sosial media tersebut tidak tampil di blog kita, perlu diketahui adalah ikon sosmed tersebut berasal dari Font Awesome.

Untuk memasangkan font awesome di blog, penjelasannya sudah ditulis disini: Pengertian & Cara Memasang Font Awesome. Good luck & happy blogging!

0 Response to "Cara Membuat Widget Sosial Media Minimalis di Sidebar Blog"

Post a Comment

Berkomentarlah dengan baik dan benar, komentar spam tidak akan dipublikasikan. Harap baca semua atau keseluruhan artikel. Gunakan anonymous jika tidak punya akun google untuk berkomentar. Centang OK pada NOTIFY ME agar komentar balasan masuk ke email Anda.