This is the most amazing way to show your blog's labels. This widget is originally for wordpress but now you can add this on your blogger. Generate this widget with the help of our Widget Generator :
Friday 6 July 2012
Thursday 5 July 2012
Creating jQuery Show/Hide Panel
So today i'am going to teach you how to create jQuery Show/Hide Panel.....so let me start :
Java Script :
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
CSS :
<style>
div.panel,p.flip
{
margin:0px;
padding:5px;
width:600px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
width:600px;
height:100px;
display:none;
}
</style>
<div class="panel">
<p>Show/Hide Panel Is Cool :p</p>
<p>Learn creating a jQuery show/hide panel at http://widcraft.blogspot.com .</p>
</div>
<p class="flip">Show/Hide Panel</p>
Ok so now let me explain you CSS with this pic :
Ok so finally here is the Full Script :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
width:600px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
width:600px;
height:100px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>Show/Hide Panel Is Cool :p</p>
<p>Learn creating a jQuery show/hide panel at http://widcraft.blogspot.com .</p>
</div>
<p class="flip">Show/Hide Panel</p>
</body>
</html>
Wednesday 4 July 2012
How To Get Free Google Adwords Coupon
The best way to try adwords advertising program is to use a voucher, but remember adwords coupons can be used only once. I will give you a list of website where you can request a free adwords coupon from google. Once you did, wait from 3 to 7 days, and check your email for voucher.
Do not request a coupon second time, because google will not send you another voucher, don’t try to fill in another domain, or your name, google tracks you other ways.
Please read Terms and Conditions apply for online advertising promotional credits
The list of website where you can request a free promotional coupon (choose only one link to request the coupon, do not repeat requests on other links, and do it once):
$75 Adwords coupon – https://services.google.com/fb/forms/adwordscoupon/
AU$75 Adwords coupon – https://www.google.com/appserve/fb/forms/auonline/
$100 Adwords coupon – http://www.google.com/ads/offers/hiregoogleadwords.html
$100 Adwords coupon – http://www.google.com/ads/offers/adwordsoffer.html
£30 Adwords coupon – http://www.google.co.uk/intl/en/ads/offers/specialoffer.html
£75 Adwords coupon – http://www.google.co.uk/intl/en/ads/offers/get75.html
Tuesday 3 July 2012
Different Background In Each Post Of Blogger
- Go To Your Blog > Settings > Posts And Comments
- Paste this code at the top of the box :
<div style="background:url(Image_URL) no-repeat;">
- And paste this code at the bottom of the box :
</div>
- Click on Save Settings and then Create a new post
- The Post Editor will open with the code already in it.
- Replace Image_URL with your background image url
- Type in your post before the </div> tag at the bottom, give it a Title and Publish.
Monday 2 July 2012
Disable Right Mouse Click On Blogger
If you wanna disable right mouse click on your blogger blog then just add the below widget on your blog :
Comment/Request/Question
Display/Hide Widget On Specific Pages In Blogger
When you add a widget (or a gadget as Blogger would call it) to your blog, by default the widget would appear on all pages –homepage, index, archive, post and static pages. But what if you want a certain widget to appear only on a certain page or pages, can it be done? In other words can you select on which page/pages the widget would or would not appear? The answer is yes you can -by using Blogger conditional tags.
Note: This trick doesn't work with Labels, Archive and Followers gadgets.
Let us proceed,
- Locate the widget code in HTML
- Go to Dashboard > Design > Edit HTML.
- Check the Expand Widget Templates check box on top right of the HTML window.
- Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box.
<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
- Choose the appropriate conditional tag
- Apply the tag
Paste the tag (from step 3) immediately after <b:includable id='main'> and the code line 11 to 15 immediately before </b:includable>, as shown below.<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>
PUT CONDITIONAL TAG HERE
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>
</b:includable>
</b:widget>
Replace
WidgetID in line 13 with the widget ID from code line 1.The code will check whether the condition is true or false:
- If the result is true, it executes (and display) the widget’s content.
- If the result is false, it skips the content and hide the widget.
- You need to hide the widget because in most templates the content-less widget will still appear -as an empty box.
- Save And Done
That’s all to it. Enjoy!
List Of Conditional Tags
List of conditional tags :
Below is a list of conditional tags that target specific pages. I only list the opening tags here. Just make sure you include the closing
</b:if> tag when applying a conditional in your template.Index pages include homepage, labels page and yearly archive page.
<b:if cond='data:blog.pageType == "index"'>
2.Post (item) pages
<b:if cond='data:blog.pageType == "item"'>
3.Static pages
<b:if cond='data:blog.pageType == "static_page"'>4. Archive pages
<b:if cond='data:blog.pageType == "archive"'>
5. Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>6.Specific page/URL
<b:if cond='data:blog.url == "PUT_URL_HERE"'>
7. Post and static pages
<b:if cond='data:blog.url == data:post.url'>8. Label-search pages
<b:if cond='data:blog.searchLabel'>9. First post
This is not a page, but a conditional for the first post. Used for targeting the first post on multi-post pages.
<b:if cond='data:post.isFirstPost'>
Monday 25 June 2012
Random Banner Widget For Blogger
Random banner widget is the best way to promote your blog content or to promote your
advertisements on your blog.....every time your visitor will see a random banner of your post/advert on your blog..... and its simple to add just follow these steps
- Go To Blogger > Layout > Add A Gadget > HTML/Javascript
- Paste the following script
<script language="JavaScript">
images = new Array(3);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='60px' width='468px' ></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='60px' width='468px' ></a>";
images[2] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-3' border='0' height='60px' width='468px' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
- Now Change URL OF ADVERTISER with your links and URL OF BANNER’S IMAGE-1/2/3 with your images..
- You can also change height and width of pics by chaning height='60px' width='468px' .
- You can also add more banners by changing the script.
Confused or need help then please comment....i won't bite... :p
Saturday 23 June 2012
Creating A HTML Email Form
- On Blogger : Go To Post/Page > HTML and paste the html given below.
- On HTML : Paste html given below on your html document.
<h3>Send E-mail To Your Name:</h3>
<form action="MAILTO:USERNAME@gmail.com" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="Your Name" /><br />
E-mail:<br />
<input type="text" name="mail" value="Your Email" /><br />
Message:<br />
<input type="text" name="comment" value="Your Message" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
- Change USERNAME@gmail.com with your email and you're done.....
Thursday 21 June 2012
Subscribe to:
Posts (Atom)
Popular Posts
-
Just a quick news before I start the stuff. Google Code has suspended my code account & all repositories I hosted there, so all my c... -
Just a simple trick I wanted to show you guys. You can resize web elements with the CSS3 property resize: both. For images make sure i... -
Earlier this week, I wrote about installing CFW on your PSP to do some extra-ordinary PSP stuff. Playing ISO and CSO games in one of it. ... -
Many PSP gamers wants to capture screenshots of their PSP games to share them with their friends and on tutorials. Even the above picture... -
BWidgets is a blogsite about blogging, but why we're sharing PSP tutorials here? The answer is very simple. I recently bought a PSP 1... -
Blogging world is getting large everyday as so many peoples are creating blogs and it's hard for all of them to capture their targets... -
By default, WordPress only allows us to login to WordPress powered sites only with our username. But most of us prefer to enter our email ... -
In this tutorial, I'm going to show how you can easily hide login errors in WordPress. It's a great way to protect from WordPress ... -
Forums are for your visitors and you to discuss and connect with each other but blogger doesn't have any forum options so it's ti... -
So today we're gonna do this amazing HTML 5 Shattering Text Effect with JavaScript and this script doesn't contains jquery or moo...
