Subscription Email Form For Blogger Equipped With RSS Feed




Blogger-Subscription-Form

I am extremely sorry for delaying this post. Due to burden of studies I was finding it difficult to publish posts but now everything is fine. Now without wasting your time lets jump straight to the tutorial of adding a beautiful Subscription form to the sidebars of your BlogSpot blogs.


Before Proceeding make sure you have burnt your feeds at www.feedburner.com
Now do the following,

  1. Go To Blogger > Layout
  2. Click Add a Gadget or Add a Page element
  3. Choose HTML/JavaScript Widget
  4. Inside this widget paste the code below,

<a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigg3R-lSU1tDATD4xem9iYoTScpXvqdZBeTN0Q1xmi3LTeWVRxPTvUtHJtiGGb20NawpJr9HeBS5aKpE8tcrzOCI8EvAOVUqAhOHQKo3J2fM2wXOrWSc1o4hZpVIcc-0sW4llpStb5M9u-/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Join the team! </a><span style="color: #5C6AA4; font-weight: bold;">By Submitting your email address:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#5C6AA4; background: #fff; border:1px solid #5C6AA4; width: 90px;" name="email" type="text"/><input value="TntByStc" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="GO!" class="mbt1" type="submit"/></form><br/>
Now you need to make some important changes to customize the widget.

  • Replace http://feeds2.feedburner.com/TntByStc with your Feed URL that Feedburner has provided you. If you don’t now how to get it simple replace TntByStc with your Feed title like this,
http://feeds2.feedburner.com/Paste-Your-Feed-Title-here
  • To use a different RSS Feed Icon simple change the URL below with that of yours,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigg3R-lSU1tDATD4xem9iYoTScpXvqdZBeTN0Q1xmi3LTeWVRxPTvUtHJtiGGb20NawpJr9HeBS5aKpE8tcrzOCI8EvAOVUqAhOHQKo3J2fM2wXOrWSc1o4hZpVIcc-0sW4llpStb5M9u-/s400/MBT-RSS-FEED.gif
  • Replace TntByStc with your own Feedburner Feed Title
  • The Color code #5C6AA4 refers to the text colour and border colour of the Subscription Box. May be Color Chart will help you. If you are using Buster Themes than change the colours as follows,
               For Buster Theme 1 leave the code #5C6AA4 unchanged.
               For Buster Theme 2 replace #5C6AA4 with #64A6E4
               For Buster Theme 3 replace #5C6AA4 with #37BD07
               For Buster Theme 4 replace #5C6AA4 with #7CA2C4
               If you are using Church Theme then replace #5C6AA4 with #7CA2C4
That’s it. Hit Save and Preview Your Widget!
I hope it was simple to understand :|



WordPress MP3 Player For BLOGGER




mp3Updated Post On Readers Demand
I am pretty excited to share the trick of adding one of the best flash players to your blog. This player is different from rest of the Mp3 players found elsewhere. It is simple in design, supports music with a high range of frequencies and most importantly works with all browsers. Adding this player will add a pro look to your blog because many bloggers don’t know about this player as yet, so be the first to use it. Many bloggers also think that this audio player works with WordPress only but with a little tweaking  I will help you add this player successfully to your BlogSpot blogs.
This is how your cool flash player would look like,

 
To add this player to your blog post or sidebar, do the following,

  • Go to Layout > Edit HTML >
Layout
  • Backup your template >
backup-template
  • Press Ctrl + F and look for </head> by using the search box,
Search-code
  • Immediately above </head> tag  add this code,
Tip of Copying the Code Below:- Start Highlighting the Code from bottom to top and then Press Ctrl + C  to copy it. To Paste it above </head> simply press Ctrl + V 
That’s it.
<script type='text/javascript'>
//<![CDATA[
var AudioPlayer=function(){var F=[];var C;var E="";var A={};var D=-1;function B(G){return document.all?window[G]:document[G]}return{setup:function(H,G){E=H;A=G},getPlayer:function(G){return B(G)},embed:function(K,O){var I={};var M;var G;var P;var H;var N={};var J={};var L={};for(M in A){I[M]=A[M]}for(M in O){I[M]=O[M]}if(I.transparentpagebg=="yes"){N.bgcolor="#FFFFFF";N.wmode="transparent"}else{if(I.pagebg){N.bgcolor="#"+I.pagebg}N.wmode="opaque"}N.menu="false";for(M in I){if(M=="pagebg"||M=="width"||M=="transparentpagebg"){continue}J[M]=I[M]}L.name=K;L.style="outline: none";J.playerID=K;audioplayer_swfobject.embedSWF(E,K,I.width.toString(),"24","9",false,J,N,L);F.push(K)},syncVolumes:function(G,I){D=I;for(var H=0;H<F.length;H++){if(F[H]!=G){B(F[H]).setVolume(D)}}},activate:function(G){if(C&&C!=G){B(C).close()}C=G},load:function(I,G,J,H){B(I).load(G,J,H)},close:function(G){B(G).close();if(G==C){C=null}},open:function(G){B(G).open()},getVolume:function(G){return D}}}()/* SWFObject v2.1 <http://code.google.com/p/swfobject/>
    Copyright (c) 2007-2008 Geoff Stearns, Michael Williams, and Bobby van der Sluis
    This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
var audioplayer_swfobject=function(){var b="undefined",Q="object",n="Shockwave Flash",p="ShockwaveFlash.ShockwaveFlash",P="application/x-shockwave-flash",m="SWFObjectExprInst",j=window,K=document,T=navigator,o=[],N=[],i=[],d=[],J,Z=null,M=null,l=null,e=false,A=false;var h=function(){var v=typeof K.getElementById!=b&&typeof K.getElementsByTagName!=b&&typeof K.createElement!=b,AC=[0,0,0],x=null;if(typeof T.plugins!=b&&typeof T.plugins[n]==Q){x=T.plugins[n].description;if(x&&!(typeof T.mimeTypes!=b&&T.mimeTypes[P]&&!T.mimeTypes[P].enabledPlugin)){x=x.replace(/^.*\s+(\S+\s+\S+$)/,"$1");AC[0]=parseInt(x.replace(/^(.*)\..*$/,"$1"),10);AC[1]=parseInt(x.replace(/^.*\.(.*)\s.*$/,"$1"),10);AC[2]=/r/.test(x)?parseInt(x.replace(/^.*r(.*)$/,"$1"),10):0}}else{if(typeof j.ActiveXObject!=b){var y=null,AB=false;try{y=new ActiveXObject(p+".7")}catch(t){try{y=new ActiveXObject(p+".6");AC=[6,0,21];y.AllowScriptAccess="always"}catch(t){if(AC[0]==6){AB=true}}if(!AB){try{y=new ActiveXObject(p)}catch(t){}}}if(!AB&&y){try{x=y.GetVariable("$version");if(x){x=x.split(" ")[1].split(",");AC=[parseInt(x[0],10),parseInt(x[1],10),parseInt(x[2],10)]}}catch(t){}}}}var AD=T.userAgent.toLowerCase(),r=T.platform.toLowerCase(),AA=/webkit/.test(AD)?parseFloat(AD.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,q=false,z=r?/win/.test(r):/win/.test(AD),w=r?/mac/.test(r):/mac/.test(AD);/*@cc_on q=true;@if(@_win32)z=true;@elif(@_mac)w=true;@end@*/return{w3cdom:v,pv:AC,webkit:AA,ie:q,win:z,mac:w}}();var L=function(){if(!h.w3cdom){return }f(H);if(h.ie&&h.win){try{K.write("<script id=__ie_ondomload defer=true src=//:><\/script>");J=C("__ie_ondomload");if(J){I(J,"onreadystatechange",S)}}catch(q){}}if(h.webkit&&typeof K.readyState!=b){Z=setInterval(function(){if(/loaded|complete/.test(K.readyState)){E()}},10)}if(typeof K.addEventListener!=b){K.addEventListener("DOMContentLoaded",E,null)}R(E)}();function S(){if(J.readyState=="complete"){J.parentNode.removeChild(J);E()}}function E(){if(e){return }if(h.ie&&h.win){var v=a("span");try{var u=K.getElementsByTagName("body")[0].appendChild(v);u.parentNode.removeChild(u)}catch(w){return }}e=true;if(Z){clearInterval(Z);Z=null}var q=o.length;for(var r=0;r<q;r++){o[r]()}}function f(q){if(e){q()}else{o[o.length]=q}}function R(r){if(typeof j.addEventListener!=b){j.addEventListener("load",r,false)}else{if(typeof K.addEventListener!=b){K.addEventListener("load",r,false)}else{if(typeof j.attachEvent!=b){I(j,"onload",r)}else{if(typeof j.onload=="function"){var q=j.onload;j.onload=function(){q();r()}}else{j.onload=r}}}}}function H(){var t=N.length;for(var q=0;q<t;q++){var u=N[q].id;if(h.pv[0]>0){var r=C(u);if(r){N[q].width=r.getAttribute("width")?r.getAttribute("width"):"0";N[q].height=r.getAttribute("height")?r.getAttribute("height"):"0";if(c(N[q].swfVersion)){if(h.webkit&&h.webkit<312){Y(r)}W(u,true)}else{if(N[q].expressInstall&&!A&&c("6.0.65")&&(h.win||h.mac)){k(N[q])}else{O(r)}}}}else{W(u,true)}}}function Y(t){var q=t.getElementsByTagName(Q)[0];if(q){var w=a("embed"),y=q.attributes;if(y){var v=y.length;for(var u=0;u<v;u++){if(y[u].nodeName=="DATA"){w.setAttribute("src",y[u].nodeValue)}else{w.setAttribute(y[u].nodeName,y[u].nodeValue)}}}var x=q.childNodes;if(x){var z=x.length;for(var r=0;r<z;r++){if(x[r].nodeType==1&&x[r].nodeName=="PARAM"){w.setAttribute(x[r].getAttribute("name"),x[r].getAttribute("value"))}}}t.parentNode.replaceChild(w,t)}}function k(w){A=true;var u=C(w.id);if(u){if(w.altContentId){var y=C(w.altContentId);if(y){M=y;l=w.altContentId}}else{M=G(u)}if(!(/%$/.test(w.width))&&parseInt(w.width,10)<310){w.width="310"}if(!(/%$/.test(w.height))&&parseInt(w.height,10)<137){w.height="137"}K.title=K.title.slice(0,47)+" - Flash Player Installation";var z=h.ie&&h.win?"ActiveX":"PlugIn",q=K.title,r="MMredirectURL="+j.location+"&MMplayerType="+z+"&MMdoctitle="+q,x=w.id;if(h.ie&&h.win&&u.readyState!=4){var t=a("div");x+="SWFObjectNew";t.setAttribute("id",x);u.parentNode.insertBefore(t,u);u.style.display="none";var v=function(){u.parentNode.removeChild(u)};I(j,"onload",v)}U({data:w.expressInstall,id:m,width:w.width,height:w.height},{flashvars:r},x)}}function O(t){if(h.ie&&h.win&&t.readyState!=4){var r=a("div");t.parentNode.insertBefore(r,t);r.parentNode.replaceChild(G(t),r);t.style.display="none";var q=function(){t.parentNode.removeChild(t)};I(j,"onload",q)}else{t.parentNode.replaceChild(G(t),t)}}function G(v){var u=a("div");if(h.win&&h.ie){u.innerHTML=v.innerHTML}else{var r=v.getElementsByTagName(Q)[0];if(r){var w=r.childNodes;if(w){var q=w.length;for(var t=0;t<q;t++){if(!(w[t].nodeType==1&&w[t].nodeName=="PARAM")&&!(w[t].nodeType==8)){u.appendChild(w[t].cloneNode(true))}}}}}return u}function U(AG,AE,t){var q,v=C(t);if(v){if(typeof AG.id==b){AG.id=t}if(h.ie&&h.win){var AF="";for(var AB in AG){if(AG[AB]!=Object.prototype[AB]){if(AB.toLowerCase()=="data"){AE.movie=AG[AB]}else{if(AB.toLowerCase()=="styleclass"){AF+=' class="'+AG[AB]+'"'}else{if(AB.toLowerCase()!="classid"){AF+=" "+AB+'="'+AG[AB]+'"'}}}}}var AD="";for(var AA in AE){if(AE[AA]!=Object.prototype[AA]){AD+='<param name="'+AA+'" value="'+AE[AA]+'" />'}}v.outerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+AF+">"+AD+"</object>";i[i.length]=AG.id;q=C(AG.id)}else{if(h.webkit&&h.webkit<312){var AC=a("embed");AC.setAttribute("type",P);for(var z in AG){if(AG[z]!=Object.prototype[z]){if(z.toLowerCase()=="data"){AC.setAttribute("src",AG[z])}else{if(z.toLowerCase()=="styleclass"){AC.setAttribute("class",AG[z])}else{if(z.toLowerCase()!="classid"){AC.setAttribute(z,AG[z])}}}}}for(var y in AE){if(AE[y]!=Object.prototype[y]){if(y.toLowerCase()!="movie"){AC.setAttribute(y,AE[y])}}}v.parentNode.replaceChild(AC,v);q=AC}else{var u=a(Q);u.setAttribute("type",P);for(var x in AG){if(AG[x]!=Object.prototype[x]){if(x.toLowerCase()=="styleclass"){u.setAttribute("class",AG[x])}else{if(x.toLowerCase()!="classid"){u.setAttribute(x,AG[x])}}}}for(var w in AE){if(AE[w]!=Object.prototype[w]&&w.toLowerCase()!="movie"){F(u,w,AE[w])}}v.parentNode.replaceChild(u,v);q=u}}}return q}function F(t,q,r){var u=a("param");u.setAttribute("name",q);u.setAttribute("value",r);t.appendChild(u)}function X(r){var q=C(r);if(q&&(q.nodeName=="OBJECT"||q.nodeName=="EMBED")){if(h.ie&&h.win){if(q.readyState==4){B(r)}else{j.attachEvent("onload",function(){B(r)})}}else{q.parentNode.removeChild(q)}}}function B(t){var r=C(t);if(r){for(var q in r){if(typeof r[q]=="function"){r[q]=null}}r.parentNode.removeChild(r)}}function C(t){var q=null;try{q=K.getElementById(t)}catch(r){}return q}function a(q){return K.createElement(q)}function I(t,q,r){t.attachEvent(q,r);d[d.length]=[t,q,r]}function c(t){var r=h.pv,q=t.split(".");q[0]=parseInt(q[0],10);q[1]=parseInt(q[1],10)||0;q[2]=parseInt(q[2],10)||0;return(r[0]>q[0]||(r[0]==q[0]&&r[1]>q[1])||(r[0]==q[0]&&r[1]==q[1]&&r[2]>=q[2]))?true:false}function V(v,r){if(h.ie&&h.mac){return }var u=K.getElementsByTagName("head")[0],t=a("style");t.setAttribute("type","text/css");t.setAttribute("media","screen");if(!(h.ie&&h.win)&&typeof K.createTextNode!=b){t.appendChild(K.createTextNode(v+" {"+r+"}"))}u.appendChild(t);if(h.ie&&h.win&&typeof K.styleSheets!=b&&K.styleSheets.length>0){var q=K.styleSheets[K.styleSheets.length-1];if(typeof q.addRule==Q){q.addRule(v,r)}}}function W(t,q){var r=q?"visible":"hidden";if(e&&C(t)){C(t).style.visibility=r}else{V("#"+t,"visibility:"+r)}}function g(s){var r=/[\\\"<>\.;]/;var q=r.exec(s)!=null;return q?encodeURIComponent(s):s}var D=function(){if(h.ie&&h.win){window.attachEvent("onunload",function(){var w=d.length;for(var v=0;v<w;v++){d[v][0].detachEvent(d[v][1],d[v][2])}var t=i.length;for(var u=0;u<t;u++){X(i[u])}for(var r in h){h[r]=null}h=null;for(var q in audioplayer_swfobject){audioplayer_swfobject[q]=null}audioplayer_swfobject=null})}}();return{registerObject:function(u,q,t){if(!h.w3cdom||!u||!q){return }var r={};r.id=u;r.swfVersion=q;r.expressInstall=t?t:false;N[N.length]=r;W(u,false)},getObjectById:function(v){var q=null;if(h.w3cdom){var t=C(v);if(t){var u=t.getElementsByTagName(Q)[0];if(!u||(u&&typeof t.SetVariable!=b)){q=t}else{if(typeof u.SetVariable!=b){q=u}}}}return q},embedSWF:function(x,AE,AB,AD,q,w,r,z,AC){if(!h.w3cdom||!x||!AE||!AB||!AD||!q){return }AB+="";AD+="";if(c(q)){W(AE,false);var AA={};if(AC&&typeof AC===Q){for(var v in AC){if(AC[v]!=Object.prototype[v]){AA[v]=AC[v]}}}AA.data=x;AA.width=AB;AA.height=AD;var y={};if(z&&typeof z===Q){for(var u in z){if(z[u]!=Object.prototype[u]){y[u]=z[u]}}}if(r&&typeof r===Q){for(var t in r){if(r[t]!=Object.prototype[t]){if(typeof y.flashvars!=b){y.flashvars+="&"+t+"="+r[t]}else{y.flashvars=t+"="+r[t]}}}}f(function(){U(AA,y,AE);if(AA.id==AE){W(AE,true)}})}else{if(w&&!A&&c("6.0.65")&&(h.win||h.mac)){A=true;W(AE,false);f(function(){var AF={};AF.id=AF.altContentId=AE;AF.width=AB;AF.height=AD;AF.expressInstall=w;k(AF)})}}},getFlashPlayerVersion:function(){return{major:h.pv[0],minor:h.pv[1],release:h.pv[2]}},hasFlashPlayerVersion:c,createSWF:function(t,r,q){if(h.w3cdom){return U(t,r,q)}else{return undefined}},removeSWF:function(q){if(h.w3cdom){X(q)}},createCSS:function(r,q){if(h.w3cdom){V(r,q)}},addDomLoadEvent:f,addLoadEvent:R,getQueryParamValue:function(v){var u=K.location.search||K.location.hash;if(v==null){return g(u)}if(u){var t=u.substring(1).split("&");for(var r=0;r<t.length;r++){if(t[r].substring(0,t[r].indexOf("="))==v){return g(t[r].substring((t[r].indexOf("=")+1)))}}}return""},expressInstallCallback:function(){if(A&&M){var q=C(m);if(q){q.parentNode.replaceChild(M,q);if(l){W(l,true);if(h.ie&&h.win){M.style.display="block"}}M=null;l=null;A=false}}}}}();
//]]>
</script>
  • Save your template
Now whenever you want to add this WordPress Audio Player to your posts or sidebar, add the code below to the Edit HTML section of your Post or to the HTML/JavaScript widget in your sidebar.
<object type="application/x-shockwave-flash" data="http://mustafastc.fileave.com/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://mustafastc.fileave.com/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
Remember to replace the text in green with the URL of your MP3 file. To know how to get URLs for your files read Learn how to get hotlinking/Direct URLs for your files
Now publish your post and enjoy listening to your favorite music!
Add more than one Wordpress audio player per post
To add more than one audio player to your post, simply add the code below for your second player,
<object type="application/x-shockwave-flash" data="http://mustafastc.fileave.com/player.swf" id="audioplayer2" height="24" width="290">
<param name="movie" value="http://mustafastc.fileave.com/player.swf">
<param name="FlashVars" value="playerID=2&amp;soundFile=URL of your second MP3 file">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
You get another Mp3 player just like the first one
Remember to replace the text in green with the URL of your MP3 file. If you want to use an extra player, simply change the text in red to the number of player. For adding a third player change the text in red to 3 and so on.
Attention!
The Reason why many readers were getting errors while using this player is that I have saved the flash file of this player in a free hosting service like www.fileave.com To have this player work efficiently kindly save the following files in a free file hosting service and link to them using your own URLs,
I have linked to the above flash file as http://mustafastc.fileave.com/player.swf in the codes shared above. Kindly replace this URL with yours.
Update:- If you wish to colorize the player or want to change its look and feel then read this post –> Customize The Color Scheme Of Wordpress MP3 Player
I hope you would like this new update. If you have any question please feel free to ask me in the comment box below.

Customize Bullet List and Number list Using Hover Effect




Bullet and Number List Hover Effect Keeping the posts unique in every way should be the aim of every blogger. The Number list (ol) and Bullet list (ul) is an important part of a good article. To change  the entire look and feel of these lists we will use simple CSS effects to bring about a change in bullets and number style on mouse hover. This tutorial consists of two very interesting parts,





  1. Change Bullet list (un-ordered list) style on Mouse Hover
  2. Change Number List (order list) style on Mouse Hover

Change Bullet list (ul) style on Mouse Hover

Before I may start lets see a Live Demo. Make sure you hit the Preview button.

Live Demo

To add this effect to your posts, do the following,
  • Log into Blogger
  • Go To Layout > Edit HTML
  • Now add this piece of code just above ]]></b:skin>
.post ul {list-style-type: circle;     }
.post ul li {
line-height: 1.5em;       
color:#289728;
}
.post ul li:hover {
       color:#0080ff;
list-style-type: disc; }
.post ul p { color:#555555;
             line-height:1.4em;  }
You can change the colors with any Hexa Decimal Value you like and can also change list-style-type: with many options like : circle, disc or square.
  • Save Your template
Now whenever you create a bullet list in your posts make a minor change to it by adding p tag to it. How? Read below,
  • Once you have created a bullet list in your  post switch to the EDIT HTML Section and search for <ul> You will find a code something like below,
<ul>
<li>Your Content Here</li>
<li>Your Content Here</li>
</ul>
It doesn’t matter if the code appears horizontally. You just need to replace <li> with <li><p> and </li> with </p></li> . Replace them as many times as they appear. Now the code will look like this,
<ul>
<li><p>
Your Content Here</p></li>
<li><p>Your Content Here</p></li>
</ul>
Publish your post and enjoy the new bullet style.

Try it Yourself! :- MBT HTML EDITOR

Change Number List (ol) style on Mouse Hover


See a Live Preview First.

Live Demo
To add this effect to your posts, do the following,
  • Log into Blogger
  • Go To Layout > Edit HTML
  • Now add this piece of code just above ]]></b:skin>
