Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

2/12/2016

Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript


How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly readable is never going to be anyone's favorite. This is why content must be displayed in an organized, easy to follow and straightforward manner. Nothing works better than a structured grid, in this case.

Posts listed in grid view provide an excellent viewing experience for both the blogger or website owner and the visitors. This is especially true if the grid comes with images that would play with a person's visual inclination. What is great about grids is the seamless and smooth layout, complemented with a structured yet simple architecture. This makes it easier to navigate through a blog archive or product page. The style also enables a website owner to present posts in a more artistic and informative manner, without delving into the details. Suffice to say that a grid view demands creativity to be effortlessly mixed with functionality.

How views can be switched depends on a number of changes in a blog's codes. Some are fairly easy to implement, while others can be a little complex. Not to worry, as there are guides that will be provided. Grid styles also come in huge varieties, with each one designed to cater to a specific audience. Now, are you ready to go on the grid?
 

Features

What features can you expect from a grid style post in Blogger?

  • All the posts will follow the grid style when switching to grid view.
  • While the codes are being customized, the posts are left untouched. Their length, however, could be changed accordingly.
  • Auto Read More will be applied on all posts.
  • Thumbnails are automatically added based on the first picture found in each post.
  • Code is secure and is used across the board. In fact, 99% of bloggers are using a similar code to enable grid style posts in blogger.

What are the benefits of grid style?

  • Quick loading time of posts. Since only the snippets are loaded in certain pages, or a thumbnail and a caption, pulling up a blog archive would be quicker. When loading time is decreased, user experience is greatly enhanced.
  • Professional-looking blog. Without the chaos and concerns on readability, a website can look really clean and professional. Combined with the right colors and images, it can also leave a visual impact.
  • Improved website ranking. Because visitors have to click in order to view the rest of the post, page views of a site will significantly increase. This makes for a better SEO strategy.
Although changes to the CSS codes have to be made to implement the grid style view and make it compatible with a blog's template, all the work will be worth it once it is up and running.

Important:
Before anything make sure that you backup your Blogger template! If have encounter any problems with your edits, you can revert the template back to its previous condition by restoring it from your backup. For this, go to 'Template' in the left menu > click on the 'Backup/Restore' button in the upper right corner and press the 'Download Full Template' button - choose where you want to save the file on your computer and click the 'Save' button.

Now we can safely proceed with editing our Blogger template. If you run into problems, just revert back to your saved template.
 

How to Create Masonry, Grid Style Posts in Blogger

Step 1. Log into your Blogger dashboard and click on the blog where you want to apply the grid style.

Step 2. Go to "Template" located on the left side of the screen and press the "Edit HTML" button.

Step 3. Click anywhere inside the code area and press the CTRL+F keys to open the search box, then type the following tag inside the box (hit Enter to find it):
</head>
Step 4. Now copy the script below and paste it just before the </head> tag:
<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){for(var c=a.split("<"),d=0;d<c.length;d++)c[d].indexOf(">")!=-1&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&a.indexOf(" ",b)!=-1;)b++;return a=a.substring(0,b-1),a+"..."}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e="",f=d.getElementsByTagName("img"),g=posts_no_thumb_sum;f.length>=1?(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'"><img src="'+f[0].src+'" /></a></div>',g=posts_thumb_sum):(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'" title="'+c+'"><img src="https://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" /></a></div>',g=posts_thumb_sum);var h=e+'<div class="post-summary-text">'+removeHtmlTag(d.innerHTML,g)+"</div>";d.innerHTML=h}
//]]>
</script>

Step 5. Find the following code snippet using CTRL+F or Command + F:
<data:post.body/>

Step 6. After pressing the "Enter" key on your keyboard, you may find three occurrences of the above code, replace only the second and the third one with this code below:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if>


Step 7. Now choose one of the styles below, copy the code provided and paste it just above the </head> tag:
 

