Add Awesome CSS,PHP Slider To Blogger
One of the blog masters resources sites mybloggertricks
(proudly hosted at blogger) run colossal html, css, php
campaigns on blogsphere within a couple of years. They got many greetings,
people satisfactions, huge fans and followers on blogger, twitter,
and facebook.
And yet their achievement is sustaining, keeping great pace with the
respective competitors on global web. "Muhammad" started with
photoshop since 2008, jumped at blogging at 2009 and created a beautiful
php template for serving his readers and fan followers including
services like html, css, php, blogger resources, social media tips
and tricks, tech news, and many more. On his services template
he placed a stunning slider which he never shared with his fans or
readers or even on his blog. But today i'd share this fascinating
tutorial with you all. Read below details.
Live Demo
Install Stunning Slider To Blogger
1.First of all go to blogger and log-in your account2. Now go to layout section and pick HTML/JavaScript
3. Now paste the following code inside the box and save it after necessary customization
<style>4. Make sure to place this box above the post section
.slider-btn { width: 195px; height: 39px; background: url(http://services.mybloggertricks.com/css/images/slider-btn.png) no-repeat 0 0; display: block; color: #4a5461; font-size: 17px; line-height: 39px; text-shadow: 1px 1px 1px #ccc; text-align: center; font-weight: bold; }
.slider-btn:hover { background: url(http://services.mybloggertricks.com/css/images/slider-btn-hover.png) no-repeat 0 0; text-decoration: none; color: #fff; text-shadow: 1px 1px 1px #4a5461; }
.slider1 { position: relative; z-index: 5; }
.slider1 .shell { position: relative; }
.slider1 .slider-wrapper { position: absolute; top: -233px; left: 0; }
.slider1 .slider-holder { float: left; display: inline; width: 520px; height: 276px; background: url(http://services.mybloggertricks.com/css/images/home1-slider.png) no-repeat 0 0; position: relative; margin-left: 14px; }
.slider1 .slider-holder .content { width: 469px; height: 242px; position: relative; overflow: hidden; margin: 14px 0 0 26px; }
.slider1 .slider-holder .content ul { list-style: none outside none; position: relative; overflow: hidden; }
.slider1 .slider-holder .content ul li { width: 469px; height: 242px; position: relative; overflow: hidden; }
.slider1 .slider-holder .content .jcarousel-clip { width: 469px; height: 242px; position: relative; overflow: hidden; }
.slider1 .slider-holder .carousel-prev,
.slider1 .slider-holder .carousel-next { position: absolute; top: 114px; width: 52px; height: 53px; display: block; font-size: 0; line-height: 0; text-indent: -4000px; }
.slider1 .slider-holder .carousel-prev { background: url(http://services.mybloggertricks.com/css/images/carousel1-prev.png) no-repeat 0 0; left: -13px;}
.slider1 .slider-holder .carousel-next { background: url(http://services.mybloggertricks.com/css/images/carousel1-next.png) no-repeat 0 0; right: -13px;}
.slider1 .slider-sidebar { float: left; display: inline; width: 350px; margin: 7px 0 0 75px; }
.slider1 .slider-sidebar h2 { font-size: 35px; font-weight: bold; color: #fff; text-transform: none; text-shadow: 1px 1px 1px #459126; margin-bottom: 16px; }
.slider1 .slider-sidebar p { font-size: 14px; line-height: 20px; color: #fff; }
.slider1 .slider-sidebar .slider-btn { margin-top: 28px; }
.slider1 .slider-nav { position: absolute; bottom: -21px; left: 208px; }
.slider1 .slider-nav ul { list-style: none outside none; }
.slider1 .slider-nav ul li { float: left; display: inline; width: 15px; height: 15px; margin-right: 6px; }
.slider1 .slider-nav ul li a { float: left; display: inline; width: 15px; height: 15px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(http://services.mybloggertricks.com/css/images/slider1-pagination.gif) no-repeat 0 0; }
.slider1 .slider-nav ul li a:hover,
.slider1 .slider-nav ul li a.active { background-position: right 0; }
.slider2 { }
.slider2 .shell { position: relative; }
.slider2 .slider-holder { width: 994px; height: 394px; position: absolute; top: -235px; left: -10px; background: url(http://services.mybloggertricks.com/css/images/slider2-holder.png) no-repeat 0 0; }
.slider2 .slider-holder .content { width: 960px; height: 367px; margin: 10px 0 0 17px; position: relative; overflow: hidden; }
.slider2 .slider-holder .content ul { list-style: none outside none; position: relative; overflow: hidden; }
.slider2 .slider-holder .content ul li { width: 960px; height: 367px; position: relative; }
.slider2 .slider-holder .content .jcarousel-clip,
.slider2 .slider-holder .content .jcarousel-container { width: 960px; height: 367px; position: relative; overflow: hidden; }
.slider2 .slider-holder .content ul li .image-holder { width: 450px; float: left; display: inline; }
.slider2 .slider-holder .content ul li .image-holder img { display: block; margin: 30px 0 0 25px; }
.slider2 .slider-holder .content ul li .text-holder { width: 350px; float: left; display: inline; margin: 55px 0 0 35px;}
.slider2 .slider-holder .content ul li .text-holder h2 { font-size: 35px; font-weight: bold; color: #fff; text-transform: none; text-shadow: 1px 1px 1px #459126; margin-bottom: 16px; }
.slider2 .slider-holder .content ul li .text-holder p { font-size: 14px; line-height: 20px; color: #fff; margin-bottom: 15px; }
.slider2 .slider-holder .content ul li .text-holder ul li { background: url(http://services.mybloggertricks.com/css/images/slider-custom-bullet.png) no-repeat 0 5px; padding-left: 20px; font-size: 14px; color: #fff; width: auto; height: auto; margin-bottom: 3px; }
.slider2 .slider-holder .content ul li .text-holder .slider-btn { margin: 25px 0 0 15px; }
.slider2 .slider-holder .slider-bar { height: 50px; background: url(http://services.mybloggertricks.com/css/images/slider2-bar-bg.png) repeat 0 0; position: absolute; bottom: 18px; left: 19px; width: 957px; z-index: 10; }
.slider2 .slider-holder .slider-bar .content { width: 780px; height: 50px; margin: 0 0 0 20px; }
.slider2 .slider-holder .slider-bar .content .jcarousel-clip,
.slider2 .slider-holder .slider-bar .content .jcarousel-container { width: 780px; height: 50px; }
.slider2 .slider-holder .slider-bar .content ul { list-style: none outside none; position: relative; }
.slider2 .slider-holder .slider-bar .content ul li { width: 780px; height: 50px;position: relative; color: #fff; font-size: 15px; line-height: 50px; }
.slider2 .slider-holder .slider-bar .content ul li a { font-weight: bold; color: #fdbb38; font-size: 15px; }
.slider2 .slider-holder .slider-bar .content ul li a:hover { color: #fff; text-decoration: none; }
.slider2 .slider-holder .slider-bar .carousel-down,
.slider2 .slider-holder .slider-bar .carousel-up { position: absolute; top: 2px; display: block; width: 41px; height: 44px; font-size: 0; line-height: 0; text-indent: -4000px; }
.slider2 .slider-holder .slider-bar .carousel-down { background: url(http://services.mybloggertricks.com/css/images/carousel-down.png) no-repeat 0 0; right: 63px;}
.slider2 .slider-holder .slider-bar .carousel-up { background: url(http://services.mybloggertricks.com/css/images/carousel-up.png) no-repeat 0 0; right: 18px; }
</style>
<script src="http://services.mybloggertricks.com/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="http://services.mybloggertricks.com/js/easySlider1.5.js" type="text/javascript" charset="utf-8"></script>
<script src="http://services.mybloggertricks.com/js/jquery.jcarousel.js" type="text/javascript" charset="utf-8"></script>
<script src="http://services.mybloggertricks.com/js/js-func.js" type="text/javascript" charset="utf-8"></script>
<!-- slider 1 -->
<div class="slider1">
<div class="shell">
<!-- slider holder -->
<div class="slider-holder">
<div class="content">
<ul>
<li><img src="Image One Url" alt="" /></li>
<li><img src="Image Two Url" alt="" /></li>
<li><img src="Image Three Url" alt="" /></li>
<li><img src="Image Four Url" alt="" /></li>
<li><img src="Image Five Url" alt="" /></li>
<li><img src="Image Six Url" alt="" /></li>
<li><img src="Image Seven Url" alt="" /></li>
</ul>
</div>
<a href="#" class="carousel-prev">prev</a>
<a href="#" class="carousel-next">next</a>
<div class="slider-nav">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</div>
</div>
<!-- end slider holder -->
<div class="cl"> </div>
</div>
</div>
<!-- end slider 1 -->
Customization Guidance
1. Change image url by changine image-1 url image-2 url image-3 url image-4 url image-5 url2. Your image height and width must be 242px*469px
3. Whenever you add an image at the same time you have to add a link by <li><a href="#">7</a></li>
4. You may notice that there are up to 7 links for 7 images
No comments:
Post a Comment