Jqury Tutorial

CSS Tutorial

Blogger Widgets

SEO

Recent Posts

How we can download the Original size of Picture or photo from facebook


Hy Guys this me Shaan Ali Choudhry; Many people ask me about this question How we can download the Original size of Picture or photo from facebook.? While we are save as its saved in small size.
Here is is a unique Tutorial which is very easy to learn how to download image from facebook in original size. Just follow the steps. 

Step1; Login to facebook Profile like in Demo my Profile Page.
Click on image to large View

Step 2; chose the image want to download see demo in pic.

Click on image to large View

Step3; A pop up window shall be open having Buttons in the footer of the page like TAG PHOTOS, OPTION SHARE, LINK
Click on image to large View

Step 4; Click on button Option a scroll up menu will appear than Select the Download.


Step 5; it shall b saved in Download folder in your PC
Thanks Subscribe and Comments plz

Become our Fan on Facebook


How to Add Meta Tags and Blog Description to Blogger Blogspot

Meta tags are very helpful for search engines to find your site. Actually they describe your site. You can add meta tags to blogger blogs too.

Here is step by step on how to add meta tags to blog spot blogs.

1. Login to your blogger account

2. Go to Blogger Dashboard – Design – and click Edit HTML

3. Search(Ctrl+F) for the following code in the header at the top:

<b:include data=‘blog’ name=‘all-head-content’ />
4. Now paste the following code right after the above line:
<meta content=‘YOUR BLOG DESCRIPTION HERE’ name=‘description’ /> <meta content=‘YOUR RELEVANT KEYWORDS HERE’ name=‘keywords’ /> <meta content=‘YOUR NAME HERE’ name=‘author’ /> <meta content=‘ALL’ name=‘ROBOTS’ /> <meta content=‘blogger’ name=‘generator’ />
5. Save the template and you are done

Become our Fan on Facebook


How to Disable Facebook Timeline App-Bloger Tricks

Facebook timeline is a great way of displaying your old photos, memorable posts and apps with your friends and family. This feature changes your entire Facebook Profile layout into a more attractive look. today I am sharing the tutorial on how to completely remove the timeline app from your profile and revert to older Facebook profile layout. Since this time-based story telling did receive mixed feedback therefore it would be really helpful for most of you to learn how to undo/delete this application.
UPDATE: Facebook Timeline has been officially activated on all old layouts. Know why you can't undo Facebook Timeline?

How To Disable Facebook Timeline Layout?


  1. Log in to your Facebook account
  2. Then visit this page Developers
  3. Towards your left you will see apps. Choose the app you created for timeline. In my case I named it Timeline Feature.


4. Click the Edit Settings link,

5. Then on the settings page towards bottom-left you will see many options under related links, Choose Delete App. Which will delete the timeline app.
6. Confirm to delete the app and Bingo you have successfully shifted back to the older Profile view.
Visit your profile to see it in its exact previous look and layout. Do let me know if you needed any help pals. Hope you find this helpful. :>

Become our Fan on Facebook


How to Show HTML and JavaScript Codes within Blogger Posts

While writing my blog posts for my readers I noticed that every time I use "<" or ">" signs to show JavaScript or HTML codes and snippets within my Blogger post editor in "Edit HTML" mode, it's not visible. This happens because Blogger post editor recognizes it as snippets that should be used with your blogger template.
So to show JavaScript or HTML codes within Blogger posts or comments, use &lt;instead of < and &gt; instead of >.
Now if there are big codes then go to Plus2net.com and convert your codes.
This is the simplest method to show JavaScript and HTML codes within blog posts.

Image Hover Effect using CSS

Today I am going to tell you how to change opacity (transparency) of the image and add image hover effect using CSS3 in Blogger.
See an example:

You will find that whenever you place your mouse pointer over the image, it will hover with full transparency and with some transition effect. Interesting! Now let us start with a small tutorial.
To add hover effect in your Blogger template, go to Design > Edit Html tab and backup your template first.
Now find  ]]></b:skin>  and just before it add the following styling codes:

