BlogTariff


Numerous tools and code scripts are available online for scrolling images, videos, and text items. But most extensively used for controlling list of things like, images, videos, or text in horizontal manner and vertical manner is jCarousel. Basically smart coded plugin developed for controlling to scroll certain items. Sorgalla website offers several version on their site. This code is customizable and most effective to add to blogger with simple and easy tutorials here. BlogTariff modified in simple manner for its readers for execution of copy and paste methods on their blogs. This code works very well on any blogging platform i.e Blogger, Joomla, Wordpress, and others.

What are the advantages by adding this code?

  • In a stylish manner can display certain items like, ebooks, icons, products, images, videos, text and more. 
  • It is totally customizable Script code can add anywhere in the blog, to sidebar, header top, bottom post, footer, body post, etc.

How to install on Blogger Blogs?

By default code is developed in horizontal scrolling and needs can modify and convert it to vertical scrolling also. Let’s begin the tutorials for installing on blogger blog.
Sign into your Blogger account
Click on “Add a Gadget”
Select “HTML/Javascript widget
Copy the below script code and paste in it
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src='http://blogtariff.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script>
<script src='http://blogtariff.googlecode.com/files/mycarousel.js' type='text/javascript'></script>
  <style>

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;
  
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width:425px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  425px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdb1zRY9WHyQGQSurnsZMAopT0TFa2CuNcsDSrXWTYC2QCunfxzIzpfvpezq_tjUNwqzFlKD6HQX2lWWXr7BwfaTu5B6CLLN37LZdmXxMERglHWr2SdNmV09Bot8igXYyEbWRtgxkd5s/s660/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdb1zRY9WHyQGQSurnsZMAopT0TFa2CuNcsDSrXWTYC2QCunfxzIzpfvpezq_tjUNwqzFlKD6HQX2lWWXr7BwfaTu5B6CLLN37LZdmXxMERglHWr2SdNmV09Bot8igXYyEbWRtgxkd5s/s660/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiJ9HvmI43iUtm_Z5Gk50lV7gR9jDI8IWolp9Q40QvHa2SyS-fV_X5EZ5rUdKC7JuxPlJmg2MvZ15G9r5E32bbjMKby532ouSphtJzXM2AsBYLaeLuBYpCP4pNcHLD8VsmiQZx3GIOveg/s660/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdb1zRY9WHyQGQSurnsZMAopT0TFa2CuNcsDSrXWTYC2QCunfxzIzpfvpezq_tjUNwqzFlKD6HQX2lWWXr7BwfaTu5B6CLLN37LZdmXxMERglHWr2SdNmV09Bot8igXYyEbWRtgxkd5s/s660/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
*  Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdb1zRY9WHyQGQSurnsZMAopT0TFa2CuNcsDSrXWTYC2QCunfxzIzpfvpezq_tjUNwqzFlKD6HQX2lWWXr7BwfaTu5B6CLLN37LZdmXxMERglHWr2SdNmV09Bot8igXYyEbWRtgxkd5s/s660/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiJ9HvmI43iUtm_Z5Gk50lV7gR9jDI8IWolp9Q40QvHa2SyS-fV_X5EZ5rUdKC7JuxPlJmg2MvZ15G9r5E32bbjMKby532ouSphtJzXM2AsBYLaeLuBYpCP4pNcHLD8VsmiQZx3GIOveg/s660/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}



  </style>


  <ul id="mycarousel" class="jcarousel-skin-tango">
  

<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>
  

<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>


<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>


<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>


<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>

  </ul>
<center><a href="http://www.blogtariff.com" target="_blank" title="Blog Tariff" >Get this widget</a></center>

Customization

  • Change IMAGE URL with your image URL
  • Change "Description" with your own words point out related to your blog/website
  • Replace ‘Page URL’ with your page/blog post redirecting URL
  • If desired change the width of widget according to location size or else leave it: width:425px
  • If desired change the width of images width:425px

How to add extra image to above code

  • Copy the below code and past it repeating the same following the process
<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>
  • Now after necessary modifications, “Save the widget” and Template
  • Now its ready to view your experiment Sliding and scrolling items on your blog.

Appreciation

If you enjoyed this article and really helped favor us to Subscribe to US

Posted by
Share to:

Post a Comment Gmail ID

Do not Try to Add Spam Comments

Subscribe to: Post Comments (Atom)
 
Top