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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5E0cVrtiveA1GIzLUtswycZABfc6VSMunubIwtNHo8uD7sKO71FMvJeaFLmyqZPgaTRGondtvUcXlmjHlx8byQ7SIscj69JcCHzkW1pmzjT3mlGI5416K6s3S8C6ylElmXnCPkQ151G5g/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2C_ydJNg_2qSjLckXWZBVicEuE9fRd5HsEtQpFLfW8asl9wXurCyx8xRICX3zUK4DGeWGNLeu4FNfoBT9-4hV_DwtJcXZQcfcUe4WO85i8b3BokjmbRDjnRGmDVk0niei061-o70aMms4/s400/torrent+atoz.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ZRwtceeea6BMmBBrZCVQ48gV9mzX9Z72pVXqRCmCxf3P5k_poIhAKqFko1eypWwZR1ihQApozo_CWxYPSuUpY-ZHoOOOB0pSY3l2pNdk574DfrzKL4vebl8hxt1XOCNKoI4mxqOtghEn/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIhzWBmUqlsNgp-wnguzzRMhu7xf9uXKwbXjWJWHrdE72pwy2SJLAmZLRaBA8x2kLYzJJj9WISiXnZtHfr-FE4BDDgDN3JTx0BqyokI06ixVa0fB1vgLXuKSpiDdQffnVKAxkYB_xW3U/s400/Tin+Goyenda+Volume-+1-1+%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>

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন

ব্লগার পোস্ট কাউন্টার উইজেট - Blogger Post Counter Widget

আসসালামু আলাইকুম,

আমি একটা ছোট জাভা স্ক্রিপ্ট কোড করেছি।

এটা আপনার ব্লগার সাইটের জেসন ফিড থেকে সবসময়ের মোট পোস্ট প্রদর্শন করে।

এই কোড আপনি আপনার সাইটের পাশে উইজেটে লাগাতে পারেন।

লেয়াউট থেকে নতুন উইজেট ক্লিক করে এইচটিএমএল/জাভাস্ক্রিপ্ট সিলেক্ট করে নিচের কোড পেস্ট করে দিন। কেবল কোডের শেষে grplusbd.blogspot.com এর জায়গায় প্নার ব্লগার সাইটের লিঙ্ক দিয়ে দিন।

