Saturday 28 September 2013

Add Custom Page Link In Address Bar Of Blogger Blog

Are You Created New Page  ?
In address Bar It Is Showing   as /p/blog-page.html Instead Of Original Name ??
Change The Link Of Any Page Easily As You Like By Following 
  • First Go To pages Tab on Blogger
  • Click On New Page >> Blank Page and Enter The Page Title As You Like
  • Now Click On Publish Without Writing Any Thing On That Page
  • Now Check The Page Link It Will Definitely The Name You Entered
  • Now Edit The Page And Write On That Page.
If You Want To Share This On Your Blog Give A Link Back to Our Site

This Is A Simple Blogger Trick,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



Friday 27 September 2013

Beautiful Page Navigation for Blogger Blog

Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.By using this In your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.





So add This To Your Blog By Following Simple Steps Below
  • Log In to your Blogger Account
  • Go To Layout Tab And Select Add a Widget
  • Then select HTML/JavaScript And Paste The Below Code Inside It
<style type='text/css'>#blog-pager{height: 28px;    padding: 10px 0 0;overflow:hidden;text-align:center;}.showpageArea a {text-decoration:underline;font-size: 16px;       text-align: center;}.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}.showpage a:hover {text-decoration:none;background: #cccccc;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=7; var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://www.newblogger-tricks.com" style="font-size:0pt">Nbt Widgets</a><script style='text/javascript' src='http://newbloggertricks.googlecode.com/svn/newbloggertricks-page-nav-v2.js'></script>

Customization :

 If You Want To Change The No.Of Posts Appear per page

  • Change pageCount=
  • Go to Settings >> Posts and Comments and Change as Show In Fig
Finally save your Widget and visit your Blog You Will Find The Page Navigation At The end Of Page.We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



Add Email Subscription Widget With Social Media Below Blogger Posts v.3

This widget will surely increase number of your social subscribers.If you are writing good posts and expecting more number of subscribers then this widget will surely help you.It contains an email subscription form,facebook like button,twitter follow button and some beautiful social icons at the right of the widget.This widget can be installed in one step,you just have to copy and paste code in your template.Now lets see how to add it into blogger blog?

Subscription Widget With Social Media Widget Generator

  • In Customize Field Enter The All The User Names In Corresponding Boxes
  • Click on Generate Button 
  • You Can Watch Demo (In New Tab) By Clicking on Demo
  • Copy The Generated Code And Follow Below Steps

Copy The Generated Code And Follow below Steps
  • First go to Blogger Dashboard > Template
  • Download a copy of your template
  • Click on Edit HTML
  • Find below code in your template (Want help to find code Click Here)
<data:post.body/>

  • If You Find Three <data:post.body/> Then Add The Code After or Below 2nd One 

Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.

Direct Mode :

How To Add Email Subscription Form To Blogger?
  • First go to Blogger Dashboard > Template 
  • Download a copy of your template 
  • Click on Edit HTML 
  • Find below code in your template (Want help to find code Click Here)
<data:post.body/>

