Custom CSS code for intensedebate commenting systems

Intensedebate commenting system is one of the best system for the bloggers who are in need of changing their blogger commenting system completely to like WordPress commenting system. I had already posted about this intensedebate commenting system. And now here I am with a customized css code that can make your commenting style completely look like a WordPress comment system.

This is what makes intensedebate a good commenting system for bloggers.They allow customizing the comment system style by simply adding css code. So You can easily add the css code and then easily customize the style as per your wish.

How To Add Customized CSS Code?

Intensedebate allow you to add a customized css code. For adding customized code, go to settings on intensedebate account where you will see an option "Custom CSS". Click on the option and add the CSS codes given below. And then save the settings.

.idc-postnav-label { display: none !important; }
.idc-postnav-list { display: none !important; }
.idc-foot { display: none !important; }
#idc-container div.idc-text_noresize, #idc-container textarea.idc-text_noresize {height: 100px !important;}/*Pad and prepare new comment and reply comment boxes */

#IDCommentsNewThread {position: relative !important;padding-top: 80px !important;}
#IDCommentReplyForm1{position: relative !important;padding-top: 80px !important;}

#IDCommentReplyDiv{position: relative !important} /*Prepare reply comment for positioning */
#IDCommentReplyForm2{position: absolute !important; top: 31px !important; left: 20px !important;}
#IDCommentNewThreadForm2 {position: absolute !important; top: 7px !important; left: 0px !important;width: 100% !important;}

#luv_field_new {position: absolute !important;top: 10px !important;left: 0 !important;}
#luv_field_reply {position: absolute !important;top: 10px !important;left: 0 !important;}

#all_luv{font-weight:bold !important;} /*Bold the text for comment luv */
span#mylastpost img:first-of-type { display: none !important; }

What Changes Can Happened After Adding The CSS Code?

After adding the CSS code, there will be a major change happening in the intense-debate comment box. It will completely change the style of the comment box and will look like a WordPress comment box. No one will realize that it is a third party comment box.  After adding the code the comment box will look like the picture given below.

Following are the changes that will happen on a default comment box style.

1. Name,email and website boxes will appear above the comment box

2. intensedebate logo and comment luv image will be hidden

3. There won't be any login button

4. It will be a clean and neat comment box style.

Read more »

Add animated flash cloud label widget for your blogger blog

I am introducing a blog widget for bloggers again after a long time. This is a widget that can make your blog labels as an animated flash cloud. It is an awesome widget. Why to use an animated cloud label widget? It will help you to increase your blog looks and more visitors will be attracted to your blog. And also it will help in decreasing your blog bounce rate.

This label widget can be easily added to your blog and you can easily customize as per your own wish. This widget is simple and more attractive. If you want to add this smart widget to your blog just follow the below steps.

1#.Go to your blogger dashboard

2#.Click on layout

3#.Add a gadget and select "HTML/JavaScript"

4#.Then just copy the below given html code and paste to it

<div id="w2bFlashContent">
<p style="display:none;">
Flash Labels by <a href="http://www.techplusz.com/"><b>TECH plus</b></a></p>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "http://www.techplusz.com/",
    color          : "000000",
    hoverColor     : "333333",
    backgroundColor: "FFFFFF",
    size           : 12,
    speed          : 100,
    width          : 250,
    height         : 300,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js"></script>

Before saving, make some change in html code. replace the blog url "www.techplusz.com" to your blog url.

And also you can change the label color by replacing "00000" and ad your own color

Similarly change the hivercolor by replacing "333333"

To change the background color replace "FFFFFF"

And to increase or decrease the text size change the value of "12"

Speed,width,height can also be customized by changing the value. 100,250,300

Next click on Save and see the magic

Read more »

Customized round edged Sub heading style for blogger

Heading is an important part of the blog post. When you are writing a new post there will be many headings. Most of the bloggers use the heading style same as the default template style. That is not a bad thing. But when you are writing a sub heading in the post, it is better to add any other different style heading i.e, a customized heading.

Actually there are different types of headings available.While writing a new post there are heading options which are Heading,Subheading and Minor Heading. But most of the blogger fail to notice this option. Nevertheless this ignorance do not create much difference apart from the size and the heading tags like h2, h3 and h4.. There is no other difference that you will see. Here I am showing two different style of subheading for blogger.

1. Rounded edge subheading

2. Rounded edge with shadow

For adding one of above customized sub heading to your blog post follow these steps.

#. Go to blogger dashboard

#. Design and select edit HTML

#. Expand widget templates.

#. Search for ]]></b:skin> 

#. And paste the code above it.

Code For Rounded Edge Sub Heading

This is what I am using. It is simple and looks very neat. Copy the code and paste it

.post h3 {
color:#3d85c6;
border:1px solid #BDBDBD;
-moz-border-radius: 10px;
border-radius: 10px;
padding:4px;
font-size: 12pt;
}

Code For Rounded Edge With Shadow 

This is another customized heading style same as mentioned above but it  comes with shadow. Copy the code and paste it.

.post h3 {
color:#3d85c6;
border:1px solid #BDBDBD;
-moz-border-radius: 10px;
border-radius: 10px;
padding:3px;
font-size: 12pt;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;}

After pasting the code in the template, in order to get the appropriate effects in the post, choose a heading and click the sub heading option from above. Preview the settings to view the effects.

You can change the color by replacing the code #3d85c6 and pasting any HTML color codes. Let the colors match your blog template.

Why using custom heading style 

Custom heading makes your blog post more attractive and readers can easily under stand what is said in the post. Including heading tag is more important for your blog SEO. So it will also help your blog in search result.

Read more »

Top two feed burner email subscription widgets for bloggers with social media button.

Getting more feed subscribers will fetch more benefits to bloggers. Email  subscribers gets updates through email. And if you are using adsense to feed, your adsense earnings also will  increase. That's why more bloggers are using feed to their blog. By adding this subscription widget to your blog, viewers get easily attracted to this and you will get more subscribers. Here top two email subscription widgets are shown, one of which is with social media button and the other one is a simple and cute subscription box. Check it out.

Subscription widget with social media button 

1#. Go to Blogger Dashboard >> Design >> Add a Gadget >> Add HTML
 paste the following HTML codes

<style>

.mbtbar{width: 100%; float: left;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; 

height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; 

vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: 

Helvetica, Arial; font-size: 14px;} 
.mbtbar .subicons a{text-decoration: none; color:#333333;} 
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZn6hCqoMl6prUQPpZumyT7x_B1MjC2B5tutXPhydpCY8Th8HWT3oLPPlomEVVfx5bLv5sMzyz7gjpn1iG0fhCcofQqASCZZSMaEcu4Dhy25EGIxsiwyhHTDo6HlHA8DjYkRNbag3p8U/s400/rss.png) no-repeat left center; 

min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; 

margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Rbb7fqUHAM7qwjd-qNWWvjkHdZixkPd5L4E_ef9O11CYSIBHtogavI2v5iSOhILXFEKTwQArHlSFVWAoRc4J09N5E4vq0krdxBrSuYl6bpV0201nV6sdsxxEIJbE9qSq5_wHw10Vsw4/s400/facebook.png) no-repeat left 

center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 

30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXBgF2Xd0xKx5bC2yrSwNZ-4hP2x08u9KmYHUg1PUfarlne3t_trvYxEdtTp_Efj9tNpYNDdMz171Kg0joUeHLdNni8_3-_aP5G04ydFcWRhQlLMV6r5bSrZdSVdxynohAerF6zfaKT4/s400/twitter.png) no-repeat left 

center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 

30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: 

Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsInQVNY3kAzXqyJlj32DV2IysiPTjmyRSCFCXkFLzvF4ZIFmOCD-hnwhDDvIVv2AOZ1VG8giVY1ERSMuUqhyjlT3e-et16d2ItrDEN8kwH5TEMO0IstBgvYl5vmla1B_A5FEfDH4F5c8/s400/email.png) no-repeat left center; 

float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; 

vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px 

solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; 

-moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 

100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; 

text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 

5px; -webkit-border-radius: 5px;} 
</style>
<!--[if IE 7]> 
<style> 
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; 

vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; 

text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; 

} 
</style> 
<![endif]-->
<div class="mbtbar"><div class="count"> <span class="bigcount">Subscribe Us</span> </div>
<div class="subicons"><div class="rssicon"><a href="http://techplusz.blogspot.com/feeds/posts/default?alt=rss" 

target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/newworldsz" target="_blank" 

rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/techplusz" target="_blank" 

rel="nofollow">Twitter</a></div></div> 
<div class="emailsub"> 
<div class="emailicon">Stay Updated via Email Newsletter</div> 
<div class="emailupdatesform"> 
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" 

onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techplusz', 'popupwindow', 

'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" 

value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" 

onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input 

value="techplusz" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" 

/></form></div></div></div>

2#. Replace http://techplusz.blogspot.com/feeds/posts/default?alt=rss  with your feedburner feed default link 

      

      Replace facebook page link http://www.facebook.com/newworldsz with your page link 

      

      Replace feedburner  email link http://feedburner.google.com/fb/a/mailverify?uri=techplusz  with your feedburner       email link 

      

      Replace techplusz with your RSS email title. It will get from the end of your feedburner email link 

3#. Save the Gadget

Simple and Cute Email Subscription Widget 

1#. Go to Blogger Dashboard >> Design >> Add a Gadget >> Add HTML
      Paste the following HTML codes

<style> 

.mbt-email{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5sMY-BOUdJsDWpwxoqLxGcGsOJNixqOz8vI_Vs2PZMEsAaeeeOwfCwwveQIO4rqoNIyZzyU2_aal-pPAbvildWxKY7J5x_8A_tX2WxATcH_rUIXPYC_ZpXP6M_ldnKu8NRHnCKpt44IR/s1600/email.png) no-repeat 0px 12px ; 
width:300px; 
padding:10px 0 0 55px; 
float:left; 
font-size:1.4em; 
font-weight:bold; 
margin:0 0 10px 0; 
color:#686B6C; 
}
.mbt-emailsubmit{ 
background:#9B9895; 
cursor:pointer; 
color:#fff; 
border:none; 
padding:3px; 
text-shadow:0 -1px 1px rgba(0,0,0,0.25); 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
border-radius:6px; 
font:12px sans-serif; 
} 
.mbt-emailsubmit:hover{ 
background:#E98313; 
} 
.textarea{ 
padding:2px; 
margin:6px 2px 6px 2px; 
background:#f9f9f9; 
border:1px solid #ccc; 
resize:none; 
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;   
width:170px; 
color:#666;}
</style>
<div class="mbt-email"> 
Subscribe via Email 
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techplusz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /> 
<input type="hidden" value="techplusz" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
<input class="mbt-emailsubmit" value="Submit" type="submit" /> 
</form> 
</div>

2#. Replace http://techplusz.blogspot.com/feeds/posts/default?alt=rss with your feedburner feed link
   
      And also replace techplusz with your RSS email title. It will get from the end of your feedburner email link.

3#. Save the Gadget

Read more »