*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
Blogger Tips and TricksLatest Tips And TricksBlogger Tricks

ব্লগারে যুক্ত করুন feedburner email subscription এবং FeedCount

RSS কিঃ এটি ব্লগে যুক্ত করে নেওয়ার আগে জেনে নেই আসলে এই RSS কি বা কেন/কিভাবে ব্যবহার করতে হয়? RSS (Rich Site Summary) মূলত একটি ফাইল ফরম্যট যা একই সাথে আধুনিক ওয়ার্ল্ড ওয়াইড ওয়েবের (www) এক অতি জনপ্রিয় প্রযুক্তি। এটি এক্সএমএল (XML) নামক এক সাধারণ ডাটা ফরম্যাট-এর অধীনস্থ এমন একটি উপাদান, যা মূলত ওয়েব সিন্ডিকেশন বা ওয়েব নজরদারীর জন্য ব্যবহৃত হয়।

কেন ব্যবহার করা হয় বা এটি ব্যবহারে লাভ কিঃ Rss ব্যবহার করা তাদের জন্য লাভজনক যারা প্রতিনিয়তই বিভিন্ন ওয়েবসাইট পড়েন কিংবা বিভিন্ন ওয়েবসাইটের খবরা খবর রাখেন। এই Rss ব্যবহার করার ফলে এক দিকে যেমন আপনার সময় বাচবে অন্যদিকে এটি ব্যবহারে আপনার ইন্টারনেট এর অনেক ডাটা বেচে যাবে। বর্তমানে প্রায় লোকই কিছু কিছু ওয়েবসাইট নিয়মিত পড়ে থাকেন। ধরুন আপনি প্রতিদিন বাংলা ওয়েবসাইট "প্রথম আলো, কালের কন্ঠ, যুগান্তর, শিক্ষক ডট কম, হয়াহু নিউজ, গুগল নিউজ এবং আমাদের সাইট প্রযুক্তি ডট কম" ইত্যাদি এ ধরনের বিভিন্ন জনপ্রিয় ওয়েবসাইটের লেটেস্ট নিউজগুলি পড়ে থাকেন। এ ক্ষেত্রে আপনাকে প্রতিদিন এ সবগুলি ওয়েবসাইট আলাদা আলাদাভাবে ভিজিট করতে হয়। ফলে আপনার প্রচুর পরিমানে সময় এবং ইন্টারনেট ব্যয় করতে হয়। কিন্তু আপনি যদি এই Rss ব্যবহার করেন তাহলে মাত্র এক ক্লিক করেই সহজেই সবগুলি ওয়েবসাইটের লেটেষ্ট পোষ্টগুলি পেয়ে যাবেন।
RSS
কিভাবে এই Rss ব্যবহার করবোঃ এই Rss ব্যবহার করার জন্য বিভিন্ন Software রয়েছে যেগুলি ব্যবহার করে খুব সহজে আপনি আপনার কাঙ্খিত সাইটগুলির লেটেস্ট নিউজ বা পোষ্ট পেতে পারেন। আমার পক্ষে সবগুলি Software এর আলাদা নিয়ম দেখানো সম্ভব নয়। এই লিংকে অনেক গুলি Rss রিডার রয়েছে, আপনি ইচ্ছে করলে এগুলি দেখে আসতে পারেন। তবে আমি যেটার কথা বলছি সেটি হচ্ছে SharpReader. আপনি এখান থেকে এই ছোট্ট Software টি ডাউনলোড করে ব্যবহার করতে পারেন। ডাউনলোড করে আপনার পিসিতে ইনস্টল দিয়ে এড্রেসবারে Rss ঠিকানাটি লিখে কিবোর্ড এর এন্টার প্রেস করলেই সাইটটির সকল লেটেস্ট পোষ্ট পেয়ে যাবেন। যেমন- আমাদের সাইটের Rss এড্রেস হচ্ছে http://feeds.feedburner.com/prozokti. এ ব্লগটির নিয়মিত আপডেট পাওয়ার জন্য বাম দিকের বাটন হতে Subscribe করে নিতে হবে। এখন থেকে এই সাইটটির সকল পোষ্ট এর হেডিং দেখতে পাবেন এবং হেডিংয়ে ক্লিক করলে বিস্তারিত লেখা শো করবে।

FeedBurner কিঃ FeedBurner হচ্ছে গুগল এর একটি ফিড রিডার সাইট। এ FeedBurner টি বিভিন্ন টপ লেভেরে ওয়েব ডেভেলপাররা ব্যবহার করে থাকেন। কারণ এটি তার ডিজাইনের জন্য বিখ্যাত। তাছাড়া এটিতে Feed Count সহ E-mail Subscribe করার ব্যবস্থা রয়েছে। যার ফলে যে কেউ ইমেইল এ সাব্সক্রাইব করে রাখলে ঐ সাইটের সমস্ত লেটেস্ট পোষ্ট ই-মেইলের মাধ্যমে অটোমেটিক তার মেইল বক্সে চলে যাবে।

কিভাবে ব্লগে যুক্ত করবেনঃ প্রত্যেক ব্লগেরই নিজস্ব ফিড রিডার থাকে, কিন্তু সকল সুবিধা না থাকার কারনে বেশীরভাগ লোকই এটি ব্যবহার করতে চান না।
  • প্রথমে আপনার Gmail ID ব্যবহার করে FeedBurner এ লগইন করুন।
  • তারপর এখানে আপনার ব্লগ এর এড্রেস দিন। নিচের চিত্রে দেখুন -
Blogger-Feedburner
  • এরপর নিচের চিত্রের মত সিলেক্ট করে Next এ ক্লিক করুন।
Blogger-Feedburner
  • এখন নিচের চিত্রে আপনার সাইটের টাইটেল লিখুন এবং Feed Address এ ডিফল্টভাবে একটি Address শো হবে। এটি পছন্দ না হলে আপনার পছন্দমত Address দিয়ে Next এ ক্লিক করুন। তাহলে আপনার Feedburner এড্রেসটি হবে http://feeds.feedburner.com/harunzoki
Blogger-Feedburner
  • এরপর এটি আপনাকে আপনার ফিড Tracking করার অপশন দেবে। এটি নিচের চিত্রের মত সেটআপ করুন।
Blogger-Feedburner
  • এতটুকু করলেই আপনার Feedburner একাউন্ট হয়ে যাবে।
কিভাবে FeedBurner Email Subscription যুক্ত করবেনঃ 
  • Email Subscription যুক্ত করার জন্য নিচের চিত্রটি ফলো করুন।
Blogger-Feedburner
  • এরপর নিচের চিত্রটি দেখুন যেখানে থেকে কোডগুলি নিয়ে আপনার ব্লগে ইমেইল Subscription ফরম ব্যবহার করতে পারবেন।
Blogger-Feedburner
কিভাবে Subscriber Count বাটন যুক্ত করবেনঃ
  • আবার Publicize tab থেকে Feed Count যান।
  • তারপর নিচের চিত্রটি ফলো করুন। সেখানে বিভিন্ন অপশন আছে, সেটি আপনি নিজেই বুঝতে পারবেন।
Blogger-Feedburner
  • একটিভ করার পর এখানে কিছু Html কোড দেখতে পাবেন। সেগুলি কপি করে আপনার ব্লগে কাউন্ট বাটন ব্যবহার করতে পারবেন।
আপনার Blog Feed থেকে Feedburner এ  Redirect করুনঃ ব্লগের যে ডিফল্ট ফিড রিডার থাকে এটিকে এখন Feedburner এ  Redirect করে নিতে হবে। তা না হলে এটি সঠিকভাবে কাজ করবে না।
  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • তারপর  ব্লগার ড্যাশবোর্ড হতে Settings > Other এ যান।
  • এরপর Site Feed হতে এটি Redirect করে নিন। এখানে আপনার Feedburner address টি দেন। নিচের চিত্রে দেখুন -
Blog-Feed-Redirect
  • এখন আপনার ব্লগের ডিফল্ট ফিডটি অটোমেটিক্যালি Feedburner এ  Redirect হয়ে যাবে। That's all.
Read More »

ব্লগারে যুক্ত করুন Animated Demo and Download Buttons

আমি আজ আপনাদের সাথে শেয়ার করবো অত্যান্ত সুন্দর এবং আকর্ষণীয় দুটি Animated Demo and Download Buttons. সাধারণত এ ধরনের বাটন ব্লগ পোষ্টের বিভিন্ন জায়গায় যখন কোন কিছুর ডাউনলোড লিংক কিংবা ডেমো দেখানোর প্রয়োজন হয়, তখনই এ ধরনের বাটন ব্যবহার করা হয়। এ ধরনের আকর্ষণীয় বাটন ব্লগ পোষ্টে ব্যবহার করার ফলে ব্লগ পোষ্টগুলি আরও আকর্ষণীয় হয়ে উঠে। এ বাটনগুলি আমার নিজস্ব তৈরী নয়। বিভিন্ন ব্লগে প্রায় এই ধরনেরই বাটন দেখতে পাবেন। তবে এটা সত্য যে, আমি এটিকে কাষ্টোমাইজ করে অনেকাংশ পরিবর্তন করেছি, যা বাটনগুলিকে আরও আকর্ষণীয় করেছে।
Blogger-Demo-and-Download-Buttons
উপরের চিত্রে বাটনগুলির ডেমো দেখতে পাচ্ছেন যে, বাটনে মাউস ধরার পর Animation এর মাধ্যমে Hover Effect হচ্ছে। বাটনগুলি দেখতে অনেকটা ইমেজ এর মত মনে হলোও এটা সত্য যে, এখানে কোন প্রকার ইমেজ ব্যবহার করা হয়নি। এটি সম্পূর্ণরূপে Css এবং HTML এর মাধ্যমে স্টাইল করা হয়েছে। যার ফলে এটি লোড নিতে বিন্দুমাত্রও সময় নেবে না। লাইভ ডেমো দেখতে চাইলে এখান থেকে দেখে আসতে পারেন -  Live Demo

 কিভাবে ব্লগে যুক্ত করবেনঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
blogger template
  • তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন এবং নিচের লিংকের মাধ্যমে প্রদত্তFont Awesome Icons এর আইকনগুলি </head> এর উপরে পেষ্ট করুন।
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
  • আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন ]]></b:skin> ট্যাগের ঠিক ‍উপরে নিচের Css কোডগুলি পেষ্ট করুন।
