Cara Memodifikasi Widget Email Subcribe
Feedburner Dan Social Share plus tombol share berputar di blog dan yang pasti
Responsive, Widget ini di desain profesional, dan widget ini juga penting bagi
pengunjung agar mereka lebih mudah mendapatkan informasi terupdate dari
postingan Anda terbaru, dan para pengunjung blog mau untuk berlangganan dan
share artikel blog anda tentunya. Dan penambahan tombol share perputar hanya
sebuah aksesoris agar bisa menarik perhatian mata pengunjung. Untuk melakukan
hal ini tidaklah sulit karena sudah saya sediakan pada postingan ini dengan
modifikasi sehingga tampilan kotak feedburner menjadi lebih menarik dan
dilengkapi dengan tombol share yang bisa berputar. Sehingga pengunjung bisa
menikmati blog anda yang rapi dan teratur.
Cara Membuat Widget Feedburner + Social Share Responsive Blogger
1. Login ke AKUN Blogger >> Dashboard >> Templete >> Edit HTML
2. Cari kode <head>
kemudian letakkan kode di bawah ini dibawah kode <head>
Letakkan kode ini dibawah kode <head> - BLOG
<link
href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css'
rel='stylesheet'/>
3. Kemudian SAVE Templete Anda…. Selanjutnya
!
4. Masih pada menu Dashboard >> Tata Letak >> Add
Gadget >> HTML java script
Catatan : Widget di atas dirancang untuk diletakkan
pada posisi sidebar dengan ukuran lebar 300px
5.Pada kotak HTML java script , letakkan kode script
dibawah ini ke dalamnya
HTML - BLOG
<style>
/* ----------------------------------------------------
Widget Berlangganan Via Email Responsive
Di Desain oleh : http://bloggingpasuruan.blogspot.co.id
Dilarang Menghapus hak cipta Design ( credit script )
-----------------------------------------------------*/
#bloggingpasuruan-Subox17 {
padding: 0;
padding-bottom:
5px;
font-family:
inherit;
display: block;
margin: 0;
width: 100%;
border-radius:
1px;
border: 0;
background:
#363636;
}
#bloggingpasuruan-Subox17 .main_tagline {
padding: 0px 0px;
line-height:
2.5em;
font-size: 26px;
margin: 0;
height: 95px
!important;
overflow: hidden;
font-weight:
normal;
color: #FFF;
text-align:
center;
border: 0;
background-color:
#990099;
}
#bloggingpasuruan-Subox17 .email_icon {
display: table;
margin: -35px
auto 0px;
font-size: 25px;
padding: 12px;
height: 25px;
width: 25px;
background-color:
#363636;
color: #FFF;
border-radius:
50px;
border: 10px
solid #FFFFFF;
line-height: 0;
}
#bloggingpasuruan-Subox17 p {
font-size: 15px;
color: #F9F9F9;
text-shadow: 0px
-1px 0px #000;
line-height:
27px;
padding: 5px 10px
5px;
text-align:
center;
width: 80%;
margin: 5px auto
20px;
border-bottom:
2px solid #6A6A6A;
border-radius:
20px;
}
#bloggingpasuruan-Subox17 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#bloggingpasuruan-Subox17 .rssform input {
padding: 8px;
margin: 20px auto
15px;
font-size: 13px;
color: #000;
text-align:
center;
display: block;
font-family:
inherit;
font-weight:
normal;
width: 90%;
height: 38px;
text-transform:
uppercase;
outline: none
!important;
border: 1px solid
#FFFFFF;
border-radius:
1px;
background-color:
#FCFCFC;
box-sizing:
border-box !important;
}
#bloggingpasuruan-Subox17 .rssform .button:hover {
background:
#000000;
}
#bloggingpasuruan-Subox17 .rssform .button {
background:
#990099;
color: white!important;
border: 1px solid
#FFFFFF;
margin-top: 15px;
outline: none
!important;
transition: all
.3s ease-in-out;
padding: 5px 2px
!important;
float: none;
text-transform:
uppercase;
font-size: 18px;
font-weight:
normal;
cursor: pointer;
}
#bloggingpasuruan-Subox17 .bottom_lock_policy {
background:
url(#) no-repeat 3% -2px;
color: #959595;
text-align:
center;
font-size: 10px;
margin: 0;
padding: 3px;
line-height:
25px;
}
#bloggingpasuruan-Subox17 .bottom_lock_policy a {
color: #959595;
text-decoration:
none !Important;
}
#social a:hover {background-color:
transparent;opacity:0.7;}
#social img { -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
#social img:hover { -moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform:
rotate(360deg); transform: rotate(360deg); }
#bloggingpasuruan-Subox17 form {
margin-bottom:
10px !important;
}
</style>
<div id="bloggingpasuruan-Subox17">
<div
class="main_tagline">BLOGGINGPASURUAN</div><div
class="email_icon"><i class="fa
fa-envelope"></i></div>
<p>Dapatkan Update Artikel langsung ke Inbox Email Anda,
GRATIS..!</p>
<div class="rssform">
<form action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nama-IDfeedburner-anda',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email"
placeholder="Masukkan alamat Email Anda..." />
<input type="hidden" value="nama-IDfeedburner-anda"
name="uri" />
<input type="hidden" name="loc"
value="en_US" />
<input value="Berlangganan" class="button"
type="submit" />
</form>
</div>
<div
class="bottom_lock_policy">We
Respect Your Privacy | <a
href="http://bloggingpasuruan.blogspot.co.id/2015/10/cara-membuat-widget-feedburner-social.html"
target="_blank">Dapatkan Widget
ini</a> </div>
<br />
<center>
<div id="social">
<!--Start Rss Icon--> <a title="Grab Our
Rss Feed" href="http://feeds.feedburner.com/ganti namaIDfeedburner_anda "
target="_blank"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2QhCYcik-xjfVxlL-hU_OoMyL_B5vFvu0iGoOfE4iIH43xaqew9-dk-tdRcWjmohjPgbx9CerNnQ8xUfM1RxNNWLBDmUSd6NbFu7FLtugP4zbLxGk2wo5pqjE9Zd6UwK-Op0zjNggcIA/s1600/RSS-48x48.png"
style="margin-right:1px;" alt="Icon"/></a>
<!--End Rss Icon-->
<!--Start Email Rss Icon--> <a
rel="nofollow" title="Get Free Updates Via Email"
href="http://feeds.feedburner.com/ ganti namaIDfeedburner_anda "
target="_blank"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8AZE-9lYrs5L_s34Degy2Ul2cF-w_KT6S7Vt4QpptBZfv66MwQIkMJhNFTLQ17u3iy68vSyfY4nVAalMn9JJpkvGyGWAjrMoNXGL0K4n-pUSs7gHFH5PoKpHOMQIZBk-NArnN0YwBSVse/s1600/RSS-EMAIL-48x48.png"
style="margin-right:1px;" alt="Icon"/></a> <!--End
Email Rss Icon-->
<!--Start Facebook Icon--> <a
rel="nofollow" title="Like Our Facebook Page"
href="https://www.facebook.com/bloggingpasuruan"
target="_blank"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqMHKKXzWwW9WEV4mV3NEZDrTMS2e-sAFTE02ZhlOxKuf4gua8nrpon9nFnTIZtfLQRXXHk7Jh-96E_vtqs3WdIa20fi-aTyrxnawHCKhw6E9mnfLQbg2PK72lM8wmp10tObTZh5cSukbc/s1600/FACEBOOK-48x48.png"
style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start
Twitter Icon--> <a
rel="nofollow" title="Follow Our Updates On Twitter"
href="http://twitter.com/usmkurniawan"
target="_blank"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioPMMmEngkFeId9_6hv3CEo-gppb_L3Vn1yR6KzQSv98GyHJQBmTTDHvMRwnMEMLxf6Ntfv6x9XxH0JLuXEmcKXtQZ5M-QkPOzPUV0ecUEXdDZplgfDxIEIsq5gaMkgs_d-rWdzgw9CXCA/s1600/TWITTER-48x48.png"
style="margin-right:1px;"
alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google+ Icon--> <a title="Follow
Us On Google+" rel="nofollow" href="https://plus.google.com/109346461614405536198"
target="_blank"><img style="margin-right:1px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kjz6fEuAFc1LKxYxu8Sb4JIUEW217kvUUMpKzRZM6nZc4TlhOx2K7rHlpw8kmZK2SL9WHJbfluk4i6Vf3DFeZHgOThsyleYt1hty7pquZlPCe1usAAegFYK6kQuHHV_wILr6QfFONGM0/s1600/GOOGLE-PLUS-48x48.png"/></a>
</div>
</center> </div>
6. Kemudian tekan SAVE, Selesai…. Lihat hasilnya !!!
Sobat harus lebih dulu mendapatkan ID Feedburner sebelum
memasang Widget di atas. Jika belum mendaftarkan Blog ke RSS Feedburner
maka Widget diatas tidak akan bekerja dan hanya akan muncul tampilan
cantik widget-nya saja namun pengunjung tidak bisa
menggunakan/berlangganan artikel Anda Silahkan mendaftarkan Blog Anda ke
RSS Feedburner sekarang juga...
Tidak ada komentar:
Posting Komentar