Simple Grid Design

 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:&#39;Open Sans Condensed&#39;,sans-serif;}a.comment-bubble:before{content:&quot;Comments: &quot;;}.post-header,.post-footer{display:none}
</style></b:if></b:if><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
 

Grid Layout with Post Summary and Thumbnail

grid layout for blogger
 
 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https://1.bp.blogspot.com/-rh-PYvqjzSs/VPTARkPOSVI/AAAAAAAALC4/GyFFEnl2TO8/s1600/blueprint.png);font:100% &#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% &#39;Pacifico&#39;,cursive;}a.comment-bubble:before{content:&quot;Comments: &quot; url(https://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);}.post-header,.post-footer{display:none}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
 

Grid Layout with Text Snippet on Hover

blogger posts
 
 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% &#39;Open Sans Condensed&#39;,sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% &#39;Pacifico&#39;,cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:&quot;Comments: &quot;}.post-header,.post-footer{display:none}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
 

Masonry Layout (Pinterest Like Grid)

masonry layout for blogger
 
 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style type="text/css">
#blog-pager{clear:both;position:absolute;bottom:0;left:0}.blog-feeds{display:none}.post{height:auto;width:100%;padding:0!important;margin:0 0 30px;display:inline-block;text-decoration:none}h3.post-title a{font:bold 95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#fff;text-shadow:3px 2px 2px #222;}h3.post-title,.comments h4{margin:0!important;text-align:center;padding:10px 0;position:absolute;top:10px;width:100%;z-index:200}.post-header{display:none}.date-header{visibility:hidden;height:0!important;width:0!important;padding:0!important;margin:0!important}.posts-thumb{width:100%;height:auto;overflow:hidden;clear:both}.post-body{overflow:hidden;position:relative}.post-body a{text-decoration:none}.post-body img{display:block;width:auto;height:auto;max-width:100%;max-height:none;min-width:100%;min-height:auto;margin:0;padding:0;border:none;outline:none;position:relative}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:120% &#39;Open Sans Condensed&#39;,sans-serif;padding:84px 10% 0;left:0;position:absolute;text-align:center;vertical-align:bottom;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;z-index:10;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1}.post-footer{display:none}a.comment-bubble{color:#fff;text-decoration:none;font:120% &#39;Open Sans Condensed&#39;,sans-serif;right:5px;z-index:222;position:absolute;top:5px;text-shadow:1px 2px 1px #333;}a.comment-bubble:before{content:url(https://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);}.main-inner .column-center-inner{-moz-column-count:3;-moz-column-gap:1px;-webkit-column-count:3;-webkit-column-gap:1px;column-count:3;column-gap:1px;width:100%;padding:0!important}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Please note that the masonry layout might not work if you have a customized template, also older posts will appear vertically (from top to bottom) instead of left to right.

Step 8. Click "Preview" and if everything looks fine, press the "Save Template" button.
 
That's it!
Implementing a grid style view has its pros and cons, but the benefits clearly outweigh the disadvantages. The fact that a website will look visually appealing and professional when set in grid style, is already enough to boost its online reputation. An increase in page views is just the beginning. With the right images and content, a blog will also have better SEO. Most importantly, implementing the changes is not as complex as some might think. With a step-by-step guide available, adding a dynamic view switcher would be completed in no time. 

11/05/2015

4 Flip Trick Download Buttons For Blogger

4 Flip Trick Download button widget for blogger to allow users to download files, videos , codes and videos.
Download Buttons
Flip trick download button widget for blogger that can be used as a button to download files like codes, scripts, videos and any type of file. Built in html and css and completely customizable. It has some of the new and unseen CSS Hover effect which you will definitely like. It has css hover effect and now in this post again we are using the css hover effect but with a flip trick effect that can be put in blogger easily.
In this widget for blogger when you hover your mouse on the icon then images disappeared and the text appears with color changing down arrow button. It is quite complicated to describe that widget but when you will see a demo you will get my point. These are extremely useful when you use the download option in your post for example if you want to insert a download button for users where they can download files. You can use this for any type of file like script, codes, images, rar files, videos and any other if left.

