ব্লগস্পটের নতুন ফিচার Featured Post Widget - হাইলাইট করুন জনপ্রিয় একটি পোষ্ট।

গতকাল (১০ ডিসেম্বর ২০১৫ ) ব্লগার নতুন একটি ফিচার যোগ করে ব্যবহারকারীদের জন্য। তাদের নতুন এই ফিচারটির নাম হলঃ Featured Posts Widget। আশা করিছি বুঝে গেছেন যে এই এইটার কাজ কি। হে, আপনি এই উইডগেট এর মাধ্যমে যে কোন একটি পোষ্ট হাইলাইট করতে পারবেন।

আরেকটু সহজ করা বলা যাক। আপনি বিভিন্ন বাংলা ব্লগে দেখবেন যে, যেকোন একটি গুরুত্বপূর্ন্য পোষ্ট নির্বাচিত পোষ্ট আকারে হাইলাইট করে রাখা হয়েছে। এখন আপনি ব্লগারে যেকোন একটি পোষ্ট হাইলাইট করে রাখতে পারবেন। এতে আপনি সহজেই ভিজিটরদের দৃষ্টি আকর্ষন করাতে পারবেন।

এখন হয়ত ভাবছেন যে এই উইডগেট টি কোথায় বসানো যাবে? আপনি আপনার ব্লগের Sidebar অথবা Footer অংশে এই উইডগেটটি বসাতে পারবেন। Blogger Featured Post widget টি ব্যবহার করে আপনি আপনার ইচ্ছা মত শিরোনাম দিতে পারবেন, ইচ্ছা করলে ছবি সরাতে পারবেন। যেকোন লেভেল থেকে যেকোন একটি পোষ্ট নির্বাচিত পোষ্ট হিসেবে হাইলাইট করতে পারবেন। এক কথায় প্রত্যেক ব্লগের জন্য পার্ফেক্ট একটি উইডগেট। তাহলে চলুন এখন দেখা যাক, কিভাবে এটা  আপনার ব্লগে যোগ করবেনঃ

প্রথমে Blogger Dashboard > Layout > Add a gadget এ ক্লিক করুন। তার নিচের স্কীনশট এর মত Featured Post এ ক্লিক করুন।

এখন নিচের স্কীনশটের মত করে আপনি যেকোন একটি পোষ্ট সিলেক্ট করে দিয়ে আপনার মত করে কাস্টমাইজ করে নিন।

আশা করি বুঝতে পারছেন বিষয়টা। না বুঝলে নাই। কমেন্ট করবেন বুঝাই দিবো নে :P আর ভালো লাগলে অবশ্যই শেয়ার করবেন। ধন্যবাদ...

ব্লগস্পট সাইটে যোগ করে নিন - Simple Digital Clock

Simple Digital Clock For Blogger/Website - আজকে আমি আপনাদের দেখাবো কিভাবে আপনি আপনার ব্লগার সাইটে একটি সুন্দর ডিজিটাল ঘড়ি যোগ করতে পারবেন। আপনি ইচ্ছা করলে এটি আপনার ব্লগের যেকোন উইডগেট (Widget) অথবা টেমপ্লেট এর ভিতরেও স্থাপন করতে পারবেন।

প্রথমে আপনি আপনার ব্লগার ড্যাশবোর্ডে ঢুকে Template > Edit HTML এ ক্লিক করুন। তারপর "Ctrl+F" চেপে </style> ট্যাগটি খুজে বের করুন এবং নিচের CSS কোডটুকু কপি করে </style> ট্যাগের আগে পেষ্ট করুন।

#realtime { font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; font-weight: 100; display: block; text-align: center; font-size: 12vw; padding: 4rem 0; } #realtime span { display: inline-block; font-family: Avenir Next, Nunito, sans-serif; font-weight: 100; font-size: 8vw; position: relative; top: -2vw; } @media all and (max-width: 600px) { #realtime { font-size: 4rem; padding: 2rem 0; }; } @media all and (max-width: 350px) { #realtime { font-size: 3rem; padding: 2rem 0; }; } 

