Full Blogging Tutorial and SEO Trick For Your Blog

Home » Archives for June 2012

Protect all images in your Blog jquery trick

Posted by Unknown

Here is a most important trick every blogger need. This trick is about how to protect all your images in your blog with a transparent image covered on it. I recently posted an article about How to protect images? .This article about to protect all images.

Related Articles
How to protect images in your blog?
Do you want to see demo? Try to save picture in this blog.
----------------------------------------------------------
What's inside this article

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

Go to Template->Edit HTML [A dialog box appears click Proceed]
Copy and paste the below code <head> and save it

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

Go to Blogger Account
Template->Edit HTML [Click Proceed]
Copy the code above </head>

Protect only First image in every Post

Protect all images in every post

I think you liked this article...please like and share..

More about → Protect all images in your Blog jquery trick

New Features and Tools in Bing Webmaster Tool

Posted by Unknown

With merger of Bing and Yahoo we lost very good link analysis tool (Yahoo! Site Explorer). Now with new look and user experience Bing has reintroduced that tool in its webmaster tool. Go and explore new tools under diagnostics & tools section of bing webmaster tool. Bing has introduced these new tools which are useful for any SEO:

Link Explorer (beta): Just like yahoo site explorer you can check backlinks of any website.

SEO Analyzer (beta): This tool generates SEO reports for websites which are verified by the account you are currently logged in with.

Fetch as Bingbot (beta): See your website as seen by the crawler of bing (Bingbot).

More information can be found at Bing Webmaster Community Blog

More about → New Features and Tools in Bing Webmaster Tool

How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Posted by Unknown

Here's another way you can customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and can be a different color to the rest of the text. You often see this style in newspapers, literature, magazines. In this tutorial i will show you how to apply automatically Magazine text style in Blogger Posts and Comments. So let's start adding it!

-> Add Drop Caps For Blogger Posts

-> Add Drop Caps For Blogger Comments

Big First Letter for your Blogger / Blogspot Posts

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this piece of code:

]]></b:skin>

Step 3. Just above it, add the following:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Customize:

Color - change the color highlighted in blue with the value of your desired color
Size - to change the letter size, increase/decrease the value highlighted in pink.

Step 4. Now search for this code:

<data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below:

<div class='capital'><data:post.body/></div>

Step 6. Save your template.

Important! If the above code is not working, add one of following codes from this example:

<p class="capital"><data:post.body/></p>

<span class="capital"><data:post.body/></span>

Big First Letter For Blogger/Blogspot Comments

Step 1. Log in to your Blogger account, then go to Design (Layout) >> Edit HTML >> check the "Expand Widget Templates" box

Step 2. Search (CTRL + F) for this piece of code (if you have already added this code, skip step 2 & 3):

]]></b:skin>

Step 3. Add the following code just above ]]></b:skin>:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

<data:comment.body/>

Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:

<p class="capital"><data:comment.body/></p>

Step 6. Save your Template.

That's it! Now you have a cool drop cap first letter on your blog.
If you have any question, leave a comment below!

More about → How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Protect your images Blogger image hack

Posted by Unknown

This is an awesome trick to protect your images.You can protect your images from copying with this Simple CSS Blogger Tricks.After applying this trick the person who save the image will get a transparent image instead of the original image.

Demo

Try to Save the below image

Protect your image Trick for all images (UPDATED VERSION)
What's inside this article
Protect your image Trick 1 -With overlap image
Protect your image Trick 2 -With span background image

Protect your image with CSS overlapping

Go to Blogger Account
Use the Following trick

You can use this code anywhere, if you want to protect an image in your post. Add image and switch to HTML tab and copy the URL of image(eg- http://3.bp.blogspot.com/-xxxxx/xxxxx/s1600/name-of-image.jpg) and paste to that code mentioned above.
That's it.

Protect your image with SPAN background

Use the following code

You are done..

If you liked this article please share and like....

More about → Protect your images Blogger image hack

Numbered comments on threaded comments for Blogger/Blogspot

Posted by Unknown

In a past tutorial, I've been talking about how you can add numbered comments to your blogger blog and today we'll learn how we can add numbered comments along with comment bubbles on the threaded comments as well.

What the following CSS trick will do for you:

When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1.
Then, each time the code flow goes through a review of any level, either a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.
Then is incremented in one unit the counter (counter-increment).

See the screenshot:

count comments, comment bubble, forum, blogger

Isn't that great? Well, i'm pretty sure many of you have been waiting for this cool trick. So let's begin applying it for our threaded comments system.

Steps to add bubble comments count

Step 1: Go to Dashboard - Template - Edit HTML (click on Proceed if needed)

...Expand Widget Templates:

Step 2: Search (CTRL + F) for this piece of code:

]]></b:skin>

Step 3: Add the following code just above it:

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRyiAnwuYWP82j_CXUUpoybmkCEMGsSoqZGBCd63ntSr49K8K-a2SHx_IMtF85ZvllWNzKd3lClSESZm1g8W7EVuQpfAUF5G1xOHsPzjdNZmnFXAYqA9LkTrs4y60Xscp6ItV_cZoIHES/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}

Note:

for no bubble icon, remove the code in red (including the blue code)
to change the comment bubble, replace the code in blue with the URL address of your own icon. If you're not sure what icon you should use, you can find some cool icons in my previous posts (see these tutorials here and here)
to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top

Step 4: Now Save the Template and you're done!

If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.

More about → Numbered comments on threaded comments for Blogger/Blogspot