How To Install ?
To add Flip Trick Download Buttons, Go to Blogger >> Template >> Edit HTML and Search for the ]]></b:skin> tag. After finding the ]]></b:skin> tag, just above it paste the following code:
a{
color: #fff;
text-decoration: none;
}
.shreem{
background:#80a9da;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
padding-left:90px;
padding-right:105px;
height:90px;
display:inline-block;
position:relative;
border:1px solid #5d81ab;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
.shreem img{
position:absolute;
left:15px;
top:13px;
border:none;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.shreem .shreem-text{
position:absolute;
font-size:36px;
top:18px;
left:18px;
color:#bde086;
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
opacity:0;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.shreem-avdhoot-text{
padding-top:13px;
display:block;
font-size:30px;
text-shadow:0px -1px 1px #5d81ab;
color:#fff;
}
.shreem-avdhoot-text small{
display:block;
font-size:11px;
letter-spacing:1px;
color:#fff;
}
.shreem-avdhoot-text-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:80px;
border-left:1px solid #5d81ab;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.shreem-avdhoot-text-right span{
width:38px;
height:38px;
opacity:0.7;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
border:1px solid rgba(0,0,0,0.5);
background:#5b5b5b url(http://2.bp.blogspot.com/-k4V7R8sEi5k/Uf-Xo6wr_hI/AAAAAAAABRU/duviyr64Ppc/s1600/arrow_down_black.png) no-repeat center center;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.shreem:hover{
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.shreem:hover img{
opacity:0;
}
.shreem:hover .shreem-text{
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
.shreem:hover .shreem-avdhoot-text-right span{
opacity:1;
background-color:#bc3532;
}
.shreem:active{
position:relative;
top:1px;
background:#fff;
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color:#80a9da;
}
.shreem:active .shreem-avdhoot-text-right span{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

HTML
- Now Copy and paste the html code at the place where you want to show this widget.
- You can insert this animated button in gadgets or inside the page.
<div class="content">
<div class="button-wrapper">
<a href="#" class="shreem">
<span class="shreem-text">$29</span>
<img src="http://1.bp.blogspot.com/-fr-z0Q4LmrI/Uf-XzWVOL8I/AAAAAAAABR8/h4NVzciseaE/s1600/12.png" alt="codes" />
<span class="shreem-avdhoot-text"><small>Full Code &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$19</span>
<img src="http://4.bp.blogspot.com/-1irvPu8pIfc/Uf-XvrfCl6I/AAAAAAAABRc/vq8xZ1Ud81o/s1600/1.png" alt="images" />
<span class="shreem-avdhoot-text"><small>All Free Images &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$24</span>
<img src="http://2.bp.blogspot.com/-LTGOks7lINo/Uf-X0m1eBOI/AAAAAAAABSM/Gl4ShEVLD_0/s1600/15.png" alt="video" />
<span class="shreem-avdhoot-text"><small>Full Video &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$39</span>
<img src="http://1.bp.blogspot.com/-F6oYa8-Mhe4/Uf-X7mRlBQI/AAAAAAAABTo/PSxwmvN9O6k/s1600/9.png" alt="All files" />
<span class="shreem-avdhoot-text"><small>Free Files &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a></div></div></div>
That's all you have to do. So this was the simplest way to add animated buttons widget for blogger. A simple copy and paste code.
If you like it, please, don't be hesitate to share or like this post. Thank you! 

How to Add Zoom Effect To Your Blog Images On Mouse Hover

CSS is really very powerful and useful tool today , We can different types of the effects to images , buttons and text on your Blog. It very easy and simple to implement on Blogger blogs. In the previous post we discussed about adding rollover effect to your images on your Blogger blog. Now we are going to discuss about adding zoom over effect to Blogger images .

Zoom hover effect means , when you hover you mouse cursor on an image , the image size will increase.

1. Log in to Blogger
2. Now go to "Template" 
3. Find next code (CTRL + F) ]]></b:skin> and just above him, add next code:
.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Click on Save template

How To Activate On Images

Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.
Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"

If you are adding it to any other part on your blog, you can use the following code.
<a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL"/></a>

Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!

11/02/2015

How to Create Rounded Images with CSS

Do you want to display circular images on your website? With CSS3, this can be done with in few seconds. You can use CSS border-radius property to make rounded images. Just add below CSS code into your style-sheet.
.img-rounded {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

If you are using Blogger, go to "Edit HTML" and add it just before ]]></b:skin> tag.

Now when you want to make an image circular, just add "img-rounded" CSS class into it. Look at the example below:
<img class="img-rounded" src="https://1.bp.blogspot.com/-DRZxqqXOMtE/V7D9bT9uH6I/AAAAAAABNCs/_yJ3JJBmTOoRwylgeXIY9yhHmAz_j6txQCLcB/s320/df50754a21636a29dbd50bff8190e9fe%255B1%255D.jpg" />

Result:
Rounded Images with CSS


10/08/2015

How to Add jQuery i CSS3 Magnifying Glass

Idea came by surfing web and saw on some site how they made this awesome effect. There is similar effect on my blog, maybe better, but this one isn't bad at all on contrary, you will see and you will lke it 100%. Take a look at the site I mentioned above, you may find some solution how to implement this hack. You have to know CSS, HTML i jQuery for this. Here is one way  - Zoom Effect 1  ,read it, it's cool. The only diference is in codes and style. This one is a little harder for beginners.
 Magnifying Glass


 HTML
 <img class="magniflier" src="http://4.bp.blogspot.com/-Qz-_RUSyXZo/UsdMfAz96jI/AAAAAAAARI8/qVzSQxXDsIg/s1600/iphone-5-thumb%5B1%5D.jpg" width="460"/>

Replace "image.jpg" with your image URL

CSS
.glass {
  width: 170px;
  height: 170px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  /* Multiple box shadows to achieve the glass effect */
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    display: none;
}

CSS gives you style and make Magnify


jQuery
$(function() {
  var native_width = 0;

  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var ui = {
    magniflier: $('.magniflier')
  };
  // Connecting to the magnifying glass
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);
    $('body').append(div);
  }
  // All the magnifying will happen on "mousemove"
  var mouseMove = function(e) {
    var $el = $(this);
    // Container offset relative to document
    var magnify_offset = cur_img.offset();
    // Mouse position relative to container
    // pageX/pageY - container's offsetLeft/offetTop
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
 
    // The Magnifying glass should only show up when the mouse is inside
    // It is important to note that attaching mouseout and then hiding
    // the glass wont work cuz mouse will never be out due to the glass
    // being inside the parent and having a higher z-index (positioned above)
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {
      magnify(e);
    }
    else {
      ui.glass.fadeOut(100);
    }
    return;
  };
  var magnify = function(e) {
    // The background position of div.glass will be
    // changed according to the position
    // of the mouse over the img.magniflier
    //
    // So we will get the ratio of the pixel
    // under the mouse with respect
    // to the image and use that to position the
    // large image inside the magnifying glass
    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";
 
    // Calculate pos for magnifying glass
    //
    // Easy Logic: Deduct half of width/height
    // from mouse pos.
    // var glass_left = mouse.x - ui.glass.width() / 2;
    // var glass_top  = mouse.y - ui.glass.height() / 2;
    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;
    //console.log(glass_left, glass_top, bg_pos)
    // Now, if you hover on the image, you should
    // see the magnifying glass in action
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos
    });
    return;
  };
  $('.magniflier').on('mousemove', function() {
    ui.glass.fadeIn(100);
 
    cur_img = $(this);
    var large_img_loaded = cur_img.data('large-img-loaded');
    var src = cur_img.data('large') || cur_img.attr('src');
    // Set large-img-loaded to true
    // cur_img.data('large-img-loaded', true)
    if (src) {
      ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'
      });
    }
    // When the user hovers on the image, the script will first calculate
    // the native dimensions if they don't exist. Only after the native dimensions
    // are available, the script will show the zoomed version.
    //if(!native_width && !native_height) {
      if (!cur_img.data('native_width')) {
        // This will create a new image object with the same image as that in .small
        // We cannot directly get the dimensions from .small because of the
        // width specified to 200px in the html. To get the actual dimensions we have
        // created this image object.
        var image_object = new Image();
        image_object.onload = function() {
          // This code is wrapped in the .load function which is important.
          // width and height of the object would return 0 if accessed before
          // the image gets loaded.
          native_width = image_object.width;
          native_height = image_object.height;
          cur_img.data('native_width', native_width);
          cur_img.data('native_height', native_height);
          //console.log(native_width, native_height);
          mouseMove.apply(this, arguments);
          ui.glass.on('mousemove', mouseMove);
        };


        image_object.src = src;
       

        return;
      } else {
        native_width = cur_img.data('native_width');
        native_height = cur_img.data('native_height');
      }
    //}
    //console.log(native_width, native_height);
    mouseMove.apply(this, arguments);
    ui.glass.on('mousemove', mouseMove);
  });
  ui.glass.on('mouseout', function() {
    ui.glass.off('mousemove', mouseMove);
  });
});

