HTML Parse Encoder

HTML Editor

Edit your HTML codes and test our Widget in this HTML editor.....

<style> Add CSS Code Here </style> Add HTML Code Here

Blogger Widget Code Generator

Enter Widget Title


Enter Your Blog Url


Enter Your Logo Image Logo Url


Paste The Widget Content Value (HTML/Javascript)


Copy The Form & Paste In Post 
<!-- Widcraft.blogspot.com add to blogger button starts --> <form action="http://www.blogger.com/add-widget" method="POST"> <input type="hidden" name="widget.title" value="titlevalue"/><input name="widget.content" type="hidden" value="widgetcontentvalue" /><input name="widget.template" type="hidden" value="<data:content/>" /><input type="hidden" name="infoUrl" value="infoaddress"/><input type="hidden" name="logoUrl" value="logoaddress"/><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form> <!-- Widcraft.blogspot.com add to blogger button ends -->

Featured Content Slider For Blogger

Featured Content Slider is one of the best way to featured some of the best content from your blog to your users.....to add this just follow the following steps.....

• Go to your blogger > Template > Edit Html

• Just above the </head> paste this script

<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {

 //Execute the slideShow
 slideShow();
});
function slideShow() {
 //Set the opacity of all images to 0
 $('#gallery a').css({opacity: 0.0});

 //Get the first image and display it (set it to full opacity)
 $('#gallery a:first').css({opacity: 1.0});

 //Set the caption background to semi-transparent
 $('#gallery .caption').css({opacity: 0.7});
 //Resize the width of the caption according to the image width
 $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

 //Get the caption of the first image from REL attribute and display it
 $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
 .animate({opacity: 0.7}, 400);

 //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
 setInterval('gallery()',6000);

}
function gallery() {

 //if no IMGs have the show class, grab the first image
 var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 //Get next image, if it reached the end of the slideshow, rotate it back to the first image
 var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

 //Get next image caption
 var caption = next.find('img').attr('rel');

 //Set the fade in effect for the next image, show class has higher z-index
 next.css({opacity: 0.0})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);
 //Hide the current image
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');

 //Set the opacity to 0 and height to 1px
 $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 });

 //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
 $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );

 //Display the content
 $('#gallery .content').html(caption);
}
</script>

• Now Save and after saving close that edit html window and click on  Customise/Customize 

• Click On Advance > Add CSS and paste the script from below

.clear{clear:both}
#gallery{position:relative;width:500px;height:400px}
#gallery a{float:left;position:absolute;}
#gallery a img{border:none;}
#gallery a.show{z-index:500}
#gallery .caption{z-index:600;background-color:#000;color:#ffffff;height:100px;width:100%;position:absolute;bottom:0;}
#gallery .caption .content{margin:5px}
#gallery .caption .content h3{margin:0;padding:0;color:#1DCCEF;}

• Click on Apply To Blog 

• Now paste the script from below to where you want to add this widget example in template/posts/pages/gadget

<div id="gallery">
<a href="#" class="show">
<img src="IMAGE_URL" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>TITLE 1</h3>Description 1 "/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Grass Blades" width="580" height="360" title="" alt="" rel="<h3>TITLE 2</h3>Description 2 "/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Ladybug" width="580" height="360" title="" alt="" rel="<h3>TITLE 3 3</h3>Description 3"/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Lightning" width="580" height="360" title="" alt="" rel="<h3>TITLE 4</h3>Description 4"/>
</a>
<div class="caption">
<div class="content">
</div>
</div>
<div style="clear: both;">
</div>
</div>

• Change IMAGE_URL with the url of your image and # with your post/page url and TITLE and Description with your content title and description and you're done :D

Recent Comments Widget For Blogger

Add Recent Comments Widget Display Last 5 Comments in Sidebar on your blog . To Add this comments widget follow the simple Procedure:

• Go to your blog > Layout > Add A Gadget > Feeds

• The Feed Gadget will ask you for Feed URL, you need to

• http://YOURSITE.blogspot.com/feeds/comments/default

• Click on continue

• Change title with Recent Comments/Latest Comment and you're done by the way style of your recent comments widget depends on your blogger template :D for any help please comment and i'll try to help you out.

Recent Posts Widget For Blogger

Ok so recent posts widget is the one of the best widgets for blogger to show whats new on your blog and its so easy to add this you don't need any html or css coding just some simple steps to follow from the picture tutorial below.....

• Go to your blog > Layout > Add A Gadget > Feed Widget

• Enter the feed url of your blog and click on continue....

• Almost done just change title to Recent Posts/Latest Posts and chose number of posts you want to show and click on save and we're done.....

How To Redirect Your Blogger Blog To Another Blog/URL

• Go to your blog > Template > Edit Html and search for <head>

