আপনার ব্লগে সহজেই jQuery Image Slider যোগ করুন

আস্-সালামু আলাইকুম। আশা করি আপনারা সবাই আল্লাহর রহমতে ভালো আছেন।
আমি আজ আপনাদের দেখাবো কিভাবে jQuery Image Slider আপনার ব্লগে যোগ করবেন।

প্রথমে এখানে গিয়ে- http://www.blogger.com আপনার ব্লগে লগ-ইন করুন এবং Template -এ যান।

তারপর Template এ গিয়ে Backup/Restore এ ক্লিক করে আপনার টেমপ্লেট টি সেভ করে নিন।

এবার Edit HTML এ যান।

Ctrl+F প্রেস করে আপনার টেমপ্লেট থেকে  </head>  ট্যাগ টি খোজ করুন।

তারপর  </head>  ট্যাগের পূর্বে নিচের Slider jQuery Code টি কপি করে পেষ্ট করুন।

Slider jQuery Code টি নিচের লিংকে দেওয়া হলো সেখান থেকে এটাকে ডাউনলোড করে নিন।
Slider jQuery Code

এবার আপনার টেমপ্লেট থেকে পুনরায়   ]]></b:skin>  খোজ করুন।
এবং এর পূর্বে নিচের CSS code টি পেষ্ট করুন।

আপনি ইচ্ছে করলে CSS code টি এখান থেকেও ডাউনলোড করে নিতে পারেন- 
“CSS code লিংক”
 

/*-------------------- MBT jQuery Image Slider -------------*/
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;} 
.fp-slides{} 
.fp-post{padding:13px;} 
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} 
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} 
.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;} 
.fp-title a{color:#000;text-decoration:none;} 
.fp-title a:hover{color:#0080fF;text-decoration:none;} 
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;} 
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;} 
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;} 
.fp-nav{width:590px;padding:0px 10px;height:14px;} 
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjM_zqVGHEA0JHE9RR27ts1JwYgD3SIf1GqEpOfcXy3TFFdJu3rDPkxWMe0K0ZLkjoyRcVf8-K8Cd7ORhLOluCd3AQfFLTNO5ssyXFBJqjoPJxsA13IZ60-D7Va5sbv3O6bnkkPNSJa5E/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;} 
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;} 
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lhrlahkOAqN3wbC_yLNRfeQ2lqAeuCOI3wbJOUXv2ToXyPtZHnz1F5TiAGcEDbkXjU2KWGdPvPZYdAtMi3-7AyeYuT0K9Ti9PsleMgCZ_PL7_4a1LEipOEJ-aX36Z0FtFTZEGHzy8vM/s1600/featured-prev.png) top left no-repeat;} 
.fp-prev:hover{opacity:1;} 
.fp-prev:active{opacity:0.7;} 
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Li0dipAR_zHEqRNYFuiHlrHBK3lAYb1OGYtukoFfusgCgwM-61J9fo7lvKyS4i-33bl2iB2RW5eHs9S1qb6xSHhDKJd4QAYyiyhuLbVBdFlSqHHbHrk0u5QrvldTaaSyCIS2hK-9VxE/s1600/featured-next.png;) top left no-repeat} 
.fp-next:hover{opacity:1;} 
.fp-next:active{opacity:0.7;}

আপনি ইচ্ছে width:580px;height:266px আপনার ইচ্ছেমতো এডিট করতে পারেন।

এবার সবশেষে আপনার টেমপ্লেট থেকে  <div id='main-wrapper'>  খোজ করুন। (উল্লেখ্য যে,
এটা আপনার টেমপ্লেটের  <div id='content-wrapper'>  এর নিকটে অবস্হান করে)

তারপর নিচের html কোড টি ঠিক তার পরে পেষ্ট করুন(অবশ্যই html কোডের নিচে দেয়া ধাপসমূহ পুরোপুরি এডিটিং করে তারপর এটাকে পেষ্ট করবেন) 

আপনি ইচ্ছে করলে html code টিএ খান থেকেও ডাউনলোড করে নিতে পারেন- 
“html code লিংক”
 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>
<div class='fp-slides'>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div> 
<h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div> 
<h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div> 
<h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div> 
<h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
</div>           
<div class='fp-nav clearfix'> 
<span class='fp-pager'/>                
<a class='fp-next' href='#fp-next'/> 
<a class='fp-prev' href='#fp-prev'/> 
</div> 
          
</div>

</b:if></b:if>

এবার উপরের html code টি নিচের ধাপগুলো অনূসরণ করে পরিবর্তন করে নিন।

* ADD POST URL-1, 2, 3, 4, 5 HERE এই লিখাগুলো আপনার যেসব পোষ্ট স্লাইডারে দেখাবেন সেগুলোর পোষ্ট ইউ.আর.এল দ্বারা রিপ্লেস করুন। (উল্লেখ্য যে, আপনি স্লাইডারে দেখানোর জন্য যেসব পোষ্ট সিলেক্ট করবেন শুধুমাত্র সেগুলোর তথ্যসমূহ নিচে অনূরুপভাবে প্রত্যেকটি ধাপে সিরিয়াল অনুযায়ী প্রদান করবেন। লক্ষ্য রাখবেন পোষ্ট ১ এর তথ্য যাতে পোষ্ট ২ এ দেয়া না হয়)

* ADD IMAGE-1,2,3,4,5 LINK HERE এই লিখাগুলো আপনার পোষ্টসমূহের ইমেজ ইউ.আর.এল দ্বারা রিপ্লেস করুন। * WRITE POST TITLE HERE... এই লিখাগুলো আপনার পোষ্টসমূহের টাইটেল দ্বারা রিপ্লেস করুন।

 * WRITE POST DESCRIPTION HERE এই লিখাগুলো আপনার পোষ্টসমূহের বিস্তারিত বিবরন দিয়ে রিপ্লেস করুন।

আপনি ইচ্ছে করলে উপরের CSS code এর width:608px and height:400px এগুলো বাড়িয়ে বা কমিয়ে আপনার ইচ্ছেমতো স্লাইডার এর আয়তনের হ্রাস-বৃদ্ধি করতে পারেন।

এবার আপনার কাজ শেষ। টেমপ্লেট টি সেভ করে টেমপ্লেট টি সেভ করে বেরিয়ে আসুন।

এবার আপনার ব্লগটি দেখুন এবং স্লাইডারটি উপভোগ করুন।

আপনি যদি এটা আপনার ব্লগে স্হাপন করতে না পারেন বা কোন রকম সমস্যার মুখোমুখি হোন। তাহলে অবশ্যই আমাকে কমেন্ট করে জানাবেন।
আমি আপনাকে এ ব্যাপারে সহযোগিতা করব।

যাইহোক, আজ এ পর্যন্ত। আগামি যেকোন পর্বে আপনাদের জন্য নিয়ে আসবো
জনপ্রিয় Facebook Comment ফিচার টি। এবং দেখাবো কিভাবে আপনার ব্লগ বা ওয়েব সাইটে এটাকে যুক্ত করবেন।

সবাই ভালো থাকবেন। আল্লাহ্-হাফেজ।