Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Membuat Wigdet Blogger Keren Tombol Follow Disqus

Cara Membuat Wigdet Blogger Keren Tombol Follow Disqus Images @rian_seo
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.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter