আপনার ব্লগে যুক্ত করুন সুন্দর একটি “Subscribe Me” বক্স..!

আসসালামু আলাইকুম। আশা করি প্রিয় টেকটিউনস এর সকলেই ভাল আছেন। আজ সুন্দর এক সিন্ধ সকালে অনেক দিন পর আবার টিউন করতে বসলাম। আজ আপনাদের দেখাব কিভাবে আপনার ব্লগে একটি সুন্দর Subscribe Me বক্স যুক্ত করবেন। এই Widget টি যুক্ত করতে নিচের Screen Shot ও দিক নির্দেশনা গুলা অনুগ্রহপুর্বক অনুসরণ করুন।

DEMO

১. প্রথমে আপনার Blogger বা Wrodpress সাইটের এডমিন প্যানেলে লগ ইন করুন।

২.এরপর যে ব্লগটিতে এই Widget টি Add করতে চান তা Select করুন।

৩. এরপর Layout অপশন Select করুন।

৪. এবার Add A Gadget অপশন টি Select করুন।

৫. এবার Html/ Java Script সিলেক্ট করুন।

৬। Name লিখুন “Subcribe Me” এবং Content এর স্থানে নিচে দেয়া কোড টুকু কপি করে পেস্ট করুন। সামান্য Customize এর প্রয়োজন হবে।

৭. নিচে দেওয়া কোডটুকু কপি করে পেস্ট করুন।

<style>.BlueKut_Bar{width: 300px; float: left;}.BlueKut_Bar .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;}

.BlueKut_Bar .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;}

.BlueKut_Bar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}

.BlueKut_Bar .subicons a{text-decoration: none; color:#333333;}

.BlueKut_Bar .subicons a:hover{text-decoration: underline; color:#333333;}

.BlueKut_Bar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://1.bp.blogspot.com/-2CPFDRGYxTI/UD4nl6RxgOI/AAAAAAAACcE/XEG4iMB4Jec/s1600/social_icons.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;}

.BlueKut_Bar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(http://1.bp.blogspot.com/-2CPFDRGYxTI/UD4nl6RxgOI/AAAAAAAACcE/XEG4iMB4Jec/s1600/social_icons.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;}

.BlueKut_Bar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://1.bp.blogspot.com/-2CPFDRGYxTI/UD4nl6RxgOI/AAAAAAAACcE/XEG4iMB4Jec/s1600/social_icons.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;}

.BlueKut_Bar .subicons .twittericon{background: url(http://1.bp.blogspot.com/-2CPFDRGYxTI/UD4nl6RxgOI/AAAAAAAACcE/XEG4iMB4Jec/s1600/social_icons.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;}

.BlueKut_Bar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 10px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.BlueKut_Bar .emailsub .emailicon{background: url(http://1.bp.blogspot.com/-U-4ZhBpAgNA/Tg6tvahbz2I/AAAAAAAAEE8/R94nynUlGoM/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }

.BlueKut_Bar .emailsub .emailupdatesform{margin: 10px 0 5px 5px; width: 300px; float: left;}

.BlueKut_Bar .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: 205px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.BlueKut_Bar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

</style>

<img src="http://1.bp.blogspot.com/-qJzbnSa3ecw/UD4lQ710mlI/AAAAAAAACb4/tjZJnqpryoo/s1600/SUBSCRIBE+ME.png" alt="Pulpit rock" />

<!--[if IE 9]>

<style>

.BlueKut_Bar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

.BlueKut_Bar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 3px 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

</style>

<![endif]-->

<div ><div><span ><a rel="nofollow"  href="http://feeds.feedburner.com/FmGuys"><img

style="border:0" alt="FmGuys" src="http://www.blogger.com/favicon-image.g?blogID=6585772725999047236" height="20"/></a> </span>Fm Guys | Online Radio Portal </div>

<div >

<div > <a rel="nofollow" href="http://www.fmguys.com/feeds/posts/default" target="_blank">  RSS</a></div>

<div >  <a href="https://www.facebook.com/FmGuys" target="_blank" rel="nofollow">Like Us</a></div>

<div > <a href="http://twitter.com/KawsharBD" target="_blank" rel="nofollow">Follow Us</a></div></div>

<br  style="clear:both;"/>

<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">

<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/KawsharBD' rel='nofollow'></a>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

</div>

<div>

<div ><p style=" width:270px; color:#3A3A3A; font-size: 12px; font-weight: normal; font-family:  Arial;  padding:0; margin:0;"> Get Updates About Online Entertain, Top Download And News   By Submitting Your Email ID Below.</p></div>

<div >

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerfaqtricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" type="submit" /></form></div></div></div>

<div class='clear'></div>

<span class='widget-item-control'>

<span class='item-control blog-admin'>

<a class='quickedit' href='//www.blogger.com/rearrange?blogID=8193278726666811965&widgetType=HTML&widgetId=HTML10&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("html10"));' target='configHTML10' title='Edit'>

<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>

</a></span></span><small></small>

<a href="http://fmguys.com">Listen Online Radios>></a></small>

Customize(পরিবর্তন সমূহ): কোডে কিছু পরিবর্তন আনতে হবে। লাল চিহ্নিত গুলো।

  • FmGuys এর স্থানে আপনার ব্লগের Rss Feed Username বসাতে হবে।
  • http://www.blogger.com/favicon-image.g?blogID=6585772725999047236 এর স্থানে আপনার ব্লগের ফেভিকন এর Image Url বসাতে হবে।
  • Fm Guys | Online Radio Portal এর স্থানে আপনার ব্লগের Title দিন।
  • http://www.fmguys.com এর স্থানে আপনার ব্লগ Url বসাতে হবে।
  • এর পরে যে Facebook Page এর Url আছে সেখানে আপনার ব্লগের Facebook Page এর Url বসান।
  • এরপর Twitter Url আছে সেখানে আপনার পেজের Twitter Url বসান।
  • Get Updates… এর স্থানে আপনার যা ইচ্ছা অর্থাৎ ব্লগের ছোট্ট Description দিতে পারেন।

এবার Save বাটন চেপে Widget টি Save করুন।

বাংলা রেডিও শুনতে আমার ওয়েবসাইটে আসতে পারেন।

ধন্যবাদ।


Level 0

আমি আহমেদ কাওসার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 15 টি টিউন ও 46 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

এখনও একজন ছাত্রই আছি। মাঝে মাঝে যুক্ত হই টেকটিউন্স আর ব্লগিং এর সাথে।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

ব্লগের Rss Feed Username kotha theke anbo?

@ রেডিও মাষ্টার Goofle Feed Burner থেকে রেজিস্ট্রেশান করে নিন

Level 0

রেডিও মাস্টার ভাই Goolge Feed burner তো ওপেন হয় না। আর Feed burner থেকে কিভাবে আমার ব্লগ এর RSS feed নিবো সেটা একটু বলবেন প্লিজ

Level 2

ধন্যবাদ। সত্যি বলতে, আকর্ষনীয় subscription box খুবই প্রয়োজনীয়। এর মাধ্যমে কিছু রেগুলার পাঠক পাওয়া যায়। আমি গুগল প্লাস, টুইটার, ফেসবুক লাইক বক্স ও ফিডবার্নার এর সমন্বয়ে একটি সুন্দর সাবস্ক্রিপশন বক্স শেয়ার করেছি। subscription box