.post ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
.post ol li {
line-height: 1.4em;
font: italic 1em Georgia, Times, serif;
  color: #289728;
}
.post ol li:hover {
font:bold italic 1em Georgia, Times, serif;
  color: #0080ff;
}
.post ol p {
  font: normal 1em Arial, Helvetica, sans-serif;
  color: #555555;
  line-height:1.4em;
}
Change the colors to suit your preferences. For help use our color chart.
  • Save your template
Now whenever you write a post and use a number list just make similar changes to the code in edit html section as you did for un-ordered list. But this time instead of searching for <ul> search for <ol> Make sure you change <li> with <li><p> and </li> with </p></li>
That’s it! preview you template to see the new change in number list.

Try it Yourself! :- MBT HTML EDITOR

Hope you loved this new way of learning and applying CSS effects to your templates :>


Learn CSS, HTML and JavaScript Offline! using HTML Editor




MBT-HTML-Editor The biggest problem faced by majority of newbie bloggers and web developers  is editing their templates. And the reason for this is lack of awareness with browser languages like CSS, XML, HTML, JavaScript etc. There are several websites online that have tutorials in these fields and one of such websites is www.w3schools.com This website is popular because it lets you play with the code! It has an Online HTML Editor Tool that lets you see live preview of the code that you use. Many developers find this tool pretty useful but has someone ever imagined that you can actually rip this tool out of w3schools and use it offline for practicing coding while offline? Well fortunately after some trial and error we could successfully create a similar tool entitled as “HTML Editor” This is the first time all bloggers are having a chance to have fun playing with important codes like CSS, HTML and JavaScript and learn important coding in a more interesting way! Now you can actually test a code before adding them to blogger.

