Cara membuat widget Langganan Artikel terbaru/subscribe
Cara membuat widget Langganan Artikel terbaru/subscribe. Mungkin sobat blogger sudah banyak melihat kotak langganan artikel terbaru atau kotak subscribe, pada kesempatan kali ini saya ingin membagikan Cara membuat widget Langganan Artikel terbaru/subscribe + social network Button yang tentunya agak sedikit berbeda, kerena pada kotak langganan artikel ini ada sedikit penambahan, yaitu social network button. Berikut ini contoh jadi nya:
bagi sobat-sobat yang mungkin berminat untuk mempercantik tampilan blognya dengan widget ini, berikut cara-caranya:
- Log in ke blog / dashbor sobat.
- Pilih Rancangan > Add Gadged > Pilih HTML/Javascript lalu pastekan Script di bawah ini pada kolom HTML/JavaSscript yang tersedia:
<style type="text/css">
.mdbar{width:300px;float:left;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkFZWdmhOtQ7GqKPv1sGxTRuTfoYIHirCvjd-JdO8AvE844D9DuodIenGXNE-PCvzEXd3MxyqgWrFRT03fKB04QnCx51KeW1pENDqNz3PUow1Zr0Jnxo0av3w_PZy3VJKEsEPtd51F0tHw/s1600/%5Bwww.gj37765.blogspot.com%5Dsidebartop.gif) top no-repeat;margin:0 0 10px;padding:10px;border:1px solid #DDD;}.mdbar .md-credit{}.mdbar .md-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}.mdbar h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh74I68vqzkDX6k48yCk_anfJTU6T_JPivDD9eY8T3MLIWIpxReprk9IwSohqKGay00jMmGNKzb7b9_MMqYSEROxeT_F9eASO-Pst-i0ZqPigTG2xVOjMn701OHinNP2zgQ8PHNx_CR3hYF/s1600/%255Bwww.gj37765.blogspot.com%255DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}.mdbar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}.mdbar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.mdbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.mdbar .subicons a{text-decoration:none;color:#333333;}.mdbar .subicons a:hover{text-decoration:underline;color:#333333;}.mdbar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4prTqUfc5JFoazLpO8HKv69u59Un2edvVTh6QbW-gTmHniVVwQFihKrWwvZhDpXxc3JJKqzT9bGjQTwEn9dJa5okO6OdcURQi7saWPbxBaNqkq5Cf_8SBw6kl28x9jRpI4aPKCqWZzorr/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4prTqUfc5JFoazLpO8HKv69u59Un2edvVTh6QbW-gTmHniVVwQFihKrWwvZhDpXxc3JJKqzT9bGjQTwEn9dJa5okO6OdcURQi7saWPbxBaNqkq5Cf_8SBw6kl28x9jRpI4aPKCqWZzorr/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4prTqUfc5JFoazLpO8HKv69u59Un2edvVTh6QbW-gTmHniVVwQFihKrWwvZhDpXxc3JJKqzT9bGjQTwEn9dJa5okO6OdcURQi7saWPbxBaNqkq5Cf_8SBw6kl28x9jRpI4aPKCqWZzorr/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4prTqUfc5JFoazLpO8HKv69u59Un2edvVTh6QbW-gTmHniVVwQFihKrWwvZhDpXxc3JJKqzT9bGjQTwEn9dJa5okO6OdcURQi7saWPbxBaNqkq5Cf_8SBw6kl28x9jRpI4aPKCqWZzorr/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.mdbar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.mdbar .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.mdbar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.mdbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.mdbar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}
</style><br />
<div class="mdbar">
<h2 class="title">
Subscribe Now!</h2>
<div class="count">
<span class="bigcount"><a href="http://feeds.feedburner.com/musikcintainspirasi" rel="nofollow"><img alt="" height="26" src="http://feeds.feedburner.com/%7Efc/musikcintainspirasi?bg=F2F2F2&fg=666&anim=1" style="border: 0;" width="88" /></a> </span>Get the latest articles... </div>
<div class="subicons">
<div class="rssicon">
<a href="http://feeds.feedburner.com/musikcintainspirasi" rel="nofollow" target="_blank"> RSS</a></div>
<div class="googleicon">
<a href="https://plus.google.com/u/0/103925035370498736725" rel="author" target="_blank"> G+</a></div>
<div class="fbicon">
<a href="https://www.facebook.com/kumpulanchordgitar" rel="nofollow" target="_blank">FB</a></div>
<div class="twittericon">
<a href="https://www.twitter.com/yoshiwafa" rel="nofollow" target="_blank">Twitter</a></div>
</div>
<div class="emailsub">
<div class="emailicon">
<div style="color: #3a3a3a; font-family: Helvetica, Arial; font-size: 13px; font-weight: normal; margin: 0; padding: 0; text-align: justify; width: 245px;">
Join the team and get updates by Submitting your email address:.</div>
</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=musikcintainspirasi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailupdatesinput" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Ketik email anda disini...';}" onfocus="if (this.value == 'Ketik email anda disini...') {this.value = '';}" type="text" value="Ketik email anda disini..." /><input name="uri" type="hidden" value="musikcintainspirasi" /><input class="joinemailupdates" type="submit" value="Submit" /></form>
</div>
</div>
</div>
Catatan :
- Silahkan sobat ganti tulisan musikcintainspirasi dengan Akun FeedBurner Sobat masing masing, ada banya tulisan musikcintainspirasi disana,pastikan semuanya sudah sobat ganti.
- Silahkan sobat ganti tulisan 103925035370498736725 dengan akun Google Plus sobat.
- Ganti tulisan kumpulanchordgitar dengan akun Fb sobat.
- Ganti tulisan yoshiwafa dengan akun Twitter sobat. Dan yang terakhir silahkan sobat upload gambarnya ke hosting sobat sendiri.
Itulah langkah-langkah ataupun cara memasang Widget Langganan Artikel Terbaru/Subscribe. Semoga widget langganan artikel ini bermanfaat dan dapat mempercantik tampilan blog sobat tentunya.
sumber 1 iboeinfo
sumber 2 yoshiwafa
Author: - 00:46
No comments