<div class="postnumberfeed">
<style>
div.postnumberfeed{
background: linear-gradient(limegreen, green);
border-radius: 5px;
font-family: siyam rupali;
}
b.postnumberfeed{
background:linear-gradient(red, #D20303);
text-decoration: none;
width: 70%;
box-shadow: 2px 2px 3px black;
border-radius: 5px;
font-family: siyam rupali;
font-size: 20px;
}</style>
<script type="text/javascript">
function mbtlist(json) {
for (var i = 0; i < json.feed.entry.length; i++)
{
var TotalPosts = json.feed.openSearch$totalResults.$t;
  }
var innerHTML = "<center><h3 id='postnumberfeed'>মোট পোস্ট</h3><b class='postnumberfeed'>মোট <font color='yellow'>" +TotalPosts+ "</font> টি পোস্ট পাবলিশ হয়েছে</b></center>" ;
document.write(innerHTML);
}
</script>
<script type="text/javascript" src="http://grplusbd.blogspot.com/feeds/posts/default?alt=json-in-script&callback=mbtlist">
</script>
</div>

ডেমোঃ

বিভাগঃ জাভাস্ক্রিপ্ট ব্লগার উইডগেট

আরও পড়ুন

Blogspot সাইটের জন্য News Feed Ticker - নতুন CSS3 animated ডিজাইন

আসসালামু আলাইকুম,
আপনাদের ব্লগস্পট সাইটের জন্য আজ নিয়ে এলাম আরেকটা উইজেট। এটা ৭০ শতাংশ আমার ডিজাইন করা।
এখানে আপনি টিকার হেডার এবং স্টাইল চেঞ্জ করতে পারবেন।
হোভার অ্যানিমেশন আছে। ট্রাঞ্জিশন ইফেক্টের জন্য আরও সুন্দর দেখায়।
বুলেট ক্যারেক্টারে একটা ছোট ইমেজ আছে, সেখানে আপনার সাইটের লোগোর লিঙ্ক দিয়ে দেবেন।

হোভার

নরমাল

কোডঃ

<style>
table.tickeer{
border-radius: 5px;
background: limegreen;
width: 70%;
box-shadow: 2px 2px 2px black;
text-align: center;
transition: 3s;
}
table:hover.tickeer{
background: white;
transition: 0.96s;
}
td.tuppp{
border-radius: 5px;
font-family: calibri;
color: white;
width: 20%;
display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
background-color: lime;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#7aeb0c, #529d09);
border: 0 none;
text-shadow: 0 -1px 0 #000;
cursor: pointer;
text-shadow: 2px 2px 2px black;
text-decoration: none;
transition: 2s;
}
td:hover.tuppp{
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
transition: 2s;
}
.news {
width:100%;
margin:0 auto;
padding:0 2px;
line-height: 1.4em;
text-align:left;
font:normal 580px siyam rupali;
color:#ff0000;
overflow:hidden;
clear:both;
}
.news a:link, .news a:visited{
color:#ff0000;
text-decoration:none;
}
.news a:hover {
color:#000000;
text-decoration:underline;
}
</style>
<center>
<table class="tickeer">
<tr>
<td class="tuppp">GR+ News Update</td>
<marque>
<td>
<script type='text/javascript'>
var nMaxPosts = 30;
var nWidth = 100;
var nScrollDelay = 20;
var sDirection = "left";
var sOpenLinkLocation= "newtab" ;
var sBulletChar = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwjIv7-cCe0QQF4ZfKFeEBM1W9IJgB813YtH_lJwdhnRp7L17docgcxYrDpc03db9DCVd_XEVputRnRB_xQfdOgA27l3IdRI4rV-kwHTcTGs7c3vXT_nISKxIqGZ4PUF365SMx4voVtmV/s1600/Green+Ranzers+Plus+Stylish.png' height='25px' width='30px' >";
</script>
<script type='text/javascript' src="https://googledrive.com/host/0Bz8X6FgnifH3VEZTNjJ2YXpkS28">
</script>
<script type="text/javascript" src="http://grplusbd.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=30 " ></script>
</td>
</marque></tr>
</table>
</center>

ডেমোঃ

GR+

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন

বোর্ড পরীক্ষার রেজাল্ট গেজেট যুক্ত করে নিন

Powered by Education Board
Created by Tawsif Torabi, Adminstrator, GR+

<div dir="ltr" style="text-align: left;" trbidi="on">
<iframe height="800" scrolling="no" src="http://www.educationboardresults.gov.bd/lite/index.php" width="680"></iframe><br />
<br />
Powered by Education Board<br />
Created by Tawsif Torabi, <a href="http://grplusbd.cf/" target="_blank">Adminstrator, GR+</a></div>

বিভাগঃ ওয়েব ডিজাইন ব্লগার উইডগেট

আরও পড়ুন

ওয়েবসাইট বা ব্লগে পিডিএফ [PDF] ডকুমেন্ট ইম্বেড করুন

আসসালামু আলাইকুম,
কেমন আছেন?
বিজয়ের শুভেচ্ছা সকলকে।

আজ একটা মজার ট্রিক আপনাদের শিখিয়ে দেবো।
ওয়েবসাইট বা ব্লগে পিডিএফ [PDF] ডকুমেন্ট ইম্বেড করবেন।

খুবই সোজা।

আপনার পিডিএফ কোন হোস্টিং সাইটে হোস্ট করে নিন। যেমন গুগল ড্রাইভ, GE.TT ইত্যাদি।

গুগল ড্রাইভে হোস্ট করবেন কিভাবে তা এখান থেকে জেনে নিন।

এখন হোস্ট লিঙ্ক নিচের কোডের "HoSt" লেখায় পেস্ট করে দিন। height বদলিয়ে ইচ্ছেমত দিতে পারেন।

<iframe height="500p" src="HoSt" width="100%">
First Setup Adobe Reader
</iframe>

যেমন, 
<iframe height="500p" src="https://googledrive.com/host/0Bz8X6FgnifH3ZWxzb2YtVHRKN2s" width="100%"></iframe>

ডেমো,



সিম্পল। আশা করি পারবেন। সমস্যায় কমেন্ট করবেন।

খোদা হাফেজ।

বিভাগঃ এইচটিএমএল ওয়েব ডিজাইন ফ্রি হোস্টিং ব্লগার উইডগেট

আরও পড়ুন

বিজয়ের মাসে ব্লগ নতুন রঙে সাজান!

আসসালামু আলাইকুম,কেমন আছেন? বিজয় দিবসের আগাম শুভেচ্ছা।

বিজয়ের মাসে ব্লগে বা সামাজিক সাইটে লাল সবুজের সমাহার দেখা যায়। আসুন শিখিয়ে দেই কিছু উইজেটের কোড যা আমাদের কোডাররা তৈরি করেছে বিজয়ের মাস ডিসেম্বরের জন্য।

অ্যাডমিন অ্যান্ড অথর কন্ট্রোল প্যানেল  

এটা কেবল লগিন করলেই দেখা যাবে।

ডেমোঃ

স্বাগতম! নতুন পোস্ট সকল পোস্ট সেটিংস লগ আউট আমাদের সম্পর্কে

কোডঃ

<span class="item-control blog-admin">
<style>
/* Created and Designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#controlere ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#controlere li {
    float: down;
}

#controlere a:link{
    display: block;
    width: 120px;
    font-weight: bold;
    color: red;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
font-family: siyam rupali;
}
#controlere a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: red;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
font-family: siyam rupali;
}

#controlere a:hover, a:active {
    background-color: #7A991A;
color: black;
}
::-webkit-scrollbar {
    width: 7px;
}
/* Created and Designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #000000;
    -webkit-border-radius: 20px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:linear-gradient(lime, #ff0000);
    -webkit-box-shadow: inset 0 0 6px #000000;
}
::-webkit-scrollbar-thumb:window-inactive {
 background: lime;
}
</style>
<div id='controlere'>
<center><h4>স্বাগতম!</h4></center></b>
<center><img
border="0"
height="128"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09eKHw_M8B_gNeVEOm-1qbZctWD1C11532yTLRRqEBsbJRhdN-bfivoXxQXabibkyi3-ZDqOCCh7diarvu6JR6DQKBQBt5cbT7W7DKTsVl_0_MTaVdP48cmxVQIl7narE0jTtPY_n-qI/s1600/New+Bitmap+Image+%25284%2529.jpeg"
width="124"
/></center>
</br>
<ul>
  <li><a href="https://www.blogger.com/blogger.g?blogID=XXXX#editor/src=header">নতুন পোস্ট</a></li>
  <li><a href="https://www.blogger.com/blogger.g?blogID=XXXX#allposts">সকল পোস্ট</a></li>
  <li><a href="https://www.blogger.com/blogger.g?blogID=XXXX#basicsettings">সেটিংস</a></li>
  <li><a href="http://www.blogger.com/logout.g">লগ আউট</a></li>
  <li><a href="#">আমাদের সম্পর্কে</a></li>
</ul>
</div>
</span>

নতুন স্ক্রল বার 

::-webkit-scrollbar {
    width: 7px;
}
/* Created and Designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #000000;
    -webkit-border-radius: 20px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:linear-gradient(lime, #ff0000);
    -webkit-box-shadow: inset 0 0 6px #000000;
}
::-webkit-scrollbar-thumb:window-inactive {
 background: lime;
}

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন

ব্লগার সাইটের জন্য স্ক্রলিং নিউজ টিকার

আর কথা বাড়াবো না, নিচের কোড কপি করে উইজেটে পেস্ট করে দিন। নিজেই ডিজাইন করেছি।

<table class="tickeer">
<tr>
<td class="tuppp">Leatest News:</td>
<td>
<script type='text/javascript'>
var nMaxPosts = 20;
var nWidth = 100;
var nScrollDelay = 20;
var sDirection = "left";
var sOpenLinkLocation ;
var sBulletChar = "♦";
</script>
<script type='text/javascript'>
var _0x467a=["\x3C\x4D\x41\x52\x51\x55\x45\x45\x20\x62\x65\x68\x61\x76\x69\x6F\x72\x3D\x22\x73\x63\x72\x6F\x6C\x6C\x22\x20\x6F\x6E\x6D\x6F\x75\x73\x65\x6F\x76\x65\x72\x3D\x22\x74\x68\x69\x73\x2E\x73\x74\x6F\x70\x28\x29\x3B\x22\x20\x6F\x6E\x6D\x6F\x75\x73\x65\x6F\x75\x74\x3D\x22\x74\x68\x69\x73\x2E\x73\x74\x61\x72\x74\x28\x29\x3B\x22\x20","\x20\x77\x69\x64\x74\x68\x20\x3D\x20\x22","\x25\x22","\x20\x77\x69\x64\x74\x68\x20\x3D\x20\x22\x31\x30\x30\x25\x22","\x20\x73\x63\x72\x6F\x6C\x6C\x64\x65\x6C\x61\x79\x20\x3D\x20\x22","\x22","\x20\x64\x69\x72\x65\x63\x74\x69\x6F\x6E\x20\x3D\x20\x22","\x22\x3E","\x6C\x65\x66\x74","\x72\x69\x67\x68\x74","\x26\x6E\x62\x73\x70\x3B\x26\x6E\x62\x73\x70\x3B","\x3C\x62\x72\x2F\x3E","\x4E","\x20\x74\x61\x72\x67\x65\x74\x3D\x20\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20","\x20","\x3C\x2F\x4D\x41\x52\x51\x55\x45\x45\x3E","","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x6C\x65\x6E\x67\x74\x68","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x3C\x62\x3E","\x3C\x2F\x62\x3E\x20\x3C\x61\x20","\x20\x68\x72\x65\x66\x3D\x22","\x24\x74","\x74\x69\x74\x6C\x65","\x3C\x2F\x61\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x69\x70\x73\x20\x61\x6E\x64\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x69\x70\x73\x20\x61\x6E\x64\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x30\x25\x3B\x20\x74\x6F\x70\x3A\x20\x30\x70\x78\x3B\x22\x20\x3E\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x4C\x61\x74\x65\x73\x74\x20\x54\x69\x70\x73\x20\x41\x6E\x64\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x4C\x61\x74\x65\x73\x74\x20\x54\x69\x70\x73\x20\x41\x6E\x64\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x30\x25\x3B\x22\x20\x3E\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x6C\x65\x66\x74\x3A\x20\x30\x25\x3B\x22\x20\x3E\x3C\x2F\x61\x3E","\x75\x70","\x77\x72\x69\x74\x65"];function RecentPostsScrollerv2(_0xa740x2){var _0xa740x3;var _0xa740x4;var _0xa740x5;var _0xa740x6;var _0xa740x7;var _0xa740x8;var _0xa740x9;var _0xa740xa;try{_0xa740x6=_0x467a[0];if(nWidth){_0xa740x6=_0xa740x6+_0x467a[1]+nWidth+_0x467a[2];} else {_0xa740x6=_0xa740x6+_0x467a[3];} ;if(nScrollDelay){_0xa740x6=_0xa740x6+_0x467a[4]+nScrollDelay+_0x467a[5];} ;if(sDirection){_0xa740x6=_0xa740x6+_0x467a[6]+sDirection+_0x467a[7];if(sDirection==_0x467a[8]||sDirection==_0x467a[9]){_0xa740x9=_0x467a[10];} else {_0xa740x9=_0x467a[11];} ;} ;if(sOpenLinkLocation==_0x467a[12]){_0xa740xa=_0x467a[13];} else {_0xa740xa=_0x467a[14];} ;_0xa740x7=_0x467a[15];_0xa740x3=_0x467a[16];for(var _0xa740xb=0;_0xa740xb<nMaxPosts;_0xa740xb++){var _0xa740x5=_0xa740x2[_0x467a[18]][_0x467a[17]][_0xa740xb];if(_0xa740xb==_0xa740x2[_0x467a[18]][_0x467a[17]][_0x467a[19]]){break ;} ;for(var _0xa740xc=0;_0xa740xc<_0xa740x5[_0x467a[20]][_0x467a[19]];_0xa740xc++){if(_0xa740x5[_0x467a[20]][_0xa740xc][_0x467a[21]]==_0x467a[22]){_0xa740x4=_0xa740x5[_0x467a[20]][_0xa740xc][_0x467a[23]];break ;} ;} ;_0xa740x3=_0xa740x3+_0x467a[24]+sBulletChar+_0x467a[25]+_0xa740xa+_0x467a[26]+_0xa740x4+_0x467a[7]+_0xa740x5[_0x467a[28]][_0x467a[27]]+_0x467a[29]+_0xa740x9;} ;_0xa740x8=_0x467a[30];if(sDirection==_0x467a[8]){_0xa740x3=_0xa740x3+_0x467a[10]+_0xa740x8;} else {if(sDirection==_0x467a[9]){_0xa740x3=_0xa740x8+_0x467a[10]+_0xa740x3;} else {if(sDirection==_0x467a[31]){_0xa740x3=_0xa740x3+_0x467a[11]+_0xa740x8;} else {_0xa740x3=_0xa740x8+_0x467a[11]+_0xa740x3;} ;} ;} ;document[_0x467a[32]](_0xa740x6+_0xa740x3+_0xa740x7);} catch(exception){alert(exception);} ;} ;
</script>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=30 " ></script>
</td>
</tr>
</table>
<style>
table.tickeer{
border-radius: 5px;
background: white;
width: 100%;
box-shadow: 2px 2px 2px black;
}
table:hover.tickeer{
background: yellow;
}
td.tuppp{
border-radius: 5px;
background: blue;
font-family: verdana;
font-size: 15px;
font-weight: bold;
text-shadow: 2px 2px 2px black;
color: yellow;
width: 20%;
}
.news {
width:100%;
margin:0 auto;
padding:0 2px;
line-height: 1.4em;
text-align:left;
font:normal 580px siyam rupali;
color:#ff0000;
overflow:hidden;
clear:both;
}
.news a:link, .news a:visited{
color:#ff0000;
text-decoration:none;
}
.news a:hover {
color:#000000;
text-decoration:underline;
}
</style>

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন

রেইনবো সার্চ বক্স

অস্থির একটা সার্চ বক্স বানালাম। (অস্থির কিনা জানিনা...)
তবে এটা ফুল রেস্পন্সিভ।
ফন্ট বড় দেখাবে না, মোবাইল ভার্সন সাপোর্ট করবে।
সামান্য হোভার ইফেক্ট আছে।

বেকাতেরা ডিজাইন না ঠিক ...  তবে রেডিয়াস করে দিয়েছি।

রঙের জন্য নাম "রেইনবো সার্চ বক্স"

মুলত ব্লগারের জন্নই কোড করা, তবে অন্য প্ল্যাটফর্মে চালানো যাবে।

Demo

<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shbox {
    background: linear-gradient(red, orange, yellow, green, blue, violet);
    border-radius: 60px 1px 60px 1px;
box-shadow: 2px 3px 4px #000000;
    padding: 20px 10px;
    width: 100%;
}
#shbox:hover {
    background: linear-gradient(red, orange, yellow, green, blue, violet);
  border-radius: 55px 1px 55px 1px;
box-shadow: 2px 3px 4px #000000;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
font-family: siyam rupali;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#shbox input {
    outline: none;
}
#shbox input[type="text"] {
    background: white;
    border-radius: 60px 1px 60px 1px;
    border-color: transparent;
box-shadow: 0 -1px 0 #000;
    font: bold 1.4vw siyam rupali;
    color: black;
    width: 80%;
    padding: 8px 15px 8px 30px;
}
#shbox:hover input[type="text"] {
    background: white;
  border-radius: 55px 1px 55px 1px;
    border-color: transparent;
box-shadow: 0 -1px 0 #000;
    font: bold 1.4vw siyam rupali;
    color: black;
    padding: 8px 15px 8px 30px;
}
</style>
<form action="/search" id="shbox" method="get">
<center><input name="q" placeholder="Type here and press Enter..." size="15" type="text" /></center>
</form>

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন

রেইনবো স্ক্রল বার

আসসালামু আলাইকুম,
কেমন আছেন টেক পাগলা ভাই ও টেক পাগলি বোনেরা?
জানি আল্লাহর অশেষ রহমতে ভালো আছেন সকলেই।

আমার জাভা স্ক্রিপ্ট আর পি এইচ পিতে তেমন কোনও আগ্রহ না থাকলেও সিএসএস অনেক ভালো লাগে।
জিনিসটা সিম্পল, কিন্তু এটায় কাজ করে মজা পাই আমি।

তো অনেকেরই, যারা এই পোস্ট পড়ছেন, তাদের হয় ব্লগ কিংবা ওয়েবসাইট আছে।
তো সকলেই চায় ওয়েবসাইট ইউনিক করে তুলতে।

ইউনিক করতে জাভা স্ক্রিপ্ট আর সিএসএস এর আসলেই কোন তুলনা নেই।

তবে ছোট খাট জিনিসের আপগ্রেডের দিকে কেউ তাকায় না, যেমন স্ক্রল বার।

তো আমি, বয়স মাত্র ১৫। এখনো তেমন ডিজাইনিং শিখে নিতে পারি নাই। কেননা আমি সবই অনলাইনে শিখি, কোথাও কোর্স নেইনি। তাই আমার কাজ গুলো দয়া করে আপ্রিসিয়েট করবেন।

আমার আরও কিছু স্ক্রল বারের ডিজাইন আছে। আগে আমার সবচেয়ে পছন্দেরটা আপনাদের দেবো।



এর নাম "রেইনবো"
রংধনু নামের একটা নাকি নেগেটিভ মিনিং আছে, তাই সেটা আর দিলাম না।

ডেমো দেখুন এই লিঙ্কে।

নিচের কোড কেবল আপনার সাইট বা ব্লগের সিএসএস এ পেস্ট করে দিন। সিএসএস না পেলে আগে পিছে <style> </style> যোগ করে নিন।

কোডঃ

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #000000;
    -webkit-border-radius: 5px 1px 10px 9px;
    border-radius: 10px 1px 10px 1px;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px 1px 10px 9px;
    background: linear-gradient(violet,blue,green,yellow,orange,red);
    -webkit-box-shadow: inset 0 0 6px #000000;
}
::-webkit-scrollbar-thumb:window-inactive {
background: linear-gradient(violet,blue,green,yellow,orange,red);
}

আপনার যদি আমার ডিজাইন ভালো লাগে, তবে একটু সমর্থন দিতে আমার দুটি সাইটে ঘুরে আসবেন।

জিআর+ব্লগার তাওসিফ

বিভাগঃ ওয়েব ডিজাইন ব্লগার উইডগেট সিএসএস

আরও পড়ুন

ব্লগার র‍্যাঙ্কিং পেজ

ব্লগার র‍্যাঙ্কিং পেজ বানিয়ে নিন। নিচের কোড কেবল কোনো নতুন পেজ (পোস্ট নয়, সেটা আপনার ইচ্ছা) খুলে নিচের জাভা স্ক্রিপ্ট কোড পেস্ট করে দিন।

ডেমো

<script type='text/javascript'>
//<![CDATA[
var maxUserNameLength=15;
var txtAuthorLine="[image] <h5> [user] </h5>has published <b> [count] </b> [post]";
var sizeAvatar=150;
var cropAvatar=true;
var urlNoAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0rSU5104zRxeQ7yY79KPMk1p3EP9kqPBdf6Z_M-t-vr__ziD6jaqeRhcBdKosiAGEjXEqdm6yq_F2mHRTSs1_2ipzlJOLDaa3KHo_S-kCGIYjGFhylm7pB5osW6_2k6CyO6LHubcM_7Q/"+sizeAvatar+"/avatar_blue_m_96.png";
function replaceAuthorVars(l,k,p){if(!k||!k.author){return l
}var r=k.author;
var o="";if(r.uri&&r.uri.$t!=""){o=r.uri.$t
}var n=urlNoAvatar;
if(r.gd$image&&r.gd$image.src){n=r.gd$image.src
}if(n=="http://img2.blogblog.com/img/b16-rounded.gif"&&urlNoAvatar!=""){n=urlNoAvatar
}var t="s"+sizeAvatar;
n=n.replace(/\/s\d\d+-c\//,"/"+t+"-c/");
if(cropAvatar){t+="-c"
}n=n.replace(/\/s\d\d+(-c){0,1}\//,"/"+t+"/");
var m=r.name.$t;
var q='<img class="author-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+m+'" src="'+n+'" />';
if(o!=""){q=""+q+""
}if(maxUserNameLength>3&&m.length>maxUserNameLength){m=m.substr(0,maxUserNameLength-3)+"..."
}var s=m;if(o!=""){s=""+s+""
}l=l.replace("[user]",s);
l=l.replace("[image]",q);
l=l.replace("[#]",p);
l=l.replace("[count]",k.count);
if(k.count!=1){l=l.replace("[post]","posts")
}else{l=l.replace("[post]","post")
}return l}var blauthors={};
var blndxbase=1;
function showAuthors(i){for(var p=0;
p<i.feed.entry.length;
p++){var m=i.feed.entry[p];
var o="";if(m.author[0].uri&&m.author[0].uri.$t!=""){o=m.author[0].uri.$t
}var n=m.author[0].name.$t;
if(blauthors[n]){blauthors[n].count++
}else{var q=new Object();
q.author=m.author[0];
q.count=1;blauthors[n]=q
}}if(i.feed.entry.length==500){blndxbase+=500;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+"/feeds/posts/default?redirect=false&max-results=500&start-index="+blndxbase+'&alt=json-in-script&callback=showAuthors"><\/script>');
return}var r=[];
for(var l in blauthors){r.push([l,blauthors[l]])
}r.sort(function(a,b){if(b[1].count-a[1].count){return b[1].count-a[1].count
}return(a[1].author.name.$t.toLowerCase()<b[1].author.name.$t.toLowerCase())?-1:1
});document.write('<div class="blog-author">');
for(var p=0;
p<r.length;
p++){var k=r[p][1];
document.write('<div class="author-line">');
document.write(replaceAuthorVars(txtAuthorLine,k,p+1));
document.write("</div>")
}document.write("</div>")
}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/default?redirect=false&max-results=500&alt=json-in-script&callback=showAuthors"><\/script>');
//]]>
</script>
<style scoped="" type="text/css">
.container{width:96%}
.centered{text-align:center;font-size:90%;margin:0 auto;padding:10px 0 40px 0;width:100%;position:relative}
.author-line {padding:20px;width:150px;height:auto;margin:20px;text-align:center;display:inline-block;background:#f9f9f9;color:#444;opacity:0.9;transition:all 0.6s;}
.author-line:hover {box-shadow:0 0 10px rgba(0,0,0,0.2);background:#fff;opacity:1;}
.author-avatar {vertical-align:middle;margin-bottom:10px;border-radius:3px;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.1);}
.author-line h5{color:#fff;margin:20px auto;padding:6px 12px;background:#7798db;border-radius:3px;transition:all 0.5s;}
.author-line h5:hover{background:#6381c0;}
#sidebar-wrapper {display:none;}
#post-wrapper {width:100%;}
.post-inner {padding:0;}
h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-weight:700;font-size:2rem;color:#999;}
.post-body p,.post-body code {font-size:1.3rem;font-weight:700;}
</style>

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন

ব্লগারের লেটেস্ট কমেন্ট উইজেট

আসসালামু আলাইকুম।
আপনাদের আজ দিবো সুন্দর একটি রিসেন্ট কমেন্ট উইজেট। এই উইজেটের ডেমো

কোড:

<style type="text/css">
.rc{padding-left:24px; padding-top: 6px;}
.rc a:hover {color: #F3903E;text-decoration: none;}
.rc-ico{margin-left:-20px;margin-top:4px;float:left; margin-right:3px}
.rc-ico img {margin-top: -2px;margin-right:5px; border: 2px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out; }
.rc-ico img:hover {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);}
.rc-header{font-size: 13px;}
.rc-header a{}
.rc-body{font-style: italic; font-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}
.rc-footer{font-size:11px; float: right;}
</style>
<script type="text/javascript">
var numRecentComments = 5;
var maxCommentChars = 67;
var trueAvatars = true;
var urlMyAvatar = '';
var urlMyProfile = '';
var cropAvatar = true;
var sizeAvatar = 30;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnyHutMyZwBvNaJUzFF6TxRyE24ezmFJOqvVa__xd0IWPaAHsDzFfnS6k-r1ny6qOGOLBMNyIlWTM9Cn6tNuq6MPq8lH89GviIaqbhxNIi343NslOuztvuhlRooJXN7SGcX4XrQBNFbHC7/"+sizeAvatar+"/anonymous-Icon.jpg";
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var txtMore = '';
var txtWrote = 'commented:';
var txtAnonymous = '';
var maxResultsComments = "";
var numPerPost = 2;
var maxPostTitleChars = 40;
var getTitles = true;
var maxResultsPosts = "";
var txtTooltip = '[user] on &quot;[title]&quot; - [date MM-dd-yyyy hh:mm]';
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href='';
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href=='') {j--; continue; }
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="-";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
}

var authorName = entry.author[0].name.$t;
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = entry.author[0].gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " rc-admin";
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
if(!/#/.test(href)) href += "#comments";
document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
}
}
document.write('<div style="clear:both;"></div></div>');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন

রেইনবো ডিলাইট সার্চ বক্স, আমারই ডিজাইন করা

আরেকটি অশাধারন সার্চবক্স। সম্পূর্ণই ইউনিক। আমাদের বানানো। আল্টিমা গ্রিনের মডিফাই করা ভার্সন।

ডেমো ফটো

সোর্স কোড,

<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shrnbox {
    background: linear-gradient(#7aeb0c, red, #529d09,yellow, blue, white, brown, #ff3300,#FFCC99,red,lime);
    border-radius: 25px;
border-shadow: 4px 2px 2px 9px #000000;
    padding: 20px 10px;
    width: 40%;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#shrnbox input {
    outline: none;
}

#shrnbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7l1vKbYzD5YWMhgQ2mRNz4KrrOSzJJsnEHfQr7q_CNOFzhsaEagwMxonB_eyh5dNf4ZORbcXOgZzfK1QKr235j8gTEZ-EnWQH4-H7ajHacdCOQ1pS8mcJyGQOLRdbof_daHP9TuhHGd1/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    font: bold 12px siyam rupali;
    color: black;
    width: 90%;
    padding: 8px 15px 8px 30px;
}

#btoon-submit {
    display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
color: #000000;
background-color: lime;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#7aeb0c, red, #529d09,yellow, blue, white, brown, #ff3300,#FFCC99,red,lime);
border: 0 none;
border-radius: 3px;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
cursor: pointer;
font-family: siyam rupali;`
}

#btoon-submit:hover {
    background: lime;

}

#btoon-submit:active {
    background: lime
;
    outline: none;
}

#btoon-submit::-moz-focus-inner {
    border: 0;
}
</style>
<br /><br /><br />
<form action="/search" id="shrnbox" method="get">

<center><input name="q" placeholder="টাইপ করুন" size="15" type="text" /></center>
<input id="btoon-submit" type="submit" value="ক্লিক করুন" />
</form>

বিভাগঃ এইচটিএমএল ওয়েব ডিজাইন ব্লগার উইডগেট সিএসএস

আরও পড়ুন

সার্চ বক্সের স্টাইলের সীমা অতিক্রম করি, আসুন.. আলটিমা গ্রিন

নতুন আল্টিমা গ্রিন সার্চ বক্স।

আপনার ভালো লাগবে আসা করি।

জিআর+ এর ওয়েব দিজাইনাররা সারাক্ষন চেষ্টা করে নতুন কিছু আপনাদের দেওয়ার।

আশা করি আপনারা তা সাদরে গ্রহন করবেন।

কোড নিচে, http://ge.tt/428Z6FM2/v/0

<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shbox {
    background: linear-gradient(#7aeb0c, #529d09);
    border: 4px solid lime;
 border-shadow: 4px 2px 2px 9px #000000;
    padding: 20px 10px;
    width: 500px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#shbox input {
    outline: none;
}
#shbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7l1vKbYzD5YWMhgQ2mRNz4KrrOSzJJsnEHfQr7q_CNOFzhsaEagwMxonB_eyh5dNf4ZORbcXOgZzfK1QKr235j8gTEZ-EnWQH4-H7ajHacdCOQ1pS8mcJyGQOLRdbof_daHP9TuhHGd1/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    font: bold 12px siyam rupali;
    color: black;
    width: 90%;
    padding: 8px 15px 8px 30px;
}
#bton-submit {
    display: block;
 font-size: 1.1em;
 font-weight: bold;
 text-transform: uppercase;
 padding: 10px 15px;
 margin: 20px auto;
 color: #000000;
 background-color: lime;
 background: -webkit-linear-gradient(#888, #555);
 background: linear-gradient(#7aeb0c, #529d09);
 border: 0 none;
 border-radius: 3px;
 text-shadow: 0 -1px 0 #000;
 box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
 cursor: pointer;
 font-family: siyam rupali;`
}
#bton-submit:hover {
    background: lime;
}
#bton-submit:active {
    background: lime
;
    outline: none;
}
#bton-submit::-moz-focus-inner {
    border: 0;
}
</style>
<br />
<br />
<form action="/search" id="shbox" method="get">
<center>
<input name="q" placeholder="টাইপ করুন" size="15" type="text" /></center>
<center>
<input id="bton-submit" type="submit" value="ক্লিক করুন" /></center>
</form>

বিভাগঃ এইচটিএমএল ওয়েব ডিজাইন ব্লগার উইডগেট সিএসএস

আরও পড়ুন

ফেসবুক বাটন এখন গাড়িতে ! মানে অ্যানিমেশন গাড়িতে !

আসসালামু আলাইকুম,

আশা করি আপনারা ভাল আছেন।

তো আজ আপনাদের আমার নিজের বানান একটি উইডজেট দেবো।

খুবই সাধারণ একটি ফেসবুক প্লাগইন।

মজার ব্যাপার হল, এতা একটা গাড়ি যা এক পাশ থেকে আরেক পাশে যায়।

আমি .জিআইএফ অ্যানিমেশন এবং সাধারণ এইচটিএমএল ব্যাবহার করে বানিয়েছি।

আপনারাও বানাতে পারেন।

অথবা আমারটি ব্যাবহার করতে পারেন। ইচ্ছা করলে ইমেজ বদলে নিন। আমারটা তেমন ভাল হয় নি।

<marquee direction="right"> <a href="http://www.facebook.com/grplusbd" target="_blank"> <img title="আমরা ফেসবুকে..." hight="35p" width="100p" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRa-1x9621sFQbBpTlJ1u8YJMvLNcla4td1P78_DJTENOmKX_fMDYykkgBku9CYHjNCojF63HxZI5I5ebQAPOsik2U2h6d_bKOeAySzGAtMh_egVx7D9EJDhQf772ldZ59iWJPG0-C6bUL/s1600/Marquee.gif"> </a> </marquee>

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন

গ্রিন বার সার্চ বক্স

আসসালামু আলাইকুম,

আশা করি ভাল আছেন।

আজ আপনাদের একটি সার্চ বক্স উইডগেট দেব।

এটা সম্পূর্ণই আমার ডিজাইন করা।

আমি এটাকে নাম দিয়েছি “ গ্রিন বার ”

সার্চ বক্সের ছবি

    
    

এখানে উইডগেট কোড দেওয়া আছে, 

[একটা সার্চ বক্স আগে থেকে থাকলে সেটি রিমুভ করে নেবেন, নাহলে সিএসএস কনফ্লিক্ত করে সার্চ বক্স ক্রাশ করতে পারে ]

<style> /*Pillowbar Search Box For Blogger by www.grplusbd.cf*/ #searchbox {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gUZ4J2aqpnrvlzOw6Mc_Q2pKHQFadLgEGR0oBqdkefVI37yztMDHOa-L4J0i0mAj9Xxv6at7qCEWTauN5AErvCRUWv2cXWVYBndg4L95-SS91XhKzPl8Nk9moO1Jl1KIXEUcvqrJlmpC/s1600/pop.png) no-repeat;     width: 300px;     height: 50px; } input:focus::-webkit-input-placeholder {     color: transparent; } input:focus:-moz-placeholder {     color: transparent; } input:focus::-moz-placeholder {     color: transparent; } #searchbox input {     outline: none; } #searchbox input[type="text"] {     background: transparent;     margin: 3px 0px 0px 20px;     padding: 5px 0px 5px 0px;     border-width: 0px;     font-family: "siyam rupali";     font-size: 20px;     color: #ff0000;     width: 90%;     display: inline-table;     vertical-align: top; } #button-submit {     background: url() no-repeat;     border-width: 0px;     cursor: pointer;     margin-left: 10px;     margin-top: 4px;     width: 25px;     height: 25px; } #button-submit:hover {     background: url() no-repeat; } #button-submit:active {     background: url() no-repeat;     outline: none; } </style> <form id="searchbox" method="get" action="/search" autocomplete="off">     <input name="q" type="text" size="15" placeholder="কি-ওয়ার্ড লিখে ইন্টার চাপুন" />     <input id="button-submit" type="submit" value="" /> </form>

বিভাগঃ ব্লগার উইডগেট

আরও পড়ুন