How to Add Back To Top Button In Blogger

For now I am going to share back to top button for blogger. It is useful widget which enables blog readers to go back to top after browsing through number of some posts on your blogger blog rather than scrolling manually as it also takes time and ofcourse bad impression to blog readers.

DEMO DISPLAY:

Add a Back To Top button to your blogger site:

• To get started, add this to the CSS section of your site. In Blogger, this would be under blogger>Template>Edit HTML> and past the given code just before  ]]></b:skin>.

.back-to-top{ bottom: 2em;
 color: #fff;
 display: none;
 opacity:0.6;
 padding: 1.5em;
 position: fixed;
 right: 1.5em;
 text-decoration: none;
}
.back-to-top:hover{
 opacity:1;
 transition:1s;
}

After adding css code for back to top buttons. Save template and your done with CSS.

• In this step you will have to add jQuery to your blogger blog. To make sure your site is loading jQuery. Add this code in the </head> section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

• Next, add the following code directly before the </body> code in your template’s main HTML file. In Blogger, go to Template > Edit HTML and search for and add this above it:

<a class="back-to-top" href="https://www.blogger.com/blogger.g?blogID=8402326634669559549#">↑</a> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() &gt; offset) { jQuery(&#39;.back-to-top&#39;).fadeIn(duration); } else { jQuery(&#39;.back-to-top&#39;).fadeOut(duration); } }); jQuery(&#39;.back-to-top&#39;).click(function(event) { event.preventDefault(); jQuery(&#39;html, body&#39;).animate({scrollTop: 0}, duration); return false; }) }); </script>

 Now save your template you should see the Back to Top link appear as you scroll down the page in your blogger blog. If you have any problem installing back to top buttons ask your questions in comments. Thanks!

Read more

Add CSS3 Drop Down Navigation Menu with Effects to Blogger

Add CSS3 Drop Down Navigation Menu with Effects to Blogger

Well first of all Happy new year to all of my sweet visitors For now I am going to share beautiful CSS designed drop down menu for blogger. Navigation menu have great impact in blogger design. A good navigation means you drive your visitors easily for what they are looking on your site. We all are here try to present different ideas and views regarding blogging.

A navigation bar (or navigation system) is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.

DEMO DISPLAY
I have attached live demo for navigation menu for better understanding your needs. 

Also check: LAVA LAMP CSS DROP DOWN MENU FOR BLOGGER!

Lets start adding this beautiful css3 designed drop down menu to blogger. Please follow the below steps. We will first add css code and then html.

CSS:

For adding css to blogger>Template>Edit HTML> and past the given code just before  ]]></b:skin>

.

span.dropBottom,span.dropRight {
 display: block;
 box-shadow:inset 2px 0px 0px #FF9;
 position: absolute;
 left: 0px;
 width:100%;
 height: 100%;
 top: 0px;
}
span.dropBottom {
 box-shadow:inset 0px 2px 0px #FF9;
 position: absolute;
 width: 100%;
 bottom: 0px;
}
h1 {
 color:#EDEDED;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
  
}
nav {
 display:table;
 margin:50px auto;
  box-shadow:0px 2px 0px #023333;
}
ul {
 margin:0;
 padding:0;
 list-style:none;
}

ul ul {
 opacity:0;
 position:absolute;
 top:160%;
 visibility:hidden;
 transition:all .4s ease;
 -webkit-transition:all .4s ease;
}
ul ul ul {
 top:0%;
 left:160%;
}
ul ul li:hover > ul {
 top:0%;
 left:100%;
 opacity:1;
 visibility:visible;
}
ul li:hover > ul {
 opacity:1;
 top:100%;
 visibility:visible;
}
ul li {
 float:left;
 position:relative;
}
ul ul li {
 float:none;
}
ul li {
 background-color:#009C75;
 cursor: pointer;
}
ul a {
 text-decoration:none;
 display:block;
 color:#FF9;
 padding:10px 15px;
 width:6em;
 text-align:center;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 0px -1px 0px rgba(0,0,0,.2);
}
ul li:hover {
 background-color:#007373;
}
ul li a:hover {
 background-color:#007373;
}

Save template. 

HTML:

'HTML Copy the following HTML code and paste in your header section of your blogger blog. Or any where you want this to appear on your blog.

<nav><code>
    <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Tutorials</a><span class="dropBottom"></span>
            <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Design</a><span class="dropRight"></span>
                    <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Photoshop</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Illustrator</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Web Design</a><span class="dropRight"></span>
                            <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">XTHML</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">CSS</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Articles</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Interviews</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">About</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Contact</a></li>
</ul>
</code></nav><br />
<code><nav>    <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Tutorials</a><span class="dropBottom"></span>
            <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Design</a><span class="dropRight"></span>
                    <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Photoshop</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Illustrator</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Web Design</a><span class="dropRight"></span>
                            <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">XTHML</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">CSS</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Articles</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Interviews</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">About</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Contact</a></li>
</ul>
</nav>

save template.

Conclusion:

 Thats all you have done. I hope you will found this menu looking cool and working. we have selected this css3 drop down menu for specially for blogger user. Its simple and SEO friendly. It delivers good appearance to blogger blog. Thank You!

Read more

Add Awesome Email Subscription Widget to Blogger

How to add feed-burner email subscription widget in your blogger blog? Today I am going to share responsive and stylish subscription widget for blogger. FeedBurner email is a service that allows publishers to deliver their feed content to subscribers via email. It highly effective to stick visitors with your updates and in fact it improves bloggers traffic.Through this widgets visitors would come to know after the subscription about each post shared in your blog.

DEMO:

Adding this is so simple, Please follow the following steps:

Step 1: Go to Blogger Dashboard > Template > Edit HTML and past the given code just before <Head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Step 2: To install CSS code for Responsive feed-burner subscription widget. Open blogger> Templates> Edit HTML and apply the code below right before the </ style> or]]> </ b: skin>

body {
    background: #333;
    margin: 0 auto 0;
    color: #444;
    font-family: 'PT Sans', arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
}
#subscribebox {background:#314d5b; padding:20px;font-family: 'PT Sans', sans-serif;
width:300px;}
.widget_follow_subscribe .widget-detail {
  padding: 36px 30px 40px 30px;}

#subscribebox p {
color: white;
    font-size: 15px;
    text-align: center;
    font-weight: 700;
}

.follow-subscribe-social {
 margin: 0 0 15px;
 padding: 0 0 14px;
 border-bottom: #858585 solid 1px;
}

.follow-subscribe-social ul {
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
}

.follow-subscribe-social ul li {
 display: inline;
 margin: 0 15px 0 0;    border-bottom: none;
}

.follow-subscribe-social ul li:last-child {
 margin: 0;
}

.follow-subscribe-social ul li a {
 font-size: 17px;
 color: #cacaca;
 
 -webkit-transition: color 0.2s ease-in-out;
 -moz-transition: color 0.2s ease-in-out;
 -ms-transition: color 0.2s ease-in-out;
 -o-transition: color 0.2s ease-in-out;
 transition: color 0.2s ease-in-out;
}

.follow-subscribe-social ul li a:hover {
 color: #fff;
}

form.subscribe {
 margin-top: -7px;
}

form.subscribe input {
 display: block;
 width: 100%;
}

.subscribe-email {
 height: 45px;
 border: none;
 margin: 0 0 10px;
 font-size: 0.928571em;
 background-color: #ffffff;
  text-align: center;
  color:efefef;
}

.subscribe-email:focus {
 outline: 0;
}

/* ===== Placeholder color ===== */
form.subscribe .placeholder { /* Internet Explorer 9 */
 color: #cacaca;
}

form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: #cacaca;
}

form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */
    color: #cacaca;
}

form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fafafa;
}

form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fafafa;
}

.subscribe-button {
 height: 45px;
 font-weight: 700;
font-size:16px;
 color: #fff;
 text-transform: uppercase;
 border: none;
 background-color:#ea5217;
 
 -webkit-transition: background-color 0.2s ease-in-out;
 -moz-transition: background-color 0.2s ease-in-out;
 -ms-transition: background-color 0.2s ease-in-out;
 -o-transition: background-color 0.2s ease-in-out;
 transition: background-color 0.2s ease-in-out;
}

.subscribe-button:hover {
 background-color: #f4b458;
}

.subscribe-button:focus {
 outline: 0;
}

.creadit a {background:#F35D5C;color:white;margin-top:30px;padding:20px;font-size:15px;}

save tamplate

Final Step 4:
just copy all the code below to Layout> Add Gadget> HTML / JavaScript.

<center> <div id="subscribebox"> <div class="follow-subscribe-social"> <ul> <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <img border="0" alt="Subcribe" src="http://dateinacrate.com/wp-content/uploads/2015/06/icon-subscribe.png" width="100" height="100"> <p>Subscribe to my Newsletter</p> <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='YOUR-USER-NAME'/> <input name='loc' type='hidden' value='en_US'/> <input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/> <input class="subscribe-button" type="submit" value="Subscribe" /> </form> <p style="font-size:60%;">We will not share your information with anyone</p> </div> </center> <br/><br/><br/> <div class="creadit"> <a href="http://wikiblogism.blogspot.com" target="_blank"> Get This Widget</a></div>

Discription:

• Change USER-NAME with your feedburner username. 

I hope this widget will inspire you and will deliver heavy traffic to your blog. In fact email subscription have great influence in blog traffic.

Read more

Add Responsive Sitemap Page with Label Tabs to Blogger

How to add responsive sitemap page in blogger blog.?

Sitemap:

Sitemap is a map marked with the address of every page on your blog to lead search engine crawlers as well as visitors to where and what they are looking for.

By placing all the URLs on your blog at one place, the visitor can quickly find specific content he wants to read and search engine crawlers can easily index all the pages in your blog.

Today I will show you how to add responsive sitemap page into your blogger blog. Here i selected two sitemap pages of different styles. you can install of your choice.

1-Responsive sitemap page with label tabs:

Screen shot

Demo Click here

This is responsive sitemap page for blogger. Please follow the given steps

1-Create a new page your blog:

• Sign in to Blogger. Select the blog to update. In the left menu, Pages.
• Click New Page and Editing menu for new page will appear.
• Please make sure on page setting as same as show in above picture.

In next step you will have to install HTML,CSS, JavaScript codes for sitemap page. 

2-Adding codes:

Copy below CSS,HTML and JavaScript code and past in html editor.

<div id="tabbed-toc"> <span class="loading">Loading, please wait for a moment...</span></div> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://wikiblogism.blogspot.com", // Enter your blog URL containerId: "tabbed-toc", // Container ID activeTab: 1, // The default active tab index (default: the first tab) showDates: false, // `true` to show the post date showSummaries: false, // `true` to show the posts summaries numChars: 200, // Number of summary chars showThumbnails: false, // `true` to show the posts thumbnails (Not recommended) thumbSize: 40, // Default thumbnail size noThumb: "", // A "no thumbnail" URL monthNames: [ // Array of month names "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], newTabLink: true, // Open link in new window. `false` to open in same window maxResults: 99999, // Maximum post results preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload") sortAlphabetically: true, // `false` to sort posts by published date showNew: 7, // `false` to hide the "New!" mark in most recent posts or //define how many recent posts are to be marked by changing the number newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for //the "New!" text }; </script> <script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script> <style> /*Sitemap */ #tabbed-toc { width: 99%; margin: 0 auto; overflow: hidden !important; position: relative; color: #222; border: 0; border-top: 5px solid #ffb700; background-color: #1D1D1D; -webkit-transition: all 0.4s ease-in-out; } #tabbed-toc .loading { display:block; padding:5px 15px; font:normal bold 11px Arial,Sans-Serif; color:#FFF; } #tabbed-toc ul, #tabbed-toc ol, #tabbed-toc li { margin:0; padding:0; list-style:none; } #tabbed-toc .toc-tabs { width: 24.8%; float: left !important; } #tabbed-toc .toc-tabs li a { display:block; font:normal bold 10px/28px Arial,Sans-Serif; height:35px; overflow:hidden; text-overflow:ellipsis; color:#ccc; text-transform:uppercase; text-decoration:none; padding:0 12px; cursor:pointer; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .toc-tabs li a:hover { background-color: #515050; color: #FFF; } #tabbed-toc .toc-tabs li a.active-tab { background-color: #ffb700; color: #222; position: relative; z-index: 5; margin: 0 -2px 0 0; } #tabbed-toc .toc-content, #tabbed-toc .divider-layer { width: 75%; float: right !important; background-color: #F5F5F5; border-left: 5px solid ##ffb700; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .divider-layer { float:none; display:block; position:absolute; top:0; right:0; bottom:0; } #tabbed-toc .panel { position:relative; z-index:5; font:normal normal 13px Roboto,Sans-Serif; } #tabbed-toc .panel li a { display: block; position: relative; font-weight: bold; font-size: 11px; color: #222; line-height: 2.8em; height: 35px; padding: 0 10px; text-decoration: none; outline: none; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .panel li time { display:block; font-style:italic; font-weight:400; font-size:12px; color:#666; float:right; } #tabbed-toc .panel li .summary { display:block; padding:10px 12px; font-style:italic; border-bottom:4px solid #275827; overflow:hidden; } #tabbed-toc .panel li .summary img.thumbnail { float:left; display:block; margin:0 8px 0 0; padding:4px; width:72px; height:72px; border:1px solid #dcdcdc; background-color:#fafafa; } #tabbed-toc .panel li:nth-child(even) { background-color: #DBDBDB; font-size: 10px; } #tabbed-toc .panel li a:hover, #tabbed-toc .panel li a:focus, #tabbed-toc .panel li a:hover time, #tabbed-toc .panel li.bold a { background-color:#222; color:#FFF; outline:none; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .panel li.bold a:hover, #tabbed-toc .panel li.bold a:hover time { background-color:#222; } @media (max-width:700px) { #tabbed-toc { background-color:#fff; border:0 solid #888; } #tabbed-toc .toc-tabs, #tabbed-toc .toc-content { overflow:hidden; width:auto; float:none !important; display:block; } #tabbed-toc .toc-tabs li { display:inline; float:left !important; } #tabbed-toc .toc-tabs li a, #tabbed-toc .toc-tabs li a.active-tab { background-color:#222; color:#ccc; } #tabbed-toc .toc-tabs li a.active-tab { color:#000; } #tabbed-toc .toc-content { border:none; } #tabbed-toc .divider-layer, #tabbed-toc .panel li time { display:none; } } </style>

Customization: 

1. To change the text when sitemap is loading,replace this "Loading, please wait for a moment..." with your text. 
2. Replace the http://wikiblogism.blogspot.com with your website url. 
3. To change the color theme to match with your template,replace FF3333 with your hex color value.

I hope you liked Responsive Sitemap Page. Please don't forget to share with your friends. Thanks

Read more