Blog Tricks

Featured Sliders also known as Slideshows, Image Sliders, Featured Posts Sliders and Carousels are very popular among bloggers.They can be used to link to featured content in your blog or just as an image carousel for your pictures.I have not really covered sliders or slideshows too much on Spice Up Your Blog.The main reason is there are so many tutorials already available for Blogger sliders, i did share 5 of my favorite Blogger Featured Sliders from other blogs not too long ago.

But over the coming weeks i have lined up some very unique Slideshow options including the one in this post that not only can slide through images but also accepts html as slides ! 

The main advantage of this is you can actually have YouTube videos (Or Any Videos) as part of the slideshow.That’s not a thumbnail or image linking to the video it’s the actual video that can be played within the slideshow, How cool is that.

The slider is called the ‘Anything Slider’ and was created by Chris Coyier of Css Tricks, Check them out.There are tons more features but first Lets look at the live demo, you will notice every second slide i have set to be a video.



As you will have seen the slideshow has some cool extra features on the face such as it is both auto scroll and manual scroll, numbered tabs to jump to each slide are below, a start stop option is also available, the slide will also stop when your cursor hovers over a slide.

Add The Anything Slider To Blogger

Step 1. In Your Blogger Dashboard Click Design > Edit Html



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)

]]></b:skin>

Step 3. Copy and paste the following code directly Above / Before ]]></b:skin>

Note – Width And Height Are Highlighted At The Top Of The Code and can be easily changed.Those comfortable enough to do so can also change some of the appearance options.

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)

</head>

Step 5. Copy and paste the following code Directly Above / Before </head>

Step 5. Save your template.

We have now added the Css, jQuery and javascript to make the Featured Slider work next we need to add the actual content.

Adding The Slider And Content

You will want to add the slider below your header across your blog.This position is known as ‘crosscol’ or Cross Column.



Some templates may not have that section available, if your blog doesn’t you can see how to make it available here – Full Width Cross Column Gadget.

We all have it now so you can click ‘Add A Gadget’ and choose ‘Html/Javascript’.

Adding slides could not be easier, in your html/javascript gadget you add an opening tag which is <ul id=”slider1″> at the top and a closing tag </ul> at the bottom and the images or videos go in the middle wrapped in list tags :

<ul id=”slider1″>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
</ul>

This is the code for the slider on the demo page :

<ul id=”slider1″>

<li><iframe width=”640″ height=”390″ src=”http://www.youtube.com/embed/FFVSa4HEW1k?rel=0″ frameborder=”0″ allowfullscreen></iframe></li>

<li><a href=”http://www.spiceupyourblog.com/”><img src=”http://2.bp.blogspot.com/-bw_c8KpBko4/TdK2lnRjg8I/AAAAAAAAD4A/A-RjX-DdeQw/s1600/slide-civil-2.jpg” alt=”” /></a></li>



<li><iframe width=”480″ height=”385″ src=”http://www.youtube.com/embed/DbtrJmjXMOk?rel=0″ frameborder=”0″ allowfullscreen></iframe></li>


<li><a href=”http://www.spiceupyourblog.com/”><img src=”http://3.bp.blogspot.com/-xPits9ZP8Z0/TdK2yoE0JaI/AAAAAAAAD4I/0DhxMUWbQEw/s1600/slide-civil-1.jpg” alt=”” /></a></li>

<li><iframe width=”640″ height=”390″ src=”http://www.youtube.com/embed/bz9LOf9j-DA?rel=0″ frameborder=”0″ allowfullscreen></iframe></li> 

<li><a href=”http://www.spiceupyourblog.com/”><img src=”http://2.bp.blogspot.com/-6A5FpvDIeYA/TdK2_sYHuHI/AAAAAAAAD4Q/YzR7KrrWDEo/s1600/slide-env-2.jpg” alt=”” /></a></li>

</ul>

Highlighted in yellow you can see how the videos were added and highlighted in red you can see how the images were added.That’s it, a unique jQuery featured slider for both images and video.

Thanks to Css Tricks for the very cool Slideshow and there is actually another few versions of this slider we may cover in the future.

Drop Your Comments And Questions Below. 

I’m sure you will have noticed the new Google design as covered in the post Evolving the Google design and experience on the official Google blog.While the changes have been subtle some stand out like the new sleek search bar on results pages.The new search bar has a more modern minimalist look with rounded corners and hover effect.But one new feature i quiet like is as you type your text into the search field an X appears than can be clicked to remove your text.Yes it’s nothing major but still a neat feature none the less.So in this post i will show you how you can re-create the new Google search bar and use it on your blog.

Once on your blog it will look the very same, using jQuery for the X delete button and your blogs default search to generate results.This was covered on the Awesome Queness.Com design blog and with just a few changes i have it ready to go For Blogger.

