How To Create Popular Post With Carousel Slider

Posted by Unknown On 10 comments
In this Tutorial i will show, how to create Popular Posts with carousel slider. The reason for this, I have received some comments asking about how to create popular posts. My last tutorial was about how to show blogger (Popular Posts ) widget only in homepage.  I also posted other tutorial about How to create Multi Column Footer Widget and How to add a Drop Down Menu to blogger. Again this is not easy to do for new comers but is still easy for old ones who have good knowledge of these codes. But still beginners can do by following the steps given. However you can also read some other related articles/posts and i highly recommend this for beginners. So read older post. You can read older post by scrolling down to Related Posts or go back manually. Related posts will helps you to make your blog different from others.

Some Features of Popular Post for blogger are :

  • SEO friendly (not javascript)
  • Dynamic result based on real statistic
  • Easy to custumized
Because of these features listed above, I post this tutorial and make this widget to show popular post with Carousel slider and it can show image and snipped horizontally like this:



Finally, Lets start our work and perform some easy steps:

1: Go To Blogger > Design > Page Elements
2: Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget then skip this step)



If you have Popular Post Gadget then :
3: Click on "Add a Gadget" again and Select a HTML/JavaScript Widget just under the header and paste the following code inside it,


<style>

#slider ol,#slider ul,#slider li
 {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
}

.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:150px;
  height:120px;
}

ol, ul {
 list-style: none;
 }

.wrapper {
 width: 720px;
 margin: 0 auto;
 position:relative;
}

.clear {
 clear: both;
 }

.display-none {
 display:none;
 }

#slider {
 position: relative;
 top: -2px;
 z-index: 1;
 }

#slider .prev {
 position: absolute;
 width: 21px;
 height: 21px;
 display: block;
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
 top: 150px;
 left: -51px;
 }

#slider .next {
 position: absolute;
 width: 21px;
 height: 21px;
 display: block;
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
 top: 150px;
 right: -51px;
 }

#slider #slider-wrapper {
 width: 720px;
 height: 300px;
 padding-top: 40px;
 overflow: hidden;
 z-index: 999;
 position: relative;
 }

#slider #slider-inner {
 width:9780px;
 height:300px;
 position:absolute;
 }

#slider .article {
 width: 150px;
 height: 300px;
 float: left;
 margin-right: 30px;
 }

#slider .article img {
 margin-bottom: 25px;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 }

#slider .article h2 {
 margin-bottom: 15px;
 line-height: 18px;
 }

#slider .article h2 a {
 font-size: 18px;
 color: #404040;
 font-weight: bold;
 text-shadow: 0 1px 0 #fff;
 line-height: 23px;
 }

#slider .article .meta-comments a {
 font-size: 10px;
 font-weight: bold;
 text-transform: uppercase;
 text-shadow: 0 1px 0 #fff;
 }

#slider .article .item-snippet {
 margin-left: 15px;
 }

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>

4: Save it and You are done.

10 comments:

yoshimaru said...

it's just a little im not satisfied about the carousel slider is not moving itself

Goearnmoneynow Admin said...

Great. It is working in my blog, 1001ways2makemoneyonline.blogspot.com. Thank you for your post...

GetZQ said...

Wonderfull!

Puk0 said...

gridslidepopularpost.js The requested URL / was not found on this server
https://puko0.blogspot.com/

chik cchaa said...

you would not really want to deal with those rip-off travel agents”
webcare360

mohit said...

Your style and passion for blogging is contagious.
content

Anonymous said...

Great post. Very useful information. Thanks for this post. If you want to know some steps of creating a carousel post on Facebook in 2021, then visit now!

Anonymous said...

mmorpg oyunlar
instagram takipçi satın al
tiktok jeton hilesi
Tiktok Jeton Hilesi
antalya saç ekimi
referans kimliği nedir
İNSTAGRAM TAKİPÇİ SATIN AL
Mt2 Pvp Serverler
instagram takipçi satın al

Anonymous said...

Smm panel
Smm panel
iş ilanları
instagram takipçi satın al
https://www.hirdavatciburada.com/
WWW.BEYAZESYATEKNİKSERVİSİ.COM.TR
Servis
Tiktok Jeton Hilesi

Techquench IT Solution said...

Thanks for this post. If you want to know some steps of creating a carousel post on Facebook in 2022 , then visit now!

Post a Comment