Dalam tutorial ini saya akan menjelaskan bagaimana menambahkan Widget Rss Subscription Dark Style untuk Blogger. Dengan menggunakan widget ini Anda dapat menghubungkan sosial media Anda profil Facebook, Twitter, Google+, Youtube dan Feed Subscribe. Ini akan membantu untuk mendapatkan update terbaru dengan email. Anda dapat memeriksa dari link demo dibawah. Mari kita mulai memasang widget ini.
1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget.
4. Pilih HTML/Javascript.
5. Copy Kode dibawah ini dan Pastekan di kolom HTML/Javascript.
Read more ...
Cara Menambahkan Widget Rss Subscription Dark Style:
1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget.
4. Pilih HTML/Javascript.
5. Copy Kode dibawah ini dan Pastekan di kolom HTML/Javascript.
<style>
#tblogging-newsletter{ width:290px;background:#2e3639; color:#fff; padding:20px; font-size:14px; margin-bottom:20px; -moz-box-shadow: 2px 2px 2px #000000;-webkit-box-shadow: 5px 5px 5px #000000;box-shadow: 5px 5px 5px #000000;border:double 5px #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#tblogging-newsletter .tblogging-title { margin-bottom:10px;margin-top:-10px; }
.tblogging-title{margin-left: 8px;font-size:25px; font-weight:bold; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:1px 8px 2px 8px;text-align:center;border:1px solid #151819;color:#fff;background:#222729;display:inline-block;}
#footer-subscribe-btn {width:116px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
position:relative;left:135px;}
.footer-submit-btn {margin-left:50px;margin-top:-10px;margin-bottom:-50px;border: none;color: #fff;text-transform: uppercase; font-size: 13px;padding: 5px 18px 5px;background: #e93a30;border-radius: 30px;-webkit-border-radius: 30px;
-moz-border-radius: 30px;font-weight: bold;-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition: background .2s linear;transition: background .2s linear;cursor: pointer;
}
.footer-submit-btn:hover { background:#e51111;}
#fastsearch ,#footer-subscribe-email{background:#62686b;color:#fff;font-size:14px;border:none;
box-sizing:border-box;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;outline:none;padding:0px 15px; height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#fastsearch.inactive ,
#footer-subscribe-email.inactive {color:#b5b7b8;}
#footer-subscribe-email {width:100%;}
#sb-nl-members-count { font-size:12px; font-weight:bold;text-align:center;width:150px;margin:0 0 -23px 0 ;display:inline-block;
</style>
<br />
<div id="tblogging-newsletter">
<div class="tblogging-title">
Get Email Updates</div>
<div class="tblogging-nl-text">
<center>
Subscribe to Get Latest Updates Free</center>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TempatBlogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="inactive footer-text-field" id="footer-subscribe-email" name="EMAIL" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Your email address" />
<input name="uri" type="hidden" value="TempatBlogging" />
<input name="loc" type="hidden" value="en_US" />
<br />
<div id="sb-nl-members-count">
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="http://twitter.com/TempatBlogging" target="_blank" title="Follow Me On Twitter">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOgL852vMtV9VBXksJVDQGqVjJQPAFAHMKE18IkNn8DiWUo7KHs-c7CNbvSgFBwii61ue-chY9tsp-Kc6svWDTP0pv5ktKVCaLDSarXtnTgdAVSn0Rt5u4j4avmFGL_uZ35RdBufGX82M/s1600/tempat-blogging-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/TempatBlogging" target="_blank" title="Subscribe Via RSS">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr5-oLmr582R-2G-wG6Qi8NpMX7GShlNQIt5dh_nQsdAuRGLAm48cgcS5k6AoL9ys088ow6d0IC9NkPCKjAUyWIV0vfgXBPecBjE2ByR3Mo_LvDibPIbGnZfLcbIjsH3SCZtdSO_QB91c/s1600/tempat-blogging-rss-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://www.facebook.com/TempatBlogging" target="_blank" title="Find Us On Facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAL3KrA8tM6BokYD7UCEMegU6dDYk8ChHhj3zKNyMEW-rPZoQiTbhHc_jZWzqGWgg2GY9vLunA6JIYkjE0XAe2LKNHyu9tGu3knsAiPHpD_ZTODCeFT-8eNvdbFXSRr5S9hiQIgde_Fd4/s1600/tempat-blogging-facebook-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://plus.google.com/114968564645823238528" target="_blank" title="Add me on Google+">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yCsN3f2JEV7vNCvqya0olRYXjqWo4JNjDyAQOg8apjMiyuVAG3nMbHgfo6L_XwbLys0I7jTNf7rw068moo1lgt7oQtMjsVpvqiZOQ5qOl8LNWGEkqzuy1ntRzGck_jKnYDARGr10SAg/s1600/tempat-blogging-google-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://youtube.com/UserId" target="_blank" title="youtubr subscribe">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAJ0Qtneg3x16PAwIHHGRt8buH3r_i_liXIHO5Mb-6OsqACwevxRwUZxXfkY2uDYOR_0sJPz-WRSmPI39iuUAhEmD8UtpATg4a6kxS4t6o9-duB39pcvmhzlCsr9w2tQqDHd7ptaT69w/s1600/tempat-blogging-youtube-icon.png" style="height: 25px; width: 25px;" /></a>
</td></tr>
</tbody></table>
</div>
<input class="footer-submit-btn" id="footer-subscribe-btn" type="submit" value="Subscribe" />
<div class="clr">
</div>
</form>
</div>
- Ganti TempatBlogging dengan Feedburner ID
- Ganti TempatBlogging dengan nama pengguna Facebook Anda
- Ganti TempatBlogging dengan Twitter Nama
- Ganti 114968564645823238528 dengan ID Google Plus Anda
- Ganti UserId dengan ID Youtube Anda
6. Sekarang Save HTML/Javascript Anda
Sekian dulu tutorial kali ini yang membahas tentang cara membuat Widget Rss Subscription Dark Style untuk Blogger. Semoga artikel ini bermanfaat bagi Anda, jika ada yang perlu di tanyakan silakan bertanya lewat kolom komentar di bawah atau Contact saya. :)