This tool is better than any other HTML Editor found online or available as a software, in the following ways,

  1. It works Offline in any browser available
  2. Takes less than a fraction of a second to show live preview
  3. Is equal in size to a peanut i.e 2.32 Kb
  4. Code is saved in browser if your PC shutdowns accidently 
  5. You can go back several times using Ctrl + Z and go forward using Ctrl + Y
  6. Can be used to test a code for Cross Browser Compatibility
  7. It is free of charge thanks to ! :D 


Downloading Instructions

To Download MBT HTML Editor follow the steps below,
  • Click this link –> MBT HTML Editor
  • The MBT HTML Editor window will expand. Now you can start using it Online but to work offline in it you need to save it first. To save it click on the file menu at top-left-corner of your browser and then choose “Save As”  or “Save Page As”. Select a safe location and hit enter, as shown below,
downloading-html-editor

  • Done!
Troubleshoot:- In IE a Security alert will appear, ignore it by right clicking on it and then selecting Allow Blocked Content

Instructions For Using MBT HTML EDITOR

This tool consists of two panes i.e left pane and right pane. See a screen shot below,
 html-editor-instructions

The left pane is the area where you add your code and the right pane is the area responsible for displaying a visual view of the code. The CSS code is added just between <style> and </style>  and the HTML code is added just below </style>