Final Words. 
If you want to get back your pictures to normal, without magnifying, simply switch   <img class="magniflier"  to normal code which was before you added this one.

That's it, if you can handle, please, lieve a comment, that would be so valuable, if not, we will try to find some solution, jQuery and CSS are hard to manage but nothing is impossible. Happy Blogging dear friends !


5/14/2015

Best CSS3 Animated Download Button for Blogger


CSS3 Animated Download Button for Blogger
Once you have seen the demo, to add this animated download button to your blog posts follow the below steps.

This button is made up of Pure CSS3 i.e. without the usage of any Images or JavaScript. This button may be really helpful for game/software download blogs. So a live working demo of this button can be seen by clicking the above button. You will see the button in the codepen.

Adding the CSS in the Template
Go to Blog Title → Template → Edit HTML and search for the code </body> and paste the below given code just above </body>.
<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}

 /* Get this button at http://blogger-templatees.blogspot.com */
.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}

.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;

}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>
After adding the code save the template and follow the next step.

Adding the Button
So as we have added the CSS we just need to add the HTML in the desired place. So whenever you want to add this button to your post just switch the post editor to HTML from Compose and add the below HTML.
<div class="abt-button">
      <a href="#">Download</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div>
After adding the HTML change # with the URL of the file to be downloaded. Change 1.2MB .zip with the files size and extension.
You are done now. Now you and your visitors can see this awesome Pure CSS3 animated download button in your blog.

