Latest Templates
Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Contact Form

Tuesday, August 27, 2013

:::Add Free Contact Form To Your Blogger Site:::

Add Free Contact Form To blogger | mypremiumbloggertemplates.com
























  • This tutorial useful to all of Blogger users.
  • First Log In to your Blogger Account.
  • Then follow this website.
  • Now (1) Option you can see the Settings. Then Customize ass you like. (Put check mark what you want to add your contact form Ex:- Title,Name, Email.....)
  •          (2) Advance Setting. This Option You can Customize Color,Font,Font Size of your contact form.
  •          (3) Target E mail Address. Put this section to your Email.
  • Then type captcha and Press Create Formula Button.
  • After create, copy Contact Form Script.
  • Then Create Blank Blog Page and put Before copied script to HTML mood.
  • And Save page. All Done
at 9:16 PM
Labels:

Meta Tags

Friday, August 16, 2013

:::Adding Meta Tags To Your Blogger Site:::





  • This is the impotent thing if you using blogger site or any website.
  • Search engine can catch your own website to adding meta tags for your homepage or other pages.
  • First Log In Your Blogger Account.
  • Choose your Blog and go to the dashboard.
  • Then select Template Section.
  • Click Edit HTML.
  • After Press Crtl+F on in the key board.
  • Then type <head> and press enter.
  • Then you can seethe head code Top of your template.

 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<META NAME="Description" CONTENT="#1Your Description" />
</b:if>
<META NAME="Keywords" CONTENT="#2Your Keyword" />
<META NAME="Author" CONTENT="#3Author" />
<META NAME="Robots" CONTENT="All" />

  • Copy above code and past it below the <head> code.
  • You can see the highlighted Word on above code. 
              #1. Give description about your blog site or website.
              #2. Type keyword. what you present in your blog or website.
                      (Ex:- Premium Blogger  Templates, Best Blogger Templates, 
                              High Quality Blogger Templates.)
              #3. Blog site or Website Author Name.
  •  Replace all of highlighted Arias.
  • Then Click Save Template. All done.
at 2:30 PM
Labels:

User Counter

Tuesday, August 6, 2013

:::Add Online User Counter To Your Blogger Site:::



















  • This is Free tricks to add online user counter to your blogger site. you can watch how meany users are online now.
  • This is Easy to do.
  • first Log In to your Blogger Account.
  • Go to Dashboard > Layout > Add gadget >  select HTML/Java Script.
  • Now the Impotent part of the this Tutorial.
  • Go to this web Address.
  • And Select widget Section in the tool bar.
  • Then Ill select "The Tab Widget" Section.
  • You can customize it for ass you liked Side.
  • If you done your setting, Copy the above code.
  • And go back to your HTML/Java Script paste your copied Code and save HTML/Java Script.
  • Enjoy it ...
at 10:03 PM
Labels:

Subscribe Widget

:::Add Cool Subscribe Button To Your Blogger Site:::
Mypremium Blogger Templates | Latest Blogger Templates and Tutorial




  • This Tutorial about how to add Subscribe Widget To your Blogger site.
  • first we need to do Log In to your Blogger Account.
  • Then Go to Dashboard > Select Layout.
  • Now choose Add Gadget > HTML/Java Script.
  • Then copy below code and past it in to the Java script.
  
