Techtunes এর মতো Chain Tunes নেভিগেশন লাগিয়ে নিন আপনার ব্লগেও!

আসসালামু আলাইকুম,
টেক টিউন্সে ঢুকেই প্রথমে যেটি চোখে পরে সেটা হল চেইন টিউন গুলো। অত্তন্ত সুন্দর ভাবে লেখক এবং থাম্বনেইল ইমেজ সহ একনাগাড়ে ধারাবাহিক পর্বে চলা ব্লগ পোস্ট গুলো সুন্দর করে শো-কেসিং করা হয়েছে।

এই শো-কেস আপনার ব্লগেও যুক্ত করতে পারেন।
দুঃখের ব্যাপার এই যে, সময়ের অভাবে আমি একে জেসন ফিডের সাথে যুক্ত করে দিতে পারি নি। এতে এটি ম্যানুয়ালি ছাড়া কাজ করতে পারে না।
আমি চেষ্টা করবো জাভা স্ক্রিপ্ট দিয়ে একে অটোম্যাটিক করে দিতে। তবে মনে হয় না ব্লগারে সেটা সম্ভব হবে।

তবে এই উইজেট মোবাইল সমরথন করে না :(

তবুও আমার কাছে এটা ভালই লেগেছে,

এই নিন কোড, আশা করি কোডের মানে বুঝতে পারবেন, বুঝলে এডিট করতে সমস্যা হবার কথা ন।

<style type="text/css">.chain-tunes-box{border:1px solid #D1D8F0;float:left;margin:02px 10px;padding:5px 8px;width:278px;}.home-first-fold-chaintunes .chain-tunes-box{padding:9px 35px;}.home-first-fold-chaintunes .chain-tunes-box:nth-child(2n+1){margin-left:0;margin-right:30px;}.chain-tunes-page .chain-tunes-box{border:1px solid #D1D8F0;float:left;width:278px;margin:04px 20px;padding:5px 8px;}.chain-tunes-page.narrowcolumn{background:none repeat scroll 0 0 #FFF;border:1px solid #D1D8F0;color:#000;float:left;font-size:1.27em;line-height:150%;overflow:hidden;width:610px;margin:0 0 10px;padding:5px 0}.chain-tunes-box h3{color:#000;font-size:13px;height:13px;line-height:13px;text-align:center;margin:0 0 5px}.chain-tunes-box .main{clear:both;margin-bottom:5px;position:relative;}.chain-tunes-box .main .part-num{background:none repeat scroll 0 0 #FE4E03;border-radius:10px 10px 10px 10px;-moz-border-radius:10px;-webkit-border-radius:10px 10px 10px 10px;box-shadow:0 0 2px #000;-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;color:#FFF;font-size:11px;height:18px;left:-6px;line-height:20px;position:absolute;text-align:center;top:5px;width:17px;margin:0;padding:0;}.chain-tunes-box .main .date{background:none repeat scroll 0 0 #3B5892;border-radius:3px 3px 3px 3px;-moz-border-radius:3px;-webkit-border-radius:3px 3px 3px 3px;bottom:0;color:#FFF;font-size:11px;left:25px;line-height:15px;opacity:0.9;position:absolute;text-align:center;width:40px;margin:0;padding:0;}.chain-tunes-box .main .icon{border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px 5px 5px 5px;box-shadow:0 0 2px #000;-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;float:left}.chain-tunes-box .main h2{float:left;font-size:18px;height:60px;line-height:30px;position:absolute;text-align:center;width:150px;margin:0 65px;background: linear-gradient(lime,transparent);border-radius: 5px 5px 20px 20px;}.chain-tunes-box .main .avatar{border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px 5px 5px 5px;box-shadow:0 0 2px #000;-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #63FF01;;float:right}.chain-tunes-box h4{clear:both;color:#000;font-size:13px;height:13px;line-height:13px;text-align:center;margin:0}.home-first-fold-chaintunes .chain-tunes-box{padding:9px 35px}.home-first-fold-chaintunes .chain-tunes-box:nth-child(2n+1){margin-left:0;margin-right:30px}.chain-tunes-page .chain-tunes-box{border:1px solid #D1D8F0;float:left;width:278px;margin:0 4px 20px;padding:5px 8px}</style><center><div class="home-first-fold-chaintunes" style="float:left;width:770px"><div class="chain-tunes-box"><h3>হ্যাকিং শিখুন মাহমুদুজ্জামানের সাথে</h3><div class="main clearfix"><img class="icon"src="http://i.kinja-img.com/gawker-media/image/upload/s--AQYxhA_l--/18hyfk3t3yfo7jpg.jpg"width="60"height="60" /><h2><a href="http://grplusbd.blogspot.com/search/label/%E0%A6%B9%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%95%E0%A6%BF%E0%A6%82"class="series-24100"title="হ্যাকিং জগৎ">হ্যাকিং জগৎ</a></h2><img alt="mahmudujjaman kamol security expert"src="http://lh5.googleusercontent.com/-h5o77NAhNRY/AAAAAAAAAAI/AAAAAAAAARI/AbbyPWRDifE/s512-c/photo.jpg"class="avatar avatar-60 photo" height="60" width="60" /></div><h4>হয়ে যান একজন হ্যাকার!</h4></div><div class="chain-tunes-box"><h3>ব্লগস্পটের আদ্যোপান্ত শিখুন তাহমিদের সাথে</h3><div class="main clearfix"><img class="icon"src="https://lh4.ggpht.com/Av1ChCz8qIHLTtuMVI2b2u5M-wYmD5jExohP3fvh4X11vkMvTobt--6gb0gNHl46alE=s72-w300-c"width="60"height="60" /><h2><a href="http://grplusbd.blogspot.com/search/label/%E0%A6%AC%E0%A7%8D%E0%A6%B2%E0%A6%97%E0%A6%B8%E0%A7%8D%E0%A6%AA%E0%A6%9F%E0%A7%87%E0%A6%B0%20%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%A5%E0%A6%AE%E0%A6%BF%E0%A6%95"class="series-24100"title="নতুনদের ব্লগস্পট">নতুনদের ব্লগস্পট</a></h2><img alt="tahmid hasan muttaky blogger"src="http://lh4.googleusercontent.com/-9vY0sHlyAnU/AAAAAAAAAAI/AAAAAAAAAMk/Iw85Ju-6awU/s512-c/photo.jpg"class="avatar avatar-60 photo" height="60" width="60" /></div><h4>হয়ে যান প্রফেশনাল!</h4></div><div class="chain-tunes-box"><h3>ইলেকট্রনিকস শিখুন তাওসিফের সাথে</h3><div class="main clearfix"><img class="icon"src="http://rubelttc.mw.lt/photos/rubelttcusbamp.jpg"width="60"height="60" /><h2><a href="http://grplusbd.blogspot.com/search/label/%E0%A6%87%E0%A6%B2%E0%A7%87%E0%A6%95%E0%A6%9F%E0%A7%8D%E0%A6%B0%E0%A6%A8%E0%A6%BF%E0%A6%95%E0%A7%8D%E0%A6%B8"class="series-24100"title="ইলেকট্রনিকস রাজ্য">ইলেকট্রনিকস রাজ্য</a></h2><img alt="tawsif torabi blogger"src="http://lh3.googleusercontent.com/-jpijNi_XBh4/AAAAAAAAAAI/AAAAAAAAB_0/P3R_olWI_KI/s512-c/photo.jpg"class="avatar avatar-60 photo" height="60" width="60" /></div><h4>ইলেকট্রনিকস প্রোজেক্ট বানান!</h4></div><div class="chain-tunes-box"><h3>পড়ুন তাওসিফের লেখা সাইন্স ফিকশনগুলো</h3><div class="main clearfix"><img class="icon"src="http://1.bp.blogspot.com/-wcb_U9JFeQ4/VgWFLq7Lh2I/AAAAAAAABrc/2440YrH7zik/s320/IMG_20141223_141636.jpg"width="60"height="60" /><h2><a href="http://grplusbd.blogspot.com/search/label/%E0%A6%B8%E0%A6%BE%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%B8%20%E0%A6%AB%E0%A6%BF%E0%A6%95%E0%A6%B6%E0%A6%A8"class="series-24100"title="সাইন্স ফিকশন">সাইন্স ফিকশন</a></h2><img alt="tawsif torabi blogger"src="http://lh3.googleusercontent.com/-jpijNi_XBh4/AAAAAAAAAAI/AAAAAAAAB_0/P3R_olWI_KI/s512-c/photo.jpg"class="avatar avatar-60 photo" height="60" width="60" /></div><h4></h4></div>
<div class="chain-tunes-box">
<h3>শিখে নিন Torrent-এর A to Z!</h3>
<div class="main clearfix">
<img class="icon"src="http://2.bp.blogspot.com/-P_vywB0PXTM/Vap9bIfwt7I/AAAAAAAABKk/CMS-yuzxqRo/s400/torrent%2Batoz.png"width="60"height="60" />
<h2>
<a href="http://grplusbd.blogspot.com/search/label/%E0%A6%9F%E0%A6%B0%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%9F%E0%A7%87%E0%A6%B0%20%E0%A6%8F%20%E0%A6%9F%E0%A7%81%20%E0%A6%9C%E0%A7%87%E0%A6%A1%20-%20Torrent%20A-Z"class="series-24100"title="টরেন্ট এ টু জেড">টরেন্ট এ টু জেড</a>
</h2>
<img alt="tawsif torabi blogger"src="http://lh3.googleusercontent.com/-jpijNi_XBh4/AAAAAAAAAAI/AAAAAAAAB_0/P3R_olWI_KI/s512-c/photo.jpg"class="avatar avatar-60 photo" height="60" width="60" />
</div>
<h4>
</h4>
</div>
<div class="chain-tunes-box">
<h3>ছোট মজার গেইমগুলির রিভিউ তাহমিদের সাথে,</h3>
<div class="main clearfix">
<img class="icon"src="https://lh5.ggpht.com/SikrYnCtjufEUJOBIHX3xOEagD6iNoL73m-A6kUX76snVai_67wm0BrIYt6TZrnqHCU=s72-w300-c"width="60"height="60" />
<h2>
<a href="http://grplusbd.blogspot.com/search/label/%E0%A6%9B%E0%A7%8B%E0%A6%9F%20%E0%A6%97%E0%A7%87%E0%A6%AE%E0%A6%B8%20%E0%A6%AE%E0%A6%9C%E0%A6%BE%20%E0%A6%AC%E0%A7%87%E0%A6%B6%E0%A6%BF"class="series-24100"title="ছোট গেমস মজা বেশি">ছোট গেমস মজা বেশি</a>
</h2>
<img alt="tahmid hasan blogger"src="http://lh4.googleusercontent.com/-9vY0sHlyAnU/AAAAAAAAAAI/AAAAAAAAAMk/Iw85Ju-6awU/s512-c/photo.jpg"class="avatar avatar-60 photo" height="60" width="60" />
</div>
<h4>
ছোট গেইমস খেলেও মজা পান!
</h4>
</div>
<div class="chain-tunes-box">
<h3>বিজ্ঞানীদের জীবনকথা পড়ুন সিয়ামের সাথে,</h3>
<div class="main clearfix">
<img class="icon" src="https://2.bp.blogspot.com/-L6ZQ3IxDDws/Vuo67erhe6I/AAAAAAAAALs/OgsPCjPKTTgH29o-nnGVvx19TwPSAlqRQ/s400/1.jpg" width="60"height="60" />
<h2>
<a href="http://blog.grplusbd.net/search/label/বিজ্ঞানীদের%20সংক্ষিপ্ত%20জীবনকথা"class="series-24100"title="বিজ্ঞানীদের সংক্ষিপ্ত জীবনকথা">বিজ্ঞানীদের সংক্ষিপ্ত জীবনকথা</a>
</h2>
<img alt="asfaque siam blogger"src="http://lh3.googleusercontent.com/-hGQl3abRfSo/AAAAAAAAAAI/AAAAAAAAAF4/-vcl-rzgsaE/s512-c/photo.jpg" class="avatar avatar-60 photo" height="60" width="60" />
</div>
<h4>
নিজের জ্ঞান প্রসারিত করুন!
</h4>
</div>
<div class="chain-tunes-box">
<h3>পরিচিত হন কিশোর, মুসা আর রবিনের সাথে,</h3>
<div class="main clearfix">
<img class="icon"src="http://2.bp.blogspot.com/-ZXgAl_T7S40/VfV75p-KTmI/AAAAAAAAAdQ/Am22_gXK_aY/s400/Tin%2BGoyenda%2BVolume-%2B1-1%2B%2528banglabookpdf.blogspot.com%2529.jpg"width="60"height="60" />
<h2>
<a href="http://blog.grplusbd.net/search/label/তিন%20গোয়েন্দা%20সিরিজ"class="series-24100"title="তিন গোয়েন্দার অ্যাডভেঞ্চার">তিন গোয়েন্দার অ্যাডভেঞ্চার</a>
</h2>
<img alt="tahmid hasan blogger"src="http://lh4.googleusercontent.com/-9vY0sHlyAnU/AAAAAAAAAAI/AAAAAAAAAMk/Iw85Ju-6awU/s512-c/photo.jpg"class="avatar avatar-60 photo" height="60" width="60" />
</div>
<h4>
চিনে নিন ভালো করে তাদের!
</h4>
</div>
</div></center>


শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট