Software 24 Hour .com: Blogger Templates

Showing posts with label Blogger Templates. Show all posts

Tuesday, 15 September 2015

Best Free jQuery CSS Image Hover Effect Demos & Plugins

Unknown 22:53 Blogger Templates No comments :

Today i am going to share Free jQuery CSS Image Hover Effects with you that is pretty good.I came across quite a lot of CSS gallery websites that using huge thumbnail to showcase beautiful websites. Some of them are just ordinary thumbnail, but a lot of them have javascript animated caption to convey more information to viewers. In this tutorial, we will learn how to make ordinary thumbnail to something more. This is my second tutorial about thumbnail gallery, if you missed the first one, you might want to read it later -Downloading and demo links are given below. i also have given step by method of using this.

1. HTML


<div class="zitem">
    <a href="#"><img src="1.jpg" alt="Test 1" title="" width="125" height="125"/></a>
    <div class="caption">
        <a href="">Test 1</a>


    </div>
</div>


<div class="zitem">
    <a href="#"><img src="2.gif" alt="Test 2" title="" width="125" height="125"/></a>
    <div class="caption">
        <a href="">Test 2</a>


    </div>
</div>


<div class="zitem">
    <a href="#"><img src="3.png" alt="Test 3" title="" width="125" height="125"/></a>
    <div class="caption">
        <a href="">Test 3</a>


    </div>
</div>

2. CSS

I have added inline comment in the following CSS code. If you want to learn more about CSS, read my previous post 15 CSS Tips and Tricks or, you want to know MORE ABOUT CSS, read my new post - 15 Ways to Optimize CSS and Reduce CSS File Size


.zitem {
    width:125px;
    height:125px;    
    border:4px solid #222;    
    margin:5px 5px 5px 0;
    
    /* required to hide the image after resized */
    overflow:hidden;
    
    /* for child absolute position */
    position:relative;
    
    /* display div in line */
    float:left;
}


.zitem .caption {
    width:125px;
    height:30px;
    background:#000;
    color:#fff;
        
    /* fix it at the bottom */
    position:absolute;
    bottom:-1px; /* fix IE issue */
    left:0;


    /* hide it by default */
    display:none;


    /* opacity setting */
    filter:alpha(opacity=70);    /* ie  */
    -moz-opacity:0.7;    /* old mozilla browser like netscape  */
    -khtml-opacity: 0.7;    /* for really really old safari */  
    opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */


}


.zitem .caption a {
    text-decoration:none;
    color:#fff;
    font-size:12px;    
    
    /* add spacing and make the whole row clickable*/
    padding:5px;
    display:block;
}


img {
    border:0;
    
    /* allow javascript moves the img position*/
    position:absolute;
}

3. Javascript

This is a simple jQuery script with hover effect. What we have to do is calculate the width and height and set it to the image.


    
$(document).ready(function() {


    //move the image in pixel
    var move = -15;
    
    //zoom percentage, 1.2 =120%
    var zoom = 1.2;


    //On mouse over those thumbnail
    $('.zitem').hover(function() {
        
        //Set the width and height according to the zoom percentage
        width = $('.zitem').width() * zoom;
        height = $('.zitem').height() * zoom;
        
        //Move and zoom the image
        $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
        
        //Display the caption
        $(this).find('div.caption').stop(false,true).fadeIn(200);
    },
    function() {
        //Reset the image
        $(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});    


        //Hide the caption
        $(this).find('div.caption').stop(false,true).fadeOut(200);
    });


});

DOWNLOAD SOURCE FILE

DEMO

Superb Advanced Blogger Template

Unknown 22:45 Blogger Templates No comments :

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Download Free

new 2016 Johny Muantab blogger template free download

Unknown 22:41 Blogger Templates No comments :

Template Details :

Platform Type	Blogger / Blogspot
Template Name	Johny Muantab Blogger Template

Template Author	Maskolis
Designer	http://creatingwebsite-maskolis.blogspot.com/
Descriptions	This is another version of Johny Magstore template for blogger store with invoice email. But you can use this template for Paypal payment. Johny Muantab template was made especially for online store with invoice payment method. Design with magazine style blogger template with 3/5 column blogger template and 1 column siderbar in left, 4 column footer, shopping cart with invoice email blogger platform, automatic featured content slider, ads 468 x 60 px ready, pagination for blogger ready, dropdown menu, zooming image, clean design template, and more. This template designed for online store only with daily updates.
Tags	template blog, blogger templates, templates for blogger, templates-blogger, templates for blog, blogspot templates, blog templates, templates for blog, templates para blogspot, blog templates for blogspot, web design, webdesign, website templates, xml, themes, designs, free templates, layouts, blog theme. premium themes, free template downloads If you have any problem in downloading then contact us at 0323-7591466.