#pro-buttons {margin:20px auto; text-align:center;}
#pro-buttons br {display: none;}
.pro-down, .pro-demo {
    position: relative;
    display: inline-block;
    height: 30px;
    width: 100px;
    line-height: 30px;
    padding: 0;
    border-radius: 5px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.pro-demo {border: 2px solid #fe6d4c;}

.pro-down:hover {background-color: #0099cc;}
.pro-demo:hover {background-color: #fe6d4c;}

.pro-down span.circle, .pro-demo span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 21px;
    height: 20px;
    width: 20px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.pro-demo span.circle2 {background-color: #fe6d4c;}

.pro-down:hover span.circle, .pro-demo:hover span.circle2 {
    left: 100%;
    margin-left: -25px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.pro-demo:hover span.circle2 {color: #fe6d4c;}
.pro-down span.title, .pro-down span.title-hover,
.pro-demo span.title2, .pro-demo span.title-hover2 {
    position: absolute;
    left: 40px;
    text-align: center;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.pro-demo span.title2, .pro-demo span.title-hover2 {color:#fe6d4c; left:35px;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {left:20px; opacity:0;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {color: #fff;}
.pro-down:hover span.title, .pro-demo:hover span.title2 {left:20px; opacity:0;}
.pro-down:hover span.title-hover, .pro-demo:hover span.title-hover2 {opacity:1; left:10px;}
  •  তারপর Save Template এ ক্লিক করে টেমপ্লেট Save করে বেরিয়ে আসুন।

 Demo এবং Download বাটন ব্যবহারঃ

  • যখন আপনি বাটনগুলি ব্যবহার করতে চাইবেন, তখনই আপনার ব্লগের কাঙ্খিত পোষ্ট এর HTML Editor এ যাবেন এবং সেখানে নিচের কোডগুলি পেষ্ট করবেন।
 <div id="pro-buttons">
 <a class="pro-down" href="#" target="_blank">
    <span class="circle"><i class="fa fa-rocket"></i></span>
    <span class="title">Demo</span>
    <span class="title-hover">Click here</span>
 </a>
  <a class="pro-demo" href="#" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
 </a>
</div>
  • উপরের লাল চিহ্নিত # এর স্থলে আপনার কাঙ্খিত Demo এবং Download লিংক দেবেন।
Read More »

ব্লগার ব্লগের জন্য একটি Blank/Empty Template

ব্লগিং এর জন্য Goolge Blogger নিঃসন্দেহে একটি ভালমানের প্লাটফর্ম। ব্লগার ডিফল্ট Template গুলি কাষ্টমাইজ করে ইচ্ছামত ডিজাইন করা যায়। আপনি যদি শুধুমাত্র Html এবং Css বিষয়ে ভাল জ্ঞান রাখেন তাহলে ব্লগের যে কোন ডিফল্ট Template কে কাষ্টমাইজ করে আপনার মনেরমত করে সাজিয়ে নিতে পারবেন।
ব্লগার ব্লগের জন্য একটি Blank/Empty Template
আসলে ব্লগিং করা আমার কোন পেশা নয়। শুধুমাত্র অবসর সময়টুকুতে বেকার সময় ব্যয় না করে ব্লগিং এর পিছনে সামান্য সময় দিয়ে থাকি। তবে আপনার হাতে যদি যথেষ্ট পরিমানে সময় থাকে তাহলে ডিফল্ট ব্লগার Template গুলিকে কাষ্টমাইজ করে বিভিন্ন ডিজাইন করে অনলাইনে মার্কেটিং করতে পারেন। সেগুলি থেকে প্রত্যেকটি Template এর মান এবং ডিজাইন অনুযায়ী বিভিন্ন দামে বিক্রি করতে পারেন।

আজ আমি আপনাদের দেখাব কিভাবে ব্লগে বাড়তী কোন অপশন ছাড়া শুধুমাত্র Blank/Empty Template ব্যবহার করতে হয়। নিচের কোডগুলি কপি করে আপনার ব্লগের Template এ পেষ্ট করলেই একটি Blank Template তৈরি হয়ে যাবে।

 কিভাবে করবেনঃ

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
ব্লগার ব্লগের জন্য একটি Blank/Empty Template
  • এখন নিচের কোডগুলি কপি করে আপনার ব্লগের Template এ পেষ্ট করুন।
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/* ---------------------------------- */
]]></b:skin>
</head>
<body>
<b:section id='header' showaddelement='yes'/>  
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>    
</b:widget>
</b:section> 
</body>
</html>
  • সবশেষে Save Template এ ক্লিক করে Template টি Save করুন। That's all.
Read More »

ব্লগার ব্লগে আকর্ষণীয় Spoiler বা Show/Hide Button যুক্ত করুন

ব্লগের আকর্ষণ বৃদ্ধি এবং পাঠকদের বিভিন্ন প্রন্থায় ব্লগের প্রতি আকৃষ্ট করার জন্য ওয়েব ডেভেলপাররা বিভিন্ন ধরনের কৌশল অবলম্বন করে থাকেন। একজন ভিজিটর যখন কোন ব্লগ ভিজিট করে তার প্রয়োজনীয় উপকরণ পাওয়ার পাশাপাশি ব্লগে আকর্ষণীয় ডিজাইন এবং নিত্য নতুন কৌশল দেখতে পান, তখন ভিজিটর এই ধরনের ব্লগের প্রতি আকৃষ্টি হন। এতেকরে দেখা যায় পাঠক নিয়মিত ঐ ব্লগে ভিজিট করতে থাকেন।
ব্লগার ব্লগে আকর্ষণীয় Spoiler বা Show/Hide Button যুক্ত করুন
আমরা আজ যেটি শেয়ার করছি এটিকে সাধারণত Spoiler বা Show/Hide Button বলা হয়ে থাকে। এই বাটনটি ব্যবহার করে ব্লগপোষ্টের বিভিন্ন আর্টিকেল লুকায়িত অবস্থায় রেখে Click করার মাধ্যমে Expand করে Show/Hide করতে পারবেন। সাধারণত বড় আকারের পোষ্টগুলির সব অংশ না দেখিয়ে কিছু অংশ Hide করে রাখার ক্ষেত্রে এ ধরনের বাটন ব্যবহার করা হয়। এই বাটনটি কোন প্রকার Image ছাড়া সম্পূর্ণ CSS3 এর সমন্বয়ে তৈরি করা হয়েছে। আপনি ইচ্ছে করলে খুব সহজে এটির বিভিন্ন ডিজাইন পরিবর্তন করতে পারবেন। বাটনটির লাইভ ডেমো দেখুন-  Live Demo

 কিভাবে যুক্ত করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
  • কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
#spoiler{text-align:center}
#spoiler button{-moz-box-shadow:inset 0 39px 0 -24px #e67a73;-webkit-box-shadow:inset 0 39px 0 -24px #e67a73;box-shadow:inset 0 39px 0 -24px #e67a73;background-color:#e4685d;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:15px;padding:5px 20px;text-decoration:none;text-shadow:0 1px 0 #b23e35}
#spoiler button:after{font-family:FontAwesome;position:relative;content:'\f0dc';padding-left:10px}
#spoiler button:active{position:relative;top:1px}
#spoiler button:hover{background-color:#F56A60;outline:none}
#spoiler-container{padding:1px;text-align:left;background:#f5f5f5;border:0;padding:20px;display:none}
  • আবার কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • তারপর নিচের Scripts গুলি </head> ট্যাগের ঠিক উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#spoiler").click(function() {
$("#spoiler-container").slideToggle("normal");
 });
})
//]]>
</script>
  • এখন Template Save করে বেরিয়ে আসুন।
  • নোটঃ আপনার ব্লগে যদি Jquery এবং Font Awesome স্টাইলশীট যুক্ত করা না থাকে, তাহলে অবশ্যই দুটি অপশনই যুক্ত করে নিতে হবে।

 পোষ্টের ভীতরে বাটন যুক্ত করার পদ্ধতী

  • নতুন একটি পোষ্ট তৈরি করুন কিংবা পুরাতন পোষ্ট Edit করুন।
  • তারপর নিচের চিত্রেরমত পোষ্ট সেকশ হতে HTML বাটনটিতে ক্লিক করুন।
ব্লগার ব্লগে আকর্ষণীয় Spoiler বা Show/Hide Button যুক্ত করুন
  • উপরের চিত্রের লাল চিহ্নিত HTML বাটনটিতে ক্লিক করার পর নিচের চিত্রেরমত আপনার পোষ্টের HTML Editor দেখতে পাবেন।
ব্লগার ব্লগে আকর্ষণীয় Spoiler বা Show/Hide Button যুক্ত করুন
  • এখন উপরের চিত্রের লাল চিহ্নিত অংশের জায়গায় নিচের কোডগুলি যুক্ত করুন।
<div id="spoiler"><button>সকল পোষ্ট</button></div>
<div id="spoiler-container">
21st February is international mother language day!
</div>
  • সবশেষে পোষ্টটি Publish করলেই কাজ OK.

 পরিবর্তনঃ

  • উপরের লাল কালারের CSS হতে বাটনটির Background কালার পরিবর্তন করতে পারবেন।
  • পিংক কালারের অংশ হতে বাটনটির Hover কালার পরিবর্তন করতে পারবেন।
  • নোটঃ বাটনটির কালার পরিপূর্ণভাবে পরিবর্তন করার জন্য উপরের CSS হতে প্রত্যেকটি ব্রাউজারের Shadow কালার পরিবর্তন করে নিতে হবে।
Read More »

ব্লগার ব্লগে Smooth Scrolling Back To Top বাটন যুক্ত করুন

ব্লগের পাঠকদের বাড়তী সুবিধা দেয়ার জন্য এবং সুন্দর্য বৃদ্ধি করার জন্য Back to Top বাটন একটি সহজ ও কার্যকরী উপায়। অনেক সময় দেখা যায় ব্লগের কিছু পোষ্ট অনেক বড় আকারে হয়ে থাকে, ফলে পোষ্টটির শেষ প্রান্তে যাওয়ার পর মাউসের সাহায্যে উপরে আসতে হয়। এতেকরে কয়েকটি পোষ্ট পড়ার সময় এ কাজটি পাঠকের কাছে বিরক্তিকর হয়ে উঠে। এই ধরনের Back to Top বাটন ব্যবহার করে পাঠকদের বিরক্তির হাত থেকে রক্ষা করার পাশাপাশি আপনার ব্লগের গ্রহনযোগ্যতা বাড়ীয়ে নিতে সাহায্য করবে।
ব্লগার ব্লগে Smooth Scrolling Back To Top বাটন যুক্ত করুন
এটি সম্পূর্নরূপে CSS3 ও JavaScript এর সমন্বয়ে তৈরি করা হয়েছে। আইকন হিসেবে Font Awesome ব্যবহার করা হয়েছে। এই বাটনটিতে ক্লিক করে Smoothly ব্লগের উপরে অবস্থান করা যাবে। উল্লেখ্য যে, আমরা ইতিপূর্বে আমাদের ব্লগে এ ধরনের একটি Back To Widget শেয়ার করেছি। আজকের বাটনটির লাইভ ডেমো দেখতে পারেন-  Live Demo

 কিভাবে ব্লগে যুক্ত করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
ব্লগার ব্লগে Smooth Scrolling Back To Top বাটন যুক্ত করুন
  • এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • তারপর নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
/* Back To Top Button
-------------------------------------- */
.back-to-top{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#0c9b81;color:#fff;width:45px;height:45px;line-height:44px;right:25px;bottom:-25px;border-radius:50px;transition:all 0.5s ease-in-out;transition-delay:0.2s}
.back-to-top:hover{background-color:#0caa8e;color:#fff;transition:all 0.2s ease-in-out;transition-delay:0s}
.back-to-top.show{visibility:visible;cursor:pointer;opacity:1;bottom:25px}
.back-to-top i.fa{font-size:28px;line-height:inherit}
  • আবার কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • তারপর নিচের Scripts টি </head> ট্যাগের উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
$(function(){
    $(document).on( 'scroll', function(){
        if ($(window).scrollTop() > 100) {
            $('.back-to-top').addClass('show');
        } else {
            $('.back-to-top').removeClass('show');
        }
    });
    $('.back-to-top').on('click', scrollToTop);
});

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
  • পুনরায় কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
  • তারপর নিচের কোডগুলি </body> ট্যাগের উপরে পেষ্ট করুন।
<div class='back-to-top'>
 <span class='back-to-top-icon'>
  <i class='fa fa-angle-up'/>
 </span>
</div>
  • সবশেষে টেমপ্লেট Save করুন। That's all.
নোটঃ আপনার ব্লগে যদি Jquery এবং Font Awesome স্টাইলশীট যুক্ত করা না থাকে, তাহলে অবশ্যই দুটি অপশনই যুক্ত করে নিতে হবে। Font Awesome কি ও কিভাবে ব্লগে যুক্ত করতে হয় এ সম্পর্কে এই লিংক থেকেবিস্তারিত জেনে নিতে পারেন।
Read More »

ব্লগার Widgets কিভাবে Show এবং Hide করতে হয়?

ব্লগার Conditional ট্যাগ ব্যবহার করে ব্লগের Widgets গুলিকে বিভিন্নভাবে সাজানো যায়। ব্লগে এমন কিছু Widgets থাকে যেগুলি শুধুমাত্র পোষ্ট পেজে দেখানোর প্রয়োজন হয়, আবার কিছু Widgets থাকে যেগুলি শুধুমাত্র হোম পেজে দেখালেই হয়। এই কাজটি করার জন্য ব্লগার Widgets গুলিতে Conditional ট্যাগ ব্যবহার করতে হয়। অনেকের মনে প্রশ্ন জাগে যে, কিভাবে ব্লগার Widget টি শুধুমাত্র Home Page এ দেখাবো? কিভাবে ব্লগার Widget টি শুধুমাত্র Sub Page এ দেখাবো? কিভাবে ব্লগার Widget টি শুধুমাত্র Static Page এ দেখাবো? কিভাবে ব্লগার Widget টি শুধুমাত্র কোন নির্দিষ্ট একটি Page এ দেখাবো? আজ আমরা এই প্রত্যেকটি প্রশ্নের জবাব নিয়ে বিস্তারিত আলোচনা করবো, ইনশাআল্লাহ্।
Blogger-Widgets-Show-Hide
ব্লগার উইজেটগুলিকে বিভিন্নভাবে সাজানো এবং কন্ট্রল করার জন্য Conditional ট্যাগ খুবই গুরুত্বপূর্ণ। এই ছোট ছোট Conditional ট্যাগ গুলিকে সামান্য কাষ্টোমাইজ করে ব্লগার Widgets গুলিকে ইচ্ছামত সাজানো যায়।

 কিভাবে করতে হয়ঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
blogger-template-edit
  •  তারপর কিবোর্ড হতে Ctrl+F চেপে প্রত্যেকটি Html ট্যাগগুলি খোঁজে বের করতে হবে। কোডগুলি Expand করলে ঠিক নিচের মত দেখতে পাবেন।
<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
  • উপরের উইজেটটিতে আমার ব্লগের “সর্বশেষ পোষ্ট” উইজেটটি উদাহরণ হিসেবে দেখাচ্ছি। আমার ব্লগের এই উইজেটটি হোম পেজে শো করবে না, তবে যে কোন পোষ্ট পেজে গেলে দেখতে পাবেন।
কোড ট্যাগ পরিচিতিঃ
  1. এখানে ‘Item’ বলতে শুধুমাত্র পোষ্ট পেজকে বুঝাবে।
  2. এখানে ‘Index’ বলতে Homepage এবং Search/Label Pages বুঝাবে।

 ০১। Widgets শুধুমাত্র Homepages এ দেখানোর জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ০২। Widgets Homepages থেকে Hide করার জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ০৩। Widgets শুধুমাত্র Static Pages এ দেখানোর জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ০৪। Widgets Static Pages থেকে Hide করার জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ০5। Widgets শুধুমাত্র নির্দিষ্ট কোন Pages এ দেখানোর জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of Selected Post"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ০6। Widgets শুধুমাত্র নির্দিষ্ট কোন Pages থেকে Hide করার জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of Selected Post"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ০৭। Widgets শুধুমাত্র Home Pages এর First Page এ দেখানোর জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:post.isFirstPost'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ০৮। Widgets শুধুমাত্র Index Pages এ দেখানোর জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ০৯। Widgets Index Pages থেকে Hide করার জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "index"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ১০। Widgets শুধুমাত্র Search Pages এ দেখানোর জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ১১। Widgets শুধুমাত্র Mobile Browsers এ দেখানোর জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "true"'> 
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ১২। Widgets শুধুমাত্র Computer Browsers এ দেখানোর জন্যঃ

<b:widget id='HTML4' locked='false' title='সর্বশেষ পোষ্ট' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
  • প্রত্যেকটি নতুন Conditional Statement যুক্ত করার পর অবশ্যই ব্লগার টেমপ্লেট Save করে নিবেন।
Read More »

ব্লগার Thumbnails Image এ Css3 Animation Effects যুক্ত করুন

আজ আপনাদের সাথে অত্যান্ত আকর্ষণীয় একটি পোষ্ট শেয়ার করতে যাচ্ছি, যেটি আমাদের ব্লগে ব্যবহার করা হয়েছে। এটির মাধ্যমে আপনার ব্লগের যে কোন Element এর উপর Animation Effects দিতে পারবেন। এটি Css3 এবং JavaScript দিয়ে তৈরী করা হয়েছে, যার মাধ্যমে আপনার ব্লগের বিভিন্ন Element এর উপর ৫০ টিরও বেশী Bounce, Animate, Flip, Pulse Effects দিতে পারবেন। এই আকর্ষণী Css3 Transforms and Animation Effects যে কোন Browser এ সাপোর্ট করবে। আপনি লাইভ ডেমো দেখতে চাইলে আমাদের ব্লগের Home Page এ যান।
ব্লগার Thumbnails Image এ Css3 Animation Effects যুক্ত করুন
আপনি হয়তো ভাবছেন এত বড় কোড যুক্ত করলে আপনার ব্লগ স্লো হয়ে যাবে। আমি আপনাকে এ ব্যাপারে নিশ্চয়তা দিচ্ছি যে, আপনার ব্লগের লোড টাইমের উপর এটি কোন প্রভাব ফেলবে না। বরংচ এটি ব্যবহারে আপনার ব্লগের সুন্দর্য অনেকাংশেই বৃদ্ধি পাবে।

 কিভাবে যুক্ত করবেনঃ

  • ব্লগের ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
  • তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • এখন নিচের JavaScript টি কপি করে </head> ট্যাগের উপরে পেষ্ট করুন।
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/* Animated Thumbnail Image Script */
(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c&gt;b;b++)if(b in this&amp;&amp;this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&amp;&amp;(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent(&quot;on&quot;+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent(&quot;on&quot;+b,c):delete a[b]},a.prototype.innerHeight=function(){return&quot;innerHeight&quot;in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e&gt;d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f&gt;e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){&quot;undefined&quot;!=typeof console&amp;&amp;null!==console&amp;&amp;console.warn(&quot;MutationObserver is not supported by your browser.&quot;),&quot;undefined&quot;!=typeof console&amp;&amp;null!==console&amp;&amp;console.warn(&quot;WOW.js cannot detect dom mutations, please call .sync() after loading new content.&quot;)}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return&quot;float&quot;===b&amp;&amp;(b=&quot;styleFloat&quot;),e.test(b)&amp;&amp;b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&amp;&amp;(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c}return e.prototype.defaults={boxClass:&quot;wow&quot;,animateClass:&quot;animated&quot;,offset:0,mobile:!0,live:!0},e.prototype.init=function(){var a;return this.element=window.document.documentElement,&quot;interactive&quot;===(a=document.readyState)||&quot;complete&quot;===a?this.start():this.util().addEvent(document,&quot;DOMContentLoaded&quot;,this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll(&quot;.&quot;+this.config.boxClass),e=[],a=0,c=d.length;c&gt;a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c&gt;a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d&gt;c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,&quot;scroll&quot;,this.scrollHandler),this.util().addEvent(window,&quot;resize&quot;,this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],e=0,f=b.length;f&gt;e;e++)d=b[e],g.push(function(){var a,b,e,f;for(e=d.addedNodes||[],f=[],a=0,b=e.length;b&gt;a;a++)c=e[a],f.push(this.doSync(c));return f}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,&quot;scroll&quot;,this.scrollHandler),this.util().removeEvent(window,&quot;resize&quot;,this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&amp;&amp;(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll(&quot;.&quot;+this.config.boxClass),f=[],c=0,d=e.length;d&gt;c;c++)b=e[c],g.call(this.all,b)&lt;0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=&quot;&quot;+a.className+&quot; &quot;+this.config.animateClass},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute(&quot;data-wow-duration&quot;),c=a.getAttribute(&quot;data-wow-delay&quot;),e=a.getAttribute(&quot;data-wow-iteration&quot;),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return&quot;requestAnimationFrame&quot;in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c&gt;b;b++)a=d[b],e.push(a.style.visibility=&quot;visible&quot;);return e},e.prototype.customStyle=function(a,b,c,d,e){return b&amp;&amp;this.cacheAnimationName(a),a.style.visibility=b?&quot;hidden&quot;:&quot;visible&quot;,c&amp;&amp;this.vendorSet(a.style,{animationDuration:c}),d&amp;&amp;this.vendorSet(a.style,{animationDelay:d}),e&amp;&amp;this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?&quot;none&quot;:this.cachedAnimationName(a)}),a},e.prototype.vendors=[&quot;moz&quot;,&quot;webkit&quot;],e.prototype.vendorSet=function(a,b){var c,d,e,f;f=[];for(c in b)d=b[c],a[&quot;&quot;+c]=d,f.push(function(){var b,f,g,h;for(g=this.vendors,h=[],b=0,f=g.length;f&gt;b;b++)e=g[b],h.push(a[&quot;&quot;+e+c.charAt(0).toUpperCase()+c.substr(1)]=d);return h}.call(this));return f},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(e=d(a),c=e.getPropertyCSSValue(b),i=this.vendors,g=0,h=i.length;h&gt;g;g++)f=i[g],c=c||e.getPropertyCSSValue(&quot;-&quot;+f+&quot;-&quot;+b);return c},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,&quot;animation-name&quot;).cssText}catch(c){b=d(a).getPropertyValue(&quot;animation-name&quot;)}return&quot;none&quot;===b?&quot;&quot;:b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c&gt;b;b++)a=d[b],a&amp;&amp;(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute(&quot;data-wow-offset&quot;)||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e&gt;=d&amp;&amp;b&gt;=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&amp;&amp;this.util().isMobile(navigator.userAgent)},e}()}).call(this); new WOW().init(); //]]&gt;
</script>
  • তারপর কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
  • নিচের Script টি </body> ট্যাগের উপরে পেষ্ট করুন।
