2 Cara Membuat Sosial Media di Sidebar Blog Ala Lostcips
Description:
Kali ini saya akan share widget social media di sidebar yang di pakai blog ini. Social media ini berisikan "attract new readers and engage with regulars", menarik pembaca baru dan merawat pengunjung setia.
beberapa media social pupuler seperti Facebook, Youtube, Google+, Twitter, dll. Sosial media atau media sosial menjadi salah satu pilar SEO blog. Menurut para ahli, fungsi link akun media sosial yang dipasang diblog antara lain "
Fungsi media sosial disidebar blog tentu saja untuk meningkatkan liker & follower Facebook, Twitter, Google+, dll.
Login ke Blogger > Template > Edit HTML. Lalu Anda cari kode
Lalu Anda menuju Tata Letak > Tambahkan Gadget. Masukkan kode dibawah ini kedalam kolom yang sudah disediakan disitu.
- Silakan Anda ganti link di atas dengan link media sosial milik Anda. Jika sudah terpasang dengan baik, silakan Anda Save dan lihat hasilnya.
Login ke akun Blogger, Template > Edit HTML. Masukkan kode di bawah ini di atas kode
Lalu Anda cari kode
- Ganti link sosial media di atas seperti tutorial pertama.
INFO:
- Jika Anda mau menambahkan sosial lainnya seperti Instagram, Pinterest, dll. Anda cukup menambahkan
-
Perhatikan !
- Silakan Anda ganti semua tulisan
Dan begitulah kurang lebih tutorial yang bisa saya berikan hari ini, semoga bermanfaat bagi kalian semua, sampai jumpa pada artikel selanjutnya. Terimakasih telah berkunjung, jangan lupa Share artikel ini.
beberapa media social pupuler seperti Facebook, Youtube, Google+, Twitter, dll. Sosial media atau media sosial menjadi salah satu pilar SEO blog. Menurut para ahli, fungsi link akun media sosial yang dipasang diblog antara lain "
Fungsi media sosial disidebar blog tentu saja untuk meningkatkan liker & follower Facebook, Twitter, Google+, dll.
#1 Cara Membuat Media Sosial di Sidebar Blog
Langkah pertama :Login ke Blogger > Template > Edit HTML. Lalu Anda cari kode
]]></b:skin> atau </style> kemudian Anda copy kode dibawah ini di atas kode ]]></b:skin> tersebut./* Social Media Lostcips*/
#socialcounter{overflow:hidden;margin:0 0 20px 0}
#socialcounter ul{margin:0}
#socialcounter ul a{color:#fff}
#socialcounter ul li.social_item-wrapper{float:left;width:48%;text-align:center;margin:0 4% 10px 0;color:#fff}
#socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0}
.social_icon{float:left;line-height:50px;width:41px;font-size:1.3rem}
#socialcounter ul li a.social_item.social_facebook{background:#3F5B9B}
.fa-facebook.social_icon{background:#2E4372}
#socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B}
#socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372}
#socialcounter ul li a.social_item.social_twitter{background:#1C97DE}
.fa-twitter.social_icon{background:#1571A5}
#socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE}
#socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5}
#socialcounter ul li a.social_item.social_youtube{background:#E22020}
.fa-youtube.social_icon{background:#B31919}
#socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020}
#socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919}
#socialcounter ul li a.social_item.social_rss{background:#E86321}
.fa-rss.social_icon{background:#C2521B}
#socialcounter ul li.social_item-wrapper:hover .fa-rss.social_icon{background:#E86321}
#socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B}
#socialcounter ul li a.social_item.social_google-plus{background:#E82C2C}
.fa-google-plus.social_icon{background:#BF2424}
#socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C}
#socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424}
#socialcounter ul li a.social_item.social_instagram{background:#8E714D}
.fa-instagram.social_icon{background:#6F583C}
#socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D}
#socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C}
#socialcounter ul li a.social_item.social_pinterest{background:#CA2027}
.fa-pinterest.social_icon{background:#AB1B21}
#socialcounter ul li.social_item-wrapper:hover .fa-pinterest.social_icon{background:#CA2027}
#socialcounter ul li.social_item-wrapper:hover social_pinterest{background:#AB1B21}
Langkah kedua :Lalu Anda menuju Tata Letak > Tambahkan Gadget. Masukkan kode dibawah ini kedalam kolom yang sudah disediakan disitu.
<div id='socialcounter'> <ul class='social-counter'> <li class='social_item-wrapper'><a class='social_item social_facebook' href='https://www.facebook.com/Lostcips' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_twitter' href='https://twitter.com/afriza_mohammad' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_youtube' href='https://www.youtube.com/channel/UCeiJ0zRKNnR8mieLca3P9AA' rel='nofollow' target='_blank'><i class='fa fa-youtube social_icon'/><span class='social_num'>Youtube</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_google-plus' href='https://plus.google.com/105611265751427996934' rel='nofollow' target='_blank'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a> </li> </ul> </div>Catatan:
- Silakan Anda ganti link di atas dengan link media sosial milik Anda. Jika sudah terpasang dengan baik, silakan Anda Save dan lihat hasilnya.
#2 Cara Membuat Media Sosial di Sidebar Blog
Langkah pertama :Login ke akun Blogger, Template > Edit HTML. Masukkan kode di bawah ini di atas kode
]]></b:skin>/* Social Media Lostcips */
#socialcounter{overflow:hidden;margin:0 0 20px 0}
#socialcounter ul{margin:0}
#socialcounter ul a{color:#fff}
#socialcounter ul li.social_item-wrapper{float:left;width:48%;text-align:center;margin:0 4% 10px 0;color:#fff}
#socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0}
.social_icon{float:left;line-height:50px;width:41px;font-size:1.3rem}
#socialcounter ul li a.social_item.social_facebook{background:#3F5B9B}
.fa-facebook.social_icon{background:#2E4372}
#socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B}
#socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372}
#socialcounter ul li a.social_item.social_twitter{background:#1C97DE}
.fa-twitter.social_icon{background:#1571A5}
#socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE}
#socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5}
#socialcounter ul li a.social_item.social_youtube{background:#E22020}
.fa-youtube.social_icon{background:#B31919}
#socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020}
#socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919}
#socialcounter ul li a.social_item.social_rss{background:#E86321}
.fa-rss.social_icon{background:#C2521B}
#socialcounter ul li.social_item-wrapper:hover .fa-rss.social_icon{background:#E86321}
#socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B}
#socialcounter ul li a.social_item.social_google-plus{background:#E82C2C}
.fa-google-plus.social_icon{background:#BF2424}
#socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C}
#socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424}
#socialcounter ul li a.social_item.social_instagram{background:#8E714D}
.fa-instagram.social_icon{background:#6F583C}
#socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D}
#socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C}
#socialcounter ul li a.social_item.social_pinterest{background:#CA2027}
.fa-pinterest.social_icon{background:#AB1B21}
#socialcounter ul li.social_item-wrapper:hover .fa-pinterest.social_icon{background:#CA2027}
#socialcounter ul li.social_item-wrapper:hover social_pinterest{background:#AB1B21}
Langkah kedua :Lalu Anda cari kode
'sidebar-wrapper' atau sebagainya. Soalnya setiap template pasti kodenya berbeda-beda. Taruh kode dibawah ini tepat dibawah kode 'sidebar-wrapper'.<div id='socialcounter'> <ul class='social-counter'> <li class='social_item-wrapper'><a class='social_item social_facebook' href='https://www.facebook.com/Lostcips' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_twitter' href='https://twitter.com/afriza_mohammad' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_youtube' href='https://www.youtube.com/channel/UCeiJ0zRKNnR8mieLca3P9AA' rel='nofollow' target='_blank'><i class='fa fa-youtube social_icon'/><span class='social_num'>Youtube</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_google-plus' href='https://plus.google.com/105611265751427996934' rel='nofollow' target='_blank'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a> </li> </ul> </div>Catatan:
- Ganti link sosial media di atas seperti tutorial pertama.
INFO:
- Jika Anda mau menambahkan sosial lainnya seperti Instagram, Pinterest, dll. Anda cukup menambahkan
-
<li class='social_item-wrapper'><a class='social_item
social_NAMA_SOSIALMEDIA' href='LINK SOSIAL MEDIA'
rel='nofollow' target='_blank'><i class='fa fa-IKON-MEDIASOSIAL
social_icon'/><span
class='social_num'>NAMA SOSIAL MEDIA</span></a></li>Perhatikan !
- Silakan Anda ganti semua tulisan
NAMA SOSIAL MEDIA dengan sosial media yang ingin Anda pakai.
Dan begitulah kurang lebih tutorial yang bisa saya berikan hari ini, semoga bermanfaat bagi kalian semua, sampai jumpa pada artikel selanjutnya. Terimakasih telah berkunjung, jangan lupa Share artikel ini.
Posting Komentar