Membuat Social Media Keren, Simple, dan Responsive
Description:
Cara Memasang atau Membuat Social Media di Blogger Keren, Simple, dan Responsive ~ Postingan yang bisa saya berikan kali ini adalah mengenai Cara Memasang Social Media di Blog. Ini sebenarnya punya seocips versi dark, tapi saya share duluan karna dia ga share :D. Dengan adanya tombol share diblog Anda, blog anda juga akan mendapatkan adanya kenaikkan pada jumlah pengunjung. Selain sebagai sarana bagi pengunjung atau pembaca artikel post untuk membaginya konten yang dirasa bagus atau disukai ke jejaring sosial media seperti Facebook, Twitter, Google+, dan masih banyak situs jejaring sosial lainnya.
postingan kali ini saya akan membagikan social button yang di pakai oleh template
Kali ini saya akan memberikan sedikit ilmu mengenai cara membuat social media button yang keren dan responsive untuk blogger Anda, social button yang saya share kali ini terdiri dari beberapa jejaring social yang tidak kalah populernya dengan jejaring social lainnya yaitu Facebook, Twitter, Google+, dan Rss.
Baca juga : Widget Social Share Melayang di Blog
Untuk tampilan nya anda bisa melihat foto atau screnshoot dibawah ini.
- Ganti url yang bewarna
- Ganti url yang ditandai dengan url social media yang anda miliki.
Penerapannya seperti gambar atau screnshoot dibawah ini.
Dan begitulah tutorial yang bisa saya berikan kali ini semoga bermanfaat bagi kalian semua. Dan jangan lupa Like dan Share artikel ini kepada teman kalian semua, terimakasih telah berkunjung.
postingan kali ini saya akan membagikan social button yang di pakai oleh template
Kali ini saya akan memberikan sedikit ilmu mengenai cara membuat social media button yang keren dan responsive untuk blogger Anda, social button yang saya share kali ini terdiri dari beberapa jejaring social yang tidak kalah populernya dengan jejaring social lainnya yaitu Facebook, Twitter, Google+, dan Rss.
Baca juga : Widget Social Share Melayang di Blog
Untuk tampilan nya anda bisa melihat foto atau screnshoot dibawah ini.
#1 Menggunakan HTML
#1. Login ke Blogger > Template > Edit HTML > Cari kode]]></b:skin> kemudian anda pastekan kode dibawah ini diatas kode yang tadi yaitu ]]></b:skin>.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0;float:right;}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0;border:1px solid #444;box-shadow:0 0 10px #111;}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Seh_pmP_57ldqVcrDN7uwArPqjmFZG5931bwnJKrKoi5w_Kq8JdzxvW7oPlaTzwGsimcGSstvWjNdNHH8AWn0J1wtD_QCIrHNdwecK7pwf4yK9ahdwD3HICYmCau5Ut4s38kWdnNxg/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Seh_pmP_57ldqVcrDN7uwArPqjmFZG5931bwnJKrKoi5w_Kq8JdzxvW7oPlaTzwGsimcGSstvWjNdNHH8AWn0J1wtD_QCIrHNdwecK7pwf4yK9ahdwD3HICYmCau5Ut4s38kWdnNxg/s1600/facebook.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VBugEO9hLFoHquqAdTlcw9mE61HU11-z0x50n6VsGoURFAxEjgXQfjL23CJuSJNlFxKsvL3N1uMYvoT-XO1kcM-seuoFjCMEI0ewzsKbXqTX8nEuhT6wuPdTIIuN3FVkGh-UWQxU8A/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VBugEO9hLFoHquqAdTlcw9mE61HU11-z0x50n6VsGoURFAxEjgXQfjL23CJuSJNlFxKsvL3N1uMYvoT-XO1kcM-seuoFjCMEI0ewzsKbXqTX8nEuhT6wuPdTIIuN3FVkGh-UWQxU8A/s1600/twitter-1.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGA5pmMzdu7nOpbq5Fe4_SQ45KMm7fBTrA-zVys7TAcJn2KlBRspMWznRkikb2YHnP35BWLNvUyhxCwgqUtFoUIbPGwVhzAQqld-2nXGbocSMY-pj8ZGIjwQFPByTwVjp2MKp2fCicA/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGA5pmMzdu7nOpbq5Fe4_SQ45KMm7fBTrA-zVys7TAcJn2KlBRspMWznRkikb2YHnP35BWLNvUyhxCwgqUtFoUIbPGwVhzAQqld-2nXGbocSMY-pj8ZGIjwQFPByTwVjp2MKp2fCicA/s1600/google.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzsmTZ0tgllHHKcJmSKdg-RAZ16bI5bcdff0ycFJRz6-vcyfH5w2P51vlhNp3TPJZlA0mAOGWAnHOlcx9giHee81-n9AEpIE9enDmsKZUWX6flBBDm_WskXPpuAT4O2pcJDYojoKItKA/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzsmTZ0tgllHHKcJmSKdg-RAZ16bI5bcdff0ycFJRz6-vcyfH5w2P51vlhNp3TPJZlA0mAOGWAnHOlcx9giHee81-n9AEpIE9enDmsKZUWX6flBBDm_WskXPpuAT4O2pcJDYojoKItKA/s1600/twitter.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
@media screen and (max-width:900px){
#header2{display:none;}
}
#2. Kemudian Anda cari kode <div class='header-wrapper'> jika sudah kamu salin kode dibawah ini setelah kode yang saya sebutkan tadi. Karna saya mau buatnya di header, yang saya jelasin yang mau nerapinnya di header ya :D. Kalau mau dibagian lainnya tunggu postingan kelanjutannya ya.<div class="kotak"> <div class="abt-social-slide"> <ul> <li><a class="facebook" href="Catatan:https://www.facebook.com/Lostcips" target="_blank" title='Find Me On Facebook'>Facebook</a></li> <li><a class="twitter" href="https://twitter.com/afriza_mohammad" target="_blank" title='Find Me On Twitter'>Twitter</a></li> <li><a class="google-p" href="https://plus.google.com/105611265751427996934" target="_blank" title='Find Me On Google Plus'>Google plus</a></li> <li><a class="rss" href="http://feeds.feedburner.com/lostcips" target="_blank" title='Feedburner seocips'>Rss</a></li> </ul> </div></div>
- Ganti url yang bewarna
kuning dengan url social media yang anda miliki.#2 Menggunakan Gadget atau Widget
#1. Login ke Blogger > Tata Letak > Tambahkan Gadget. Seperti yang saya jelaskan di atas, yang saya jelaskan ini adalah penerapan di bagian header, kalau bagian lain tunggu artikel kelanjutannya ya :D.<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0;float:right;}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0;border:1px solid #444;box-shadow:0 0 10px #111;}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Seh_pmP_57ldqVcrDN7uwArPqjmFZG5931bwnJKrKoi5w_Kq8JdzxvW7oPlaTzwGsimcGSstvWjNdNHH8AWn0J1wtD_QCIrHNdwecK7pwf4yK9ahdwD3HICYmCau5Ut4s38kWdnNxg/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Seh_pmP_57ldqVcrDN7uwArPqjmFZG5931bwnJKrKoi5w_Kq8JdzxvW7oPlaTzwGsimcGSstvWjNdNHH8AWn0J1wtD_QCIrHNdwecK7pwf4yK9ahdwD3HICYmCau5Ut4s38kWdnNxg/s1600/facebook.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VBugEO9hLFoHquqAdTlcw9mE61HU11-z0x50n6VsGoURFAxEjgXQfjL23CJuSJNlFxKsvL3N1uMYvoT-XO1kcM-seuoFjCMEI0ewzsKbXqTX8nEuhT6wuPdTIIuN3FVkGh-UWQxU8A/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VBugEO9hLFoHquqAdTlcw9mE61HU11-z0x50n6VsGoURFAxEjgXQfjL23CJuSJNlFxKsvL3N1uMYvoT-XO1kcM-seuoFjCMEI0ewzsKbXqTX8nEuhT6wuPdTIIuN3FVkGh-UWQxU8A/s1600/twitter-1.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGA5pmMzdu7nOpbq5Fe4_SQ45KMm7fBTrA-zVys7TAcJn2KlBRspMWznRkikb2YHnP35BWLNvUyhxCwgqUtFoUIbPGwVhzAQqld-2nXGbocSMY-pj8ZGIjwQFPByTwVjp2MKp2fCicA/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGA5pmMzdu7nOpbq5Fe4_SQ45KMm7fBTrA-zVys7TAcJn2KlBRspMWznRkikb2YHnP35BWLNvUyhxCwgqUtFoUIbPGwVhzAQqld-2nXGbocSMY-pj8ZGIjwQFPByTwVjp2MKp2fCicA/s1600/google.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzsmTZ0tgllHHKcJmSKdg-RAZ16bI5bcdff0ycFJRz6-vcyfH5w2P51vlhNp3TPJZlA0mAOGWAnHOlcx9giHee81-n9AEpIE9enDmsKZUWX6flBBDm_WskXPpuAT4O2pcJDYojoKItKA/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzsmTZ0tgllHHKcJmSKdg-RAZ16bI5bcdff0ycFJRz6-vcyfH5w2P51vlhNp3TPJZlA0mAOGWAnHOlcx9giHee81-n9AEpIE9enDmsKZUWX6flBBDm_WskXPpuAT4O2pcJDYojoKItKA/s1600/twitter.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
@media screen and (max-width:900px){
#header2{display:none;}
}
</style>
<div class="kotak">
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="https://www.facebook.com/Lostcips" target="_blank" title='Find Me On Facebook'>Facebook</a></li>
<li><a class="twitter" href="https://twitter.com/afriza_mohammad" target="_blank" title='Find Me On Twitter'>Twitter</a></li>
<li><a class="google-p" href="https://plus.google.com/105611265751427996934/" target="_blank" title='Find Me On Google Plus'>Google plus</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/lostcips" target="_blank" title='Feedburner seocips'>Rss</a></li>
</ul>
</div></div>
Catatan:- Ganti url yang ditandai dengan url social media yang anda miliki.
Penerapannya seperti gambar atau screnshoot dibawah ini.
Dan begitulah tutorial yang bisa saya berikan kali ini semoga bermanfaat bagi kalian semua. Dan jangan lupa Like dan Share artikel ini kepada teman kalian semua, terimakasih telah berkunjung.
Posting Komentar