Cara Membuat Wigdet Blogger Keren Tombol Follow Disqus

Berbagi :
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.

Daftar Isi [Tutup]

    Apakah Halaman ini membantu?
    Lebih baru
    Lebih lama
    Olavia
    Olavia Technical Content Writer, Menyukai dunia Technical IT, Produk Digital & Blogging. Suka berbagi satu sama lain.

    0 Komentar

    Posting Komentar

    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