Posts

Showing posts with the label How to

How to Create Full Screen Preloading Effect

Image
LIVE DEMO DOWNLOAD In this tutorial, We will learn how to create full screen simple,clean preloading effect by html/css/image. Sometimes your website contents taking more times to loading. That's can be frustration of your readers. By adding full screen preloading effect, it can reduce readers frustration. When readers visit your site, they will see it. Then after full website page content load, it will be removed. You can add it anywhere by choosing any image. We created this script by simple way so that you can understand easily. Read from A to Z carefully. HTML - You need to add following html code after <body> tags <div id='preloader'>    <div id='status'>       <img alt='' height='64' src='images/preloader.gif' width='64'/>    </div> </div> First div id preloader we used for full page screen background color and Second div id status we used for set up image. You will fully understand when you w...
Post a Comment
Read more

How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger

Image
Blogger platform always stands at the top for best user interface. Many features are not inbuilt in Blogger, but they can built manually that too in simple steps. When we compare this feature with WordPress, always Blogger will wins. Now here I’m with a new superb tutorial based on Demo page with Download/Demo Button toolbar on Blogger. Quite Interesting..? This below part of this article will describe about the steps to add this new feature on Blogger. How to Make a Demo Page with Toolbar on Blogger Step 1: Go to Blogger and Create a static page with the title Demo Page. Step 2: Switch to HTML mode and add next content in that page and then click publish . <div height="100%" id="iframe-container" width="100%"> <style> body { padding: 0!important; background: none!important; } #iframe-container { overflow: hidden; background: none!important; } #frame { border: 0; } </style> <iframe frameborder="0" id="frame" src=...
Post a Comment
Read more

How To Positon Elements/Widgets On Blogger Blog

Image
Most newbie blogger wonder that, is there no way to position element in blogger, but am sharing with you now, how your can position your element to your desired location on your blog. some authors may specify where you are to position your elements/gadgets/widgets, whereby you would prefer it in another location. You can also easily change the location of your element in page elements, and remember that, there are some situation whereby you can only add elements/gadget/widget through your template, by inserting some code into your html box, and this article will help you on that. Positioning Elements In Template Login to your blogger Dashboard  Click "Design" > "Edit HTML" > Remember to always back up your template Now placing your code snippet to any location will be determine by the list of options below. -  Placing Element Below Post Body Find <data:post.body/> , and add your code after it, if you wish to place your element/widget below your post. -  ...
Post a Comment
Read more

How to add popup window in blogger?

Image
How to add popup window in blogger? Well answer is preety much same for all platforms, including wordpress, joomla or some site you made custom. Few words about it: JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box. Also you have to know positions the popup over the link that opens it.  But let's try with JavaScript. Works everywhere and you can use JavaScript to create popup windows. Popup windows are different to simply opening a new browser window. This is on click "Opening Popup" Here is the basic script for generating a popup window:                                                                             This is flat and responsive template  & button is a little more "Plastic" but works great.  On every template looks normal and smooth butt...
Post a Comment
Read more

How to add a Simple Stylish Subcription Box To Blogger

Image
This tutorial is about how to add a simple subscription box to your blogger blog, in my previous post, I have drop a lot of tutorials on how to add a different customize subscription box to blog . One thing that i like about this widget was that, it look so simple, and you can implement it anywhere on your blog. Follow the few steps below on how to add the widget to your blog. LIVE DEMO How To Add The Widget To Your Blog - Go to your blogger dashboard - Click on "Design" > "Page Elements" > "Add a Gadget" - Choose "HTML/JavaScript" from the list of the gadgets - Copy and paste the code below in the content box <style> .rb-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQylP_4XOp2FH44Onxz50cmi7LDoS5Q9vdljyf0RWJGPV8EqCM0p5hvpxTaUckjEuSwJCY5VGpOnV9p5cKNRpclYhXC0RbENjY2JaLSWzUci5IshKw1OaERF5lUdkzmp7TZlP5Rh-CR_Kn/s1600/email.png) no-repeat 0px 12px ; width:300px; padding:10px 0 0 55px; float:left; font-siz...
Post a Comment
Read more

How To Add Google Translate Widget to Blogger

Image
1.Login to your dashboard > layout >Page Elements 2.Click on 'Add a Gadget' on the sidebar. 3.Select 'HTML/Javascript' and add the code given below and click save. ADD THIS WIDGET TO YOUR BLOG NOTE : Remember to replace YOURBLOGNAME with your real blog name. Look at the picture below.
Post a Comment
Read more

How To Move Newer, Home and Older Posts Links to top of Posts

Image
Blogger default posts page navigation helps you to navigate through posts pages in your blog. It simply includes "Home", "Newer Posts" and "Older Posts" links. It is normally displayed under blog posts. But if you want to move it to the top of your blog posts, follow the steps given below. Go to the "Edit HTML" page of your blog. Find this code: <b:include name='nextprev'/> If you want to show posts page navigation links only at the top you can remove this code. If you want to show it both at the top and the bottom, then do not make any change to it. Now find this code: <b:includable id='main' var='top'>   <b:if cond='data:mobile == &quot;false&quot;'>     <!-- posts -->     <div class='blog-posts hfeed'> Add this code just below above code: <b:include name='nextprev'/> Final result will look like this: You are done.
Post a Comment
Read more

How to add auto read more in blogger with thumbnail

Image
Expandable post or popularly known as “read more” is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase “read more”.  Applying auto read more Login to your Blogger account. Go to Dashboard > Design > Edit HTML. Back up your template. Check the  Expand Widget Templates check box on top right of the HTML window. In the code window, look for </head> line. Add the Read More code below right after that line.  <!-- Auto read more script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 430; //summary length when no image summary_img = 340; //summary length when with image img_thumb_height = 200; img_thumb_width = 200; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(st...
Post a Comment
Read more

How to Add Non Removable Credit Link in Blogger Template

Image
MAKING YOUR JAVA SCRIPT: 1.This JavaScript will help you protect your credits by directly redirecting to your desired page when someone removes the credits. 2.The JavaScript is as follows and should be placed after <head> or before </head> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () {     if ($("# keepit ,. keepit ").attr("href") != "http://blogger-templatees.blogspot.com") {         window.location.href = "http://blogger-templatees.blogspot.com";     } }); //]]> </script> Things to be Know # keepit : This is the name of the div class which we will use in our div setup. So if anyone removes this div class they will be redirected to the link. http://blogger-templatees.blogspot.com : This is the link where the page will be redirected if the credits are changed or removed. Once you have edited the JavaScript given above you can use the below div structure in correspondence with the...
Post a Comment
Read more