.hovereffect img {
opacity:0.5;
filter:alpha(opacity=50);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.hovereffect:hover img {
opacity:1.0;
filter:alpha(opacity=100);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
Save your template.
To use this effect you have to add class="hovereffect" to your images. For example, when you add an image, it generally looks like:

<a href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a>
But, to add the hover effect, you need to add the class as shown below:

<a class="hovereffect" href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a>


Let's have an explanation. To make the images opaque and mouseover effect, definitions .hovereffect and  .hovereffect: hover are added while property codes like  opacityfilter: alpha-moz-opacity and -khtml-opacity  are used.
Property  opacity  is used for the browsers which supports  CSS3  standard (most of the modern browsers do).
While  filter: alpha  is for Internet Explorer,
-moz-opacity is for Firefox,  -khtml-opacity  is for Safari and Chrome are used for backward compatibilities.
Transition effects are also added so that while hovering and changing effects, it makes a delay. It's totally new CSS3 property.
“0.5” and “1.0” are used to tell the browsers the quantity of the opacity. You can change this.
Note;This tutorial is not only for Blogger, but can also be used in any blog platform which follows CSS rules, like Wordpress. Feel free to give your feedbacks.

How Margin and Padding Works: CSS

Padding is used to clear the area around the content of an element within the border and is affected by the background color of the element.
While, margin clear the area around an element which is outside the border and do not have a background color.

See at an example of a box model:

So it is now clear how the CSS properties: margins and paddings work.

Now let’s have an explanation how these are used to style and customize the CSS and Blogger templates, taking margins as an example. We see in the picture that margins have been used to clear the area around the box. So (let) the CSS styling properties used are:


box {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

We can also write this as:

box {
margin: 10px;
}
This is because we are using 10 pixels for all the sides of the margin.

box {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 7px;
margin-left: 8px;
}
We can write this also as:


box {
margin: 5px 10px 7px 8px;
}
Notice the order of the values used. First comes the top margin, then the right margin, the bottom and then the left.

Let’s see another example:

box {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}
Notice that the top and the bottom margin have same values while the left and the right are same.
So:

box {
margin: 10px 5px;
}
The same thing happens when it comes to use the padding properties within CSS. Thus we got a general idea about how the margins and paddings are used to style CSS and Blogger templates.
For more references: W3 school CSS margin and W3 school CSS padding

Add Google Buzz Share Button - Widget for Blogger



Google Buzz is a great social tool which is very similiar to Twitter and Facebook. It's a wonderful way to engage and interact with your readers! Make sure to implement these Google Buzz buttons into your blogger posts, so that users can easily share your content on Google Buzz.

Add Google Buzz it Button to Blogger



1.                                Go to Layout >Edit HTML in your Blogger Dashboard.
2.                                Back up your existing Template before making any changes!
3.                                Make sure to check the "Expand Widget Templates" box.
4.                                Here is the Google Buzz it Code:

<div style="float:right;padding:4px;">
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
</div>
5.                                Search for this line of code in your template:

<div class='post-header-line-1'/>
and place the Google Buzz it Code right after the code you searched for above.
If this doesn't work, then search for this code below and place the
 Google Buzz it Code directly before it.

<data:post.body/>
6.                                Now save your template and you're done!
Add Google Buzz Button with Share Count to Blogger
1.                                Here is the Google Buzz it with Share Count Code 


<div style="float:right;padding:4px;"> <script type='text/javascript'> njuice_buzz_url = '<data:post.title/>'; njuice_buzz_title = '<data:post.url/>'; njuice_buzz_share = 'reader'; </script> <script type='text/javascript' src='http://button.njuice.com/buzz.js'/> </div>
2.                                Place the Google Buzz it with Share Count Code either
directly
 after this:

<div class='post-header-line-1'/>
OR 
directly
 before this:

<data:post.body/>
3.                                To change the style of the widget add either 

njuice_buzz_size = 'small';
or 

njuice_buzz_size = 'simple';
just after 

njuice_buzz_share = 'reader';
4.                                Save your blogger template and you're done!














Your Ad Here




More Tools

www.ShaanAli.info







Email Subscription
Stay Updates with this Blog. You can get the new posts on your mailbox. To subscribe through email,
Enter your Email here:


Don't forget to confirm your email subscription.