জানোবন্ধু: ওয়েব ডিজাইন

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
সাম্প্রতিক পোস্ট অর্থাৎ Recent Post ওয়েডগেট খুব কাজের ও দরকারি একটি 
জিনিস। এই ওয়েডগেট দ্বারা ভিজিটর খুব সহজেই বুঝতে পারে আপনার ব্লগে বর্তমান
 সময়ে অর্থাৎ সাম্প্রতিক কোন কোন পোস্ট হয়েছে বা নতুন কোন পোস্ট হয়েছে! 
আসলে সব ভিজিটর ত আর সরাসরি ব্লগে প্রবেশ করেনা অনেক ভিজিটর সার্চ ইঞ্জিন 
থেকেও আসে আর তাদের বেশির ভাগ ক্ষেত্রে দেখা যাই তারা সাইড বারে যে সকল 
পোস্ট থাকে সেগুল ভিজিট করে। সেই জন্য আমাদের এই ধরনের পোস্ট ওয়েডগেট 
ব্যবহার করতে হয় ভিজিটর ধরে রাখার উদ্দেশ্যে। সে যাই হোক আপনি যদি মনে করেন
 এটা আপনার ব্লগে ব্যবহার করা যাবে বা ব্যবহার যোগ্য এবং আপনার ব্লগের 
উপকার হবে তবে অবশ্যই ব্যবহার করতে পারেন। তবে কিছু মানুষ ভয় করে বেশি 
ওয়েডগেট ব্যবহার করলে ব্লগ ধির গতি হয়ে যাবে ইত্যাদি। আমি তাদের সঙ্গে একমত
 হ্যাঁ বন্ধু আপনি ঠিক বুঝেন বেশি ওয়েডগেট ব্লগে না ব্যবহার করার পরামর্শ 
আমিও দিব কিন্তু দরকারি জিনিস গুলত অবশ্যই ব্যবহার করতে হবে। তবে আপনার 
ব্লগ ধির গতি মনে হলে অবশ্যই এই পোস্ট দেখুন - " <a href="http://www.esobondhu.com/2015/08/how-to-minifycompress-css-js-image-in-blogger.html" target="_blank">কিভাবে সিএসএস , জাভাস্ক্রিপ্ট এবং ফটোকে সঠিক ভাবে কমপ্রেস করে ব্লগের গতি বাড়াবেন</a>
 " আশাকরি আপনার ব্লগের ধির গতি সমস্যার সমাধান হয়ে যাবে। যাই হোক আর কথা 
না বাড়িয়ে চলুন দেখি আজকের এই ওয়েডগেট কিভাবে ব্লগার ব্লগে যুক্ত করতে হয়। 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKG_xyFk8VPn22GwqRUHJ68GDWSqE0WEXipzbz_cQZpLhtIMQQ_VAEeXSyJbgmCof7_3zIh83An28B1kGxSOCNOfobi5cTi8Mj2tVBNw3F7VimSK0sCZQvpVNvddjv5_-gO0_xhmvfsEU/s1600/RECENT+POST+GALLERY2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKG_xyFk8VPn22GwqRUHJ68GDWSqE0WEXipzbz_cQZpLhtIMQQ_VAEeXSyJbgmCof7_3zIh83An28B1kGxSOCNOfobi5cTi8Mj2tVBNw3F7VimSK0sCZQvpVNvddjv5_-gO0_xhmvfsEU/s1600/RECENT+POST+GALLERY2.jpg" /></a></div>
 
 
</div>
<div style="text-align: center;">
<a class="button green medium" href="http://clonebloggerblogtips.blogspot.in/2015/07/test.html" rel="nofollow" target="_blank">Gallery Style Demo</a></div>
 
 
 
<h2 style="text-align: left;">
কিভাবে ব্লগারে সাম্প্রতিক পোস্ট গ্যালারী যুক্ত করবেন :</h2>
 
 
প্রথমে আপনার ব্লগার ব্লগ লগইন করুন এবং ড্যাশবোর্ড থেকে Template এ ক্লিক করুন এবার Edit HTML এ ক্লিক করে এডিট বক্সে প্রবেশ করুন। 
 
এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে এই ট্যাগটি সার্চ করুন ]]></b:skin> এই ট্যাগ খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন। 
</div>
 
<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css">.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .ad-item{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .ad-item a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .ad-item .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .ad-item:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}</code></pre>
<div dir="ltr" style="text-align: left;">
 
 
এবার একি ভাবে আপনার কীবোর্ড এর CTRL+F প্রেস করে এই </head> ট্যাগ সার্চ করুন খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি পেস্ট করুন। 
</div>
 
<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="Javascript"><code class=" language-javascript"><script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?''+r+"":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="ad-item">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script></code></pre>
<div dir="ltr" style="text-align: left;">
 
 
Save Template এ ক্লিক করুন এবার ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন, তারপর Add a Gadget এ ক্লিক করুন সব শেষে HTML/Javascript এ ক্লিক করে নিচের কোড গুল ফাকা করে বসিয়ে দিন। 
 
</div>
<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"><script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script></code></pre>
 
 
Save এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগ ভিজিট করে দেখুন আশাকরি আপনি 
কাজটি করতে সফল হয়েছেন। তবে এই ওয়েডগেট গুগল ক্রম নতুন ভার্সনে মনে হল কাজ 
করল আবার একবার করল না যাই হোক এটা জিনি বানিয়েছেন তাকা ম্যাসেজ করা হয়েছে 
কোন সমস্যা থাকলে অবশ্যই সমাধান দেওয়া হবে। ভাল থাকবেন সুস্থ থাকবেন। 
আসসালামু আলাইকুম।</div>

কিভাবে ব্লগারে সাম্প্রতিক পোস্ট ( Recent Post Widget ) গ্যালারী যুক্ত করবেন !

সাম্প্রতিক পোস্ট অর্থাৎ Recent Post ওয়েডগেট খুব কাজের ও দরকারি একটি জিনিস। এই ওয়েডগেট দ্বারা ভিজিটর খুব সহজেই বুঝতে পারে আপনার ব্লগে বর্...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
বন্ধুরা আজকে আমি আপনাদের জন্য দারুন একটি Recent Post ওয়েডেগেট নিয়ে এলাম 
এটা আমারও খুব খুব পছন্দের আশাকরি আপনাদেরও খুব ভাল লাগবে । এই বিষয়ে আর 
বেশি কথা বলার নাই তাহলে চলুন নীচে থেকে এর লাইভ ডেমো দেখে নিই । এটা অ্যাড
 করাও খুব সোজা তাহলে চলুন সুরু করা যাক । তাহলে নীচের ডেমো তে ক্লিক করে 
ডেমো দেখে নিন । 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSEfxF3gBS16861-aGv07AvlBbG4LpTIlFngw_B3XWvj1LN8JlS1-B9nQXIKfaxxRTApR4dVNPQ1IfwZ0qUQEAQcrbp5t-33QEU3BJdni8U_i7fRAriaGDmnwjQhwE4JMrIGV3AfPrQKI/s1600/Screenshot_10.png" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSEfxF3gBS16861-aGv07AvlBbG4LpTIlFngw_B3XWvj1LN8JlS1-B9nQXIKfaxxRTApR4dVNPQ1IfwZ0qUQEAQcrbp5t-33QEU3BJdni8U_i7fRAriaGDmnwjQhwE4JMrIGV3AfPrQKI/s1600/Screenshot_10.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
~>> নীচে থেকে লাইভে ডেমো দেখে আসুন ভাল লাগলে আপনার ব্লগে যুক্ত করে নিন ...।।</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<div style="text-align: center;">
<a class="button big blue" href="http://templatedemo786.blogspot.in/" rel="nofollow" target="_blank">LIVE DEMO</a></div>
</div>
 
 
 