3/04/2015

Subtle CSS3 Menu With Stretchy Searchbox

So this is another CSS experiment I did a while ago, I tried to create the same search box feature as on apple.com that stretches and manipulates widths of the menu. But I wanted to use only CSS. It falls back well in older browsers, Just no transitions are supported. Only image used is for the search icon - too lazy to do the CSS for it ;)
CSS



HTML
<div>
<div class="navMenu expander">
<form action="">
<input type="text" />
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Gallery</a>
<a href="#">Stores</a>
<a href="#">Contact</a>
</form>
</div>
</div> 

This is it. Now when you have the full code sjust copy it inside the gadget and save. You are done. If you liked this Subtle CSS3 Menu With Stretchy Searchbox Widget For Blogger then please share it and write comments as your feedback.

2/09/2015

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we'll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
Mega Drop-Down Menu
Step 1. Log in to your blogger dashboard.
Step 2. Select your blog.
Step 3. Go to Blogger Dashboard > Design > Edit/Page Layout.
Step 4. Click Add a Gadget below header.
Step 5. Choose HTML/JavaScript widget.
Step 6. Paste below code and save it.

Replace values and URLs with your feed title/username
That's all you have to do. So this was the simplest way to add Kick-Butt CSS3 Mega Drop-Down Menu for blogger. A simple copy and paste code.
Now when you added effect, feel free to share, please leave a comment if you like and that's happy bloging.

