Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Stop Your Image Stealing Using Jquery


Consider, you are working hard in creating images for your webpage and someone just copy and paste on their webpage without any credit or appreciation, then how would you like to feel? In today's post, here is a important trick for every blogger or webmaster to stop your Image stealing. You just have to put a little piece of code in your template which will prevent users to copy Images from your web page.
Stop Your Image Stealing Using Jquery

How To Stop Your Image Stealing ?

  • Go to Your Blogger Dashboard > Template > Edit HTML.
  • Take a backup of your template.
  • Now find for <head> in your template
  • Add below code just above/before <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note - If your blog have already a jquery plugin then ignore this step.

  • Now again find </head>
  • And add below code just above/before </head>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC38RCkIRxVopkiSZXkWcLQiHgN21G3VPuvWVDGkk2i4DvZ4GJTAt4LUI8LPmPYhUUhCHZmziQZXuSP6SCElLCYm4N3jGXAPW6zrAcQOBagBjKVY_BehE_ONR5jiEjOVXbU4g0pzCaRRXV/s1600/Stealing-Detected.png" alt="Blogging State Stealing Detected" style="margin-left: -212px; opacity: 0; position: relative; top: 0;" />");
});
//]]>
</script>

I hope this small trick will surely help you to prevent your Images from republishing on other websites.

Enhanced by Zemanta

Recent Posts with Thumbnails Widget for Blogger / Blogspot


Recent Posts with Thumbnails is an interesting hack that allows you to display your latest posts in various styles. besides making more cool the display, these widgets can also attract the eyes of visitors. If they are not interested in the post title may be the image was displayed can get them interested. This post explains how to add Recent Posts widget in Blogger with image thumbnails.this Gadget will help you to display the most Recent Posts on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs. You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles. So just start the tutorial to create a "Recent Posts With Thumbnails".


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.


If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.



<div id="24work">
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script language="JavaScript">
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8uUkmHpdLKnzQRKo3BqFhalymeDa9rWzgEhbZQc2t9dSAYeFxy50VGhk9uylN_0cszJ2Qh49WkFAHJK7ip9hxtDRQOEHQzk1lxisYevroM3qwNNsKek4Y9eJyLYQSFxEqI7wfUTV0L1M/s400/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8uUkmHpdLKnzQRKo3BqFhalymeDa9rWzgEhbZQc2t9dSAYeFxy50VGhk9uylN_0cszJ2Qh49WkFAHJK7ip9hxtDRQOEHQzk1lxisYevroM3qwNNsKek4Y9eJyLYQSFxEqI7wfUTV0L1M/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8uUkmHpdLKnzQRKo3BqFhalymeDa9rWzgEhbZQc2t9dSAYeFxy50VGhk9uylN_0cszJ2Qh49WkFAHJK7ip9hxtDRQOEHQzk1lxisYevroM3qwNNsKek4Y9eJyLYQSFxEqI7wfUTV0L1M/s400/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8uUkmHpdLKnzQRKo3BqFhalymeDa9rWzgEhbZQc2t9dSAYeFxy50VGhk9uylN_0cszJ2Qh49WkFAHJK7ip9hxtDRQOEHQzk1lxisYevroM3qwNNsKek4Y9eJyLYQSFxEqI7wfUTV0L1M/s400/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8uUkmHpdLKnzQRKo3BqFhalymeDa9rWzgEhbZQc2t9dSAYeFxy50VGhk9uylN_0cszJ2Qh49WkFAHJK7ip9hxtDRQOEHQzk1lxisYevroM3qwNNsKek4Y9eJyLYQSFxEqI7wfUTV0L1M/s400/noimage.png";


showRandomImg = true;

tablewidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 80;
imgheight = 80;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = "no";

showPostDate = false;

summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page = "http://bloggingstate.blogspot.com/";

</script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-1.js"></script>
</div>






Explanation:


(Edit the values to fit your blog)

tablewidth - Width of the widget

cellspacing - Space between cells (default one is good)
borderColor - Border color (add the background color of your template to perfectly blend it in the template)
thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)

fntsize - Font size of the title

acolor - Color of the titleaBold - you want bold titles? (true or false)
numposts How many posts you want to show?
home_page : http://bloggingstate.blogspot.com/ (change this to your blog url)



And now click Save



















Sexy Sliding JavaScript Side Bar Menu Using Mootools


Side Bar Menu Using Mootools

Show- hide, Smooth sliding and sexy. Menu bar with javascript and mootools. This post explains how to add Sexy Sliding JavaScript Side Bar Menu Using Mootools Widget on his blog that looks good on your blogspot blog.Be effective CSS vertical menu with show / hide uses MooTools to show / hide the menu with a vertical slide-in/slide-out nice effect.

About MooTools: "MooTools is a compact, modular, Object-Oriented JavaScript framework designed for intermediate to advanced JavaScript developer. It lets you write powerful, flexible, cross-browser code with its elegant API, well documented and consistent. ".


How to Install Beautiful Sliding JavaScript Side Bar Menu Using Mootools


Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Blogger Tips And Tricks|Latest Tips For Bloggers

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Blogger Tips And Tricks|Latest Tips For Bloggers


Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done. ..............