<style>#MPBT-mashable-bar{border:0;margin-bottom:10px;margin:0 auto;width:300px;}.fb-likebox{background:#fff;padding:10px 13px 0 10px;border-right:1px solid #D8E6EB;border-left:1px solid #D8E6EB;border-bottom:1px solid #D8E6EB;margin:0px;height:45px;}.googleplus{background:#F5FCFE;border-top:1px solid #FFF;border-bottom:1px solid #ebebeb;border-right:1px solid #D8E6EB;border-left:1px solid #D8E6EB;border-image:initial;font-size:.90em;font-family:"Arial","Helvetica",sans-serif;color:#000;padding:9px 11px;line-height:1px;}.googleplus span{color:#000;font-size:11px;position:absolute;display:inline-block;margin:9px 70px;}.g-plusone{float:left;}.gplus{background:#fff;padding:0px;border:0px solid #C7DBE2;margin-bottom:-13px;}.twitter{background:#EEF9FD;padding:10px;border:1px solid #C7DBE2;border-top:0;}#mashable{background:#EBEBEB;border:1px solid #CCC;border-top:1px solid white;padding:2px 8px 2px 3px;text-align:right;border-image:initial;}#mashable .author-credit{}#mashable .author-credit a{font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}#email-news-subscribe .email-box{padding:5px 10px;font-family:"Arial","Helvetica",sans-serif;border-top:0;border-right:1px solid #C7DBE2;border-left:1px solid #C7DBE2;border-image:initial;height:35px;}#email-news-subscribe .email-box input.email{background:#FFFFFF;border:1px solid #dedede;color:#999;padding:7px 10px 8px 10px;/*border-radius*/-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border-image:initial;font-family:"Arial","Helvetica",sans-serif;}#email-news-subscribe .email-box input.email:focus{color:#333;}#email-news-subscribe .email-box input.subscribe{/*linear-gradient*/background:-webkit-gradient(linear,,color-stop(#FFCA00,0),color-stop(#FF9B00,1));background:-webkit-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);background:-moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);background:-o-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);background:linear-gradient(center top,#FFCA00 0,#FF9B00 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));-pie-background:linear-gradient(270deg,#ffca00,#ff9b00);font-family:"Arial","Helvetica",sans-serif;/*border-radius*/-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #cc7c00;color:white;text-shadow:#d08d00 1px 1px 0;padding:7px 14px;margin-left:3px;font-weight:bold;font-size:12px;cursor:pointer;border-image:initial;}#email-news-subscribe .email-box input.subscribe:hover{background:#ff9b00;background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);outline:0;/*box-shadow*/-webkit-box-shadow:0 0 3px #999;-moz-box-shadow:0 0 3px #999;box-shadow:0 0 3px #999;/*linear-gradient*/background:-webkit-gradient(linear,,color-stop(#ffda4d,0),color-stop(#ff9b00,1));background:-webkit-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);background:-o-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);background:linear-gradient(center top,#ffda4d 0,#ff9b00 100%);-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);/*border-radius*/-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #cc7c00;color:#FFFFFF;text-shadow:#d08d00 1px 1px 0;}#other-social-bar{background-color:#D8E6EB;/*box-shadow*/-webkit-box-shadow:0 1px 1px #FFFFFF inset;-moz-box-shadow:0 1px 1px #FFFFFF inset;box-shadow:0 1px 1px #FFFFFF inset;padding:0px;font-family:"Arial","Helvetica",sans-serif;font-weight:bold;overflow:hidden;border:1px solid #B6D0DA;height:37px;}#other-social-bar ul{list-style:none outside none;padding-left:4px;}#other-social-bar .other-follow{float:left;color:#1E598E;overflow:hidden;height:20px;padding:5px;width:270px;}#other-social-bar .other-follow ul{list-style:none outside none;padding-left:4px;}#other-social-bar .other-follow ul li{font-size:12px;font-weight:bold;display:inline;border:0;text-shadow:1px 1px white;}#other-social-bar .other-follow ul li a{font-size:12px;color:#1E598E;font-weight:bold;display:inline;text-shadow:1px 1px white;}#other-social-bar .other-follow li{font-size:12px;font-weight:bold;display:inline;border:0;text-shadow:1px 1px white;}#other-social-bar .other-follow li a{font-size:12px;color:#1E598E;font-weight:bold;display:inline;text-shadow:1px 1px white;}#other-social-bar .other-follow li.my-rss{background:url('http://goo.gl/eN8vgY') no-repeat transparent;line-height:1;padding:0px 3px 1px 20px;width:60px;margin-bottom:0px;margin-left:5px;}#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{text-decoration:none;}#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{text-decoration:underline;}#other-social-bar .other-follow li.my-twitter{background:url('http://goo.gl/gk0EMX') no-repeat transparent;line-height:1;padding:0px 3px 1px 20px;width:60px;margin-bottom:0px;}#other-social-bar .other-follow li.my-gplus{background:url(http://goo.gl/j7g0bP) no-repeat transparent;line-height:1;width:60px;padding:0px 3px 1px 20px;margin-bottom:0px;}</style><!--[if IE]> <style>   #email-news-subscribe .email-box input.subscribe{        background: #FFCA00;        }    </style> <![endif]--><!--end of Mashable Social Widget--> <div style="margin-bottom:10px;"> <div id="MPBT-mashable-bar" > <!-- Begin Widget --><div class="gplus"> <link href="YOUR G+ PROFILE LINK" rel="publisher" /><script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script><!-- Place this tag where you want the badge to render --> <g:plus href="YOUR G+ PROFILE LINK" width="300" height="131" margin="0px" theme="light"></g:plus> </div><div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=YOUR FACEBOOK FAN PAGE URL?ref=hl&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp; font&amp;height=100px&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div><div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div><div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=YOUR TWITTER SCREEN NAME&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div><div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=YOUR RSS FEED NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="YOUR RSS FEED NAME" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="YOUR RSS LINK" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="YOUR FULL TWITTER LINK"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=YOUR G+ LINK target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mypremiumbloggertemplates.com/2013/08/add-subscribe-widget-to-blogger.html" target="_blank" >Get Gadget</a></span></div></div> <!-- End Widget --> </div><!--end of social widget-->

  • And follow above code and replace all highlighted areas in your links.
  • then save the HTML/Java Script.
  • Now we done.
