A Complete Sharing Widget With jQuery Effect

How To Add Attractive Sharing Widget To Blogger:-

Before proceeding to the tutorial, you should add the basic widget code to your blog from this tutorial.

How To Add Special Effect To Sharing Widget:-


If you want to add animated effect in your share widget then following change should be done in your blog template. Find the following code in blogger template.
</head>
Paste the following code just above it to make your sharing widget animated.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<!-- internetricks4u.blogspot.in-->
<script type="text/javascript">
$(document).ready(function(){

$("#myshare tr td").hover(function(){

$(this).find("img").animate({left:10},50);

$(this).find("img").animate({left:-10},50);

$(this).find("img").animate({left:0},50);

});

});
</script>
<!-- internetricks4u.blogspot.in-->
To add opacity effect to sharing widget then add following code just above the </head>.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<!-- internetricks4u.blogspot.in-->
<script type="text/javascript">
$(document).ready(function() {
$('#myshare tr td img').each(function() {
$(this).hover(function() {
$(this).stop().animate({ opacity: 0.3 }, 350);
},
function() {
$(this).stop().animate({ opacity: 1.0 }, 350);
});
});
});

</script>
<!-- internetricks4u.blogspot.in-->

Download Blogger Online Store Template Free 2012

Download Blogger Online Store Template Free 2012

Free Template Store - E-Commerce or Online Store Type blog for Blogger platform available for free download. Templates version is widely used for such Batik Online Store, Fashion, Products, and others. Some websites provide templates that are free or free without being charged a penny.

Blogger Template E-Commerce or Store is usually armed by the Javascript to automatically calculate the amount of money and goods ordered by the buyer so TreTan not need to manually calculate using the computer has automatically appear because what price and quantity of goods that will be a transaction. JQuery effects equally adorn this type of Template Online Shop to beautify and simplify navigation in the search for a product.

Actually Platform Self Hosting Wordpress with most of these templates and plugins to provide support, perhaps because many people think costs required or incurred to construct the template so they are relying on blogger though not as good as Wordpress.

Here is a Template Store, Store, E-Commerce for Blogger Tukang Coding and free choice or free for Download. by: btemplates.com

Blogger Store


Change Opacity Of An Element Using jQuery

jquery effect opacity change
jQuery is a great library of JavaScript function. You can easily create special effects in page with the help of jQuery. Most common jQuery effects are drop down menus, drag and drop elements and animations. Professional Web Designers effectively uses jQuery to change the opacity of various HTML elements like image tag <img> and ordered list or unordered list <ol> or <li> etc. All standard browsers supports jQuery which makes it more important for web developers. In Blogger, you can increase the appearance of your article and make your Blog template to look more professional with the help of jQuery by adding special effect in the post. So lets see how it works ?

Change Opacity Of An Element Using jQuery:-

The complete jQuery code given below is an example to change the opacity of an image from any desired value to any desired value with animation, which will execute on mouse hovering.

Change Opacity Of An Image Using jQuery:-

/* Code Written on http://internetricks4u.blogspot.com/ */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('img').each(function() {
$(this).hover(function() {
$(this).stop().animate({ opacity: 0.3 }, 500);
},
function() {
$(this).stop().animate({ opacity: 1.0 }, 500);
});
});
});
</script>
/* Code Written on http://internetricks4u.blogspot.com/ */

Explanation:-

This simple jQuery script changes opacity of images from 0.3 (Mouse hover state) to 1.0 ( Normal state) with animation. Corresponding HTML code is given below.
<div>     
<img src="URL Of Image 1" />
<img src="URL of Image 2" />
</div>

Suppose if you want to focus a particular image that comes under specific CSS id or class then the corresponding jQuery and HTML code is as follows

HTML Code

<div>

<div id="testingcss">

<img src="Image url"/>

<div id="workingcss">
<img src="Image Url 1"/>
<img src="Image Url 2"/>
</div>

</div>

</div>

jQuery Code

For hovering a image that comes under the CSS id workingcss, without affecting the image that comes under testingcss id, the following changes should be done in above jQuery code.
.
/* Code Written on http://internetricks4u.blogspot.com/ */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#workingcss img").hover function(){
$(this).hover(function() {
$(this).stop().animate({ opacity: 0.3 }, 500);
},
function() {
$(this).stop().animate({ opacity: 1.0 }, 500);
});
});
});
</script>
/* Code Written on http://internetricks4u.blogspot.com/ */

Only the code in pink color should be change in order to focus particular image.

Download 4 Column Blogger Templates Free 2012

Download 4 Column Blogger Templates Free 2012

With 4 column templates for blogger download no less exciting with a template that has 2 columns or 3 columns in it. Template as it is sometimes used for magazines and this template is usually a variety of widgets to be included therein.

Templates version 4 columns can be applied to photography template and even then it also depends how the template was created by the design of fiddling with the xml script. In addition to photography theme, it could be to store blogger template that displays an image for a product sale and purchase of materials in it. Images are also taking part in a four column blogger berbasic particularly e-commerce or store visitors who prefer the trading techniques that included the image in it. TreTans

Not many of the design that makes the 4 column blogger template, probably by quite complicated because Tukang Coding and this is proven by at least a template that carries more than two columns such that in the review btemplates.com website and in it only provides four pages to post on a four column template .

Here are the templates that are in column 4 the best design according to the 2012 Tukang Coding and ready for download.

1. Magazine Basic

live demo

DOWNLOAD


2. Primal



3. Simplicity 4 Coloumn



4. Clinic



5. Beauty Blog