<h4 style="text-align: left;">
এবার দেখে নিন কিভাবে অ্যাড করবেন ...</h4>
<div>
</div>
<div>
১// আপনার ব্লগ Log in করুন  > তারপর ড্যাশবোর্ড থেকে Layout  ক্লিক > তারপর Add a Gadget এ ক্লিক করুন > তারপর HTML/Javascript এ ক্লিক করুন > তারপর Content ঘরে নীচের কোডটি কপি করে পেস্ট করুন । </div>
<div>
</div>
<div>
</div>
<div>
</div>
<div class="tgbox">
<style type="text/css"> 
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} 
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif} 
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative} 
ul.rcentside{width:100%;height:500px} 
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none} 
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside 
li:nth-child(3),ul.rcentside li:nth-child(4){display:block} 
ul.rcentside img{border:0;width:100%;height:100%} 
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0} 
ul.rcentside li:nth-child(2){left:0;top:50%} 
ul.rcentside li:nth-child(3){left:50.5%;top:50%} 
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%} 
ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s 
ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s 
ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s 
ease-in-out} 
ul.rcentside 
.overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_NUxj-PvvZXsuQon9KH5gfGQnGARNxpnDH-lQOnAjw5iNpSJ_EUw6_-GPwSQNtYGJCFquUIShMc67V_3C4iR6D1j_Ub-a6iGYKQoh4wEUAGjffZfmzlZSLJzEWZGl26o9PlwiT931Ec/s1600/linebg-fade.png);background-position:50%
 50%;background-repeat:repeat-x} 
ul.rcentside .overlayx,ul.rcentside img{border:4px solid 
#000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} 
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%} 
ul.rcentside 
.overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. 
Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1} 
ul.rcentside 
h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0
 10px;line-height:1.5em;font-family:Georgia,Times,"Times New 
Roman";font-weight:normal} 
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%} 
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%} 
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none} 
.buttons{margin:5px 0 0} 
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative} 
.buttons a::before{content:"";width:0;height:0;border-width:8px 
7px;border-style:solid;border-color:transparent #535353 transparent 
transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%} 
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px} 
</style> 
<div id="featuredpostside"></div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
<script src="http://makingdifferent.github.io/blogger-widgets/featuredposts.js" type="text/javascript"></script> 
<script type='text/javascript'> 
//<![CDATA[ 
FeaturedPostSide({ 
blogURL:"http://asobondhu.blogspot.com", 
 MaxPost:30, 
 idcontaint:"#featuredpostside", 
 ImageSize:300, 
 interval:5000, 
 autoplay:true, 
 tagName:false 
}); 
//]]> 
</script></div>
</div>
 
 
 
নোট  ঃ উপরের blog URL এর জাইগাই আপনার ব্লগ URL বসান , Image Size কত দিতে চান টা ঠিক করে নিতে পারেন লাল রগে ঘিরা উপরে কোডে দেখুন । MaxPost 30 আছে আপনি আপনার পছন্দ মতো দিতে পারেন  । 
 
 
~>> তাহলে আশাকরি বুজতে কোন সমস্যা হলা না সমস্যা হলে জানাবেন আমি 
হেল্প করতে চেষ্টা করবো । আর আমার এই পোস্ট আপনাদের ভাল লাগলে একটি কমেন্ট 
করে জানাতে ভুলবেন না কিন্তু । 
 
 
~>> তাহলে আজাকের মতো এই পর্যন্ত আবারও দেখা হবে ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ।</div>

আপনার ব্লগার ব্লগে যুক্ত করে নিন অসম্ভব সুন্দর একটি Recent Post ওয়েডগেট । আশাকরি আপনাদের দারুন লাগবে!!!

বন্ধুরা আজকে আমি আপনাদের জন্য দারুন একটি Recent Post ওয়েডেগেট নিয়ে এলাম এটা আমারও খুব খুব পছন্দের আশাকরি আপনাদেরও খুব ভাল লাগবে । এই বি...

জানোবন্ধু

Translate

কিভাবে ব্লগারে সাম্প্রতিক পোস্ট ( Recent Post Widget ) গ্যালারী যুক্ত করবেন !

আপনার ব্লগার ব্লগে যুক্ত করে নিন অসম্ভব সুন্দর একটি Recent Post ওয়েডগেট । আশাকরি আপনাদের দারুন লাগবে!!!

Popular Posts