স্লাইডার উইডগেট সাধারণত ওয়েবসাইট বা ব্লগ আকর্ষনীয় করার জন্য ব্যাবহার করা হয়।স্লাইডার উইডগেটের প্রধান সুবিধা হল এটা খুব সহজেই ভিজিটরের নজর কারতে পারে।অনেকে স্লাইডার উইডগেট ব্যাবহার করতে চাননা ,কারন এটা ব্লগে সেট করা সময়ের ব্যাপার।আমরা এখন যে স্লাইড নিয়ে কথা বলছি তা আপনার ব্লগার ব্লগে সেট করা খুবই সহজ।এসুন তাহলে দেখা যাক।
অন্যান্য স্লাইড উইডগেট এর মত এটি বার বার কনফিগার করতে হয় না কারন এটি স্লাইড করে আপনার ফিড পোস্ট থেকে।যার ফলে আপনাকে বার বার বিভিন্ন পোস্ট কনফিগার করতে হয় না।
স্লাইড শো এর জন্য সবচেয়ে উপযুক্ত জায়গা হল ব্লগ পোস্ট এর উপর।
আসুন স্লাইডটি কিভাবে আপনার ব্লগে যুক্ত করা যায়ঃ
আসলে স্লাইডটি অনেক বড় ছিল যা অনেকটা বেমানান।পরে এটাকে হালকা মডিফায় করে ব্যাবহার উপযোগী করা হয়েছে।দুই পাসে দুইটা স্টান্ড ছিল যা এখন সরানো হয়েছে।
প্রথমে আপনার ব্লগারের লে আউট পেইজ এ যান।একটা নতুন গেডজেট যুক্ত করুন।নিচের কোডটুকু বসিয়ে দিন
<style>#slide-container {height: 180px;position: relative;width: 430px;}#slider {height: 180px;left: 25px;overflow-x: hidden;overflow-y: hidden;position: relative;width: 430px;font-family: calibri;}.slide-desc {background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 10px;position: absolute;right: 0px;text-align: left;top: 0;width: 200px;z-index: 99999;}.slide-desc h2 {display: block;}.crosscol .widget-content {position: relative;}#slider ul, #slider li,#slider2 ul, #slider2 li {margin: 0;padding: 0;list-style: none;}#slider2 {margin-top: 1em;}#slider li, #slider2 li {/*define width and height of list item (slide)entire slider area will adjust according to the parameters provided here*/width: 430px;height: 180px;overflow: hidden;}#prevBtn, #nextBtn,#slider1next, #slider1prev {display: block;width: 30px;height: 77px;position: absolute;left: -30px;text-indent: -9999px;top: 71px;z-index: 1000;}#nextBtn, #slider1next {left: 520px !important;}#prevBtn, #nextBtn, #slider1next, #slider1prev {display: block;height: 77px;left: 0;position: absolute;top: 132px;width: 30px;z-index: 1000;}#prevBtn a, #nextBtn a,#slider1next a, #slider1prev a {display: block;position: relative;width: 30px;height: 77px;background: url(xxx) no-repeat 0 0;}#nextBtn a, #slider1next a {background: url(yyy) no-repeat 0 0;}/* numeric controls */ol#controls {margin: 1em 0;padding: 0;height: 28px;}ol#controls li {margin: 0 10px 0 0;padding: 0;float: left;list-style: none;height: 28px;line-height: 28px;}ol#controls li a {float: left;height: 28px;line-height: 28px;border: 1px solid #ccc;background: #DAF3F8;color: #555;padding: 0 10px;text-decoration: none;}ol#controls li.current a {background: #5DC9E1;color: #fff;}ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {outline: none;}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
var numposts_gal = 10; var numchars_gal = 200; var random_posts = false; // random posts
</script>
<script src="http://bdtechtoday.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
কোডটি ডাউনলোড করুন
সেভ করুন এবং বের হয়ে আসুন।
পরিবর্তন ;
http://bdtechtoday.blogspot.com এর যায়গায় এপনার ব্লগ এর ঠিকানা দিন।
var numposts_gal = 10 এখানে 10 এর যায়গায় আপনি যে কয়টা পোস্ট শো করতে চান তা দিন।
var numchars_gal = 200 পরিবর্তন করুন আপনি বর্ণনা যত অক্ষরের দিতে চান
আসা করি আপনাদের ভাল লেগেছে।
|
ইমেইলের মাধ্যমে প্রতিদিনের আপডেট নিন |
Follow us! 
|
0 মন্তব্য(গুলি):
একটি মন্তব্য পোস্ট করুন