Sunday, 13 September 2015

Top Responsive Blogger Templates 2015 You Can Download for Free $29 USD Price Free

Unknown 04:58 Blogger Templates No comments :

Responsive themes and templates allow users to build websites and blogs that look great on any mobile device. These themes are designed to resize and adjust properly to all standard mobile device screen sizes (PCs, Tablets and Mobile Phones). Given the high demand of responsive design, more and more developers are dedicated on developing such templates.

Here are a number of excellent new templates that you can download for free in 2014 if you're just starting on a blog or moving your existing site to a responsive design:

Portfolio Blog

NotePlus Template is a beautiful, free and fast loading blogger template build using Bootstrap. It features a 2 column layout with the sidebar on the right.

Details

Portfolio Blog

Portfolio Blog: As the name suggests, this is a portfolio style template with an elegant and clean design powered by the Isotope jQuery plugin. It features a full width layout with no sidebars and supports 4 widget sections in the footer.

Demo / Download

Blog Safari

A clean magazine style theme with a fluid width/responsive layout designed to adjust well on all screen sizes. It comes with pre-installed Blogger Comments and Google+ Comments system which you can use alternately. An author bio box is displayed at the end of every post - A feature preferred for multi-authored blogs.

Demo / Download

Gadget Mag

Gadget Mag is magazine style blogger template with a Responsive design that adjusts well on all common screen sizes. It features a 3 column layout with powered with jQuery and CSS3. It comes with plenty of pre-installed widgets including thumbnail based featured and popular posts.

Demo / Download

Perk Misty

Perk Misty is another excellent responsive blogger theme ideal for News/Magazine sites, portfolio and even your personal blog. It features a 3 column layout and comes with a pre-installed, customizable recent post widget. Apart from that, the template is totally Adsense ready.

Demo / Download

Docorus

Docorus is pretty-much adapted from the Hueman theme available for wordpress. It features a 3 column, full width, responsive magazine-style design. Docurus pre-includes related, popular post widgets, author bio box and and image slider on the homepage. No matter which niche you're covering, this is a great template you can have.

Demo / Download

Foodie

Foodie, as the name suggests is intended for use on blogs covering food recipies, cooking tips ets. This is yet another theme with a magazine style design. Like all other templates here, it adjusts to all major screen sizes (desktop, pads and mobile phones) and is SEO friendly.

Demo / Download

Enpine

Enpine is a large width template with no sidebar on the home page, the post pages feature a right sidebar with a pre-installed popular post plugin. The template comes with a sticky header for easy navigation. An author box linked to your Google+ account is displayed at the end of every post pages.

Demo / Download

Plazify

Plazify is a fully responsive, quick loading magazine-style theme with two sidebars on the right and includes a slider on the homepage. It is available as both, free and paid. However, the free version does not allow for any customization.

Demo / Download

Sleekify

Sleekify, another cool magazine theme with a sleek look. It features a two column layout with a right sidebar. A $19.99 paid version of theme allows for customization, footer credit removal and support.

Demo / Download

BlackPress

Blackpress by Templateify is a 100% responsive portfolio-style template for your blogspot blogs. It is retina ready and offers is a super clean look with a two column (Right-sidebar) layout. The template is free for use, however if you need to customize it, there is a $19.99 licensed version just for that.

Demo / Download

Portify

If you are looking for a clean, minimalistic blogger template with a responsive layout, Portify is one amazing template you can consider. It features a left sidebar and a widget area on the top. Like all other tempelateify themes covered here, a $19.99 version of this theme allows for customization.

Demo / Download

Wedding Magazine

Wedding Magazine by 'Templateism' features a very clean magazine style design with large image banner on the homepage. Its a 2 column theme with 4 a column footer. The theme is 100% responsive and adjusts well on all screen sizes. Pre-includes related and popular post widgets.

Demo / Download

Gagism

If you intend to run a gag, meme or any image site on blogspot, Gagism by Tempelateism is the best theme you'll find. It features related items below every post, rating system, social buttons and lots of other goodies. Plus there is a Re-blog Button that allows your visitors to share your gags on their blogs while giving a backlink to your site. This will make your gag go viral across different blogs.

Demo / Download

Droid Pluss

Simple, elegant and 100% responsive. Droid Pluss is the perfect choice for a technology blog or news site. The theme includes a colored sidebar on the right, related post plugin, social sharing buttons and more.

Demo / Download

Belastic

Belastic is another nicely designed template for desktop and all mobile devices. It offers unlimited color schemes, thumbnail based post summaries, drop down navigation menu, social sharing widget and more.

Demo / Download

Arvo

