Blogging Trainings

Link Nudge using css3 and jquery blogger widget

This is a Simple Link nudge Effect tutorial.You can add this to links in your Blog.While Mouse over the link a simple animation works.This can be done through two methods.You can use any one of these.

Through CSS3 .
With jQuery Effect.

Link Nudge Using CSS3

Go to Blogger Account
Design -> Edit HTML
Find ]]></b:skin> and copy the below code BEFORE it

.noopln {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}

.noopln:hover {
margin-left: 12px;
}

Save it.
If you want link nudge effect to a link add class noopln to each link

Eg: <a class="noopln" href="http://blogger.com">Blogger</a>

If you want this Link Nudge Effect to labels follow the steps below

Go to Design->Edit HTML
Find ]]></b:skin> and copy the following code BEFORE it

.noopln,Label li,#Label1 ul li a,.Label li a {
-moz-transition: all 0.2s ease-in 0s ;
-webkit-transition: all 0.2s ease-in 0s ;
-o-transition: all 0.2s ease-in 0s ;
}

.noopln:hover,Label li:hover,#Label1 ul li a:hover,.Label li a:hover {
margin-left: 14px;
}

That's all the Link Nudge with CSS3

Link Nudge Using JQuery

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

Go to Template->Edit HTML
Copy and paste the below code <head>

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

Step 2 :Adding jQuery script for Link Nudge

Sign In to your Blogger Account
Go to Design->Edit HTML
Find </head> and copy below code snippet BEFORE it

<script type='text/javascript'>
var speed = 300; // Speed Of Animation
$(document).ready(function() {
$('a.noopln,#Label1 ul li a,.Label li').hover(function() {
$(this).animate({paddingLeft: '13px'}, speed);
}, function() {$(this).animate({paddingLeft: 0}, speed);
});
}); </script><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE3sLT9w4OUh9JplzdR_EbwsKTM07lXtGQ-vIdzuGX_wTYbeU4O9E0K_wwEMRk1aZRPsanAVQ_t5J_zGlm4kubW9_XSy5gIVXWEzU467NcQOmddUblpqQ2X3515nLY29wimdSj6FeLjjk/s1600/1x1juice.png'/></a>

Save it

You can put link nudge effect to a link by adding a class noopln

Eg: <a class="noopln" href=" ">Your Link</a>

If your link already have a class then add this class after a space.

Eg: <a class="anotherclass noopln" href=" ">Your Link</a>

The above jQuery code snippet is also work with your Labels,If you don't need Link Nudge effect to your labels then delete the red blinking highlighted code in it.

And Save the Template linknudge css3 and jquery

Its almost finished,If you enjoyed this article share and like us.
a lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger.Please keep wathcing www.bloggingtrainings.blogspot.com flash for blogger templates, and a lot of other tricks for blogger users.

You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.

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

Copy the below code inside <head>

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

Add Page Peel Effect To Blogger Blog

Step 2 :

Go to Design->Edit HTML
Copy and paste the below code above </head>

Step 3:

Copy the below code inside <body> or <body ...............>

Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
Change the BLUE highlighted text with your feed URL or place your advertisement

Save the Template

You are done..! If any problem persists please do comment.
a lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger.Please keep wathcing www.bloggingtrainings.blogspot.com flash for blogger templates, and a lot of other tricks for blogger users.

Copying blog posts or articles from sites/blogs on internet is a usual thing.Here i am going to share you how to protect your blogger posts/articles form getting Stolen.This is a trick to lock your text and the visitors of your blog can't select the text only they can read the text. If they cracked that method and select the text there is another trick to disable right click menu,so they can't copy text.a lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger.Please keep wathcing www.bloggingtrainings.blogspot.com flash for blogger templates, and a lot of other tricks for blogger users.

Copy The Following CSS Codes To Your Blog

Go to Blogger Dashboard
Select Template->Edit HTML click Proceed [or Use Alternate Way to copy CSS code]
Find ]]></b:skin>
Copy the following code and save

-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
user-select:none;

Disable Right Click

Copy the following code inside <head>

Done!

A lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger.Please keep wathcing www.bloggingtrainings.blogspot.com flash for blogger templates, and a lot of other tricks for blogger users.

This is an important SEO Blogger trick to increase SEO. Heading tags have a great importance in Search engine results, Heading tags helps Search engines to recognize what is important in your blog.Heading are form H1 to H6 .H1 tags have higher priority.So we are going to hack blogger template by changing H3 tags to H1 tags. By default blogger post title is in H3 tag,here is a trick to change it to H1 tag for more SEO.

Go to Blogger Account
Select Template -> Edit HTML [click Proceed]
Find the code like below [Find easily using Crtl+F]
Or simply find <H3

and Change it with <H1 [Change all H3 to H1]
Change all H3 tags with H1 tag
Done ..Wait for few weeks you can find the change in Google SERP.
Your Blog pages will show in Google Search Page.

A lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger.Please keep wathcing www.bloggingtrainings.blogspot.com flash for blogger templates, and a lot of other tricks for blogger users.

To day i am going to share trick How to Protect all images in your Blog jquery trick with you.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.

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..

How to Slide Up N’ Go Social Sharing Widget

Doday here is amaizing trick for you!

We got another nicely designed social sharing widget to show you guys, and it comes from Blogger user named Lokjeeth Singh of BloggingBolt. It has no official name so I took the liberty of simply naming it myself and decided to call it Slide-up ‘n Go social sharing widget simply because it slides up when you hover your mouse over it and is imprinted with the word ‘GO’. So far it currently has buttons for Facebook, Dribbble, Behance, Twitter, and Instagram, but hopefully they’ll have buttons for other social sharing sites as well, such as LinkedIn, Google+, and Digg.

