Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger

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

Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger

Pastekan kode HTML tadi dibagian kotak wigdet yang tersedia di blog kamu.

Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger


Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger

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


Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger

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


Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger

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>
Cara Membuat Wigdet Sosial Media Keren di Blog WordPress dan Blogger

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"