এখন টেমপ্লেটি সেভ করুন এবং Layout থেকে নতুন একটি HTML/Javascript Widget এড করুন এবং নিচের কোডটুকু কপি করে পেষ্ট করুন এবং সেভ করুন।

 <time id="realtime"></time> <script type='text/javascript'> var currentTime = document.getElementById("realtime"); function zeropadder(n) { return (parseInt(n,10) < 10 ? '0' : '')+n; } function updateTime(){ var timeNow= new Date(), hh = timeNow.getHours(), mm = timeNow.getMinutes(), ss = timeNow.getSeconds(), formatAMPM = (hh >= 12?'PM':'AM'); hh = hh % 12 || 12; currentTime.innerHTML = hh + ":" + zeropadder(mm) + ":" + zeropadder(ss) + " " + formatAMPM; setTimeout(updateTime,1000); } updateTime(); </script>

ব্যস, কাজ শেষ। এবার উইডগেটটি সেভ করুন এবং পেজ রিফ্রেশ করে দেখুন নতুন একটি ডিজিটাল ঘড়ি যোগ হয়ে গেছে।

ব্লগস্পট সাইটে অসাধারণ একটি বাংলা সাবস্ক্রাইব বক্স (Subscribe box) যোগ করে নিন...

ব্লগস্পট মাষ্টাররা কেমন আছেন? আশা করি ভালো আছেন। আজকে আপনার জন্য নিয়ে আসলাম আরেকটি অতি প্রয়োজনীয় ব্লগার উইডগেট। একটি ব্লগে সাবস্ক্রাইব বক্স কেন ব্যবহার করা হয় তা আমরা সকলেই জানি। একটি ব্লগে সাবস্ক্রাইব বক্সের মাধ্যমে টার্গেটেড এবং নিয়মিত ভিজিটর  ধরে রাখা সম্ভব যদি আপনার ব্লগের আর্টিকেল গুলো ইউনিক হয়। যাই হউক সেদিকে আর যাবো না। সাবস্ক্রাইব বক্স কি, কেন ব্যবহার করে তা আমরা সব ব্লগ মাষ্টাররাই জানি। তা নিয়ে বিস্তারি লিখার কোন প্রয়োজন মনে করছি না। তাহলে চলুন এবার কাজ শুরু করা যাক...

    

 ১/ প্রথমে আপনার Blogger Dashboard > Template > Edit HTML এ ক্লিক করুন। ২/ এবার </style> ট্যাগটি খুজে বের করুন। তারপর নিচের কোডটুকু কপি করে </style> এর উপরে পেষ্ট করুন।

/* CSS Subscribe Box By MS Design */ 
#HTML98 h2:before {font-family:FontAwesome,SolaimanLipi,Kalpurush,Siyam Rupali;content:'\f003'!important;margin-right:10px; font-size:20px;} #subscribe-box {width:300;height:250;background-color:#48cb7a;} #subscribe-box p {font-family:'Open Sans',SolaimanLipi,Kalpurush,Siyam Rupali;font-size:13px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;} #subscribe-box .emailfield {padding:0px 20px 10px;} #subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:'Open Sans',SolaimanLipi,Kalpurush,Siyam Rupali;width:91%;border:0;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;} #subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;} #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}   

 ৩/ এবার টেমপ্লেটটি সেভ করুন। ৪/ এখন Layout > Add gadget > HTML/Javascript এ ক্লিক করুন। এবং নিচের কোড টুকু এই উইডগেট এ পেষ্ট করুন।

 <div id='subscribe-box'> <center><p>আমাদের নতুন নতুন পোষ্ট গুলো ই-মেইল এর মাধ্যমে পেতে রেজিষ্ট্রেশন করুন।</p></center> <div class='emailfield'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=msdesign92' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=msdesign92, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;আপনার নাম&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='আপনার নাম'/> <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='আপনার ই-মেইল'/> <input name='uri' type='hidden' value='naiyori'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='রেজিষ্ট্রেশন করুন!'/> </form> </div></div>

নোটঃ "msdesign92" এটি আপনার Feedburnner username দিয়ে পরিবর্তন করুন।