Add below piece of code just after/below of above code,If You Find 3 <data:post.body/> Then Add Below Code After 2nd One
<b:if cond='data:blog.pageType == "item"'>  <style type="text/css">  form.feedburner {    margin: 20px 0 0;    display: block;    clear: both;  }  .TechnoFusionstyle {    background: url(http://4.bp.blogspot.com/-WK7bh1SB3NE/Uii6qe6mFpI/AAAAAAAAAbI/7ZXa8nbpyJE/s1600/TechnoFusion.info-email-icon.png) no-repeat scroll 4px center transparent;    padding: 7px 15px 7px 35px;    color: #666;    font-weight: bold;    text-decoration: none;    border: 1px solid #D3D3D3;    -moz-border-radius: 4px;    -webkit-border-radius: 4px;    border-radius: 4px;    -moz-box-shadow: 1px 1px 2px #CCC inset;    -webkit-box-shadow: 1px 1px 2px #CCC inset;    box-shadow: 1px 1px 2px #CCC inset;  }  .technofusionsubmit {    color: #666;    font-weight: bold;    text-decoration: none;    padding: 6px 15px;    border: 1px solid #D3D3D3;    cursor: pointer;    -moz-border-radius: 4px;    -webkit-border-radius: 4px;    -goog-ms-border-radius: 4px;    border-radius: 4px;    background: #fbfbfb;    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #f4f4f4));    background: -webkit-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);    background: -o-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);    background: -ms-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;    #FBFBFB&#39;    , endColorstr=&#39;    #F4F4F4&#39;    , GradientType=0);    background: linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);  }  #TechnoFusion-widget {    -moz-border-radius: 10px 10px 10px 10px;    -webkit-border-radius: 10px 10px 10px 10px;    -goog-ms-border-radius: 10px 10px 10px 10px;    border-radius: 10px;    background: none repeat scroll 0 0 transparent;    border: 1px solid #D3D3D3;    padding: 8px;    -moz-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    -webkit-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;    width: 480px;    -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);    -moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);    box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);    -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;  }  #TechnoFusion-widget:hover {    background: none repeat scroll 0 0 #FFF;    -moz-box-shadow: 1px 1px 2px #CCC inset;    -webkit-box-shadow: 1px 1px 2px #CCC inset;    box-shadow: 1px 1px 2px #CCC inset;  }  #TechnoFusion-widget td {    padding: 3px 0;  }  </style>  <center>    <br/>    <div id='TechnoFusion-widget'>      <div id='emailwidget'>        <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>          <tbody>            <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>              <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>                <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>Get free daily email updates!                </p>                <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ablod&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'                style='margin: 0pt;' target='popupwindow'>                  <input name='uri' type='hidden' value='newblogger-tricks' />                  <input name='loc' type='hidden' value='en_US' />                  <input class='TechnoFusionstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}'                  type='text' value='Enter your email…' />                  <input alt='' class='technofusionsubmit' title='' type='submit' value='Submit' />                </form>              </td>              <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>                <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>Follow us!                </p>                <a href='http://feeds.feedburner.com/newblogger-tricks' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'>                  <img src='http://2.bp.blogspot.com/-mpON5pgz_QE/Uii6qTnXQDI/AAAAAAAAAbM/YIPrWzzvVC0/s1600/TechnoFusion.info-rss.png' />                </a>                <a href='http://twitter.com/newbloggertrix' rel='nofollow' target='_blank' title='Follow us on Twitter'>                  <img src='http://1.bp.blogspot.com/-24-rJjjWur8/Uii6rPemaJI/AAAAAAAAAbc/OYl7hcPQ-rU/s1600/TechnoFusion.info-twitter.png' />                </a>                <a href='http://www.facebook.com/newbloggertricks' rel='nofollow' target='_blank' title='Follow us on Facebook'>                  <img src='http://1.bp.blogspot.com/-WcZ4H3TVECQ/Uii6rZIm3zI/AAAAAAAAAbo/e4RCWSCaqYg/s1600/TechnoFusion.infoTechnoFusion.info-fb.png' />                </a>                <a href='https://plus.google.com/116453328301201221048/' rel='nofollow' target='_blank' title='Follow us on Google+'>                  <img src='http://2.bp.blogspot.com/-Dd11XkOJ6qg/Uii6qZCZuoI/AAAAAAAAAbY/04fvSlYz50M/s1600/TechnoFusion.info-gplus.png' /> </a></td> </tr></tbody></table><div align='right'>          <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'> <a href='http://newblogger-tricks.blogspot.in/2013/09/add-email-subscription-widget-below.html'style='text-decoration: none;'target='_blank'><font color='#000' decoration='none'>[Get this widget] </font></a></span></div><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewbloggertricks&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=30"        scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true"></iframe>        <a class='twitter-follow-button' href='http://twitter.com/newbloggertrix' rel='nofollow'></a>        <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>      </div></div></center></b:if>
Replace all(three) newblogger-tricks with your Feedburner Username
Replace all(two) newbloggertricks with your Facebook Username
Replace all(two) newbloggertrix with your Twitter Username
Replace 106527290580119996124 with your Google + ID




Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.



Thursday 26 September 2013

Awesome Recent Comments Widget With Avatars for Blogger (Single Step)


Recent Comment Widget Helps You To Get More Comments On Your Blog
So We Are Released Recent Comments Widget With Avatars for Blogger.Just In One Click You Will Add It To Your Blog...






Recent Comments Widget Generator

  • In Customize Field Enter The Name Of Your Blog/Website With Http://
  • Click on Generate Button and Add To Blogger Button Respectively.
  • Another page will appear follow simple instruction that set.
  • You Can Watch Demo (In New Tab) By Clicking on Demo

We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



Tuesday 24 September 2013

Add Multi Colored Popular Posts Widget for Blogger

This Is a Widget Which Gives Multi Coloring To Our Old Popular Post Widget..

Steps To Add This To Your Blog Post
  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTML >> Search For ]]></b:skin> (Want help to find Click Here)
  • Now Paste The Following code Above/Before ]]></b:skin>



<!-- Popular posts multi colored theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;left:-27px;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored by nbt-->
  •  Now Save The Template
  • Go To Your Blog And Check
We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



  • Home
  • About Us
  • Contact Us
  • Write For Us
  • Sitemap
  • Privacy Policy
  • Back To Top