Arvo is a two column theme with a grey background. Its a fast loading, SEO optimized blogger theme with couple of handy pre-installed widgets and offers easy customization.

Good Labal Post New Free Responsive Blogger Templates 2014 [Download Now]

Unknown 04:56 Blogger Templates No comments :

With more people now surfing the web with mobile devices, it is becoming increasingly important that your website has a layout that adjusts to multiple screen sizes.

We've previously shared some of the best free responsive templates available for blogger here and here. As more excellent themes are now available for your blogger based blog, here are some select new ones that you can download for free.

Xmax

Xmax is a multi-purpose one page Blogger template. It is specially great for your portfolio or company product site.

Demo Download

BTNT

A decent minimalist responsive blogger theme.. It is ads-ready and comes with pre-installed popular posts and recommended posts widget.

Demo Download

Top 2015 The Journalist: A Simple Responsive Template for Blogger Free Download Now

Unknown 04:53 Blogger Templates No comments :

The Journalist" is a simple blogger template built on the bootstrap framework. It features a fully responsive two column layout that adjusts perfectly to all screen sizes.
This quick loading theme is free and comes pre-installed with a simple text-based related posts and social sharing widget. It is ideal for journalists, writers and bloggers alike.

Demo Download

Profile Box

To add details about yourself in the Profile box on the sidebar, find the following code in the template and replace the information in blue with relevant details about yourself.

<div class='profile-box'>

<!-- Insert Link of your Profile Pic -->
<img class='img-responsive pimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJqqbQmdiohusHFGU4mCWR1G7Sqq6aZqknd7sDqcmdCN0NnFrx72qeC-Yr_rNSpDm0dMiOGrEuIxW1sEZJS6o8QaH3gfB1V5u1FX1rCIn8I9JPYd3x8Bvb5peVv1GK-jWFuTmBBNSOgo/s320/default-avatar.png'/>

<!-- Add Name Here -->
<h4>Wajahat Razzaq</h4>

<!-- A line About Yourself -->
<span>Writer, journalist and a budding academic. I write for the Huffington post.</span>

</div>

Social Links

Link the social icons in the sidebar to your social profiles by modifying the following code in your template. Simply change the code in blue with relevant links to your social accounts.

<div class="contact-box">

<a href="mailto:wajahat-xyz123@gmail.com?Subject=Hey!" target="_top">
<i class="fa fa-envelope-o" rel="tooltip" title="wajahat-xyz123@gmail.com"></i>
</a>

<a href="https://twitter.com/wajahat-xyz" target="_blank">
<i class="fa fa-twitter"></i>
</a>

<a href="https://facebook.com/wajahat-xyz" target="_blank">
<i class="fa fa-facebook"></i>
</a>

<a href="https://plus.google.com/wajahat-xyz" target="_blank">
<i class="fa fa-google-plus"></i>
</a>

<a href="https://youtube.com/wajahat-xyz" target="_blank">
<i class="fa fa-youtube-play" rel="tooltip" title="YouTube"></i>
</a>

</div>

Rich Pins: Show Post Title, Prices, Ratings and More On Pinterest

Unknown 04:52 Blogger Templates No comments :

There are literally tons of ways to get your images noticed on Pinterest. The most discussed and recommended way is to use longer length, attention grabbing images. With the right method used, you'll be able to get more re-pins, more likes and drive more traffic to your site in return.

Since, for most users, getting visitors from Pinterest to our own web pages is the primary reason for using this incredibly popular social media site, there's no reason not to try every trick in the book to make our pins more engaging.

A lot of shared content on Pinterest has the title displayed of the webpage from where the content is actually pinned from, the prices of products, rating from sites covering movies and a lot of other useful information. This makes your pins even more appealing, more informative.

Pinterest introduced this feature as 'Rich Pins'. And it isn't reserved for select sites. You too can enable this feature to display the post title, prices, recipes, movie ratings and more and reap the benefits associated with it. The only condition is that you should be using Pinterest as a business account. If you are a blogger, you can convert your account type to business here: business.pinterest.com/en/

How to Apply For Rich Pins on Pinterest

Pinterest has a detailed guide on applying for Rich Pins here.

1. Once you have your account type set to business, decide what kind of Rich Pin you want to apply for:

2. Next use oEmbed or Semantic Markup (Schema.org or Open Graph templates) to mark the relevant tags in your templates (prices, article title, movie ratings, recipes etc) as detailed in the links above.

3. Once properly marked, visit the Rich Pins Validator and enter the URL of a post from your site. Hit Validate. It should say that your pin has been validated.

4. Finally, click the 'Apply Now' button to apply for Rich Pins to be enabled for your account. Once approved, it will show a message notifying you about the approval.