Cara Mudah Memasang Ikon Media Sosial dengan Desain Elegan

loading...

Selamat datang di The Royal Moringa. Sekarang, saya akan mengajarkan anda bagaimana menambahkan icon media sosial di header maupun footer blog anda. Cara pembuatan icon media sosial seperti Facebook, Twitter, Google Plus, Pinterest, Instagram, Youtube, Vimeo, Linkedin, dan email sebenarnya sederhana kalau kita hanya ingin menampilkan desain basic/defaultnya. Yang membuat icon itu menarik adalah desainnya. Nah, sekarang saya akan membantu anda membuat ikon tersebut, membuat desain yang elegan, sekaligus meletakkannya di header ataupun footer blog anda. Simak langkah-langkah berikut.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > Cari ]]></b:skin> kemudian copy dan paste kode CSS berikut ini diatasnya.

                                        .social-media{ float:right; } @media only screen and (max-width: 480px) { .social-media { display:none; } } .social-media ul{ margin:0; padding:0; } .social-media li{ float:left; display:block; margin:18px 0 0 15px; } .social-media li a{ color:#4b4b4b; border:1px solid #4b4b4b; padding:5px 7px; } .social-media li a:hover{ color:#ededed; border:1px solid #ededed; } .fa{ display:inline-block; font:normal normal normal 14px/1 FontAwesome; text-rendering:auto; width:14px; text-align:center; }

2. Langkah kedua ini tergantung pada pilihan anda dalam penempatan widget social media. Jika anda menghendaki untuk meletakkannya di header maka silakan anda menuju body dan cari tag widget yang ada di paling atas dari semua elemen seperti <div id="top-navigation"> ataupun <header>. Peletakkan widget social media akan berada disebelah kanan karena disebelah kiri biasanya ada judul blog, menu navigasi, dan lain sebagainya. Jika anda menghendaki untuk meletakkannya di bagian footer (biasanya social media diletakkan disebelah kanan copyright) maka cari tag seperti <div id="footer-wrapper"> atau <div id="copyright">. Tidak semua blog memiliki tag yang sama jadi jika tidak menemukan silakan cari yang serupa. Copy dan paste kode HTML berikut setelah tag </div> dari judul atau copyright

Perhatikan contoh berikut.

<div id="top-navigation>

<div id="judul-blog">...</div> //Posisi judul di sebelah kiri//

<div class="social-media">...</div> //Posisi ikon medsos di sebelah kanan//

</div>

Keterangan : untuk judul dan copyright yang berada di tengah (center align) tidak bisa langsung menggunakan kode HTML berikut. Anda harus membaginya terlebih dahulu menjadi <div class="left"> dan <div class="right>. Untuk informasi lebih lanjut, silakan pelajari Cara Membagi Wrapper menjadi Kiri dan Kanan.

                                       <div class="social-media"> <ul> <li><a href="https://www.facebook.com/#" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/#" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="https://instagram.com/#" rel="nofollow" target="_blank" title="Instagram"><i class="fa fa-instagram"></i></a></li> <li><a href="https://www.linkedin.com/#" rel="nofollow" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li> <li><a href="https://plus.google.com/#" rel="nofollow" target="_blank" title="Google Plus"><i class="fa fa-google-plus"></i></a></li> <li><a href="http://www.pinterest.com/#" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i></a></li> <li><a href="https://www.youtube.com/#" rel="nofollow" target="_blank" title="Youtube"><i class="fa fa-youtube"></i></a></li> <li><a href="https://vimeo.com/#" rel="nofollow" target="_blank" title="Vimeo"><i class="fa fa-vimeo-square"></i></a></li> <li><a href="mailto:ALAMAT EMAIL ANDA" rel="nofollow" title="Email"><i class="fa fa-envelope"></i></a></li> </ul> </div>

3. Jangan lupa mengganti # dengan url profile anda dan mengganti alamat email anda. Setelah sudah, silakan Save Template dan lihat hasilnya.

Sekedar informasi, background color berwarna hitam seperti contoh gambar diatas diatur dari tag widget utama sebelum dibagi menjadi left dan right, jadi kode CSS diatas tidak mengubah warna background widget top navigation ataupun copyright anda. Nah, jika anda menginginkan desain logo/ikon sosial media yang official/resmi atau dengan kata lain logo asli mereka silakan simak artikel Cara Mudah Memasang Ikon Media Sosial dengan Official Design. Terima kasih telah membaca!

loading...