Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger
Wigdet Sosial Media Blog - Sosial media adalah tempat orang melakukan berbagai macam infirasi bebas dan juga pendapat tanpa batas yang bisa semua orang lakukan. Tidak lebih dari itu, sosial media ini sangat penting dengan terkaitnya sebuah blog agar memberikan kemudahan orang lain untuk mengenal sang pemilik blog tersebut lewat akun sosial medianya masing-masing.
Bagi kamu seorang pengelola blog, maka sangat penting untuk memperhatikan terkaitnya link sosial media kamu di dalam blog, agar para pengunjung dengan mudah menambahkan kamu sebagai teman mereka di sosial media. Tentu ini menjadi nilai plus yang sangat penting buat kamu agar para pengunjung lebih mudah berinstraksi dengan sang pemilik blog.
Dalam halaman ini, kami memberikan tips dalam langkah membuat wigdet sosial media di blog yang keren. Tentunya langkah kali ini, bisa kamu ikuti untuk blog yang berbasis Wordpress maupun blogger (blogspot).
Sebelum menuju tutorial pembuatan wigdet sosial media ini, ada baiknya kamu backup dulu template atau tema agar nantinya jika terjadi kesalahan tidak akan kehilangan pengaturan tema sebelumnya.
Membuat Widget Sosial Media di Blog
Berbicara masalah wigdet blog, maka kita tidak lepas dari yang namanya CSS.
CSS ini berperan penting dalam mempercantik tampilan blog kamu, tanpa CSS maka kode HTML akan tampil tidak rapi bahkan berantakan.
Wigdet Sosial Media keren Blogger
Buka Blogger > Template > edit HTML
Langkah pertama, kamu harus menyalin kode CSS dikotak bawah ini.
/* SOCIAL ICON */ ul.nav-social { list-style: none; margin: 0; padding: 0; } ul.nav-social li { display: inline-block; padding: 0; margin: 20px; vertical-align: top; width: 192px; font-family: Roboto, Arial, sans-serif; } ul.nav-social li a:hover { color:#2ec4f2; } ul.nav-social li a { color:rgba(0,0,0,.87); font-weight: 600; font-size: 14px; text-decoration: none; } .social-title { font-weight: 400; font-size: 14px; color: #212121; } .devsite-footer-promo-icon { color: rgba(0,0,0,.87); display: block; font-size: 48px; height: 48px; margin: 0 auto 8px; width: 48px; }
Letakan kode CSS tepat dibagian atas kode </style> atau ]]></b:skin>
Klik ' SIMPAN '
Memasang Wigdet Sosial Media di Blogger
Kali ini kita menyalin kode HTML untuk memanggil tampilan kode CSS tadi.
Salin kode HTML didalam kotak bawah ini.
<ul class="nav-social"> <li><a href="https://blog.rianseo.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//www.gstatic.com/images/icons/material/product/2x/chrome_chromium_64dp.png">Blog</a> <div class="social-title">The latest news on the Chromium blog.</div> </li><li><a href="https://blog.rianseo.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//developers.google.com/site-assets/logo-github.svg">GitHub</a> <div class="social-title">Fork our code samples and other open-source projects</div> </li> <li><a href="https://twitter.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//developers.google.com/site-assets/logo-twitter.svg">Twitter</a> <div class="social-title">Connect with @ChromiumDev on Twitter.</div> </li> <li><a href="https://www.youtube.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//www.gstatic.com/images/icons/material/product/2x/youtube_64dp.png">Videos</a> <div class="social-title">Check out our videos.</div> </li> </ul>
Selanjutnya buka Dashbor > tata letak > edit HTML
Klik ' SIMPAN '
Note: Tata letak wigdet tergantung template yang kamu gunakan, jika tata letak wigdet kamu ada dibagian bawah halaman postingan maka tampilan wigdet sosial media ini akan terlihat lebih bagus.
Membuat Wigdet Sosial Media di Blog WordPress
Seperti biasanya, kamu juga harus menyalin kode CSS dibawah ini, hanya saja untuk tata cara pemasangannya sedikit berbeda daripada blogger.
Salin kode CSS di kotak bawah ini.
/* SOCIAL ICON */ ul.nav-social { list-style: none; margin: 0; padding: 0; } ul.nav-social li { display: inline-block; padding: 0; margin: 20px; vertical-align: top; width: 192px; font-family: Roboto, Arial, sans-serif; } ul.nav-social li a:hover { color:#2ec4f2; } ul.nav-social li a { color:rgba(0,0,0,.87); font-weight: 600; font-size: 14px; text-decoration: none; } .social-title { font-weight: 400; font-size: 14px; color: #212121; } .devsite-footer-promo-icon { color: rgba(0,0,0,.87); display: block; font-size: 48px; height: 48px; margin: 0 auto 8px; width: 48px; }
Buka Wordpress > Tampilan > Edit CSS
Dalam kotak CSS tersebut, kamu tempel kode CSS yang sudah kamu salin tadi.
Klik ' SIMPAN '
Note : Tema WordPress yang kami gunakan adalah tema GeneratePress, untuk menggunduhnya bisa kamu buka disini
Memasang Wigdet Sosial Media di Wordpress
Selanjutnya kebagian tata letak, dengan cara Tampilan > Wigdet > Tambah Wigdet > HTML Khusus
Salin kode HTML dibawah ini dan letakan kodenya di bagian kolom HTML Khusus tadi.
<ul class="nav-social"> <li><a href="https://blog.rianseo.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//www.gstatic.com/images/icons/material/product/2x/chrome_chromium_64dp.png">Blog</a> <div class="social-title">The latest news on the Chromium blog.</div> </li><li><a href="https://blog.rianseo.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//developers.google.com/site-assets/logo-github.svg">GitHub</a> <div class="social-title">Fork our code samples and other open-source projects</div> </li> <li><a href="https://twitter.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//developers.google.com/site-assets/logo-twitter.svg">Twitter</a> <div class="social-title">Connect with @ChromiumDev on Twitter.</div> </li> <li><a href="https://www.youtube.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//www.gstatic.com/images/icons/material/product/2x/youtube_64dp.png">Videos</a> <div class="social-title">Check out our videos.</div> </li> </ul>
Klik ' Simpan '
Note: Ubah tanda # dibagian kode HTML dengan link sesuai sosial media kamu
Kesimpulan
Demikian trik mudah yang dapat kami sampaikan tentang membuat wigdet sosial media keren di blog, Jika ada pertanyaan tambahan jangan ragu untuk menulisnya di kolom komentar blog ini.
Posting Komentar untuk "Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini