Add featured post slider in Blogger (homepage)
|
9:14 AM |
No Comments |
- Unique transition effects
- Valid markup
- Flexible configuration
- Auto slide
- Navigation box
- Lightweight (8kb only)
- Linking images
- Fully customizable using CSS
- Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
- Free to use under MIT license
- Compatible with Android and iPhone
Add featured post slider in Blogger (homepage)
Live Demo: Click Here
Codes for copy:
<!-- Crawlist.net Coin Slider CSS -->
<style>
.tsc_clear { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
.sliderContainer { margin:0; padding:0;}
.coin-slider { zoom: 1; position: relative; width:800px;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left;}
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { font-size: 22px; width: 778px; padding: 11px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }</style>
<!-- Crawlist.net Javascript Library -->
<script type="text/javascript" src="https://c7bef9b379dc0bc48bbf02631cdf78357be11070.googledrive.com/host/0B6ENtyPAfM-tY2l5ekxXcWV4cHM/"></script> <!-- jQuery Library (do not call twice on same page) -->
<!-- Crawlist.net Coin Slider JS -->
<script type="text/javascript" src="https://94e98a2008aa792477d832018a4e10511754c51e.googledrive.com/host/0B6ENtyPAfM-tUUlObzZ0MU91eVk/"></script>
<!-- Crawlist.net Coin Slider Settings -->
<script type="text/javascript">
$(function() {
$('#coin-slider').coinslider({
width: 800, // width of slider panel in pixels
height: 400, // height of slider panel in pixels
navigation: true, // prev next and buttons
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms (3000 = 3 seconds)
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: 'random', // random, swirl, rain, straight
hoverPause: true // pause on hover
});
});
</script>
<!-- Crawlist.net Coin Slider Start -->
<div style="width:800px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
<div class="sliderContainer">
<div id="coin-slider">
<a href="post link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
<a href="ipost link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
<a href="post link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
</div>
<div class="tsc_clear"></div>
</div>
</div>
<!-- Crawlist.net Coin Slider End -->
Adding this widget
- First log into Blogger, select your blog,
- Go to ‘Layout’ tab and click ‘add a gadget’ from the below space of header
- Select ‘HTML/JavaScript’ from pop up page;
- Copy and paste given codes in content box, configure and Save
- Now hit ‘View blog’ and hover mouse on slider widget’s editing icon wrench;
- And look bottom of web browser and you will see a line, that contains Widget ID;
- Detect your widget id it generally looks like (HTML1, HTML2, HTML3, Blog1) see image below;
- Then, go to ‘Template’ tab, ‘Edit HTML’ and search for your widget ID (using Ctrl+F or Cmd+F) into code snippet;
- You will see chunks of codes starts with <b:section and ends with </b:section>
<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
<b:widget id='WIDGET ID' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
- Identify them and place this line (see image) Before the codes chunk
<b:if cond='data:blog.url == data:blog.homepageUrl'>
- and at the end of code this line
</b:if>
- And Save template.
- In "post link" place your links and add your post title in ‘place text’
- In "image link" place your image link, you can host image on Blogger; just upload you image; preview them and from address bar copy image’s direct code and place them in Image link; otherwise use Tinypic-Upload your image; then copy links from ‘direct links for layout’. You should use images size of 800px width and 400px height bigger size will be scaled into this size.
- You can delete a slide content by deleting <a> to </a>
- You can add more slide by coping <a> to </a>
- You can also change the default image size by changing value of height and width in case you will have change all height width values.