2/06/2015

How To Create Polaroid Effect On Images With Ribbon Frame

We have seen a CSS image gallery but this time we are coming with more advanced features. We will give Polaroid effect to your images and create a stunning image gallery. This is built in html and css. We have done that every thing which makes your gallery look awesome. This Polaroid effect can be given to any set of images.
Polaroid Effect On Images With Ribbon Frame

You can see in the demo how beautiful your image set can look. It is a much better way than randomly uploading images which looks ugly and does not give a professional look to your blog.  You just have to copy the code and paste it where you want this galley to appear which will create a Polaroid effect on your images.
You can edit the caption and can change the effects as well if you know a little about CSS.

You can use this in two ways.

- Inside the post to give your images a new look.
- Use it as a gadget in the sidebar.

How to add this Polaroid effect?
First, go to blogger.
Copy the HTML code and paste it inside the post. (Go to html mode then compose mode).
Then copy the CSS code.
imagemania, imagecaption {
display: block;
}
#imagoroid{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#imagoroid imagemania{
float:left;
position:relative;
width:200px;
margin:10px 20px;
padding: 6px 8px 10px 8px;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background: #eee6d8;
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
}
#poaroid imagemania:nth-child(even) {
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#imagoroid imagemania:before {
content: '';
display: block;
position: absolute;
left:5px;
top: -15px;
width: 75px;
height: 25px;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#imagoroid imagemania:nth-child(even):before {
left:150px;
top: -15px;
width: 55px;
height: 25px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#imagoroid imagecaption{
text-align:center;
font-family: 'Reenie Beanie', cursive; /*Reenie Beanie is available through Google Webfonts http://code.google.com/webfonts/specimen/Reenie+Beanie*/
font-size:1.3em;
color:#454f40;
letter-spacing:0.09em;
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
#imagoroid imagemania{
-pie-background: linear-gradient(#ede1c9, #fef8e2 20%, #f2ebde 60%);
behavior: url(assets/pie/PIE.htc);
position:relative; /*required to make PIE work*/
padding-top:10px\9;
padding-right:10px\9;
}
And go to the template and click on edit template.
Hit Ctrl+F
And search for ]]></b:skin>
And paste the CSS code below this code ]]></b:skin>.
You are done.

HTML code
<div id="imagoroid">
<imagemania>
<img src="https://s-media-cache-ak0.pinimg.com/564x/bb/0e/da/bb0eda2c7918fcd093c707dd3905d815.jpg" width="225" height="220" alt="Red mushroom" />
<imagecaption>Love is in the air</imagecaption>
</imagemania>
<imagemania>
<img src="https://s-media-cache-ak0.pinimg.com/564x/9e/12/86/9e128665fb2f0c3422578cc56f7c34d1.jpg" width="227" height="200" alt="Love is immortal" />
<imagecaption>Love is immortal</imagecaption>
</imagemania>
<imagemania>
<img src="https://s-media-cache-ak0.pinimg.com/564x/1a/5f/46/1a5f4620480421b6c4172014a95702a4.jpg" width="225" height="200" alt="An old tree" />
<imagecaption>Miss you baby</imagecaption>
</imagemania>
</div><!--end imagoroid-->

Customization
Here are some options to customize this blogger widget and give your images a polaroid effect.

