ওয়েব ডিজাইন শর্ট টেকনিক [পর্ব-০২] :: দেখে নিন, ওয়েব সাইটে নিউজ টিকার যুক্ত করা কত সহজ !
ওয়েব ডিজাইন শর্ট টেকনিকের প্রথম পর্বে সবাইকে স্বাগতম । এমন অনেকেই আছেন অনেক দিন ধরে ওয়েব ডিজাইন শিখতেছেন, কিন্তু মনে হয় কিছুই শেখা হয়নি। বিভিন্ন মর্ডান ওয়েব সাইটের বিভিন্ন ইলিমেন্ট দেখে মনে হয় এই অসাধারণ জিনিসগুলো কিভাবে তৈরি করা যায়? এগুলো কিভাবে কাজ করে? এই ধরণের প্রশ্নগুলো যাদের মনে সারাক্ষণ উদয় হয় তাদের জন্যই এই “ওয়েব ডিজাইন শর্ট টেকনিক ” ।
আমার মত যারা একটু অলস প্রকৃতির, অল্প শিখেই অনেক কিছু করে ফেলতে চান তাদেরকে ওয়েব ডিজাইন শর্ট টেকনিকে সাদর আমন্ত্রণ ।
আজ ২য় পর্বে থাকছে যে কোন ওয়েব সাইটে কিভাবে নিউজ টিকার যুক্ত করা যায় তার শর্ট টেকনিক।
প্রথম ধাপ :
- প্রথমে দেখেনিন আপনার ওয়েব সাইটের টেমপ্লেট ফোল্ডারের মধ্যে js এবং css নামে কোন ফোল্ডার আছে কিনা?
না থাকলে js এবং css নামে ফোল্ডার দুটি তৈরি করে নিন।
২য় ধাপ :
- এখন css ফোল্ডারের মধ্যে news_ticker.css ফাইলটা রাখুন ।
- js ফোল্ডারের মধ্যে news_ticker.js ও plugins.js ফাইল দুইটা রাখুন।
৩য় ধাপ :
- যদি আগে থেকেই টেমপ্লেট ফোল্ডারের মধ্যে plugins.js নামে কোন ফাইল খাকে শুধুমাত্র সেক্ষেত্রে plugins.js ফাইল ওপেন করে শেষে বা শুরুতে নিচের কোড টুকু যুক্ত করুন।
1
2
3
4
5
| /* ==============News Ticker======================*/jQuery(function(){jQuery("ul#ticker01").liScroll();});/* ==============News Ticker======================*/ |
*** টেমপ্লেট ফোল্ডারের মধ্যে plugins.js নামে কোন ফাইল না থাকলে ৩য় ধাপটি উপেক্ষা করুন।
৪র্থ ধাপ :
- <head>............</head> এর মধ্যে নিচের লাইনটা যুক্ত করুন।
1
| <link rel="stylesheet" href="css/news_ticker.css"> |
- এর মাধ্যমে news_ticker.css ফাইলকে HTML এ যুক্ত করা হচ্ছে।
৫ম ধাপ :
- আপনার ওয়েব সাইটের টেমপ্লেটর </body> অর্থাৎ body ট্যাগের ending tag খুঁজে বের করুন।
- এরপর নিচের কোডটুকু যুক্ত করুন।
1
2
3
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="js/news_ticker.js"></script><script src="js/plugins.js"></script> |
- এর মাধ্যমে jQuery,news_ticker.js এবং plugins.js ফাইলকে HTML এ যুক্ত করা হচ্ছে।
*** টেমপ্লেট ফোল্ডারের মধ্যে jQuery বা plugins.js HTML এ যুক্ত করা থাকলে, নতুন করে যুক্ত করার প্রয়োজন নেই।
৬ষ্ঠ ধাপ :
- যেখানে নিউজ টিকারটি দেখাতে চান সেখানে নিচের কোডটুকু যুক্ত করুন।
1
2
3
4
5
6
7
8
| <div><p>Latest News </p><ul id="ticker01"><li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a><span>||</span></li><li><a href="#"> 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</a><span>||</span></li><li><a href="#"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</a></li></ul></div> |
৭ম ধাপ:
- নিচের কোডটুকু আপনার টেমপ্লেটের style.css এ যুক্ত করুন। সামান্য কিছু পরিবর্তন প্রয়োজন হতে পারে।
1
2
3
4
5
6
| /* ==============CSS for News Ticker======================*/.news_feed{height:29px; background:#fff;}.newsfeed_label{float: left; font-size: 16px;padding: 5px 10px;color: #fff;background: #e74c3c;}#ticker01{float: left;}.tickercontainer .mask {width: 900px !important;}/* ==============CSS for News Ticker======================*/ |
সোর্স ফাইল ডাউনলোড করুন
আশা করছি সবাই ওয়েব সাইটে নিউজ টিকার যুক্ত করতে সক্ষম হবেন। কোন সমস্যা হলে টিউমেন্ট করুন।
সবাইকে ধন্যবাদ । শুভকামনা রইলো।
@@@ADMIN@@@ FB: Facebook.com/dc.mithu.com
No comments:
Post a Comment