at 5:39 PM
Labels:

Social Media

:::Add Cool Social Media Icons To Your Blog:::

Free tutorial with My premium blogger templates

  • This is The Easy way to add social media icon set to your Blogger site.
  • So simply do this following steps.
  • First Log In to your Blogger Account.
  • Then Go to Dashboard > Click Lay out.
  • Now click Add Gadget.
  • Select HTML/Java Script.
  • Copy Bellow code and past it in to the Java Script.
<a target="_blank" href="YOUR DIGG URL">
<img title="Digg" src="http://goo.gl/bMp9T7" height="60" width="60" border="0" alt="MPBT Tutorial" />
</a>
<a target="_blank" href="YOUR DRIBBLE URL">
<img title="Dribble" src="http://goo.gl/l6iNsN" height="60" width="60" border="0" alt="MPBT Tutorial" />
</a>
<a target="_blank" href="YOUR FACEBOOK URL">
<img title="Facebook" src="http://goo.gl/40l7XE" height="60" width="60" border="0" alt="MPBT Tutorial" />
</a>
<a target="_blank" href="YOUR G+ URL">
<img title="G+" src="http://goo.gl/2Vctfk" height="60" width="60" border="0" alt="MPBT Tutorial" />
</a>
<a target="_blank" href="YOUR PINTREST URL">
<img title="Pintrest" src="http://goo.gl/jrJat9" height="60" width="60" border="0" alt="MPBT Tutorial" />
</a>
<a target="_blank" href="YOUR RSS URL">
<img title="Rss" src="http://goo.gl/HyCQYY" height="60" width="60" border="0" alt="MPBT Tutorial" />
</a>
<a target="_blank" href="YOUR TWITTER URL">
<img title="TWITTER" src="http://goo.gl/2IIWiL" height="60" width="60" border="0" alt="MPBT Tutorial" />
</a>
<a target="_blank" href="YOUR YOUTUBE URL">
<img title="YOUTUBE" src="http://goo.gl/s3XZFG" height="60" width="60" border="0" alt="MPBT Tutorial" />
</a>

  • Put your Social media link's to Highlighted Place.
  • After all done save HTML/Java Script.
at 12:08 PM
Labels:

Floating Widget

Monday, August 5, 2013

:::Add Floating Social Sharing Widget To Your Blog::: 
Add Flauting Sharing Widget | mypremiumbloggertemplates.com















  • This is Simple way to add Facebook, G+,Twitter Sharing Button.
  • First Log In your Blogger Account.
  • Then Go to Dash Board > Template > Click Edit HTML.
  • Now press CTRL+F on the keyboard.
  • Then find ]]></b:skin> code.
  • Copy below code and past it Above the ]]></b:skin> code.
    #floatdiv { 
    position:absolute; 
    width:94px; 
    height:229px; 
    top:0; 
    left:0; 
        z-index:100 
}

