1 2 3 4 5
If you like my blog and want to find all the new themes, they race and enter your email and wait for the new

Continue across facebook
subscribe online RSS Feed
Follow me Twitter

All Story From Blog

The Pascal Theme Nivo Featured Posts Slider For Blogger


The Nivo jQuery powered featured posts slider is one of the most popular sliders available.The nivo slider comes in three themes with various options for the design and functionality.I have received lots of requests for a tutorial on using the nivo slider on Blogger so in the next few posts i will show you how to use all three themes or versions of the nivo slider on Blogger
.In this post we will start with the Pascal Theme which looks amazing.The Pascal theme uses the various transitions that make nivo so popular but also has some unique features.The slides appear on a stylish background with a 'Featured Ribbon'
in the top corner and you can optionally add captions and links to the slides.Credits for the Nivo Slider go to Dev 7 Studios, you can see it in action on the demo page.

Step 1.Go to layout > Edit HTML layout-edit-html
Step 2.Click Ctrl and F, and Search for ]]></b:skin>   and Paste the following code Directly Above / Before


/*Start Slider Css*/
/*
* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/


/* The Nivo Slider styles */
#slider{
width:618px;
height:246px;
}
.nivoSlider {
position:relative;

}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/

.theme-pascal.slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHBSSusYfNkruVPXA1INCgX1gAOzL-J1lwy2At6S3PXFXhXbFB8EkJR29pb4Dyv1sA3dn1_Wxaasf7UrEi_Dg0s1uQbJAPwsgbSsVzwqvmr7wc6bpafomPodlFd1OafOolxW9w0epCFMfx/s1600/slider.png) no-repeat;
width:668px;
height:299px;
margin:0 auto;
padding-top:17px;
position:relative;
}

.theme-pascal .nivoSlider {
position:relative;
width:630px;
height:235px;
margin-left:19px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq6M0NwGoz67RfYO7adxqVTEHf7eTdRC1ezW_ZwpdnBLgV-mVO_KD4g3E-gBV5t6zzGbvuoCtYsK3CnmLpkNmzgsaseF5zkmcq5-kq3EQ23G6PUzfz7Yafwlegh_g5IKExJF6Km9y4tapT/s1600/loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:630px; /* Make sure your images are the same size */
height:235px; /* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border:0;
display:block;
}

.theme-pascal .nivo-controlNav {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7habrUGBlsCgUZvXw2ihS4YFrygSnHDiKNJgm0fe3PONb7l6jJxQ9XpV17rsaj5KguhW-GVsJ1USTqHlDZFFwik2xoCtvBIPkcWZZhiNitFRs95Xu-ymD-SfAiKcgzz0Qg7YRUdvvBtHa/s1600/controlnav.png) no-repeat;
width:251px;
height:40px;
position:absolute;
left:200px; /* Tweak this to center bullets */
bottom:-42px;
padding:8px 0 0 82px;
z-index:20;
}
.theme-pascal .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitGWMhiLb3-nJyFLLqHHNpxAzgYXh-HRLZk_IwZsWLul4j23keFrMHlkem64byMdV_AKy4WnX1ROwrndzvvbTJRVL5k5sqMKb2Xec5inQ3n0zm8WIP79JX9js1fa6WW_tn7772OEkRir2s/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-pascal .nivo-controlNav a.active {
background-position:0 -22px;
}

.theme-pascal .nivo-directionNav a {
display:none;
}

.theme-pascal .nivo-caption {
bottom:40%;
left:auto;
right:0px;
width:auto;
max-width:630px;
overflow:hidden;
background:#fff;
text-shadow:none;
font-family: arial, serif;
color:#4c4b4b;
}
.theme-pascal .nivo-caption p {
padding:5px 15px;
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}
.theme-pascal .nivo-caption a {
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}

.theme-pascal .ribbon {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIh9GpzynuYTyEAaKFNU7aV_iwqoPOXPnXG5FaLdYU_BIejXOc2DNZARCSATj5EAb1E5HMAMtX3R3vgKgb1CRU9-nCzdQ9XlCu4DUvn__2YHmuCCeNtvC_1iIsjybSLmxLqc1T1tBef4hy/s1600/ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;
left:-8px;
z-index:300;
}
/*End Slider Css*/

Step 4.Copy and paste the following code directly above </head>
If you have previously added jQuery script to your template remove the line in green.

<!--Start Slider Scripts-->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
<!--End Slider Scripts info @ http://www.ecascad.blogspot.com-->

==========
Adding HTML For The Slides
Step 5. In your Blogger dashboard click Design > Add A Gadget > Choose Html/Javascript.








<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<a href="http://ecascad.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MUT97dM0KQGtEBSDdGsPEXrobAZzpGMlvHTdo_dfHhHQ2NW0XZJlUZA9s9hGRBXMnxtPDAU7ki2iWYy8O5d8VKw544DxeqPM56LSWmJD7M93-DKRcA7W8Fv6dCTWPSV7Ri2VCOsoibZ2/s1600/nemo.jpg" alt="" /></a>
<a href="http://ecascad.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEUmUR-d2Sa9V9-TVug8zQxt2v815u9iH4RvtL_6wFnDpGfHe5igQZs_QIxZgvaJndnlb6Ap7ldudFFMIu-Qiq9pQ6gQ-yID6x4cLu8rt5qrFZpiW5SfTc9gfsz91etDHOtHoCErEQyLH/s1600/toystory.jpg" alt="" title="This is an example of a caption" /></a>

<a href="http://ecascad.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmJ4cxxjbttRaJR4LvksA7J-IguuR0Zzh92VRP_kU1pC3omdO-1iOOsepfg3mRd7kinV0hN14iK9COlGZwZUCCKxiuE67UxIjfRIFrmhbpZN9xpvqubx7yssNuQ_NAxCFQbYzoca0s_yP/s1600/up.jpg" alt="" /></a>

<a href="http://ecascad.blogspot.com/m"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1OdntNdgw_KfkPjFdKUPfampRqvGVdbgWX_dWiLHXj5W8TAgfaI1MX2G8pahBPiHw4LwYlMicDfdVfuHdBfq_cWKarvbvEXobVuyiy_i_m0XeChQlM5Sl9m_4VTDYeC-bNxPBDz8oRNP/s1600/walle.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This is an example of a caption.
</div>

</div>
Save your template and you are Done
التسميات:


0 التعليقات:

Post a Comment

Subscribe to: Post Comments (Atom)