৫/ এখন এটি সেভ করুন। ব্যস কাজ শেষ। এখন পেজ রিফ্রেশ দিয়ে দেখুন একটি অসাধারণ সাবস্ক্রাইব বক্স যোগ হয়ে গেছে। কোন সমস্যা হলে অবশ্যই টিউনমেন্ট ঈ জানাবেন।

CSS Pop up Facebook Like Box ব্লগস্পট সাইটের জন্য। (ব্লগস্পট মাষ্টাররা মিস করবেন না)

আসসালামু আলাইকুম বন্ধুরা। আশা করি সবাই ভালো আছেন। ব্যস্ততার কারনে অনেকদিন হল কোন টিউন করি না। অনেক ব্যস্ততার ভিড়ে ও আজকে আপনার জন্য একটি টিউন নিয়ে আসলাম। এই টিউনটির মাধ্যমে আপনি আপনার ব্লগে অসাধারণ একটি Pop up Facebook Like Box যোগ করতে পারবেন। তার আগে ডেমোটি দেখে আসুনঃ

আশা করি বুঝতে পারছেন আজকে আপনাদের জন্য কি নিয়ে আসছি। যাইহোক সবাই আমার জন্য দোয়া করবেন যেন সব ব্যস্ততা কাটিয়ে আপনাদের মাধ্যে আবার ফিরে আসতে পারি। এবার মূল কাজে চলে যাইঃ 

আপনি যদি আপনার ফেইসবুক পেইজের লাইক বাড়াতে চান তাহলে অবশ্যই আপনার পেইজকে প্রোমোট করতে হবে। আপনার টার্গেটেড ভিজিটরদের সামনে নিয়ে আসতে হবে আপনার পেইজ। কিন্তু কিভাবে নিয়ে আসবেন?

• DEMO

সহজ!! পপ-আপ এর মাধ্যমে নিয়ে আসতে পারেন। তবে অনেকের কাছে পপ-আপ বিরক্তির কারণ হতে পারে। কিন্তু সেটা কখন? যখন আপনি পপ-আপে কোন বিজ্ঞাপন দেখাবেন। পপ-আপ ক্লোজ করতে গেলে যখন আরও কয়েকটি পপ-আপ উইন্ডো ওপেন হয় তখন একজন ভিজিটরের কাছে তা বিরক্তির কারণ হতে পারে। তবে আপনি যদি সুন্দর একটি পপ-আপের মাধ্যমে আপনার ফেইসবুক পেইজটিকে তুলে ধরতে পারেন তাহলে নিঃসন্দেহে আপনার ব্লগের ইউজাররা লাইক দিবে। তাহলে চলুন এবার কাজ শুরু করা যাকঃ

Go to your blogger dashboard Layout > Add a gadget > HTML/Javascript > Copy and Past below code and save widget.

<style scoped='' type='text/css'> 

#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}

#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}

#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}

#fb-boxview {background:#fff;border:8px solid #FD4343;width:340px;height:230px;position:absolute;top:33%;left:37%;}

#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}

#fb-closebox:before {content:"X";padding:5px 8px;background:#FD4343;color:#fff;font-weight:normal;font-size:12px;font-family:cursive;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

var days = options.expires, t = options.expires = new Date();
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {

options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',

return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){

<div id='fb-closebox'>
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}

});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
</div>

style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/msdesign.rtml&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
</div>
</div>

নোটঃ facebook.com/msdesign.rtml এটি আপনার পেইজ URL দিয়ে পরিবর্তন করুন।

আপনার কাজ শেষ। যদি কোন সমস্যা হয় তাহলে টিউনমেন্ট এ জানাবেন।

ব্লগস্পট সাইটে যুক্ত করে নিন অসাধারণ একটি Animated Recent Post Widget

