Create-Automatic All post Slider/Scrolling widget in blogger ... - Hello, friend of Key Solution, in the article you are reading this time with the title Create-Automatic All post Slider/Scrolling widget in blogger ..., we have prepared this article well for you to read and retrieve information from it. Article BLOGGING, Article how to, Article Layout Widget, Article ফ্রি ব্লগার ওয়েবসাইট, which we write, you can understand. Alright, happy reading.

Title : Create-Automatic All post Slider/Scrolling widget in blogger ...
link : Create-Automatic All post Slider/Scrolling widget in blogger ...

Create-Automatic All post Slider/Scrolling widget in blogger ...

Slider/Scrolling Post :

ওয়েবসাইটের সৌন্দর্য মত বৃদ্ধি পায় তত বেশি ওয়েবসাইট এর ট্রাফিক বৃদ্ধি পায় । তাই প্রতিনিয়ত ওয়েবসাইটের সৌন্দর্য হালনাগাদ করা দরকার । নিত্তিনতুনতা ভালো ওয়েবসাইটের একটি বিশেষ গুণ । ওয়েবসাইটে পোস্ট Slider বা Scrolling আকারে Show হওয়া সৌন্দর্য হালনাগাদের ভালো লক্ষণ ।

ব্লগ সাইট যে ভাবে- Automatic All post Slider/Scrolling widget -use করতে পারি  ।

Slider/Scrolling widget step by step :

Step 1 :

Css+html code

<style type="text/css"><br />ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCdGTakDU732baaYxNtLxcKJT-Eo_JwI6KRlcB61WEUmFoZIVPVI1Vw83TmowH6n9DS8cEmO1sZMBKKYWUI5oFl8zpEgGxDlEuop3StL_ScQBv81b4wIaQmnpOP48ZL5Cjer-FP6xyi8w/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}<br />.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}<br />.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}<br /></style><br /><div id="featuredbwidget"></div><br /><link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css"></link><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />//<![CDATA[ featuredbwidget({ listURL:"https://techtonr.blogspot.com/", featuredNum:9, listbyLabel:false, feathumbSize:650, interval:3000, autoplay:true, featuredID:"#featuredbwidget" }); function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptGaF7wklLaghF7eFCtiB8BuSfjLSb6EtjovDEVCj66GXWs79W-j2I5Q32pJW2Z8WwXNhR2NxMDbFDiy1UyI1GrGF-whzZzCfG0c7zQUcyXLn55XMQ7K90_fQkUI7RuKdEMGr-VHi4EM/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+=' <li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/ / /><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};<br />//]]><br /></script>
উপরের css+html কোড কপি করে নিতে হবে ।
অথবা
নিচের ডাউনলোড বাটনে ক্লিক করে html+css কোড ডাউনলোড করে করে নিতে হবে ।

Step 2 :

কালার করা বৃত্তে লেখা listURL খুঁজে বের করতে হবে । কালার করা বক্স এ ওয়েবসাইটের লিংক অ্যাডেসে দিতে হবে ।

Step 3 :

ছবিতে 1(layout) চিহ্নিত জায়গায় ক্লিক করে ছবিতে 2( Add a Gadget)  চিহ্নিত জায়গায় ক্লিক করতে হবে ।

 Step 4 : 

স্টেপ 4 এ বক্সের  অ্যারো চিহ্নিত জায়গায় ক্লিক করতে হবে ।

Step  5 :

কপি লেখা জায়গায় কোড পেস্ট করতে হবে । টাইটেল Slider Post লেখা যেতে পারে বা অন্য কোনো টাইটেল ও দেওয়া যেতে পারে ।
সবশেষে সেভ(save) করতে হবে ।

আমরা এই 5 Step সম্পন্ন করতে পারলে ওয়েবসাইটে সুন্দর একটা Slider/scrolling  পোস্ট তৈরি করতে পারবো । নিচের লিঙ্ক এ ক্লিক করে ওয়েবসাইটের এর নিচে দিকে Slider Post দেখতে পাবেন । Please check

কোনো রকমের সমস্যা থাকলে কমেন্ট করে জানাতে পারেন  এবং অবশ্যই শেয়ার করবেন । ধন্যবাদ..

That's all Articles Create-Automatic All post Slider/Scrolling widget in blogger ...

Past stories Create-Automatic All post Slider/Scrolling widget in blogger ... this time, hopefully can benefit you all. okay, see you in another article posting.

in the article you are reading this time with the title Create-Automatic All post Slider/Scrolling widget in blogger ... with the link address https://keysolution4u.blogspot.com/2020/05/create-automatic-all-post.html

Tweet