You’ll find a demo of it here.

Follow the instructions below to put it in your blog.

Using Ctrl+F, search for ]]></b:skin>.

Paste the following CSS code right before it:

.socialw {
 width: 236px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: auto;
 height: 100%;
}
#social1 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 margin-left: 1px;
 float: left;
 overflow: hidden;
}
#social2,#social3,#social4,#social5 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 float: left;
 margin-left: 10px;
 overflow: hidden;
}
/*    ANIMATIONS   */
.animate {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animate.queue {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 -o-animation-delay: 1s;
 animation-delay: 1s;
}
.animate.queue2s {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 -o-animation-delay: 2s;
 animation-delay: 2s;
}
.animate.queue3s {
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -o-animation-delay: 3s;
 animation-delay: 3s;
}
.animate.queue4s {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 -o-animation-delay: 4s;
 animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
@-moz-keyframes fadeInDown {
 0% {
 opacity: 0;
 -moz-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -moz-transform: translateY(0);
 }
}
@-o-keyframes fadeInDown {
 0% {
 opacity: 0;
 -o-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -o-transform: translateY(0);
 }
}
@keyframes fadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}
.fadeInDown {
 -webkit-animation-name: fadeInDown;
 -moz-animation-name: fadeInDown;
 -o-animation-name: fadeInDown;
 animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}

Click on Save Template.

Now go to Layout, click on Add a Gadget and select HTML/JavaScript.

Copy and paste the code below:

<!-- Social Icons Start !-->
 <div>
 <!-- Dribbble !-->
 <a href="http://dribbble.com/YOUR_USERNAME" target="_blank">
 <div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
 </a>
 <!-- Dribbble !-->
 <!-- Behance !-->
 <a href="http://behance.com/ YOUR_USERNAME " target="_blank">
 <div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
 </a>
 <!-- Behance !-->
 <!-- Facebook !-->
 <a href="http://facebook.com/ YOUR_USERNAME " target="_blank">
 <div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
 </a>
 <!-- Facebook !-->
 <!-- Twitter !-->
 <a href="http://twitter.com/ YOUR_USERNAME " target="_blank">
 <div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
 </a>
 <!-- Twitter !-->
 <!-- Intagram !-->
 <a href="http://instagram.com/ YOUR_USERNAME " target="_blank">
 <div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
 </a>
 <!-- Instagram !-->
 </div>
<!-- Social Icons End !-->

NOTE: Remember to change the highlighted links with yours.

Hit Save and you’re done!

Go ahead and preview your blog. Congratulations! You now have a new social widget.

A lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger, flash for blogger templates, and a lot of other tricks for blogger users.

Making Your Blog Visible To Search Engines

Are you searching about help Making Your Blog Visible To Search Engines then you are right here.

here are some steps. follow please.

If you’re into blogging, it is important to know how to get your blog noticed, otherwise you won’t get that much readers. Below are some of tips I’ll be sharing on making your blog easily visible to search engines, so it’s easier for you to increase your audience.

1. Submit your blog to different and reputable search engines like Google and Bing. It’s one of the simplest ways to effectively increase visibilty to your readers. You can also create sitemaps.

2. Adjust your blog’s privacy settings. You need to set the privacy settings to public and allow search engines to index your blog so it can easily be visible.

3. Select an attractive and unique blog template. The site’s appearance is the first thing a visitor will ever see, so by having a beautiful, clean and sleek design, you can attract more followers. But be careful in selecting a design. Pick the theme that will mostly help convert your posts. Go for a more professional look if you want to promote your brand.

4. Use social networking and bookmarking sites. Social networking and bookmarking sites have the power to connect to a lot of people all over the globe, so use them to your advantage. Sites like Facebook, Twitter, Google+, etc. are especially useful tools in expanding your network.

5. Update your blog often and regularly. If your blog has been noticed already by viewers, you need to populate it with fresh updates on a regular basis so people will always be looking forward to visiting it.

6. Interact with your readers. Constant interaction and activity with your audience is a must if you want your blog to get noticed. Allow readers to post comments on your posts and reply to them. This increases your blog’s chances of being visible because of keywords written by your readers.

a lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger, flash for blogger templates, and a lot of other tricks for blogger users.

Numbered Page Navigation ?

In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.

So, how to add this to your Blogger blog ?
(first backup your blog template before editing anything)

1. Sign into your Blogger account » Settings » Formatting
Choose the number of posts you want to display on homepage

set the amount of posts to be displayed on the homepage

2. Go to Design » Edit html » tick the expand widget templates

Scroll down to the bottom of the template code and find this


</body>

PASTE this code above that line


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

<script type='text/javascript'>

//<![CDATA[

function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}

//]]>

</script>
</b:if>
</b:if>

Blogging Trainings

Link Nudge using css3 and jquery blogger widget

Link Nudge Using CSS3

Link Nudge Using JQuery

If your link already have a class then add this class after a space.

How to Add Page Peel effect with jQuery & CSS to Blogger

Add Page Peel Effect To Blogger Blog

How to Protect Your Blog posts from Copying Blogger Trick

Copy The Following CSS Codes To Your Blog

Disable Right Click

Optimize your post title to H1 tags better SEO, seo tips

How to Protect all images in your Blog jquery trick

Protect Only First Image In Every Post

Protect All Images In Every Post

How to Slide Up N’ Go Social Sharing Widget

Making Your Blog Visible To Search Engines

Numbered Page Navigation for blogger

Numbered Page Navigation ?

Advertisement

Labels

Popular Posts

Books Categories

Ad

visitors

Template Information

Test Footer 2

Template Information