Thursday, 21 June 2012
Wednesday, 20 June 2012
Password Protect Posts In Blogger
Here we go :
Go To Blogger > Design > Edit HTML
Backup your template
Search for ]]></b:skin>
And just below it paste the following JavaScript code,
<!--WidCraft Password Code--> <script type="text/javascript" src="http://widcraft.googlecode.com/svn/jsencryption.js"></script>
Now whenever you wish to show images, text, media or anything only to selected people then you may create and write the post as you normally do in your blogger editor :
Switch to the Edit HTML mode and copy all the code that you see. As shown below,
Go To Encryption Page
Enter a password in the Key Box
Next Paste the code that you copies from your Blogger Editor into the Plain Text box
Hit the Encrypt Button below Plain Text box
Copy the code from the HTML CODE box
Now get back to your Blogger Editor. Create a New Post. Give your post a title and paste the HTML Code that you just copied inside your blogger Editor in the Edit HTML Mode. You can write anything in place of this text -> Show Encrypted text but make all changes in Edit HTML mode only.
That's It.....just publish your post and have fun.....you can also have some fun with this trick :p
Leave your Questions/Review/Requests/Phone Numbers(Only Girl) in the comment section below!
Monday, 18 June 2012
How To Create Table Of Content On Blogger
- Go To Blogger > Pages > Create A New Page > HTML and post the script given below
<script src="http://widcraft.googlecode.com/svn/TOC.js">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=1000&callback=loadtoc" type="text/javascript">
</script>
Now just sit and eat your dinner!!
Saturday, 16 June 2012
7 Cool CSS3 Text Effects
Ok so in this article i'll teach you 7 cool CSS Text Effects.....you can use'em all on your blogger/wordpress and all blogs.....so first of all the method of adding CSS/HTML on blog is same for all effects so first start with it.
How To Add :
CSS : Go To Blogger > Template > Edit HTML > Paste CSS Script Just Above ]]></b:skin>
HTML : You can add HTML on Posts/Pages/Template/ HTML/Javascript Widget.
Effect 1 Fade Block :
Demo : Place mouse on me i will fade!
HTML :
<div id="fade">Place mouse on me i will fade!</div>
CSS :
#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade{opacity: 1;-moz-transition: opacity 1s linear;}
#fade{opacity: 1;-o-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}
Effect 2 Pulsate Block :
Demo : Place mouse on me i will pulsate!
HTML :
<div id="pulsate">Place mouse on me i will pulsate!</div>
CSS :
#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}
@-webkit-keyframes pulsate {
0% { width:140px; }
5% { width:190px; left:-25px; }
10% { width:140px; left:0px; }
15% { width:190px; left:-25px; }
20% { width:140px; left:0px; }
40% { width:140px; }
45% { width:190px; left:-25px; }
50% { width:140px; left:0px;}
55% { width:190px; left:-25px;}
60% { width:140px; left:0px;}
80% { width:140px; }
100% { width:140px; }
}
#pulsate:hover {-moz-animation-name: pulsate;-moz-animation-duration: 20s;-moz-animation-timing-function: ease-in-out;}
@-moz-keyframes pulsate {
0% { width:140px; }
5% { width:190px; left:-25px; }
10% { width:140px; left:0px; }
15% { width:190px; left:-25px; }
20% { width:140px; left:0px; }
40% { width:140px; }
45% { width:190px; left:-25px; }
50% { width:140px; left:0px;}
55% { width:190px; left:-25px;}
60% { width:140px; left:0px;}
80% { width:140px; }
100% { width:140px; }
}
#pulsate:hover {-o-animation-name: pulsate;-o-animation-duration: 20s;-o-animation-timing-function: ease-in-out;}
@-o-keyframes pulsate {
0% { width:140px; }
5% { width:190px; left:-25px; }
10% { width:140px; left:0px; }
15% { width:190px; left:-25px; }
20% { width:140px; left:0px; }
40% { width:140px; }
45% { width:190px; left:-25px; }
50% { width:140px; left:0px;}
55% { width:190px; left:-25px;}
60% { width:140px; left:0px;}
80% { width:140px; }
100% { width:140px; }
}
Demo : Place mouse on me my text will shift!
HTML :
<div id="nudge">Place mouse on me my text will shift!</div>
CSS :
#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge{-moz-transition-property:color,background-color,padding-left;-moz-transition-duration:500ms,500ms,500ms}
#nudge{-o-transition-property:color,background-color,padding-left;-o-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}
Effect 4 Expand Block :
Demo : Place mouse on me my border will expand
HTML :
<div id="expand">Place mouse on me my border will expand</div>
CSS :
#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-moz-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-o-transition: all 500ms linear; border:10px solid black}
#expand:hover{border:30px solid #800}
Effect 5 Bounce Block :
Demo : Place mouse on me i will bounce!
HTML :
<div id="bounce">Place mouse on me i will bounce!</div>
CSS :
#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
@-webkit-keyframes bounce{from{margin-left:0px;}
to{margin-left:250px;}
}
#bounce:hover {-moz-animation-name:bounce;-moz-animation-duration:1s;-moz-animation-iteration-count:2;-moz-animation-direction:alternate}
@-moz-keyframes bounce{from{margin-left:0px;}
to{margin-left:250px;}
}
#bounce:hover {-o-animation-name:bounce;-o-animation-duration:1s;-o-animation-iteration-count:2;-o-animation-direction:alternate}
@-o-keyframes bounce{from{margin-left:0px;}
to{margin-left:250px;}
}
Effect 6 Spin Block :
Demo : Place mouse on me i will spin
HTML :
<div id="spin">Place mouse on me i will spin</div>
CSS :
#spin{-webkit-transition: -webkit-transform 3s ease-in;}
#spin:hover{-webkit-transform:rotate(360deg)}
#spin{-moz-transition: -moz-transform 3s ease-in;}
#spin:hover{-moz-transform:rotate(360deg)}
#spin{-o-transition: -o-transform 3s ease-in;}
#spin:hover{-o-transform:rotate(360deg)}
Effect 7 Accordion :
Demo : This Is First Tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Demo : This is second tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Demo : This is third tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
HTML :
<div id="accordion" class="accordion">
<a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
</div>
CSS :
.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
.accordion a:hover{background-color:#999}
.accordion div{background-color:#ccc;color:#222;}
.accordion div p{padding:20px}
#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-moz-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-o-transition:height 600ms ease}
#accordion div:target{height:110px}
That's all for this time.....Comment for any help or report.....Thanks
Friday, 15 June 2012
Creating A Pop Up On Blogger
- Paste the script given below on your blogger post to create a link to popup
<script type="text/javascript">
// Popup window code
function newPopu1p(url) {
popupWindow = window.open(
url,'popUpWindow','height=300,width=200,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="javascript:newPopu1p('URL');">Text To Display</a>
Replace URL with url of the page you want to pop-up and text to display with your text.....
Example : -
Click Here To Open A Pop-UpCSS Sticky Footer For Blogger
- Go To Blogger > Layout > Add A Gadget > HTML/JavaScript
- Paste following code :
<style type="text/css">
#stickybar { border-bottom:1px solid #ECF1EF;
background:#151715;
font-size:19px;
color:#FFF;
padding:10px 10px;
position:fixed;
bottom:0; left:0;
z-index:2000;
width:100%;
text-align:center; opacity:0.6;
}
#stickybar:hover { opacity:1; }
#stickybar a { color:#FFF; text-decoration:none; }
</style>
<div id="stickybar">
<center><tbody><tr> <td><strong>Your Text Here | </strong> </td> <td><a href="#" rel="nofollow">Back To Top</a></td></tr></tbody></center>
</div>
- Just replace Your Text Here with your text.
CSS3 Spin On Hover Image Effect On Blogger
Spin image on hover effect is cool and it's also easy to do..........so this time i'll show you how to give spin on hover CSS3 effect to your pics in blogger.....
- Go To Blogger > Template > Edit HTML
- Just Above ]]></b:skin> post the script given below
.rotate{
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
- Now save your template.
- Now on pics you want to spin add class="rotate" tag
Like this : -
<img class="rotate" src="Image URL" />
- You can also add this only in one post by adding code given below on your post
<style>
.rotate{
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
That's It.....Enjoy!!
CSS3 Spinning Image Effect On Blogger
Spinning image effect is cool and it's also easy to do..........so this time i'll show you how to give spinning CSS3 effect to your pics in blogger.....
- Go To Blogger > Template > Edit HTML
- Just Above ]]></b:skin> post the script given below
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
- Now save your template.
- Now on pics you want to spin add id="spin" tag
Like this : -
<img id="spin" src="Image URL" />
- You can also add this only in one post by adding code given below on your post
<style>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
}
</style>
That's It.....Enjoy!!
CSS Sticky Footer For Blogger
Stick Footer gives our blog a cool professional touch because it's cool stylish and also in trend and today i'am gonna tell you how to add this professional touch on your blogger blog.....
- Go To Blogger > Template > Edit HTML
- Find </b:skin> and paste the code given below just above </b:skin>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 40px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed;
text-shadow: 1px 1px 1px #000000;
width: 960px;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
padding:5px 8px 3px 14px;
float:left;
background:url("“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisRjfy6foHkiGY2VGZK5SHFzBG4OZTDZipmIN1tQCSzjOsvBo0La6RUSCbZAP8X0nwyyKg-hUqyL6U2FVPaIeYk2olqUTF3V-irw1vzTff-eVNT6X6rl-sJ1xYOsEHLvM4Gxda6QzmDC0/s1600/home.png") 13px 5px no-repeat;
width:36px;
height:30px;
border:none;
border-right:1px solid rgba(0, 0, 0, 0.4);
cursor:pointer;
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPNV_4OUHSvQ0__ZrO9hXpKkIBoMtssRc-4a8d-pLEDIIF3UkFpDfhsP05Pn2-h7QgcUOcSD7B1OFa00ZLl7roL6-NdexM3Saez9H46Y5xSDaY7uj_8AxgBbJRXFmWugI40WLoQq3SS9E/s1600/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#stickey_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:5px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
}
- Save Your Template
- Not Go To Layout > Add A Gadget > HTML/JavaScript
- And paste the code given below:
<div id="stickey_footer">
<!– Begin Footer Menu –>
<ul id="footer_menu">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#">Label</a>
<li><a href="#">Widgets</a>
<li><a href="#">Friends</a>
<li><a href="#">Blog</a>
<li><a href="#">Contact</a>
</ul>
<ul id="social_icons">
<!–Social Icons –>
<li><a href="http://twitter.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRqXg0YZgPy8l1OwMn7Cgcj8yBFLub7ZCyBDVTn4zXQFg0YwoNBzgeDTaHrApZhlKUkw_mYUAd0YHnQFC6ygPWHvYE3OFOw4ZMPrJB-_bpt5Pj8ywZZQ2wrveqMgDLihQAk-_RZO1124/s1600/twitter.png' alt="" /><span>Twitter</span></a></li>
<li><a href="http://digg.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioQDbhV06OkarooIkYgeCJX7lXIBficAF90RqalcthEo3zdH2OTL6x1s4AHVgEquzSHSFgSfYH5a9Z73p3URWfxd0vOBveeUDIlnwjxlTuyZGRtU88Cf2BVio6XjLoNDEBiUdzW0fFy4M/s1600/digg.png' alt="" /><span>Digg</span></a></li>
<li><a href="http://flickr.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0SHyOyXKyr02bPkKEtRPlq4PG8ONHfD-ehIehRMUztUssKcusaxOrahBimrjwfOcleI-JKo4h6FTxiQyQn5vQHtEBrLAd6JUGMBvKerCotEKJnVro4xywlhVrvNIlbKuwTQ4bBz1Rzs/s1600/flickr.png' alt="" /><span>Flickr</span></a></li>
<li><a href="http://fb.com/username" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Dsn4U5h3JsIkRWH3mH7wckXup-akooAlVi4PJomTw78hcQ4wlNg-4zYz2W53Jhcm62A2NgUKKQHhyphenhyphenkiMrxIgY8g9ujSwbVuHVRSEFZa9taMK8_U77ia_5V5iDUW1sUuM583KqwYlNrk/s1600/facebook.png' alt="" /><span>Facebook</span></a></li>
</ul>
</div>
- Now replace username with your usernames.
That's It.....For any help/request or anything please comment and i'll contact you as soon as possible.....
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... -
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... -
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... -
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 ... -
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... -
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 ... -
Hi guys! I haven't published anything on this blog for at least an year now. All the posts that you see here are guest posts, and not by...
-
Blogger templates are codded using the *XHTML 1.0 Strict Document Type*. It was developed by world wide web consortium on 26 January 200...
