Cara Membuat Wigdet Blogger Keren Tombol Follow Disqus

Wigdet ini saya buat untuk kamu yang ingin memasang tombol follow keren yang berada di bagian sidebar blog dan tampilannya mirip seperti yang ada di Disqus.

Wigdet ini sebenarnya bukan hanya sebagai tombol untuk orang lain agar bisa mengikuti akun Disqus kamu, tapi bisa juga digunakan untuk kepentingan lainnya, misalnya untuk tombol follow blog kamu atau juga tombol lainnya yang mengarah ke link yang kamu tentunkan.

Catatan - Wigdet ini bisa diterapkan disemua jenis template, asalkan template yang kamu gunakan menggunakan sidebar

Membuat Wigdet Tombol Follow Mirip Disqus di Blogger

Langkah pertama - Menyalin kode CSS dibawah ini dulu dan meletakannya kedalam file template kamu.

/* FOLLOW */
.layout-aside {
    max-width:300px;
    width:100%;
    padding:0px;
}
.aside-wrap-brand {
    background: #2e9fff;
    color: #fff;
    padding: 20px 15px 15px;
    text-align:center;
    border-color: #2e9fff;
}
.text-tengah {
    text-align: center;
}
.text-large {
    color: #fff!important;
    padding: 15px 15px!important;
    font-size: 18px!important;
    text-transform: none!important;
    border: 0!important;
    margin: 0!important;
    line-height: 1.25em!important;
}
.aside-img {
    margin: 15px 0;
    height: 100px;
    width: 218px;
}
.join {
padding: 8px 11px;
    font-size: 13px;
    border-radius: 3px;
    border: 1px solid #ffffff;
    color: #fff!important;
    line-height: 1.1em;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}
.join:hover {
    color: #fff;
    background-color: #164b78;
    border-color: #164b78;
}

Lalu letakan kode CSS ini, dibagian kode template kamu tepat diatas </style> atau ]]></b:skin>

Klik " SIMPAN / SAVE " Template kamu.

Langkah kedua - Menyalin kode HTML dibawah ini dan meletakannya dibagian sidebar blog kamu.

<div class="layout-aside">
<div class="aside-wrap-brand">
<img class="aside-img" src="https://c.disquscdn.com/next/0ac6c73/home/img/Pam_Settings.png"/>
<h2 class="text-large">Get more from Disqus</h2>
<p>Follow channels for a personalized experience. Jump into channels to start your own discussion.</p>
<p>
<a href="/home/explore" class="join">Find Channels To Join</a>
</p>
</div>
</div>

Buka Blogger > Tata Letak > Add Gagdet / Tambah Gagdet > Gagdet HTML / JavaScript

Paste kode HTML dan Klik " SIMPAN "

See the Pen eaWYvB by Rian SEO (@rianseo) on CodePen.

Akhir Kata

Sampai tahap ini, kamu sudah berhasil membuat wigdet keren yang mirip seperti disitus Disqus, Jika ada pertanyaan atau juga masukan yang bersifat membangun jangan ragu untuk menulisnya di kolom komentar blog ini.

Berbagi :