How to add “Email Subscription Form” to Blogger Blogspot

Posted by Unknown

email subscription form, blogger blogspot, gadgets

When you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an Email Subscription Form in your blog, so that the interested visitors can easily get the latest updates.

To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy.
Just follow the next steps:

1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:

2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:

3. Paste the following code inside the empty box:

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5KjUxZvyBZYotHczIddYtvFJ4UTNqvizkxdjJJPTrefERGoLt8FKVdd4lFp453ExHhTSGlOy-DVscvG1asNXiZol7hqUmZXpQfq4eYeo2-03_QMSw6T3xaF4EoGrhUtEWU-2OBVeA17k/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=fe-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="fe-blogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Settings

Replace the url address in green to change the email icon
Increase/Decrease the 130 width value for a wider text area
Replace http://feedburner.google.com/fb/a/mailverify?uri=fe-blogger with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace fe-blogger with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=fe-blogger

4. Now Save your widget and check your blog. Enjoy!

More about → How to add “Email Subscription Form” to Blogger Blogspot

Awesome fe-blogger Subscription Widget for blogger

Posted by Unknown

This post is about how to add a Subscription Box like our NetOops blog. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial i am adding a new e-mail subscription box with wooden theme.

Demo is in the Right of this Blog

What's inside this article??

Subscription box with Fully Wooden Theme

Go to Blogger Dashboard
Go to Layout
Select Add a Gadget
You can type title any
And Copy the following code in the content.

Demo of Fully Wooden Theme

Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.

img.beintouch:hover {

background: none repeat scroll 0 0 #D6D6D6;

border-radius: 16px 16px 16px 16px;

box-shadow: 0 0 10px #565656;

}

/* Delete to Here*/
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPM9VubZpVOmzkgFxhYwtUmlgPUoJ-ZJI7OPL73bexG_yd9rF8_0WYdM_bjZIeCgSimnxAKkJhmfNSTrASwh7tsjmetY-P-csXdo49uYCytrzORMJPIvYPBVUjgpgc6fcZ1j3gub85nU/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDiVIRrm6TJL9n2aN42X6qjbGXHrkugSqAkrvdf0HxqLSDeyhGdqqf5X0P8DUHmvyGwDNHR_PPOpXqovv_n8IygFRthVYrhXVQRglaqLJRi04XdkUCAc9r5bBoH9-pzpufw6PPUX1lgY/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/fe-blogger/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSqTKTWCiHGLruyXPTAbCBHoJRIXf90G8QEDk3hEK_gGMVwSlvSdibK57wAVYLq2-dBb0rRAexv9QITRA2kdb1aLWnEv6gIAosZvMFLJfTNoYXkl4qPml9GZTKabYCJyd4-8vjzNKPPw/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/fe-bloggergerTricks" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVKt5G5FaUPY1JcvOjMVa49kYZMl5Y7mgwIKxbJRkqToFvc4Wzfq_g52ITMAMFer2PA-i-POkVrzNWABj13C8MtHp3qKKsFt2gvl09xx2kVf3NtvhRhCAe-j-3JUrfY6mm-fDzC1m_-hE/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://fe-blogger.blogspot.com"></a></td></tr></tbody></table>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=fe-bloggergertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="fe-bloggergerTricks" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>

Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

Subscription box with Default Basic Wooden theme

Go to Layout
Select Add a Gadget

Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.

img.beintouch:hover {

background: none repeat scroll 0 0 #D6D6D6;

border-radius: 16px 16px 16px 16px;

box-shadow: 0 0 10px #565656;

}

/* Delete to Here*/

.emailtext {

}

.ebutton {

}

</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDiVIRrm6TJL9n2aN42X6qjbGXHrkugSqAkrvdf0HxqLSDeyhGdqqf5X0P8DUHmvyGwDNHR_PPOpXqovv_n8IygFRthVYrhXVQRglaqLJRi04XdkUCAc9r5bBoH9-pzpufw6PPUX1lgY/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/fe-blogger/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSqTKTWCiHGLruyXPTAbCBHoJRIXf90G8QEDk3hEK_gGMVwSlvSdibK57wAVYLq2-dBb0rRAexv9QITRA2kdb1aLWnEv6gIAosZvMFLJfTNoYXkl4qPml9GZTKabYCJyd4-8vjzNKPPw/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/fe-bloggergerTricks" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVKt5G5FaUPY1JcvOjMVa49kYZMl5Y7mgwIKxbJRkqToFvc4Wzfq_g52ITMAMFer2PA-i-POkVrzNWABj13C8MtHp3qKKsFt2gvl09xx2kVf3NtvhRhCAe-j-3JUrfY6mm-fDzC1m_-hE/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://fe-blogger.blogspot.com"></a></td></tr></tbody></table>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=fe-bloggergertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="fe-bloggergerTricks" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>

Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

I think this widget helps you, Please share and like...

More about → Awesome fe-blogger Subscription Widget for blogger

Pages

Protect all images in your Blog jquery trick

Protect only First image in every Post

Protect all images in every post

New Features and Tools in Bing Webmaster Tool

How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Protect your images Blogger image hack

Protect your image with CSS overlapping

Protect your image with SPAN background

Numbered comments on threaded comments for Blogger/Blogspot

How to add “Email Subscription Form” to Blogger Blogspot

Awesome fe-blogger Subscription Widget for blogger

Subscription box with Fully Wooden Theme

Subscription box with Default Basic Wooden theme

Translate

Total Pageviews

Popular Posts

Labels

Blog Archive