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

All In One Subscription Widget For Blogger Blog


Add Subscription Widget To Blog

How To Add All In One Subscription Widget To Blogger Blog:-

  1. In Blogger Dashboard, Go to Design / Page Element.
  2. Choose "Add a gadget" and then select "HTML / JavaScript".
  3. Paste the following code inside it.
blogger design pageelement
    /* Code on http://internetricks4u.blogspot.com  */
    <style type="text/css">
    #abtbox
    {width:320px;
    height:100%;
    }
    #smallabtbox
    {width:320;
    height:74px;
    border-bottom:1px solid #EEE;
    margin:5px 5px 0px 5px;
    margin-left:auto;
    margin-right:auto;
    }
    #smallabtbox1
    {width:320;
    height:74px;
    /* border:1px solid black;*/
    margin:0px 5px 5px 5px;

    }
    #smallabtbox1 span
    {color: #F55;
    font-size:15px;
    margin-bottom:30px;
    padding:7px;
    font-weight:800;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    #abtbox #smallabtbox input.mailverify
    {background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

    #abtbox #smallabtbox input.joinemailupdates
    { border:1px solid #7575FF;
    border-radius:5px;
    -moz-border-radius:5px;
    background-color:#7575FF;
    color:#FFFFFF;
    font-weight:900;
    margin-left:10px;
    height:26px
    }
    </style>


    <div id="abtbox">
    <span style="margin-left:20px;color:#F90; font-weight:900;font-size:17px;margin-left:25px;position:relative;top:15px;"> Get Free Tricks Daily </span>

    <div id="smallabtbox">
    <div style=" position:relative; top:30px; left:25px;">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=allbloggingtricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input class="mailverify" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'enter your email here...';}" onfocus="if (this.value == 'enter your email here...') {this.value = '';}" type="text" placeholder="Enter your email here..." />

    <input name="uri" type="hidden" value="AllBloggingTricks" />

    <input class="joinemailupdates" type="submit" value="Submit" /></form>

    </div>

    </div>
    <div id="smallabtbox1"><span><center>
    Follow us on-</center></span>
    <div >
    <a href="http://twitter.com/allbloggingtric"> <img src="http://3.bp.blogspot.com/-OVZP4sKLmps/T88ue9oui-I/AAAAAAAAAlE/aV15rDkmgFc/s1600/1.PNG" height="20" width="80" style="margin:0px 0px 0px 10px;"/></a>
    <a href="http://facebook.com/bloggingtrick"> <img src="http://4.bp.blogspot.com/-Y5lsaQeeTKA/T88u3jqoOuI/AAAAAAAAAlQ/utFlYbFFhiE/s1600/facebook_logo.PNG" height="20" width="80" style="margin-left:14px;"/> </a>
    <a href="https://plus.google.com/117305698834844817404"> <img src="http://3.bp.blogspot.com/-k-mmB4qj7Io/T88vFHV9h6I/AAAAAAAAAlc/JfX_WiGGBZA/s1600/google_plus_logo.PNG" height="22" width="90" style="position:relative; top:5px; margin-left:20px; "/></a>

    </div>

    </div>
    </div>

    Note:-Make Following Changes

    • Replace allbloggingtric with your twitter page.
    • Replace bloggingtricks with Facebook fan page URL.
    • Replace 117305698834844817404 with your Google Plus profile.
    • Replace allbloggingtricks with your feedburner usename.
    • Further Note that this widget will work best if your widgets of sidebar are designed to have 320px width.
    I give my best in producing this widget or in writing this tutorial. Instead if anyone find difficulty in any part of this tutorial then they can contact me directly by drooping comment below.

      Free Download Wordpress Theme 2012

      Free Download Wordpress Theme 2012

      Download Free Templates for Blogger is often discussed on this blog so this time will post the Tukang Coding Template for Wordpress. Blog with WordPress platform type is also abundant wearer with blogspot version, because Wordpress post content to rely more on brains than the especial like the blogger template.

      For those who want to have these templates, wordpress already provide it so we just install it without having to download and install a blogger template unless the withdrawal in the form of hosting, or host your own self that we have a new website could download and upload various types of templates are owned by wordpress and designed by the makers wordpress template.

      Templates for wordpress template Free below is provided by wordpress and downloaded and used by self-hosting website.

      1. PageLines

      DOWNLOAD


      2. Esquire


      DOWNLOAD


      3. Annotum Base


      DOWNLOAD


      4. Hatch


      DOWNLOAD


      5. Responsive

      Tips To Write A Killing Blog Post

      Killing blog Post

      How To Write A Killing Blog Post:-

      Work With Images:-

      Don't forget to include images in post body as it describes most of your content. Some people may find difficulty in reading text on the blog but if you include targeted images to your content they get a comprehensive idea regarding your Blog post.
      One point should also be kept in mind that the default name of images like Images00123.png, Photo23.jpeg should be change with suitable keyword and use of alt tag may be good practice to impress the Search Engines. The complete article to change the image name or to include alt tag can be read from here.

      Proper Use Of Important HTML Tags:-

      Important HTML tags
      Make a habit to repeatedly use of important HTML tags as these tags impress Search Engines and increase your blog ranking. A complete list of tags are gives below.
      /* Code By http://internetricks4u.blogspot.in */

      <Abbr> Tag
      <abbr title="World Health Organization">WHO</abbr>

      <Acronym> Tag
      <acronym title="World Health Organization">WHO</acronym>

      <B> Tag

      <b>This is Blogging World</b>

      <Em> Tag
      <em>Emphasized text</em>

      <I> Tag
      <i>This is italic text</i>

      <U> Tag
      <u>A Underline text</u>

      <h1> tag should be used once in a content with less than 70 character or less than 10 words. Don't use <h4>, <h5>,<h6> tag in content.
      If your blog is related to programming then use of <pre> tag may be the good option for you. You can choose large number of syntax highlighter from here.

      Don't Forget Outbound linking:-

      It is a very good strategy to drive traffic on the blog if you link your content to some another related content at appropriate position of your blog. And it also effect your page ranking in search engine.

      Download Awesome Blogger Templates Free 2012

      Download Awesome Blogger Template Free 2012

      Free Blogger Templates Awesome or amazing version is not much different from posting on the Best Design Blogger Templates. Perhaps the difference in terms of the background or a background assessment of the appearance and effect of existing jQuery in each category of blogger templates.

      Tukang Coding templates that describe the following is an assessment that focuses on a good display as well as interesting to watch. on the issue of SEO techniques are not direction, but it could be relied upon if TreTan really advanced the field of brain-tweaking SEO Template.

      This type of template can be included in the category of Magazine Template, Photo Gallery Templates, jQuery Templates, Anime Templates Blogger templates and various other types and also different types of fields ranging from 2 column, 3 column and 4 column depending on the design template.

      Here is a template for Blogger platform in 2012, this version of the Tukang Coding. by: btemplates.com


      1. Angry Birds


      2. MyFolio



      3. Conventy



      4. Box Office



      5. Youblog

      Best Design Template Blogger 2012

      Best Design Template Blogger 2012

      Download Blogger Template for Best Design in 2012 is a collection of his many design templates are selected based on appearance, images, themes, and so forth. Templates with this category are usually chosen by those who like the look of a nice and interesting to watch and not get bored for a visit back to the blog.

      Design templates are available for bloggers some of the columns 2, 3 to 4 columns depending on the template creator. Design for Blogger usually more focused on appearance whether it be Japanese animation, or anime, cartoons, photography, and art.

      No less fiddling with the display, jQuery effects were also part of the blog for the design effects to be faces. Tukang Coding builders prefer to alter the jQuery effects derived from the neighboring blogs and implemented in one of your own blog on this blog.

      Below is a selection of templates with the Best Design and Best Free or Free Download of 2012 for the Tukang Coding according to his own. by: btemplates.com

      1. Dance With Your Soul

      live demo

      DOWNLOAD


      2. The Only Sunshine



      3. Green Breath


      4. OrganicBlog



      5. Fanclub

      Grizzled Themes

      Name Grizzled
      Author Dody Farial
      URL Author www.mybloggerthemes.com
      Description Grizzled Blogger Template is a free magazine blogger template with 3 columns layout. Template features : gray color for basic background, cool design with elegant gray pattern, 3 columns, left and right sidebar, magazine template, featured posts, simple slidshow menu and more. This template suitable for all type of blogs.

      Mobile Network Themes


























      Name Mobile Network
      Author Dody Farial
      URL Author www.mybloggerthemes.com
      Description Mobile Network Blogger Template is a professional blogger template which takes the magazine style and use the theme of mobile network. This template has some features, such as: 3 columns, left and right sidebar, rounded corners. Blue is dominant in the body and gray for main post, simple slider menu and very easy in the editing, auto read more posts, banner 468x60 ready on top, search box ready and more. This template is highly recommended for those of you who want to create a blog with the theme of mobile phones.

      Business Solutions Themes


      Name Business Solutions
      Author Chica Blogger
      URL Author http://chicablogger.com
      Description Business Solutions is a free Blogger template for Business and other purposes with two columns, fixed width, right sidebar, footer columns, nivo slider, ads ready, threaded comments, blue color, gray color and white color.

      X10 Mansory Templates



      Name X10 Mansory
      Author Urang Kurai
      URL Author http://urang-kurai.blogspot.com
      Instruction Template Tutorial Instruction
      Description X10 Mansory Blogger Template is free premium template with magazine style, unique design, use Mansory jQuery, image zoom, navigation menu on sidebar an top, sidebar static, transparent color, white color, black color, red color and button share widget on postpage.
      Share this template on :

      The Cars Templates
























      Name The Cars
      Author Lasantha Bandara
      URL Author www.premiumbloggertemplates.com
      Description The Cars Blogger Template is free premium template with 2 Sidebar, 3 Column, 3 Column footer, Adapted from WordPress, Auto, Black, Blue, Elegant, Featured Section, Fixed width, Fresh, Left Sidebar, Magazine, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Web 2.0

      Download Unique Blogger Template Free 2012

      Download Unique Blogger Template Free 2012


      Template for Blogger Template Unique or Unique version of XML is one target of the many templates that blogger in the download to view them. This type of template looks pretty unique and interesting and different than the look of bloggers in general.

      Unique templates usually rely on the view that eccentric but interesting to be accessed or viewed, and in it contains a lot of code like CSS and the latest CSS3 and CSS3 is a Tukang Coding know only supported by browsers such as Mozilla, other browsers such as IE, Chrome and Safari are not or are not support the implementation of CSS3.

      Not only CSS3 is injected in a unique XML template coding, the effect also jQuery is one more weapon to make the display of the Template Unique differently than most. TreTan probably already know the what and how if jQuery is applied on the blog and its effects-even vary depending on how the coding of jQuery and post Download Free Blogger Template jQuery is one example of the application of jQuery coding.

      Here are some Unique to Blogger Template Tukang Coding version is ready for download. by: btemplates.com


      1. X5 Shadow

      live demo

      DOWNLOAD


      2. Magaling



      3. X7 Blue Black



      4. Simple Clean white



      5. Blue One Coloumn

      Best Blogger Template 2012

      Best Blogger Template 2012

      Download the Best or the Best Blogger Template will be given here to apply on each blogger if you please. Tukang Coding templates that will discuss here is based on the template chosen from views Coding Tailor your own.

      These templates typically include Best in terms of SEO Friendly, Views and speed of a blog. SEO is usually applied automatically and directly integrated without having to add another exception to the existing Advanced TreTan or more than Blogger. Display for Best Blogger unnoticeable especially burdensome loading blog, could - could SEO of the blog itself is not even functioning optimally. Backlink also influential in terms of SEO, then from that, find or cultivate backlinks by way of comment or blog link exchange.

      This template Tukang Coding got from google with little attention to what really could get to the criteria of Best Blogger Template that is posted on this blog.

      Just so stories about the Best Template for Blogger in the year 2012, actually wanted to post again but wait for the reviews of Junior Coding. by: adsense-id.com [User Taopik]

      Such is the Blog following specifications:

      - SEO Friendly
      - Visitor Friendly
      - Equipped with a description and keyword metatags Dynamics automatic (mandatory metatags in order to avoid duplicate meta description & keywords)
      - Equipped with the addition of several robots Meta tag for ease of browsing your blog.
      - Equipped with Dinamic heading (h1 in the header on the index, and h1 in the post title in the posting)
      - Can berfungis 2 or 3 coloum coloum
      - It is good to supplement your income from adsense (see ads on the blog demo application)
      - Different views for admin comment
      - Quicklink to comment box
      - There is already a Autoreadmore
      - There is already a Related Post with thumbnail (Related article with pictures)
      - There is already a widget "Share" from AddThis
      - Loading is very fast
      - The concept of minimalism & simple
      - etc.


      THESIS BLOGGER TEMPLATE




      Download Anime Blogger Templates Free 2012

      Download Anime Blogger Templates Free 2012

      Blogger Templates Anime or cartoon version of the Japanese state is also a favorite of bloggers to display their blog. Diverse background template with the typical cartoon Sakura is available for download for those who enjoyed the type of template Anime like Bleach, Naruto, Sailor Moon, and so forth.

      Template of this type are usually loved by women and not a few of the men also eyeing this template as one of their favorite anime. According to Tukang Coding, these templates are available from 2 to 3 columns karna relied more Anime pictures that are in the display backlight or background.

      Anime version of Blogger is in contrast to the previous post blogger templates Blogger Template Photo Gallery 2012 or the Magazine Blogger Templates and more similar to the post The Best Cute Blogger Templates 2012 which also rely on cartoon appearance. the location of this difference is clearly of the view that further leads to a Japanese cartoon or anime

      Anime Blogger Template below is available for download and of course free and can be directly applied to the respective blogger. please download as much and do not forget to comment. by: btemplates.com

      1. Bleach

      live demo

      DOWNLOAD


      2. Naruto Fight



      3. Anime Heaven v2

      live demo

      DOWNLOAD


      4. AnimeLight

      live demo

      DOWNLOAD


      5. Sailor Moon

      live demo

      DOWNLOAD

      Simple Magazine


      Template Name : Simple Magazine
      Template Author : Herdiansyah Hamzah
      Url Author : http://www.herdiansyah.web.id
      Description : Simple magazine blogger template with adsense ready, easy loading, SEO ready, auto readmore, multi column and more.
      Designer : Herdiansyah Hamzah
      Published : Borneo Templates
      Url Published : www.borneotemplates.com

      New News Blog Templates


      Name New News
      Author Lasantha Bandara
      URL Author www.premiumbloggertemplates.com
      Original Designer New Wordpress Themes
      Description New News is Free Blogger Templates with 1 Sidebar, 2 Column, Adapted from WordPress, Blue, Elegant, Featured Section, Fixed width, Fresh, Grey, Header Banner, Magazine, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White

      Sporty Magazine Templates

      Template Name : Sporty Magazine
      Template Author : Blogger Maps
      Url Author : http://www.bloggermaps.com
      Description : Free Blogger Template with Magazine style, 4 columns and SEO ready
      Designer : Blogger Maps
      Template Instruction : http://sportymagazine.blogspot.com/


      Elegant Blogger Template Download Best and Latest

      Elegant Blogger Template Download Best and Latest

      Elegant Blogger Template version is also frequently discussed by the bloggers to apply to their blog, Template Elegant and simple this is usually minimal when the eye is also nice. These templates are usually in the download for those who prefer the look is simple but attractive and easily accessible to visitors.

      Elegant Template Tukang Coding show below that this template is slightly different from other previously Tukang Coding posting the 2012 Best Cute Blogger Templates, Blogger Templates and Template Gallery Photo 2012 covered this time is almost similar to the post Download Free Blogger Template jQuery because it will also be included with jQuery effects are more smooth and the core of the posts are in the top slider to automatically change the type of news every few minutes / seconds all dependent on the settings on each slide change.

      Here are the Elegant Templates for Blogspot are ready to download for you guys who like the simple and certainly worth a look. by: btemplates.com


      1. Elite Minima

      live demo

      DOWNLOAD


      2. Creativa

      live demo

      DOWNLOAD


      3. WpStudio



      4. Versatile

      live demo

      DOWNLOAD


      5. deStyle