Test blog

Friday, 17 January 2014

In a new browser tab, log into your Google Blogging account. You will see a list of your blogs.

Blogspot: List of Blogs

Decide which of your blogs you wish to work on. Click on View blog and a new browser tab will open to display the contents of that blog. Copy the full URL of this blog from the address bar in your browser.
Go back to your list of blogs and select the down-arrow on the right-hand-side of the central Go to Post List button. Select Template from the drop down menu.
At the Template page, click Edit HTML.

Blogger: Template Screen

Now go back to you bing Webmaster Tools tab and add your site by pasting the URL you just copied into the Add a site bar. Click ADD.

Let’s Install the Image Slider to your Blogger Blog

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

<style type="text/css">
/* http://dimpost.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
        
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJ6gcJe5JQFgn6a1PW4O1imPxz3siI2EhbjWAWnDxlLU_vMYZpYZwMxb2r3Ml-iw2SHl5BeKZfZ6_YGdFiOBLNYTRCQCjdj5buK0Qjmm3qG3L_xbeGG6W00lEyJlw_nboUH10TT9PREK0/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px; 
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBjse64OgtERJMnP5oOF85xck-r-KZpUBhBBxm-Om4L-Bhs5k6Vbx9LU1s_o2dJDILCjkGAuWsuS563paeou4h7jpwUypSkRAe6sGjfhoU00bSpKeTdc5e5z__u9U68B1GagMqZ4PXS4q/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider 
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjmkAKAJGAOinGX1j9Vjv8I17HWniYwua9lJtDe3CIaQs3934CuX7hxB101rp8uaCF68bkRzYjOFJnhFO32saK7L1JofmifasqgEPeDndKbZBNV-hKRTp1hOaoVlmwP8Ugh1Xk9J49-CfX/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPYTbHeSugeaYQAh0PO7Mc0paFJBsZq0OjAQpLdE64909OIsg4tH_4YjCPlPCpR95O4mUXcoVM0ohts_lPIuxCYSzy4JW8arK-Cb5MCIYjBT3RiDUNLmyDTv8Maiat2CZmCkC01e3ybcJm/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNh4rFwjBDLTanG2fu9C9ezQbLHZLmrfK9quBDB1T5r0v4vd9OvNHkqTDk0T2sjFSoKtp7tGhbJ7gLePrZnS_npexNxxJZ2tRqZctBQyAXCojr7O05NROpd1-Zt9bgj07JkPnhd0XkQl_S/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsq_wYphpjJu8Xpm9ob5Oq4c-YjpjjlMTz8Wo2lXJ2PK-Q7j8CvIdEppvmv2vazuyXZR0o4b0JmJWZ7wXc59VPU0zzRfsUBnAHQE8tC8MHjglkrH-IgaNyNxO_QCNdsYpBPt_2JMNb107/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggeqyErgy3x0DJLKKGJhbdwaWOHd4HadrWBIb2FYtBwZlrD4tiwIptq6HKSRif7MqFUQjWiatLrEN5343VWJyQ80t2vLBzlSWJJQmaKTzU-aI1aDPMVJ_HdlFcAa7Eg75RnxNBYXX51wAE/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

Lets Step forward to adding this jQuery Image Slider with Thumbnails for Blogspot

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
 overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}

Today we provide you Featured Content Slider for Blogger Using jQuery for content slider on your home page. Every blogger wants to add Featured content Slider for their blog. So don't worry we provide you full tutorial about featured content slider for blogger and give you fully guide to add this on your blog easily. Featured Content Slider helps you to show automatic sliding of your featured content on your home page. This is the great technique to show your most important content as Featured content on your home page. Featured Content Slider also helps to increase page views and decrease bounce rate of your blog. We provide you most used and effective featured content slider with demo.

How to Add Featured Content Slider for Blogger Using jQuery

Please follow below steps to add Featured Content Slider for Blogger Using jQuery:

Step 1

Login into Blogger Account and Go to Blogger Dashboard. Go to Layout at the left panel and click on Add a Gadget Link as shown in below picture.

Step 2

When you click on Add a Gadget link a popup window will open with all available gadgets. Choose HTML/JavaScript from gadgets list as shown in below picture.

Step 3

Now choose your Featured Content Slider design for your blog at below. You can also check over demo with click on view demo picture. After choose your design copy and paste below code to HTML/JavaScript box and click on save button: