Awesome! টিউনস
সকল Awesome! টিউনস

ওয়েব ডিজাইন শর্ট টেকনিক [পর্ব-০২] :: দেখে নিন, ওয়েব সাইটে নিউজ টিকার যুক্ত করা কত সহজ !

2,862 দেখা 3 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 2

147 টিউনস 469 টিউমেন্টস 17 ফলোয়ার

ওয়েব ডিজাইন শর্ট টেকনিক

ওয়েব ডিজাইন শর্ট টেকনিকের ২য় পর্বে সবাইকে স্বাগতম । এমন অনেকেই আছেন অনেক দিন ধরে ওয়েব ডিজাইন শিখতেছেন, কিন্তু মনে হয় কিছুই শেখা হয়নি। বিভিন্ন মর্ডান ওয়েব সাইটের বিভিন্ন ইলিমেন্ট দেখে মনে হয় এই অসাধারণ জিনিসগুলো কিভাবে তৈরি করা যায়? এগুলো কিভাবে কাজ করে? এই ধরণের প্রশ্নগুলো যাদের মনে সারাক্ষণ উদয় হয় তাদের জন্যই এই “ওয়েব ডিজাইন শর্ট টেকনিক ” ।

আমার মত যারা একটু অলস প্রকৃতির, অল্প শিখেই অনেক কিছু করে ফেলতে চান তাদেরকে ওয়েব ডিজাইন শর্ট টেকনিকে সাদর আমন্ত্রণ ।

আজ ২য় পর্বে থাকছে যে কোন ওয়েব সাইটে কিভাবে নিউজ টিকার যুক্ত করা যায় তার শর্ট টেকনিক।

প্রথম ধাপ  :

  • প্রথমে দেখেনিন আপনার ওয়েব সাইটের টেমপ্লেট ফোল্ডারের মধ্যে js এবং css নামে কোন ফোল্ডার আছে কিনা?

  • না থাকলে js এবং css নামে ফোল্ডার দুটি তৈরি করে নিন।

২য় ধাপ :

  • এখন css ফোল্ডারের মধ্যে news_ticker.css  ফাইলটা রাখুন ।
  • js  ফোল্ডারের মধ্যে  news_ticker.js ও plugins.js ফাইল দুইটা রাখুন।

৩য় ধাপ :

  • যদি আগে থেকেই টেমপ্লেট ফোল্ডারের মধ্যে plugins.js নামে কোন ফাইল খাকে শুধুমাত্র সেক্ষেত্রে plugins.js ফাইল ওপেন করে শেষে বা শুরুতে নিচের কোড টুকু যুক্ত করুন।

/* ==============News Ticker======================*/
jQuery(function(){
jQuery("ul#ticker01").liScroll();
});
/* ==============News Ticker======================*/

*** টেমপ্লেট ফোল্ডারের মধ্যে plugins.js নামে কোন ফাইল না থাকলে ৩য় ধাপটি উপেক্ষা করুন।

৪র্থ ধাপ :

  • <head>............</head> এর মধ্যে নিচের লাইনটা যুক্ত করুন।
<link rel="stylesheet" href="css/news_ticker.css">
  • এর মাধ্যমে news_ticker.css ফাইলকে HTML এ যুক্ত করা হচ্ছে।

৫ম ধাপ :

  • আপনার ওয়েব সাইটের টেমপ্লেটর  </body> অর্থাৎ body ট্যাগের ending tag খুঁজে বের করুন।
  • এরপর নিচের কোডটুকু যুক্ত করুন।
<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 এ যুক্ত করা থাকলে, নতুন করে যুক্ত করার প্রয়োজন নেই।

৬ষ্ঠ ধাপ :

  • যেখানে নিউজ টিকারটি দেখাতে চান সেখানে নিচের কোডটুকু যুক্ত করুন।
<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 এ যুক্ত করুন। সামান্য কিছু  পরিবর্তন প্রয়োজন হতে পারে।
/* ==============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======================*/

সোর্স ফাইল ডাউনলোড করুন

http://www.mediafire.com/download/4x7qxl88knva8mv/News_ticker.zip

আশা করছি সবাই ওয়েব সাইটে নিউজ টিকার যুক্ত করতে সক্ষম হবেন। কোন সমস্যা হলে টিউমেন্ট করুন।

সবাইকে ধন্যবাদ । শুভকামনা রইলো।

Level 2

আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি অসীম কুমার পাল। ইলেকট্রনিক্স এবং ওয়েব ডিজাইনকে অন্তরে ধারণ করে পথ চলতেছি। স্বপ্ন দেখি এই পৃথিবীর বুকে একটা সুখের স্বর্গ রচনা করার। নিজেকে একজন অতি সাধারণ কিন্তু সুখী মানুষ ভাবতে পছন্দ করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

ধন্যবাদ

    Level 2

    @নাম কওন যাইবনা: শুভ কামনা রইলো ভাই।