<script src="http://dl.dropboxusercontent.com/s/dxv8pj5mvc74vyw/prototype.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/wvyae56sr0hic2n/effects.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/8t6uvuz6r1xzpnz/side-bar.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxPKuN3kKazomE-2IIoVYDyjQMEcm16cCQEzPdGkbeW6Hv181VgLoUcNfPvLih-TP6p-UAwCI7y4AWzKVVuQg3XC06FuiidQpIUGIxLL7D_EF_k_fN-OrPCulkrq1GlMhuP2JUwXZc4Pt/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzD9tQNjiozOZ73qJsQ1TCC9rhvx_2dQpt-nnVqLPl8yKTxNWHNROzNX4XA7ppsNRUvn57n1U0_3SnlomNpa3KcMktg9khwF3Kw6mWAti-JRkP3QkEqP2kIeyC6qGBWCGn5oOargJiFsK/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>


And now click Save



Note: Keep in mind that before a save above "#" of land and your link Link One, Link Two, Link Three Link Four, and the name of the place you need to do is save.And here is the link I used to have 4, you can link up to 10




How To Create Table Of Contents in Blogger


Create Table Of Contents in Blogger : 

By Creating Table of Contents in your Blog will help you to arrange your Blog Contents category wise.This Widget is specially designed for blogs which contains alot of categories , this widget will enable them to place all the categories along-with the specific posts in a page called "Table of Contents".The most interesting fact about this widget is that it will help the readers to inform that which post is "New" and which is "Old" . The word New will dance with latest posts and Old will be with Old Posts.

How To Create Table Of Contents in Blogger

  • Get into Blogger Dashboard
  • Click On Pages
  • Create a Static Page
  • Click On HTML of the Page
  • Copy the below script and paste it into the Page HTML
 <script src="//sites.google.com/site/blogger9dotnet/color-css/blogger9.js"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=1000&amp;callback=loadtoc" type="text/javascript"></script>
  • Name the Page "Table Of Contents" or any thing else
  • Hit Publish and that's it!
So What's Up : This widget just arrange all the Blog Contents in a social way.And it helps the readers to navigate old and new posts.Stay Blessed ,Happy Blogging! 

How To Add Comment Counter to Post Header Titles in Blogger


Add Comment Counter to Post Header Titles in Blogger:

By Default numbers of Comments is shown below the each post in Comment Section.As it is placed below post , so most of us never noticed it.Now If you are interested in adding this Comment Counter to Header it will really inspire your blog readers and will socially force them to comment.It's a fact , if you add Comment Counter near to Blog post Title it will be totally better then the below area.And it will surely inspire your Blog Readers to Comment on your Posts.What Do You Think this Counter is better neat to Post Titles? If Yes, Then follow the following steps.

How To Add Comment Counter to Post Header Titles in Blogger

How To Add Comment Counter to Post Header Titles in Blogger

  • Go To Blogger
  • Click On Template
  • EDIT HTML
  • Search for ]]></b:skin>
  • Now Copy the Below Script and add it just above ]]></b:skin>

.comment-count {
float : right;
width : 47px;
height : 47px;
background : url(  SPECIFIC IMAGE URL  );
background-repeat: no-repeat;
font-size : 19px;
position:absolute;
margin-top : -16px;
margin-right : 2px;
text-align : center;
}
  • Now Chose the Comment Counter Background


  • Now Copy the Image URL and Replace SPECIFIC IMAGE URL in the script with the image URL
  • Now Add Comment Count Code 
  • For That Again Go To Blogger Dashboard >> Template >> Edit HTML >> Search For
    <h2 class='post-title entry-title' itemprop='name'> OR class='post-title entry-title'
     
  • Now Copy the Below Script and add it below the Above mentioned Code
<b:if cond='data:post.allowComments'>
<a class='comment-count' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if> 
  • Now Save Template and That's it !
 So What's Up : If You Liked this tut , Please Share it and Express your views in Comments . Stay Blessed ,Happy Blogging!

New Contact Form widget for blogger.


Someone told me that "Blogger has introduced a new Contact Form Widget". So, I checked it within minutes. And I find it simple yet extremely useful to connect to people in personal. 

Now, First thing is "how to add the contact form widget to your blog". 

Go to Blogger Dashboard -> Layouts -> Add a widget. 



Select More gadgets in the left panel, and Add a Contact Form

After adding it to your blog, it will look like: 

Here, I have provided the Title, Anything personal? Write here. You can put whatever you want. 

Now, whats the benefits after all? Why anyone should care about it? 
  • First of all, anyone who wants to interact with you and not finding any platform to do so, its a great way. 
  • Its a great way of accepting guest posts. You don't need to ask people to email you. Just make a page for guest post submission, and add the widget to that page. 
  •  You can ask for ads through this contact form. "You wanna place your ads on this blog? Contact here.." -- something like this. 
  • May be more. 
The only worst part of this widget is its so-simple unattractive design. Its lame actually. If you are already using it, share your opinion. We will love to read it.