<script type='text/javascript'>
wow = new WOW( { boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default } ) wow.init();
</script>

 Default Settings পরিবর্তন করতে চাইলেঃ

  1. BoxClass : যখন মাউজ স্ক্রল করে নিচের দিকে যাবেন তখন এটি বক্স শো করবে।
  2. Animated : এটি Animation Effects দেবে।
  3. Offset : এটি ব্রাউজারের View Report এর দুরত্ব বজায় রাখবে।
  4. Mobile : মোবাইল ভার্সন থেকে On অথবা Off করতে পারবেন।

 Css যুক্ত করাঃ

  •  কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের Style Sheet টি ]]></b:skin> ট্যাগের নিচে পেষ্ট করুন। 
<link href='http://daneden.github.io/animate.css/animate.min.css' rel='stylesheet'/>
  • আপনি চাইলে উপরের লিংকের কোডগুলি আপনার ব্লগের Template এ ব্যবহার করতে পারেন। 
  • নোটঃ সব ধরনের Animation এখান থেকে দেখতে পারেন।

 Html ট্যাগ যুক্ত করাঃ

  • কিবোর্ড হতে Ctrl+F চেপে imgtag = '<span style="float:left; position:relative;"> অংশটি সার্চ করুন।
  • উপরের লাইনের <span এর পরে class="wow zoomIn animated" অংশটি যোগ করুন।
  • তাহলে আপনার নতুন লাইনটি হবে নিচের মত।
imgtag = '<span class="wow zoomIn Animated" style="float:left; position:relative;">
  • সবশেষে Template Save করলেই কাজ OK.
Read More »

Badiuzzaman ( Rubel )