Freedom For Blogging Tricks

In this article I'm gonna  explain   How  to  add  attractive image slider to blogger. It will  make  your blog  attractive and You  can  change image by changing Image links. make sure  you  have to use same  pixel images. Follow below steps to add this attractive element to your blog too.


Step 01 - Log in to your blogger dash board.
Step 02 - Select layout
Step 03 - Add a gadget and Select "HTML/Java Script"
Step 04 - Past below cost inside it and save


 <style type="text/css">


#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/AVvXsEi85gKvMSc94-QwcpjRqV8B27iUsAu9m5lYQ52RBSgsE84QSH3YAUb9BKreR2zq1uy-BxHxPeypf8hlWzB2OgXZgXTsjHF9W3w_sp_OrE0LVHaA56kO48c-UCTgMBni0ZukKCPdMGqVIPLE/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/AVvXsEh5T6WIOOcDBg4KiW2gntKaJ9LXE0J5SFS58WewnCaE5XgOlFDLijiPM4lfGi7i2BkzI8yEdzyPC_81IRY2Y60TRxU4g6kKe5cbpKG-C778EUVvvjxuv4rigvCePWs9oo1tmRbmYXaU59pc/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/AVvXsEjqDX28BJPb2fjSlsZ3rT0ChSaDRSzQNPE1UVhzDEJrEXntfa75BWpL2YJEAO_jfqa4t5LBu8LFiWgHZkX86yFkB-yGYhYalaQ_y2lv4M3dUhLPhdg8aaPgmBnxEHLbLWbEV1cJ6aUN4NE1/s320/Google+site+map+submition.png" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhidDhS4HCN3UjFgsqVf8BrEqqc7JPfv0pAImmlIRgJRVfGpVtfLwtA5YeOO8k_F2KR1Dwo1kAzQVJiw-c6ezr_6cH7229tQgUOymCMMmcuMyR_K9INY3Yzj-O3xm3RMq26vGgCzeBw6v43/s320/Meta+tags.png" alt="Add meta tags effectively" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqly32xTqCwUAtazTFStPA598XObvxlzZ1387QVGBOqvQB92SMgJAx5GBM62jgsIFJU9_2TMrOYPuPsy_Y4BDOhMVswxsslmo7uZZWmhFN3QZrms-42FjDKhYrPjMCHCX8eULh8z3smlB/s320/Style+01.png" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtWtuifZauE9fZmsM2pPG1phYqWkJKD2rtpWGZ1koPrZmhHQFunBReORALr0xfTe1VhBEkS0VbqSAF9SmCLhzGElPmIVJTByikOAQ3-dYMwZ0fbtkWw_BTs2qhlrpNCYXNWVzrzzK3s9q/s320/Style+06.png" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDX28BJPb2fjSlsZ3rT0ChSaDRSzQNPE1UVhzDEJrEXntfa75BWpL2YJEAO_jfqa4t5LBu8LFiWgHZkX86yFkB-yGYhYalaQ_y2lv4M3dUhLPhdg8aaPgmBnxEHLbLWbEV1cJ6aUN4NE1/s320/Google+site+map+submition.png" alt="Submit site map to google"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://freedomforbloggingtricks.blogspot.com/" target="_blank">Freedom For Blogging Tricks</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>

Step - 05 you can change image by changing image links

Navigation bar is a most useful section of a web or blog site, because it help visitors to navigate through your posts easy. When we talking about Google adsense program they mostly consider about easy navigation of your blog/web site. But most of the time when we scroll particular page down site navigation bar is hidden.

In past I wrote article about How To Create Animated Recent Posts for Blogger with Thumbnails, Recent Posts Widget for Blogger Text CSS Hover Effect and Related post widgets with thumbnails so in this article I decided to teach how to create a floating Navigation bar. Specially this navigation bar contain 

Back button
Previous button
Home button
Refresh button
Back to top button

 Follow these steps to add this navigation bar to your blog too.

Step 01 - Log in to your blogger account and then dashboard

Step 02 - Select Design and then Edit html

Step 03 - Find below code

]]></b:skin>

Step 04 - Past Below code above the ]]></b:skin> code