Playing With A Code

Lets now play with a code using our HTML Editor. I am using the Image Opacity Effect Trick here as an example.
The CSS code for Opacity Effect looks like this,
img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
img:hover {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
Now to apply this effect to an image we will need an HTML code as shared below,
<img  class="Fadein"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir5Vpb6obRaVcCiBOCIm1jjxucBefQpcBOQwcp-O2_5Obaz5Io_x_qH_eyde61KlAIJD9QuDsxjJ0s7oDKMgjWzIqSBmybC1fotgh6wXsNsAUEpH0svhEl141bDvYqYAbWST7JV8fDHRYR/s400/DIGG.png">
Now The best part, add the CSS code just between <style> and </style>  and the HTML code just below </style>. Hit the Preview button and watch the dancing code in action in front of your eyes. You can now start the play!
See this screen shot,
MBT-HTML-EDITOR-DISPLAY
Some Important Tips:-
  • To go backward to previous changes, click Ctrl + Z
  • To go forward to last changes made, click Ctrl + Y
  • To get URL of an image saved in your hard drive suppose Drive F, open Firefox browser and simply type  F: in the address bar and hit enter. That drive will open and now simply browse to that image and right click on it and then click on Copy Link Location. Alas! you got the URL. Now use this URL wherever required during your offline code editing adventure.
  • Once you are happy with the code that you prepared then simply paste the CSS code just above ]]></b:skin> inside your blogger template and the HTML code where you want the effect to be seen i.e post or sidebar

Releasing Priceless “MBT Buster Theme Series”. Highly Stylized, Customized and Optimzed by Default!





 The look and appearance of a great blog is always an inspiration for bloggers and web designers. I hope you all are well aware of Amanda’s blog “Blogger Buster” and I am sure you all love the overall look and feel of her blog. But have you ever imagined that you could have a premium looking template just like Amanda’s for free? If not then let me announce that you surely could have one, thanks to us :>

I am proud to let you know that after a week of hard work I was able to create a series of blogger templates similar to Blogger Buster and I named each one of them: “Buster Theme”

Have a glance of them by clicking the link below each theme,

Buster Theme Series

mbt-church-theme1
mbt-church-theme2
mbt-church-theme3
View | 
mbt-church-theme4
View | 
 
There are many new features in these MBT template series which will be of great interest to even Amanda herself. And as I say always MBT templates are stylized, customized and optimized by default! There is absolutely no work required on your side but a little push start at first :>
Lets look at some of its Main features,
  1. Navigation bar
  2. Well organized Post Header with separate date, time and label sections
  3. Wide post body with Stylized Post images and BlockQuote
  4. Post Footer With- MBT Social Bookmarking Icons
  5. Post Footer With- Subscription Block
  6. Post Footer With- Built-in Related Post Widget
  7. Sidebars with rounded header corners
  8. Stylized and un-stylized Sidebar Sections for multiple use
  9. Flexible Search Box
  10. Flexible Subscription Form
  11. Flexible Advertisement section
  12. Cross Browser Compatible Multi Tab Widget – Highly User Friendly!
  13. Embedded and stylized Comment section. Author and Readers comment with different style
  14. Comment Count
  15. Comment Avatar, with Comment Icon for anonymous users
  16. Footer Three Column Widget. One Column Can accommodate as many widgets as you can add!
IMPORTANT WIDGET SECTIONS IN LAYOUT
As shown in the image below, there a total of 4 widget sections in right sidebar. Widget Section 2 and 4 are stylized sections whilst section 1 and 3 are un-stylized. Add only those widgets to section 1 and 3, for which you want a completely unique customization. To know what I mean by that read the Customization Instructions
BLOGGER LAYOUT WIDGET SECTIONS
Now you need to Boost up your selected template with Three Important Professional Procedures. Which are,
  1. Customization
  2. Optimization
  3. Monetization 

Below are important steps to upload and customize your MBT Buster Theme. I have also shared codes to flexible widgets used in the template. Click each link for details.
  1. Back Up your current Blogger template
  2. Back Up your Blogger widgets
  3. Upload MBT Buster Theme
  4. Edit The Navigation Menu
  5. Add The Search Box
  6. Add The Subscription Form
  7. Add The Advertisement Section
  8. Add The Multi Tab Widget
  9. Create The Header Background Image

You will have to save your current template for future use. To do this follow the steps below,
  1. Go To Layout > Edit HTML
  2. Click the link that says “Download Full Template“. As shown in the image below,
 backup-template1
    3.    When asked where to save the template, choose a safe location in your hard drive.
You are done!
To save your current widgets follow the steps below,
  1. Go To Layout
  2. Open each widget one by one and copy the code inside it along with the title and paste it in a notepad (not a WordPad)
  3. Save the notepad in a safe location
You are done!

Once you have downloaded Buster theme then follow the steps below to replace your current template with it,
  1. Go To Layout > Edit HTML
  2. You will see a box with two buttons at its side that says “ Browse” and “Upload” as shown below,
 backup-template
    3.    Click the browse button, locate the buster theme file and then click the upload button
    4.    Now you will be asked that certain widget data will be lost if you click save. Since we have already backed up all our widgets so we don’t care. Go on and click the “Confirm Save” button. Alas! you have successfully replaced your current template. View your blog to see the new mega change.

Navigation-menu
To edit the navigation menu, follow the steps below,
  1. Go to Layout > Edit HTML
  2. Search for <div id='subnavbar'> using the browser search box     (Tip:- Press Ctrl + F )
  3. Just below <div id='subnavbar'> you will see a long chain of code as shown below,
<ul id='subnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
        </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
          <a href='#'>Sitemap</a>
        </li>
  <li>
          <a href='http://www.themobilehub.blogspot.com'>Download This Theme</a>
        </li>
      </ul>
    4.    Edit the bolded text in the code above with your own Page links and Page Titles. Replace the hash sign (#) with your Page URL and bolded green text with your Page Name/Title. Also Replace http://www.themobilehub.blogspot.com with your own Page URL
   5.   If you want to add another link/tab but have no option left than paste the code below just above </ul>
         <li>
          <a href='#'>Page Name</a>
        </li>
    6.    Save your template and view your template to see the changes in action.
you are done!

To add the search box you will have to follow the steps below,
  1. Go To layout
  2. Click Add a Gadget from the widget section-3 and choose HTML/JavaScript 
  3. Paste the code below inside the HTML/JavaScript widget,
<div id="search">
<form id="searchform" action="/search" style="display:inline;" method="get">
<input id="s" onfocus="if (this.value == &quot;Looking For Something..?&quot;) {this.value = &quot;&quot;}" value="Looking For Something..?" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Looking For Something..?&quot;;}" type="text"/>
<input onmouseover="this.className='mbt mbthov'" onmouseout="this.className='mbt'" class="mbt" value="GO >>" type="submit"/>
</form>
</div>
    5.    Click save and view your template to see the change.
you are done!
Adding this widget needs a bit comprehensive instructions so I will soon publish a separate post on it.
Follow the steps below,
  1. Go To layout
  2. Click Add a Gadget from the Widget Section-3, and choose HTML/JavaScript
Now For the rest of detailed instructions read this post –> 125 By 125 Ad Banner Widget For Bloggers Where you will get the code to add to your HTML/JavaScript widget.

To add this beautiful widget, follow the steps below,
  1. Go To layout
  2. Click Add a Gadget from the Widget Section-3, and choose HTML/JavaScript
  3. Paste the code below, inside the HTML/JavaScript widget
<form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 350px;" class="TTs"> <a>TAB 1</a> <a>TAB 2</a> <a>TAB 3</a></div>
    <div style="width: 350px; height: 270px;" class="Halamans">
    <div class="Halaman">
    <div class="Alas">
    <br/>
TAB 1 CONTENT GOES HERE
    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>
TAB 2 CONTENT GOES HERE
    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>
TAB 3 CONTENT GOES HERE
    </div>
    </div>
    </div>
    </div>
    </form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
Replace Tab 1, 2, 3 With Tab Titles and TAB 1,2,3 CONTENT GOES HERE  with the HTML code of your Recent Comments, Posts and Popular Posts Widgets. You can add anything in Tab Content Area.
I worked really hard to make this widget user friendly. You will find this widget code really handy. Further I have also solved the Browser compatibility Issue i.e The tabs will look rounded in Firefox, Safari, Opera, Chrome and they will only look rectangular in IE. IE was a real headache for me!

You will have to create a Header image in gif format and with dimensions 1024 by 214. After you have created one, upload it to your template as follows,
  1. Go To layout
  2. Then click the Edit link at the top of your layout as shown below,
 buster-theme-layout  
    3.   A window will open. Click the Browse button and locate your header image. Make sure you check the box saying “Instead of Title and Description
    4.    Hit save and you are done!

Optimization

As I said all MBT Templates are optimized by default! Hence you do not need to find meta tags and add them inside your templates. You only need to add the required keywords, description and your name to the metas. Follow the steps below,
  1. Go To Layout > Edit HTML
  2. And search for <head> (Tip:- Press Ctrl + F to use a search box for finding <head>)
  3. You will find 4 important meta tags under the <head> tag as shown in the image below,

