Cara Membuat Subscribe Form

Subscribe form merupakan elemen pendukung blog untuk memudahkan pengunjung blog agar bisa mendapatkan update blog melalui notifikasi email. Subscribe form ini sekaligus dilengkapi dengan related post (postingan artikel blog yang berkaitan) yang tersusun rapih di bawah postingan artikel. Elemen subscribe form sering digunakan pada template blog professional. Oke sob,... untuk contoh seperti yang terlihat pada contoh dibawah ini... Buat yang berminat langsung aja ke TKP...

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".


• Cari kode </Head> kemudian letakan kode berikut ini tepat di atas kode </Head>.
  
  <style> #related{background:#F0F2F5; border:1px solid #aaa;margin:0 0 5px;padding:10px} ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0} #related .related-posts{font-weight:400;width:50%;float:right} #related .related-posts p{font:bold 14px Arial;margin:0} ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px} *html ul.rp#related-posts li{margin:0 13px} ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #aaa;display:block;height:72px;position:relative;width:72px;color:#fff;text-decoration:none;text-shadow:0 1px 0 #000;font:11px Arial} ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px} ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7} ul#related-posts li img{bottom:0;padding:0!important} ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)} #related .subscribe{width:43%;float:left;color:#333;} #related .subscribe p.intro{font-weight:400} #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRI1ebXrOnYZSVY1if_qk4gTyNx-DzguR2_oy0Ctt0Mbf9clQlxUDenvJ7yW0juWR3E1fZfkVfiMIXCSgTC5ETCMVeszmQkpqinZ7138QnDTLZFNMEIuMv6ajioaGCqP0zcEgz4N9-9k/s1600/feed+icon.gif) 0 50% no-repeat;vertical-align:middle} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block} .post-thumbnail{width:70px;height:70px;float:left;margin-right:10px} .post-snippet:before{content:attr(data-snippet);} </style>


• Cari kode <data:post.body/> kemudian letakan kode berikut ini tepat di bawah kode <data:post.body/>. Apabila ada 2 kode <data:post.body/> maka pilih kode <data:post.body/> yang terakhir.
  <b:if cond='data:blog.pageType == "item"'> <div style='border-top:3px solid #ccc;border-bottom:1px solid #ddd;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'> <div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'> <b style='color:white;'>Share :</b> </div> <div class='addthis_native_toolbox'/> <script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53df5bb42192526e' type='text/javascript'/> </div> <div class='clearfix' id='related'> <div class='related-posts'> <p> Related Articles</p> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhIjsgioCBCNnToTE7VPWIWAlynXgOL1vcKDrBbS5ljcSVIW2HFKt9LfGwJ7RIqskB4pxB51fYjE8FqGyxrtplEK-HuOdqjHbQ6hZIS1cqhc9aZpD6EJIJOGXsZSrx6OyRQ6eZMRcHauo/s1600/no+image.jpg"; var maxresults=6; </script> <script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div class='subscribe'> <p class='intro'> If you enjoyed this article just <a href='http://feeds.feedburner.com/monozcore' target='_blank' title='feedburner'> <b>click here</b></a>, or subscribe to receive more great content just like it.</p> <p class='feed'> <a href='http://monozcore.blogspot.com/feeds/posts/default' target='_blank'>Subscribe via RSS Feed</a></p> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=monozcore', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='monozcore'/> <input name='loc' type='hidden' value='en_US'/> <input id='botsub' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onclick='this.value = ""' onfocus='if (this.value == "Enter your email") {this.value = "";}' type='text' value='Enter your email....'/> <input id='botsubbutton' type='submit' value='Submit'/><br/> <small>Your information will not be shared. Ever.</small><br/> <a href='http://feeds.feedburner.com/monozcore'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/monozcore?bg=0F61CB&fg=222222&anim=1' style='border:0' width='88'/></a> </form> </div> </div> </b:if>
  Catatan :
  
  • Ganti nama kode monozcore dengan nama blog sobat atau nama akun blog.
  • Kode style dapat diatur sesuai dengan keinginan sobat.
  • Elemen share menggunakan addthis.


• Klik "Save" dan lihat hasilnya...

Oke sobat monozcore jangan lupa kritik dan sarannya yaa biar postingan berikutnya semakin unik dan menarik.. Buat yang masih bingung dengan pemasangan widget ini.. monggo ditanyakan lewat kotak komentar, email, facebook ataupun twitter monozcore... happy blogging...

.: Semoga Bermanfaat :.