• Just post the script just below <head>

<meta content="5;url=http://YOUR NEW URL HERE" http-equiv="refresh"/>

• 5 is that number of seconds after redirection will begin and if you want to redirect your blog without any waiting and just change it's value to 0.

Thats it if any one is having any problem then just post it in comment section below and i'll try to help you out as soon as posible.

Multi-Tab Widget For Blogger

Ok guys some days ago i found this tutorial on a blog call MBT so i thought i should share this with you first of all ....all rights of this tutorial goes to MBT visit his blog and thanks for posting this :D ok so here we go.....

• Go to Blogger > Layout > Edit HTML

• Search For </head>

• And paste the code below just above it,

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  var arg;
  this.div = null;
  this.classMain = "tabber";
  this.classMainLive = "tabberlive";
  this.classTab = "tabbertab";
  this.classTabDefault = "tabbertabdefault";
  this.classNav = "tabbernav";
  this.classTabHide = "tabbertabhide";
  this.classNavActive = "tabberactive";
  this.titleElements = ['h2','h3','h4','h5','h6'];
  this.titleElementsStripHTML = true;
  this.removeTitle = true;
  this.addLinkId = false;
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
  for (arg in argsObj) { this[arg] = argsObj[arg]; }
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  this.tabs = new Array();
  if (this.div) {
    this.init(this.div);
    this.div = null;
  }
}
tabberObj.prototype.init = function(e)
{
  var
  childNodes,
  i, i2,
  t,
  defaultTab=0,
  DOM_ul,
  DOM_li,
  DOM_a,
  aId,
  headingElement;
  if (!document.getElementsByTagName) { return false; }
  if (e.id) {
    this.id = e.id;
  }
  this.tabs.length = 0;
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;
      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
  }
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
    t.headingText = t.div.title;
    if (this.removeTitle) { t.div.title = ''; }
    if (!t.headingText) {
      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }
    if (!t.headingText) {
      t.headingText = i + 1;
    }
    DOM_li = document.createElement("li");
    t.li = DOM_li;
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;
    if (this.addLinkId && this.linkIdFormat) {
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
      DOM_a.id = aId;
    }
    DOM_li.appendChild(DOM_a);
    DOM_ul.appendChild(DOM_li);
  }
  e.insertBefore(DOM_ul, e.firstChild);
  e.className = e.className.replace(this.REclassMain, this.classMainLive);
  this.tabShow(defaultTab);
  if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
  }
  return this;
};
tabberObj.prototype.navClick = function(event)
{
  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;
  a = this;
  if (!a.tabber) { return false; }
  self = a.tabber;
  tabberIndex = a.tabberIndex;
  a.blur();
  if (typeof self.onClick == 'function') {
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }
    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  }
  self.tabShow(tabberIndex);
  return false;
};
tabberObj.prototype.tabHideAll = function()
{
  var i;
  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  div = this.tabs[tabberIndex].div;
  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);
  return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  this.tabHideAll();
  div = this.tabs[tabberIndex].div;
  div.className = div.className.replace(this.REclassTabHide, '');
  this.navSetActive(tabberIndex);
  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }
  return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = this.classNavActive;
  return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = '';
  return this;
};
function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;
  if (!tabberArgs) { tabberArgs = {}; }
  tempObj = new tabberObj(tabberArgs);
  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;
  if (!tabberArgs) { tabberArgs = {}; }
  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
  }
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
    tabberAutomaticOnLoad();
} else {
  if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
  }
}
//]]>
</script>

• Now search for ]]></b:skin>  and just above it paste this code,

/*---------- Tabber Start-------- */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/*------- Tabber End--------*/

• Don’t save your template. Now search for Variable definitions and paste this code with other variable definitions,

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

• If you can’t find Variable definitions  then search for #navbar-iframe and paste this code below #navbar-iframe { Some text here }

/* Variable definitions
   ====================
<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">
*/

• Now the final part. Search for <div id='sidebar-wrapper'> and paste this code just below it,

<div style='clear:both;'/>
<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

• Finally save your template and visit Layout > Page Elements to start adding widgets to the tabs! 

You can change number of the tabs by changing last code just add tab5 or delete tab4 :D

 for any type of help comment.

Hex Color Code Generator

Disable Copy Content Of Your Blogger

A guy on fb started a blog on WWE just like me and he just copy and paste all news from my site and i hated that so much so then i hacked his all gmail accounts and deleted all of them damn he had over seven gmail it was so hard to know from which one the blog is running :p but it was so hard to know his mails and hack them so for future i wanted to secure content from my site so i searched on google and found a solution about it......so if you want to block/disable copying content from your site then just this code from below on your blogger.....please don't change anything from the code or it won't work thanks

• Just add this widget on your blogger and we're done :