1. Look at the HTML code and change the IMAGE URL with the url of your images.
2. Change IMAGE CAPTION with your captions.
3. You can add more images in this image gallery by repeating HTML code.

Like, Share your Beautiful Ideas with us and if you have any Question ask us, stay Blessed , Happy Blogging.

10/09/2014

Sliding Css Social Profile Widget for Blogger

In this post im  gonna explain how to add Css sliding social icons list  for blogger. By using Sliding Css Social Profile widget you can link your social media profile Facebook, Twitter and Rss Google plus,Rss and StumbleUpon Check the demo from below link.
bloggertrix

  1. Login to Blogger → Dashborad
  2. Click on Drop Down Menu and select Layout
  3. Add a HTML/JavaScript Gadget
  4. Paste below code in it.
  5. <style>
    #socialmenu_btrix {
      margin:0;
      padding:0;
      width: 30em;
      height: 4.5em;
      overflow:hidden;
      }
    #socialmenu_btrix li {
      display:inline;
      list-style-type:none;
      }
    #socialmenu_btrix li a {
      display:block;
      float:left;
      text-decoration:none;
      margin:0;
      }
    #socialmenu_btrix li a img {
      opacity:0.7;
      margin:0.5em;
      border:0;
      float:left;
      }
    #socialmenu_btrix li a span {
      display:none;
      }
    #socialmenu_btrix li a:hover {
      background:transparent;
      }
    #socialmenu_btrix li a:hover span {
      width:7em;
      color:#aaa;
      display:block;
      cursor:pointer;
      float:left;
      }
    #socialmenu_btrix .h2 {
      margin:0 5px;
      padding:0;
      color:#fc0;
      font-variant:small-caps;
      font-size:1em;
      border:0;
      }

      </style>
      <ul id="socialmenu_btrix">
      <li>
        <a href="https://www.facebook.com/
    Username"><img src="http://1.bp.blogspot.com/-4jtnfUcKGTs/UX3zAl1-YKI/AAAAAAAAAg0/OKrix7i3Z60/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" />
         <span><br />
          <b class="h2">Facebook</b><br />
          Add to facebook
         </span>
        </a>
       </li>
       <li>
        <a href="https://plus.google.com/
    Username"><img src="http://3.bp.blogspot.com/-r2ZOj6CKteQ/UX3zAknXOMI/AAAAAAAAAgw/BbvKkmh1XPs/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" />
         <span>
          <br />
          <b class="h2">Twitter</b><br />
          Add to twitter
         </span>
        </a>
       </li>
       <li>
        <a href="http://feeds.feedburner.com/
    Username"><img src="http://4.bp.blogspot.com/-rPhGZVoCwWM/UX3zArv2-SI/AAAAAAAAAg4/E0Bc9YcNGGg/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" />
         <span><br />
          <b class="h2">Rss Feed</b><br />
            Subscribe
         </span>
        </a>
       </li>
       <li>
        <a href="http://stumbleupon.com/Username"><img src="http://3.bp.blogspot.com/-kw_a3_BIjWM/UX3zBNxOoDI/AAAAAAAAAhA/iuGY6nncFSw/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" />
         <span><br />
          <b class="h2">Stumbleupon </b><br />
          add to stumble
         </span>
        </a>
       </li>
        <li>
        <a href="https://twitter.com/
    Username">
         <img src="http://1.bp.blogspot.com/-WeWbdij6AL4/UX3zBfWhwWI/AAAAAAAAAhE/ooow8EsfxnA/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" />
         <span><br />
          <b class="h2">Twitter</b><br />
          add to twitter
         </span>
        </a>
       </li>
      </ul> 
You have to change the counters manually, just change red color number according to profile.

Replace Username with your Feedburner ID 
Replace Username with your Facebook username
Replace Username with your Twitter Username
Replace Username with your Google plus ID
Replace Username with your StumbleUpon Username

5. Now save your HTML/Javascript'.You are done.