Cara Membuat Widget Subscribe Button Responsive Di Blog - Nandea96
Artikel Terbaru
Loading...

Monday, 8 July 2019

Cara Membuat Widget Subscribe Button Responsive Di Blog



Hy Semua apa kabar. apa kalian baik baik saja? Dea harap begitu. nah kali ini Dea akan memberikan sebuah tutorial. tutorial kali ini sangat berkaitan dengan blog. tentu saja widget. nah widget apakah itu? widget ini adalah widget social media. lagi? yup. kali ini berbeda dengan widget lainya. kenapa. karena widget ini sangat responsive bukan berarti ini responsive tapi biasa aja. bukan. akan tetpai widget ini keren. dan desain yang digunakan sangat simple. nah jika kalian ingin memasangnya di blog kalian. kalian dapat mengikuti tutorial dibawah ini dengan seksama.

Step By Step

1. Buka blog kalian disini.
2. Jika sudah maka carilah "Tata Letak".
3. Setelah itu pilih "Add Gadget/Widget atau Tambahkan Widget/Gadget" pada halaman "Footer".
4. Maka akan muncul tab kecil. disana pilih "HTML/JavaScript".
5. Dan copy code dibawah ini dan tempatkan /pastekan di tabel "Konten".


<center>
<style>

.button {
    background-color: #4CAF50; /* Green */
    border-radius:9px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display:inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
.button2 {
    background-color: #008CBA; 
    color: #fff; 
    border: 2px solid #008CBA;

}
.button2:hover {
    background-color: #077ea5;
    color: white;
    border: 2px solid #077ea5;
}
.button3 {
    background-color:#4eb5d7; 
    color:#4eb5d7; 
    border: 2px solid #4eb5d7;
}
.button3:hover {
    background-color: #19a7d6;
    color: white;
    border: 2px solid #19a7d6;
}
.button4 {
    background-color:#f44336;
    color: #f44336;
    border: 2px solid #f44336;
}
.button4:hover {
    background-color: #e24034;                
    color:white;
    border: 2px solid #e24034;
}
.button5 {
    background-color: #e61747;
    color: #e61747;
    border: 2px solid #e61747;
}
.button5:hover {
    background-color: #d11a45;
    color: white;
    border: 2px solid #d11a45;
}
.button6 {
    background-color: #fb7629;
    color: #fb7629;
    border: 2px solid #fb7629;
}
.button6:hover {
    background-color: #f07228;
    color: white;
    border: 2px solid #f07228;
}
</style>
<font="allgerian">Jangan lupa untuk Subsribe Channel Aku</font>
<hr align="center" width="440" color="red"/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<a href="https://www.facebook.com" rel='nofollow' target="_blank" button class="button button2 fa fa-facebook" style="color:#fff;"></a>
<a href="https://www.twitter.com" rel='nofollow' target="_blank" button class="button button3 fa fa-twitter" style="color:#fff;"></a>
<a href="https://www.googleplus.com" rel='nofollow' target="_blank" button class="button button4 fa fa-google-plus" style="color:#fff;"></a>
<a href="https://www.pinterest.com" rel='nofollow' target="_blank" button class="button button5 fa fa-pinterest" style="color:#fff;"></a>
<a href="https://www.feedburner.com" rel='nofollow' target="_blank" button class="button button6 fa fa-rss" style="color:#fff;"></a>
</center>

5. Jika sudah maka selamat. sekarang kalian dapat menggunakan social media button tersebut pada blog kalian.


Ganti Tulisan merah tersebut dengan url akun social media kalian dan ganti tulisan berwarna hijau tersebut sesuka hati kalian

Share with your friends

Give us your opinion

Selamat Datang Di Website Nandea96
Mohon untuk selalu mencuci tangan dengan air bersih serta sabun setiap 15 menit sekali agar terhindar dari covid-19 dan penyakit lainnya seperti diare. selalu gunakan masker ketika berpergian kemanapun 😷. meskipun itu hanya berbelanja sekitar 0.1 km atau ke tetangga. hindari kontak fisik dan beri jarak sekitar 2 meter dari jarak tempat kita berdiri dengan seseorang agar tidak memunculkan klaster baru yang tidak di-inginkan.

-Terimakasih 🙏-
Done