আসসালামু আলাইকুম ব্লগস্পট মাষ্টাররা। আশা করি সবাই ভালো আছেন। আজকে ব্লগস্পট মাষ্টারদের জন্য নিয়ে আসলাম অসাধারণ একটি Recent post widget তাও আবার Animated. ব্লগস্পটের বিষয়ে যাবতীয়া আপডেটের জন্য যারা  আমার ব্লগে নিয়মত  ভিজিট করেন তারা হয়ত এই পোষ্টটি এতক্ষনে দেখে নিয়েছেন। যদিও আমার ব্লগে ইংরেজীতে পোষ্ট করা। যাই হউক। এই পোষ্টটি করছি কয়েকজনের অনুরূদে। যারা আমাকে মেইল করে, কমেন্ট করে এবং ফেইসবুক ইনবক্স করেছেন তাদের জন্য আজকে এই পোষ্ট নিয়ে হাজির হলাম। আমি মনে করি প্রতিটি ব্লগস্পট সাইটেই সাম্প্রতিক প্রকাশনার একটি উইডগেট থাকা দরকার। সেটার গুরুত্ব এবং কার্যকারীতাও অনেক। তাই আজকে আপনাদের ধাপে ধাপে দেখাবো কিভাবে আপনি Recent post widget যোগ করবেন। তার আগে ডেমো দেখে আসেন।

ডেমো টা দেখলেন! আশা করি ভালো লাগছে। তাহলে চলুন এবার কাজ শুরু করা যাক। আর হে, কাজ শুরু করার আগে অবশ্যই আপনার টেমপ্লেট এর ব্যাক-আপ নিতে ভুলবেন না। ধাপ১ঃ প্রথম আপনার ব্লগস্পট সাইটের ড্যাশবোর্ডে যান। তারপর "Template" এ ক্লিক করে "Edit Template" এ ক্লিক করুন। ধাপ২ঃ এবার "Ctrl+F" চেপে  ]]></b:skin> এই কোডটি খুজে বের করুন এবং নিচের CSS কোডটুকু ]]></b:skin> এর উপরে পেষ্ট করুন। 

#post-gallery{width:100%;margin:0 auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px}#post-gallery .rp-item{float:left;display:inline;position:relative;margin:2px;padding:0;background:url(http://i.imgur.com/Xgup3Hw.gif) no-repeat 50% 50%;width:79px;height:79px}#post-gallery .rp-item img{width:69px;height:69px;border:2px solid silver;border-radius:50%;margin:0!important;padding:0!important;background:transparent!important;display:none;-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;transition-duration:.8s;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;overflow:hidden}#post-gallery .rp-item img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg)}#post-gallery .rp-item .rp-child{position:relative;top:10%!important;left:10%!important;z-index:1000;width:200px;background-color:#fff;border:2px solid #f56954;-webkit-box-shadow:5px 5px 10px rgba(0,0,0,0.7);-moz-box-shadow:5px 5px 10px rgba(0,0,0,0.7);box-shadow:5px 5px 10px rgba(0,0,0,0.7);padding:10px 15px;overflow:initial;word-wrap:break-word;display:none;opacity:.9}#post-gallery .rp-item .rp-child h4{font-size:12px;margin:0 0 5px;color:#1BA1E2}#post-gallery .rp-item:hover .hidden{display:block}  

ধাপ৩ঃ এবার টেমপ্লেটটি Save করুন।
ধাপ৪ঃ টেমপ্লেটটি সেভ করার পর Layout এ ক্লিক করে নতুন একটি "HTML/Javascript" উইডগেট ওপেন করুন এবং নিচের কোডটুকু এই উইডগেট এ পেষ্ট করুন এবং উইডগেটটি Save করুন। আর হে, এই Widget এই কিন্তু Recent Posts দেখাবে। অতএব, আপনার যেখানে Recent Posts দেখানো দরকার সেখানেই নতুন উইডগেট তৈরী করুন।

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <script type="text/javascript"> var rpTitle = "Recent Posts", // Widget Title numposts = 14, // Number of Posts to show numchar = 200, // Number of Characters to be displayed rcFadeSpeed = 600, // Speed pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", // If No Image blogURL = "http://your-blog.blogspot.com/"; // Your Blog URL </script> <script src="https://ms-design.googlecode.com/svn/animated-recent-posts.js" type="text/javascript"></script> 

নোটঃ http://your-blog.blogspot.com/ এই লিখাটি আপনার ব্লগের URL দিয়ে পরিবর্তন করুন।

ব্যস, কাজ শেষ। উপভোগ করতে থাকুন Awesome Animated Recent Post Widget. আর কোন সমস্যা হলে টিউনমেন্ট এ জানাবেন।