Cara Membuat Widget Subscribe Button Responsive Di Blog

Cara Membuat Widget Subscribe Button Responsive Di Blog



Hy Semua apa kabar. apa kalian baik baik saja? aku harap begitu. nah kali ini aku 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