#MPBTSOCIAL { 
border:1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px; 
left: -12px;
padding: 8px; 
position:relative; 
height:220px; 
width:55px; 
margin:0 0 0 69px; 
}

    • Then Press Save Template.
    • OK Now we done step 1.
    • Now the second Step.
    • Go to Dashboard > Lay out > And Click Add Gadget.
    • Then Select HTML/Java Script.
    • Past Bellow code to HTML/ Java Script.
    <div id="floatdiv"> <div id="MPBTSOCIAL"> <table cellpadding="1px" cellspacing="0"> <tr> <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"> <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like> </td> </tr> <tr> <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"> <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="Your Twitter ID">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td> </tr> <tr> <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;"> <p style=" font-size:10px; text-align:center; color:#ddd;"></p> </td> </tr> </table> </div> </div> <script type="text/javascript"> // JavaScript Document <!-- /* Script by: www.jtricks.com * Version: 20071017 * Latest version: * www.jtricks.com/javascript/navigation/floating.html */ var floatingMenuId = 'floatdiv'; var floatingMenu = { targetX: 0, targetY: 300, hasInner: typeof(window.innerWidth) == 'number', hasElement: typeof(document.documentElement) == 'object' && typeof(document.documentElement.clientWidth) == 'number', menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; floatingMenu.move = function () { floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; } floatingMenu.computeShifts = function () { var de = document.documentElement; floatingMenu.shiftX = floatingMenu.hasInner ? pageXOffset : floatingMenu.hasElement ? de.scrollLeft : document.body.scrollLeft; if (floatingMenu.targetX < 0) { floatingMenu.shiftX += floatingMenu.hasElement ? de.clientWidth : document.body.clientWidth; } floatingMenu.shiftY = floatingMenu.hasInner ? pageYOffset : floatingMenu.hasElement ? de.scrollTop : document.body.scrollTop; if (floatingMenu.targetY < 0) { if (floatingMenu.hasElement && floatingMenu.hasInner) { // Handle Opera 8 problems floatingMenu.shiftY += de.clientHeight > window.innerHeight ? window.innerHeight : de.clientHeight } else { floatingMenu.shiftY += floatingMenu.hasElement ? de.clientHeight : document.body.clientHeight; } } } floatingMenu.calculateCornerX = function() { if (floatingMenu.targetX != 'center') return floatingMenu.shiftX + floatingMenu.targetX; var width = parseInt(floatingMenu.menu.offsetWidth); var cornerX = floatingMenu.hasElement ? (floatingMenu.hasInner ? pageXOffset : document.documentElement.scrollLeft) + (document.documentElement.clientWidth - width)/2 : document.body.scrollLeft + (document.body.clientWidth - width)/2; return cornerX; }; floatingMenu.calculateCornerY = function() { if (floatingMenu.targetY != 'center') return floatingMenu.shiftY + floatingMenu.targetY; var height = parseInt(floatingMenu.menu.offsetHeight); // Handle Opera 8 problems var clientHeight = floatingMenu.hasElement && floatingMenu.hasInner && document.documentElement.clientHeight > window.innerHeight ? window.innerHeight : document.documentElement.clientHeight var cornerY = floatingMenu.hasElement ? (floatingMenu.hasInner ? pageYOffset : document.documentElement.scrollTop) + (clientHeight - height)/2 : document.body.scrollTop + (document.body.clientHeight - height)/2; return cornerY; }; floatingMenu.doFloat = function() { // Check if reference to menu was lost due // to ajax manipuations if (!floatingMenu.menu) { menu = document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId]; initSecondary(); } var stepX, stepY; floatingMenu.computeShifts(); var cornerX = floatingMenu.calculateCornerX(); var stepX = (cornerX - floatingMenu.nextX) * .07; if (Math.abs(stepX) < .5) { stepX = cornerX - floatingMenu.nextX; } var cornerY = floatingMenu.calculateCornerY(); var stepY = (cornerY - floatingMenu.nextY) * .07; if (Math.abs(stepY) < .5) { stepY = cornerY - floatingMenu.nextY; } if (Math.abs(stepX) > 0 || Math.abs(stepY) > 0) { floatingMenu.nextX += stepX; floatingMenu.nextY += stepY; floatingMenu.move(); } setTimeout('floatingMenu.doFloat()', 20); }; // addEvent designed by Aaron Moore floatingMenu.addEvent = function(element, listener, handler) { if(typeof element[listener] != 'function' || typeof element[listener + '_num'] == 'undefined') { element[listener + '_num'] = 0; if (typeof element[listener] == 'function') { element[listener + 0] = element[listener]; element[listener + '_num']++; } element[listener] = function(e) { var r = true; e = (e) ? e : window.event; for(var i = element[listener + '_num'] -1; i >= 0; i--) { if(element[listener + i](e) == false) r = false; } return r; } } //if handler is not already stored, assign it for(var i = 0; i < element[listener + '_num']; i++) if(element[listener + i] == handler) return; element[listener + element[listener + '_num']] = handler; element[listener + '_num']++; }; floatingMenu.init = function() { floatingMenu.initSecondary(); floatingMenu.doFloat(); }; // Some browsers init scrollbars only after // full document load. floatingMenu.initSecondary = function() { floatingMenu.computeShifts(); floatingMenu.nextX = floatingMenu.calculateCornerX(); floatingMenu.nextY = floatingMenu.calculateCornerY(); floatingMenu.move(); } if (document.layers) floatingMenu.addEvent(window, 'onload', floatingMenu.init); else { floatingMenu.init(); floatingMenu.addEvent(window, 'onload', floatingMenu.initSecondary); } //--> </script>
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mypremiumbloggertemplates.com" target="_blank" >Get this Gadget</a></span></div></div> </div <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

    • And find "Your Twitter ID" Word and e replace with your twitter User Name.
    • That's it save the HTML/java script.
    at 11:49 AM
    Labels:
     
    Support : MPBT
    Copyright © 2012-2020 MPBT - All Rights Reserved
    Template Modified By MPBT
    Powered By Blogger