You just need to edit the required fields as guided in the bolded text below.
Update:- I have observed that for some unknown reasons the meta tags get automatically deleted. If you see no metas in your buster theme than simple copy paste the code below just under <b:include data='blog' name='all-head-content'/>
<link href='mailto:Your Email Address Goes Here' rev='made'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Add your blog description here. Maximum Characters (including spaces) should be 120' name='Description'/></b:if>
<meta content='Add your keywords here, Maximum Characters (including spaces) should be 200' name='keywords'/>
<meta content='Write your name here' name='Author'/>
Once done, hit Save. You have now successfully optimized your Buster Theme by allowing search engines to crawl your template smoothly.
For Details on how to choose good keywords and how to write effective keywords and description, read  the

Monetization

For adding Adsense code below posts, you will need to follow the steps below,
  1. Get Your Adsense Code From www.adsense.com Make sure to select a horizontal banner or horizontally aligned 5 links.
  2. Convert Your Adsense Code into an embeddable one by using the
  3. Now Go To your Layout > Edit HTML
  4. Check The Expand Widgets Box
  5. And search for <div class='adsense'> You will see something like the code below,
<div class='adsense'> <center><b>YOUR ADSENSE CODE GOES HERE</b></center>
</div>
    6.    Replace the bolded black text with your Adsense code and hit save. You are Done!

I have emailed the MBT Buster Theme Download File to all MBT subscribers. Those who haven’t subscribed yet may read the instructions below,
Previously I used to offer open downloads but many bloggers and web owners misused this availability by directly linking to MBT download link. Due to bandwidth issues I can now offer free downloads of blogger resources to MBT Subscribers only. If you want to download MBT Buster Theme then you will only need to fill up the simple Email subscription form below, Do let me know in the comment box below after you have subscribed and activated MBT email updates. Make sure you include the email ID with which you subscribed. To prevent spam, write your Email ID in the comment box the following way,
  • If you use Gmail then write it as xyz G mail despite writing as xyz@gmail.com
  • If you use Hotmail then write it as xyz H mail and for Yahoo write as xyz Y mail
  • If you use any other Email ID then follow the same pattern
The moment I receive your email and see that you have subscribed and activated MBT Feed Updates, I will email you the Download File.
By becoming MBT Subscriber you are opening the doors for unlimited free downloads of rare Blogger Resources. 



Window Style Social Bookmarking Icons Set – Best Gift To Bloggosphere!




WINDOW-STYLE-MBT-ICONSFortunately we are back again with a new set of social bookmarking icons that are oval in shape and have a window like reflection. This set consists of a total seven social media icons which includes Facebook, Stumbleupon, Digg, Technorati, Twitter, Delicious and as usual an RSS Icon. The downloadable file consists of png images with different sizes i.e 128px by 128px, 64px by 64px and 48px by 48px all compressed into a winrar file.




Window Style Social Bookmarking Icons

WINDOW-STYLE-MBT-ICONS

Embeddable “CSS Color Chart” – 216 Hexadecimal Values




Embeddable css color chart Below is an embeddable Web Colour Chart most probably known as hexadecimal colour chart. The chart below consists of a total 216 hexadecimal colours which are well interpreted by all browsers and are compatible in every sense. The Colour chart below uses a combination of well scripted HTML and CSS to produce a mouse over effect when you hover your cursor over the table cells. You can use this chart for both free and commercial purpose. You can use these colour codes/hexadecimal values for editing your Blogspot, Wordpress or web templates. They are web safe colours so they look the same in any browser.  You can embed this Colour Chart or table in your websites or weblogs. You only need to subscribe to this blog by filling up the simple Subscription form on the sidebar. Once you have subscribed kindly inform me by using the comment box below and include in it the email address with which you subscribed. To avoid spam robots, write your email address as follow,

  • If you use hotmail write like this –> xyz hot mail
  • If you use gmail write like this –> xyz g mail

where xyz is your email ID. If you use any other emailing service then simply follow the above pattern.
The moment I receive your comment, I will send you the embeddable code to this chart.

CSS Web Colour Chart

 
#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000
 
#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
#9999FF #9999CC #999999 #999966 #999933 #999900
#9966FF #9966CC #996699 #996666 #999933 #999900
#9933FF #9933CC #993399 #993366 #993333 #993300
#9900FF #9900CC #990099 #990066 #990033 #990000

#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00
#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
#6699FF #6699CC #669999 #669966 #669933 #669900
#6666FF #6666CC #666699 #666666 #666633 #666600
#6633FF #6633CC #663399 #663366 #663333 #663300
#6600FF #6600CC #660099 #660066 #660033 #660000

#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00
#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#3399FF #3399CC #339999 #339966 #339933 #339900
#3366FF #3366CC #336699 #336666 #336633 #336600
#3333FF #3333CC #333399 #333366 #333333 #333300
#3300FF #3300CC #330099 #330066 #330033 #330000
#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00
#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
#0099FF #0099CC #009999 #009966 #009933 #009900
#0066FF #0066CC #006699 #006666 #006633 #006600
#0033FF #0033CC #003399 #003366 #003333 #003300
#0000FF #0000CC #000099 #000066 #000033 #000000

Web developers and bloggers are requested to attach a link-back to this blog if they wish to share this chart with their readers.
I would love to know how you liked it. Any comment is appreciated.