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