RSS
Twitter
Facebook
Showing posts with label Widgets. Show all posts
blogger tricks × Widgets
Check Out this Pretty Cool Sliding Caption For Images It’s a caption that slides out at the bottom of the image only when the user moves his mouse cursor over anywhere near a small question mark located at the bottom of the image.
Now Save the Template and You're Done.
So far, the effect works without a problem with the latest version of Chrome, FireFox, and Opera but not with Internet Explorer. It hasn’t been tested on Safari yet.
So how do you install it to your blog?
Following are the simple steps to add the Styling :.
- Go to Template >> Edit Html << Proceed, then check Expand Widget Templates.
- Now Search for the ]]></b:skin> Tag in Your Template
- Now Copy the Below Code and Paste it Above/Before ]]></b:skin> Tag.
.capblock { display: block; position: relative; overflow: hidden; margin: 0 20px 20px 0;}.capblock a { color: #fff; text-decoration: none;}.capblock a:hover { color: #ccc; text-decoration: none;}.tbicap { position: absolute; color: #fff; text-decoration: none; background: #000; background: rgba(0,0,0,0.75); padding: 10px 10px; bottom: 5px; left: -10%; max-width: 400px; overflow: hidden; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; -webkit-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;}.tbicap:hover { left: 0; opacity: 1;}.capblock:before { content: "?"; position: absolute; font-weight: 800; background: #000; background: rgba(255,255,255,0.75); text-shadow: 0 0 5px #fff; color: #000; width: 24px; height: 24px; bottom: 10px; left: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 24px; -moz-transition: all 0.6s ease; opacity: 0.75;}.capblock:hover:before { opacity: 0;} Note:- If the Caption is not Displaying Correctly then try to Adjust the Max-width :400px
HOW TO Use This For Images :.
If the Caption To Use the New Sliding Caption On an Image in Your Post,Just Make Sure that You're in HTML Mode as You Enclose Your Image Inside Tags With the Proper Attributes. As Shown Below
<div>
<a href="IMAGE LINK HERE" target="_blank"><img alt="" src="IMAGE URL HERE"/></a>
<div>
<span><a href="POST LINK HERE">CAPTION HERE</a></span></div>
</div>
Now Remember to replace all the necessary values with that of your own. Also, you can remove the <a href=”POST LINK HERE“> and </a> if you just want the caption without the link to render it unclickable.
Hope you guys enjoy this featured Blogger trick of the day.
Via AllBlog Tools
blogger tricks × SEO × Widgets
Using Alt Tags For Images Drives Even more Traffic Especially From the Google Images. It Gives a Proper Naming and Description to the Images. Well there are Many More Scripts to Give an Automatic Alt Title Tags to Images.
But Here is a Simple and Cool Script that you need to Add in Your Template. this is Simple and Doesn't take Much Time. All You Need to Do is the Proper Naming of the Image So that it Suits the Name of the Title.So Give the Image a Proper Naming. Or else You Won't be Able to See the Proper Tags.
This script not only adds an “alt” and “title” tags but also gives a plus ‘+’ symbol if there is space in the name of uploaded image.
But Here is a Simple and Cool Script that you need to Add in Your Template. this is Simple and Doesn't take Much Time. All You Need to Do is the Proper Naming of the Image So that it Suits the Name of the Title.So Give the Image a Proper Naming. Or else You Won't be Able to See the Proper Tags.
This script not only adds an “alt” and “title” tags but also gives a plus ‘+’ symbol if there is space in the name of uploaded image.
How To Add Auto Alt title Tags to Blogger Images :-
A Following are the simple steps to add the Script :.- Go to Template >> Edit Html << Proceed, then check Expand Widget Templates.
- Now Search for the </body> Tag in Your Template
- Now Copy the Below Code and Paste it Above/Before </body> Tag
- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
!!!!!Happy Blogging!!!!!!!!
