Cara Mudah Memasang Ikon Media Sosial Official

loading...

Selamat datang di The Royal Moringa. Setelah sebelumnya saya memberikan informasi mengenai cara membuat ikon media sosial dengan desain elegan kali ini saya akan mengajarkan anda bagaimana menambahkan ikon media sosial dengan official design atau dengan kata lain logo resmi mereka. Artikel kali ini tidak jauh berbeda dengan metode dan peletakkan pada artikel sebelumnya. Kita akan meletakkan widget media sosial tersebut di header maupun 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:10px 0 0 15px; } .social-media li a img{ border-radius:6px; }

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"><img src="https://loebig.files.wordpress.com/2013/10/flat_facebook32x32.png?w=640"/></a></li> <li><a href="https://twitter.com/#" rel="nofollow" target="_blank" title="Twitter"><img src="https://loebig.files.wordpress.com/2013/10/flat_twitter32x32.png?w=640"/></a></li> <li><a href="https://instagram.com/#" rel="nofollow" target="_blank" title="Instagram"><img src="https://loebig.files.wordpress.com/2014/06/ig_rounded_32x32.png?w=640"/></a></li> <li><a href="https://www.linkedin.com/#" rel="nofollow" target="_blank" title="Linkedin"><img src="https://loebig.files.wordpress.com/2013/10/flat_linkedin32x32.png?w=640"/></a></li> <li><a href="https://plus.google.com/#" rel="nofollow" target="_blank" title="Google Plus"><img src="https://loebig.files.wordpress.com/2013/10/flat_googleplus32x32.png?w=640"/></a></li> <li><a href="http://www.pinterest.com/#" rel="nofollow" target="_blank" title="Pinterest"><img src="https://loebig.files.wordpress.com/2013/10/flat_pinterest32x32.png?w=640"/></a></li> <li><a href="https://www.youtube.com/#" rel="nofollow" target="_blank" title="Youtube"><img src="https://loebig.files.wordpress.com/2013/10/flat_youtube32x32.png?w=640"/></a></li> <li><a href="https://tumblr.com/#" rel="nofollow" target="_blank" title="Tumblr"><img src="https://loebig.files.wordpress.com/2013/10/flat_tumblr32x32.png?w=640"/></a></li> <li><a href="ALAMAT FEED ANDA" rel="nofollow" title="Feed"><img src="https://loebig.files.wordpress.com/2013/10/flat_rss32x32.png?w=640"/></a></li> </ul> </div>

3. Jangan lupa mengganti # dengan url profile anda dan mengganti alamat feed anda. Save Template dan lihat hasilnya.

Untuk menemukan alamat feed anda bisa mendapatkannya dengan menambahkan terlebih dahulu Subscription Links Gadget di Layout kemudian tampilkan blog anda > Pada gadget yang telah terpasang silakan pilih posts > klik Atom. Kemudian anda akan dibawa menuju halaman feed blog anda dan silakan copy url feed tersebut.

Sekarang anda telah berhasil memasang widget ikon media sosial desain official di blog anda. Terima kasih telah membaca!

loading...