Lets look at some screenshots and the live demo :

On Google 



On Blogger



On the demo page i have it wide across the top of the posts but you can also easily make it smaller to fit nicely into your sidebar.If you want to actually try it just search for one of the recent posts you can see in the sidebar of that blog.

 

Add The New Google Style Search Bar To Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template 

Step 1. In Your Blogger Dashboard Click Design > Edit Html 



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template) 

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

-Scroll Box Make Sure To Get All The Code.

Note – To change the width of the search bar simply change the line highlighted in yellow from 200px up or down.

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template) 

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

Note – If you have previously added jQuery script to your template you can remove the code highlighted in green.

<script src=’http://code.jquery.com/jquery-1.6.1.min.js’ type=’text/javascript’/>

<script type=’text/javascript’>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

Step 6. Save your template, we have the Css added to style the search bar and the jQuery for the X button now we add the html.

Step 7. Head back to your blogs design page and click Add A Gadget > Choose Html/Javascript.





Step 8. Copy and Paste the following code into the Html/Javascript gadget :

<div id=”searchContainer”>
<form name=”SUYB” action=”/search” method=”get”>
<input type=”text” id=”field” id=”s” name=”q”/>
<div id=”delete”><span id=”x”>x</span></div>
<input type=”submit” name=”submit” id=”submit” value=”Search” />
</form>
</div>

Step 9. Save the html/javascript gadget and you can drag and drop it into place.

And that is it ! A lot of steps but over all i think it was easy enough to implement.Thanks once again to Queness for the original design, make sure to check out more of our Blogger Gadgetsand jQuery tutorials.If your looking for something more basic we have a Simple yet stylish search bar for blogger.
Drop Your Comments And Questions Below. 

This menu concept is from the awesome Free Css Menu, I will cover more of their menus in the future.Now let’s see how to add this one to your blog !

Add The Drop Down Bar Menu To Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and paste the following code Directly Above / before ]]></b:skin>

Note – This is a scroll box make sure to get all the code.

Step 4. Save your template.

That’s the Css added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here – Add Full Width Cross Column Gadgets To Blogger.

Add The Menu Html

In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<div class=”nav”>
<div class=”table”>

<ul class=”select”><li><a href=”#”><b>Sample</b></a></li></ul>

<ul class=”select”><li><a href=”#”><b>Sample Menu</b></a>
<div class=”select_sub”>
<ul class=”sub”>
<li><a href=”#”>Sample Menu</a></li>
<li><a href=”#”>Sample Menu</a></li>
<li><a href=”#”>Sample Menu</a></li>

<li><a href=”#”>Sample Menu</a></li>
<li><a href=”#”>Sample Menu</a></li>
</ul>
</div>
</li>
</ul>

<ul class=”select”><li><a href=”#”><b>Sample Menu</b></a>
<div class=”select_sub”>
<ul class=”sub”>

<li><a href=”#”>Sample Menu 2</a></li>
<li><a href=”#”>Sample Menu 2</a></li>
<li><a href=”#”>Sample Menu 2</a></li>
<li><a href=”#”>Sample Menu 2</a></li>
<li><a href=”#”>Sample Menu 2</a></li>
</ul>

</div>
</li>
</ul>

<ul class=”select”><li><a href=”#”><b>Sample Menu</b></a>
<div class=”select_sub”>
<ul class=”sub”>
<li><a href=”#”>Sample Menu 3</a></li>
<li><a href=”#”>Sample Menu 3</a></li>
<li><a href=”#”>Sample Menu 3</a></li>

<li><a href=”#”>Sample Menu 3</a></li>
<li><a href=”#”>Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>

<ul class=”select”><li><a href=”#”><b>Sample Menu</b></a>
<div class=”select_sub”>
<ul class=”sub”>

<li><a href=”#”>Sample Menu 4</a></li>
<li><a href=”#”>Sample Menu 4</a></li>
<li><a href=”#”>Sample Menu 4</a></li>
<li><a href=”#”>Sample Menu 4</a></li>
<li><a href=”#”>Sample Menu 4</a></li>
</ul>

</div>
</li>
</ul>

</div>
</div>

This is the code that makes up the menu in the demo above.Replace the hash tags (#) with your links and the text with your text.If you take a few minutes to reference the demo and the code you should see how it works.If you want to add more links you can do so in the same way, once again take a few minutes to look at the layout of the code and you will see how its done.

Template Designer Tabs Fix

If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here – Remove Tabs Css.

That’s it a lightweight yet hard hitting drop down bar menu using just Css.Make sure to check out more of our Tutorials Using Css Code.

Drop Your Comments And Questions Below.