Selamat malam kawan, Jumpa lagi dengan saya di GblogKri.
Kali ini saya akan membagikan sebuah Widget yang sangat bagus untuk anda yaitu Subscribe Widget.
Subscribe widget ini sangat cocok untuk blog anda yg memasang tema elgan atau minimalis, karena tampilan Subscribe Widget ini yang juga elegan dan minimalis sehingga enak untuk di pandang.
Oke langsung saja kita ke step-stepnya.
Style 1- Dark Background With Social Icon
Masuk ke akun Blogger anda Blogger Dashboard Template Edit HTML
Cari Kode <head> Lalu Kopi pastekan kode di bawah ini setelah kode <head>
Cari Lagi Kode </style> Dan Kopy pasteka kode berikut tepat di atas kode </style>
Save Template.
Sekarang kita membuat widget dengan pergi ke Tataletak/Layout Add A Gadget Add Html/Javascript.
Kopi pastekan kode berikut di kotak Html.
Note*
Ganti semua Tag # dengan url social media anda.
Ganti Your-User-Name dengan Username feedburner anda.
Lalu Save Widget Dan Lihat Hasilnya.
Style 2- Colorful Widget With Name Box
Copy kode berikut di atas kode </style>
Save Template.
Buat Widget Seperti Step di atas tadi dan Pastekan kode berikut.
Note*
Ganti Semua Your Name dengan Name Feedburner anda.
Save Widget.
Selesai.
Oke sekian tutorial kali ini tentang 2 Style Subscribe Widget Yang Bagus Untuk Blogger semoga membuat blog anda semakin unik dan enak untuk di kunjungi, Happy Blogging.!
Kali ini saya akan membagikan sebuah Widget yang sangat bagus untuk anda yaitu Subscribe Widget.
Subscribe widget ini sangat cocok untuk blog anda yg memasang tema elgan atau minimalis, karena tampilan Subscribe Widget ini yang juga elegan dan minimalis sehingga enak untuk di pandang.
Oke langsung saja kita ke step-stepnya.
Style 1- Dark Background With Social Icon
Masuk ke akun Blogger anda Blogger Dashboard Template Edit HTML
Cari Kode <head> Lalu Kopi pastekan kode di bawah ini setelah kode <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
Cari Lagi Kode </style> Dan Kopy pasteka kode berikut tepat di atas kode </style>
#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}
Save Template.
Sekarang kita membuat widget dengan pergi ke Tataletak/Layout Add A Gadget Add Html/Javascript.
Kopi pastekan kode berikut di kotak Html.
<center>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
</center>
<br/><br/><br/>
Note*
Ganti semua Tag # dengan url social media anda.
Ganti Your-User-Name dengan Username feedburner anda.
Lalu Save Widget Dan Lihat Hasilnya.
Style 2- Colorful Widget With Name Box
Copy kode berikut di atas kode </style>
#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px
Save Template.
Buat Widget Seperti Step di atas tadi dan Pastekan kode berikut.
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />
</form>
</div>
</div>
Note*
Ganti Semua Your Name dengan Name Feedburner anda.
Save Widget.
Selesai.
Oke sekian tutorial kali ini tentang 2 Style Subscribe Widget Yang Bagus Untuk Blogger semoga membuat blog anda semakin unik dan enak untuk di kunjungi, Happy Blogging.!
Tidak ada komentar:
Write komentar