#float-menu{position:fixed;top:20%;left:0;border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;background:#EEE}
#float-menu ul{padding:0}
#float-menu li{margin:5px;list-style-type:none}
#float-menu li,#float-menu li a{width:24px;height:24px}
#float-menu li a{float:left}
#float-menu #menu-right,#float-menu #menu-left,#float-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-o_y3TwEjgywGWkEJXfXCU2XnmqrbcfxF6tM_iBXGpyqdmSV4GJGN4k3T0JC57_jTMWKqQ7vDMi6Z53y1GvUEFM4jpM3bPO4Ir2R70oNH0X8CVCMn_Qgb2ThoMlZyORUp_HgbKFgN_obE/s1600/float+menu.png)}
#float-menu #menu-right a{background-position:0 -120px}
#float-menu #menu-right a:hover,#float-menu #menu-right{background-position:-24px -120px}
#float-menu #menu-left a{background-position:0 -24px}
#float-menu #menu-left a:hover,#float-menu #menu-left{background-position:-24px -24px}
#float-menu #menu-random a{background-position:0 -48px}
#float-menu #menu-random a:hover{background-position:-24px -48px}
#float-menu #menu-home a{background-position:0 -72px}
#float-menu #menu-home a:hover{background-position:-24px -72px}
#float-menu #menu-top a{background-position:0 -96px}
#float-menu #menu-top a:hover{background-position:-24px -96px}

Step 05 - Find this code

<b:includable id='main' var='top'>

Step 06 - Past below code just after above code.

<div id='float-menu'>
<ul>
<li id='menu-right'>
<b:if cond='data:olderPageUrl'>
<b:if cond='data:olderPageUrl != data:blog.url'>
<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-left'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:newerPageUrl != data:blog.url'>
<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-random'>
<script type='text/javaScript'>//<![CDATA[
var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
//]]></script>
<script type='text/javaScript'>//<![CDATA[
function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="Reload" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
//]]></script>
</li>
<li id='menu-home'>
<a expr:href='data:blog.homepageUrl' title='Home'/>
</li>
<li id='menu-top'>
<a href='#' title='Back to top' rel="nofollow"/>
</li>
</ul>
</div>

Step07 - Save template and Check your blog.

Comment on this post if is it useful.

Recent Posts Widget by Freedom For Blogging Tricks

This is a live demo of my recent post. In here I have ad my blog address to the home page so you need to change home page to your blog address.

Page/post meta tags describes that what the page or post actually contains. It makes the search engine to crowel your blog more frequently and index your pages in blog fastly.

Follow below steps to add meta tags to individual posts in blogger :

step 1 : Log in to your blogger account and go to blogger dash board

step 2 : click on template and click on edit template.

Step 3 : Find below link in template code

<b:include data='blog' name='all-head-content'/>

Step 4 : Copy past below code, below the above code

<b:if cond='data:blog.url == "url link of your post"'>

<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/>
</b:if>

step 5 :click on save

Remmemer to past your post/page description in DESCRIPTION section and keywords in KEYWORDS section 

Meta description describes what about the content of your blog and search engine can easily recognize/find your blog through meta description.Before add meta description to individual posts on blogger, first we have to enable meta description to blogger.

We give you tutorial of Meta tags inserting in blogger template. You can put Meta tags in Blogger template for better ranking in search engine with follow easy steps.

Step 1: Login to Blogger > Go to Dashboard > Template > Edit Html

Step 2: Search <head> section in Template from Ctrl+F.
 
Step 3: After <head> section put following code in your template.

 <meta content='Your Blog Description' name='description'/>
 <meta content='Keyword1,Keyword2,Keyword3' name='keywords'/>
 <meta content='Author Name' name='Author'/>
 <meta content='Author Email Address' name='Email'/>
 <meta content='all' name='robots'/>
 <meta content='index, follow' name='robots'/>
 <meta content='Language Name' name='language'/>
 <meta content='Country Name' name='country'/>
 <meta content='blogger' name='generator'/>

Step 4: Change you original data to demo data as your need.
Step 5: Save your template and Go to your blog, view page source to see your description and keyword.

You can also add meta description to each posts and pages on your blogger blog. After enable search description in your blogger settings then all posts and pages have search description option.You can see search description option below posts settings right side to your posts editor. You can add meta description to your blog posts and pages while publishing or after publish.So after adding meta description to your blog , add meta description to all posts in your blogger.

After adding meta description to your blog , meta description will appear in search results as snippet.If meta description not appear in search results then add meta description using tags to your blogger template.

Sponsors

Popular Posts

Followers

Labels

Recent Comments

About Me

Blog Archive

Contact Form

Categories

Visitors