Aug 25, 2016

Add An Attractive One 404 Error Page to Blogger

404 error page, custom 404 page, error page blogger
Hey Bloggers. We hope you all are fine. We are once again with another blogger widget. Yes, Today we are here for guide you "How To Create 404 Error Page in Blogger?" In one of our previous post we have shared a article on creating custom 404 error page in blogger and this is,second version of that post.

create 404 page, design 404 page, blogger error 404 page, page not found blogger, 404 error page, custom 404 page, error page blogger

Live Demo

Actually, "404 Error Page" is a page which appear when visitor clicks on a broken link (Incorrect URL) and says to the visitor the page you clicked no more exits or is deleted. By default blogger user can only add plain text along with HTML tags inside the "Custom Page Not Found" input box using search preferences option page. The message display using this technique looks too ugly and we would therefore need a better technique to design a attractive 404 Message for a Blogger blog.

Also Read: Another Stylish Below Post Email Subscribe Box for Blogger.  
Also Read: BlackReen Free Blogger Theme - A Responsive Blogger Template.
Also Read: Viral Grid-Mag Responsive Blogger Template - Free & Professional Version. 

But, Do you know we can add some extra features on 404 error page of Blogspot blogs using "Custom Page Not Found" which you can find on search preferences option page and also we can add some extra features to 404 error page using error_page conditional tag inside blogger template code area. We are going to share second technique because this technique is more powerful than first one.

Features of This 404 Error Page

  1. Nice Designed.
  2. Go Back Button.
  3. Contact Us Link.
  4. Attractive Message.
  5. Search Box.
We hope these above features are those features which now a days every one (including me) want on their 404 error pages. So without wasting more time, lets get back to the tutorial to learn that how we can create custom 404 page for blogger.

Add 404 Error Page in Blogger

STEP1] Go To Blogger.com >> Click On Template >> Backup Your Template >> Click On Edit HTML.

STEP2] Using CTRL+F (Windows) or CMD+F (Mac) and search for </head> tag and paste below whole code just above of the </head> tag.

<!-- Error-Page-Start -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <style type='text/css'>
.error-container{background-color:#000;display:table;height:100vh;overflow-x:hidden;width:100%; background-image: url(http://1.bp.blogspot.com/-zHS2luoiNTM/VTZJiQmK7RI/AAAAAAAAJxw/D1Kiy-euLXM/s1600/blog-bg.jpg);}
.status-msg-wrap {
font-size: 98%;
margin: none;
position: static;
      width: 100%;}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 98%;
z-index: auto;
background:#fff!important;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
color:#FF0000!important;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchinput {
background: #FFF url(http://1.bp.blogspot.com/-DqsSIdDHoXE/UC7emvfWcII/AAAAAAAAAwo/X7HUuvC4oBs/s000/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>
<style type='text/css'>
  body{background:#000!important;}
  .ct-wrapper, .outer-wrapper, .nav_wrapper, .menu, #creditwrap, #menu1, #footer, .footer-top, .header-wrapper  {display:none!important;}
</style>
<span class='error-container' style='padding:10px 10px 10px 10px;'>
<p><span style='line-height: 30px;'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#fff'>
It seems that you have accidentally landed on this page which does not exists because you may have either clicked on a broken link or entered the wrong URL in the address bar. Right ๐Ÿ˜€ ??? <br/>
Kindly do one of the followings to go to the correct location of this blog ๐Ÿ˜€ :
  </font></strong></span></p>
<ol style='line-height: 25px; color:#fff'>
<li><a href='javascript:history.go(-1)' style='color:#FF0000;'>&#171; Go Back</a> </li>
<li>Report the Problem to us by <a href='http://www.mybloggerguides.com/p/contact-us.html' style='color:#FF0000;'>Contacting Us Here</a>&#160;&#160;&#160; (<em>This will help us to serve you even better</em>) </li>
  <li>Go To Homepage by <a href='/' style='color:#FF0000;'>Clicking Here</a>
<br/></li>
<li>Search Anything Using Below Search Box</li>
</ol>
<br/>
<center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Type Here and Hit Enter&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Type Here and Hit Enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
<p>
<br/>
<br/></p>
<p align='center'><font size='5'>Page Not Found!</font></p>
<br/> <br/> <br/>
  <p align='center'> <font color='red' style='font-size:150px; font-weight:bold;'> 404 </font></p>
</span>
</b:if>

STEP3] Now, Change contacting link with your blog contacting link.

STEP4] Now, Click on save template. That's it.

Also Read: How To Add Stylish Email Subscription To Each Post's Footer in Blogger?
Also Read: Add Jumbo Social Sharing Counter Widget to Blogger.
Also Read: Stylish Contact Form for Blogger Static Pages. 

Conclusion:

So above guide is about "How To Create 404 Error Page in Blogger?" We hope by this complete guide everyone can easily implement the new stylish error page to their blogger blogs. If anyhow problem persist after following all steps then drop a comment below using comment box. Do Share and Subscribe.
Thank You! Stay Blessed!
Read More

Aug 24, 2016

Create Responsive Drop Down Menu with Search Box in Blogger

Hey guys, Hope you all are fine and enjoying your life with blogging. We have already shared 4 responsive drop down menu bar for blogger in October, 2015. Today, we are once again with another responsive drop down menu bar for blogger with search box.

Responsive Menu for Blogger, Responsive Navigation Bar, Drop Down Menu Bar

Actually, This responsive drop down menu bar we have designed for our recently published blogger template "Viral Grid-Mag Blogger Template" and this blogger template is our one of the best blogger template till now. Have a look on it. We are damn sure you can't ignore it due to its attractive look.

A menu bar is most wanted element of every website/Blog because this is controller of whole website which contains drop down menu links. As usually everyone has navigation bar on their websites but if we don't have well designed menu bar on our blog then it will reduce your traffic and also affect search engine traffic. So, we highly recommend everyone to use some unique design for their blog's navigation bar.

Also Read: Another Stylish Below Post Email Subscribe Box for Blogger.  
Also Read: BlackReen Free Blogger Theme - A Responsive Blogger Template.
Also Read: Viral Grid-Mag Responsive Blogger Template - Free & Professional Version. 

The screenshot below taken using my personal smartphone to give you an idea how it looks like and how it works on mobile phones. The Menu bar auto adjust according to the screen resolution because it is well designed by CSS3 media queries coding. Have a look on below screenshot.

Responsive Menu Bar, Mobile Responsive Blogger Menu, Mobile Responsive Navigation Bar, Search Box Menu for Blogger

Live Demo

Tip: If you are using Desktop computer then simply increase and decrease your browser window manually using your mouse and observe how menu toggles between two different styles and expands/collapses when clicked.

Now we are going to explaining the whole tutorial about adding this menu bar to blogger blog. Follow all instruction below.

How To Add Responsive Drop-Down Menu bar in Blogger?

  • Go To Blogger >> Template >> Backup your Template >> Click On Edit HTML.
  • Search for these lines or similar. These lines of code exist at the top section of your template
 <b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>
  • Replace all the above code with our custom Meta ViewPort code which is given below.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
  • Now, Search for ]]></b:skin> tag and paste whole CSS part just above of it which is given below.
 /***********************************************
Responsive DropDown Menu by MyBloggerGuides.com
************************************************/
#nav_wrapper1 {
width: 100%;
}
.nav_wrapper {
border-bottom:5px solid #111;
left: 0;
top:0;
position:fixed;
width: 100%;
transition: top .5s ease-out;
background: #0c6aff;
height:59px;
z-index:99999;
}
.btn {
padding: 10px 1%;
margin: 5px;
color: #fff;
text-decoration: none;
font-family: normal;
transition: all 0.1s ease;
}
.btn:hover {
transition: all 0.1s ease;
}
#search i {color: #fff;
font-size: 22px;}
#search {
float: right;
font-size: 22px;
padding: 20px 25px;
line-height: 0px;
color: #fff;
margin: 0;
font-weight: 700;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#search:hover {
background: #111;
}
.search_box {
clear: both;
width: 40%;
background: #111;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
transition: all 0.1s ease-in-out;
float:right;
z-index:99999999999;
}
.search_box.active {
height: auto;
padding: 10px 0;
width:40%;
}
.search_box input {
width: 60%;
font-size: 13px;
margin: 0 0 0 10px;
padding: 10px;
border: none;
background: #fff;
}
.search_box input:focus {
outline: none;
}
.search_box input.search_icon {
clear: both;
width: 30%;
height: auto;
padding: 10px;
margin: 0;
margin-right:10px;
border: none;
color: #fff;
cursor: pointer;
background: #0c6aff;
opacity: 1;
transition: all 0.1s ease;
float:right;
}
.search_box input.search_icon:hover {
background: #FFF;
color:#111;
}
.menu-link {
display: none;
}
.spinner-master input[type=checkbox] {
display: none;
}
.menu {
width: 100%;
height: auto;
background: #0c6aff;
color:#FF0000;
transition: all 0.3s ease;
margin-top:5px;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #111;
border: 1px solid #fff;
}
.menu ul li {
padding: 0px;
}
.menu > ul > li {
display: inline-block;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 18px;
height:100%;
}
.menu ul li a:hover {
background: #111;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #FFF;
}
.menu ul li > a {
padding: 15px;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: #0c6aff;
}
.menu ul ul > li a:hover {
background: #111;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
@media all and (max-width: 860px) {
.example-header .container {
width: 100%;
}
#search {
color: #fff;
padding: 0px 20px 0px 5px;
margin-top:25px;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
a.menu-link:hover {
color: #efa666;
}
a.menu-link:after {
content: "\2630";
font-weight: normal;
}
a.menu-link.active:after {
content: "\2715";
}
.menu {
clear: both;
min-width: inherit;
float: none;
  top:0px;
  position:relative;
}
.menu, .menu > ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.menu > li > ul.sub-menu {
padding: 0px;
border: none
}
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
.menu ul {
display: inline;
}
.menu li, .menu > ul > li {
display: block;
}
.menu > ul > li:last-of-type a {
border: none;
}
.menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.menu li.has-submenu > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: "-";
}
.menu ul ul > li a {
background:#0c6aff;
padding: 10px 18px 10px 30px;
border-bottom: 1px solid #111;
}
.menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #fff;
}
.menu ul ul, .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}

.search_box.active {
position: absolute;
top: 63px;
z-index: 10;
width:70%;
  right:2px;
}
.search_box input {
width: 50%;
  float:left;
}
.search_box input.search_icon {
width: 30%;
  float:right;
  margin-right:14px;
  margin-top:-37px;
}
}

  • Now, Search for <body> tag and just below of it paste following code.

<!-- Sticky-Menu-Start -->
   <div class='nav_wrapper'>
<!--<a class="menu-link" href="#menu"></a>-->
<div class='ct-wrapper'>
 <div class='spinner-master'>
  <input id='spinner-form' type='checkbox'/>
  <label class='spinner-spin' for='spinner-form'>
    <div class='spinner diagonal part-1'/>
    <div class='spinner horizontal'/>
    <div class='spinner diagonal part-2'/>
  </label>
</div>
  <a class='btn' href='#search_box' id='search'><i class='fa fa-search'/></a>
<nav class='menu' id='menu'>
 <ul class='dropdown'>
   <li><a href='/' title='Link'><i aria-hidden='true' class='fa fa-home'/> Home</a></li>
  
   <li><a href='#' title='Link'>DropDown A</a>
<ul>
<li><a href='#' title='Link'>Dopdown 1</a></li>
   <li><a href='#' title='Link'>Dopdown 2</a></li>
  <li><a href='#' title='Link'>Dopdown 3</a></li>
     </ul>
</li>
  <li><a href='#' title='Link'>DropDown B</a>
<ul>
<li><a href='#' title='Link'>Dopdown 1</a></li>
   <li><a href='#' title='Link'>Dopdown 2</a></li>
  <li><a href='#' title='Link'>Dopdown 3</a></li>
     </ul>
  </li>
   <li><a href='#' title='Link'> DropDown C</a>
<ul>
<li><a href='#' title='Link'>Dopdown 1</a></li>
   <li><a href='#' title='Link'>Dopdown 2</a></li>
  <li><a href='#' title='Link'>Dopdown 3</a></li>
     </ul>
  </li>
  </ul>
  </nav>
<form action='/search' class='search_box' id='search_box'> <input name='q' placeholder='Search here' type='text' value=''/> <input class='search_icon' type='submit' value='Search'/> </form>
</div><!-- /ct-wrapper -->
    </div><!-- /sub-nav-menu -->
<!-- /Sticky-Menu-Ends --> 

Customization:

We are damn sure you know very well how to add a drop down menu list in this menu bar if we are wrong than to create a tab for a drop down list use the following format:
<li>
<a href='#'>Drop Down </a>
 <ul>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
</ul>
</li>
  • Now, search for <head> tag and paste below lines just below of <head> tag.
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

Note: The above code includes source links to jQuery library and FontAwesome icons. If you already using anyone of it then you may avoid adding their respective source links. 
  • Now, again search for </body> tag and paste following script code just above of it.
<script type='text/javascript'>
$(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);
$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);
$(&quot;ul.dropdown li&quot;).hover(function() {
  $(this).addClass(&quot;hover&quot;)
}, function() {
  $(this).removeClass(&quot;hover&quot;)
});
var $menu = $(&quot;#menu&quot;),
  $menulink = $(&quot;#spinner-form&quot;),
  $search = $(&quot;#search&quot;),
  $search_box = $(&quot;.search_box&quot;),
  $menuTrigger = $(&quot;.has-submenu &gt; a&quot;);
$menulink.click(function(e) {
  $menulink.toggleClass(&quot;active&quot;);
  $menu.toggleClass(&quot;active&quot;);
  if ($search.hasClass(&quot;active&quot;)) {
    $(&quot;.menu.active&quot;).css(&quot;padding-top&quot;, &quot;50px&quot;)
  }
});
$search.click(function(e) {
  e.preventDefault();
  $search_box.toggleClass(&quot;active&quot;)
});
$menuTrigger.click(function(e) {
  e.preventDefault();
  var t = $(this);
  t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)
})
</script>

  • Now, Click on save template. That's it.

Also Read: How To Add Stylish Email Subscription To Each Post's Footer in Blogger?
Also Read: Add Jumbo Social Sharing Counter Widget to Blogger
Also Read: Stylish Contact Form for Blogger Static Pages. 

Conclusion:

So above guide is about "How To Create A Responsive Drop Dow Menu with Search Box in Blogger?" We hope you will like it.If anyhow problem persist after following all above steps then drop a comment below. We will help you out of sure. Do Share and Subscribe.
Thank You! Stay Blessed!
Read More

Aug 21, 2016

Below Posts Admin/Author Box with Social Icons for Blogger

Admin box for blogger, author box for blogger, below posts about admin box, below posts about author box
Hey guys, Hope you all are fine and enjoying your day by doing blogging. In previous we have also shared a dark theme stylish & responsive below posts about admin box for blogger users and now again we came up with second version of that blogger widget with light skin. Below we are going to attach a live demo screenshot of this below post about admin box. Have a look on it. If you want to see live it then you can see it by clicking on live demo button which are also given below.

Below Posts About Admin Box, Add Below Posts Author Box, About Admin Box for Blogger, Author Box for Blogger

Live Demo

The admin bio box is a small section where you can display information about the admin of the blog means who is behind of the blog with links to their website and social profiles.So we highly recommend everyone to must add a admin box below of each post on your blog.

Actually, This light theme widget we have created for our recently launched "Viral Grid-Mag Blogger Template" which is totally free and looks like professional due to its stylish features and theme. So, now we are going to share this widget with all of you. You should know about the features of this below posts admin/author box widget before understanding the method of how to add admin/author box to below each post in blogger.

Also Read: Another Stylish Below Post Email Subscribe Box for Blogger.  
Also Read: BlackReen Free Blogger Theme - A Responsive Blogger Template

Features Of Below Posts Admin/Author Box Widget

  1. Neat & Clean Widget.
  2. Very Fast to Loading.
  3. Social Button with Integration of FontAwesome Icons.
  4. Light Theme.
  5. Pleasant Look for Eyes.
  6. Gradient Background with the Help of CSS Language.
  7. No need to say, It is too stylish. ;)
Now, we are going to explain the whole method about adding this widget just below of each post in blogger with few steps. So, follow instructions carefully which are given below.

How To Add Admin/Author Box Below of Each Post?

Note1: Before doing any customization inside your blogger template code are must download a backup copy of your blogger template to save yourself to facing a big problem if you do any mistake. Having a backup copy of blogger template before doing customization is a good habit of blogger users.

STEP1] Go To Blogger >> Choose Your Blog >> Click on Template >> Now Click On Edit HTML.

STEP2] Now, Using CTRL+F (Windows) or CMD+F (Mac) Search for <head> tag inside your blogger template code are and paste below FontAwesome Stylesheet Link just below of this.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

STEP3] Now, Using CTRL+F (Windows) or CMD+F (Mac) Search for ]]></b:skin> tag inside your blogger template code are and paste below code just above of this.

Note2: You don't have permission to share my codes on your blog in any condition. Respect the hard work of developers.


/* About Author Box by: www.MyBloggerGuides.com Keep These Credits Intact, Do Not Remove */
div#MBG-About-Box:before { content: " \f007 About Author "; background: #0c6aff; font-family: Lobster, FontAwesome; padding: 16px 10px 24px 10px; position: relative; overflow: hidden; z-index: 0; top:70px; transition: .3s; color:#fff; float:right; } div#MBG-About-Box .wrap-me:hover{box-shadow: 4px 4px 4px 4px #444444;} div#MBG-About-Box .wrap-me { margin: 0 auto; display: block; padding: 30px 20px; background:linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%);border-top:1px solid #cfe1ff; box-shadow: 4px 4px 4px -4px #444444; color: #444444; box-sizing: border-box; background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%) padding: 10px 5px 10px 5px; clear: both; text-align: center; display: block; margin: 10px 0; height: auto; } .MBG-About-Credit { text-align: right; padding-right: 10px; padding-bottom: 10px; color: #CAFFFD; font-size: 10px; font-family: Lobster, FontAwesome; margin-top: 7px; } .MBG-About-Credit a{color:#0c6aff;} .MBG-About-Text { text-shadow: 2px 2px 2px #fff; text-align: center; color: #0; font-size: 18px; font-family: normal, FontAwesome; line-height: 1.5em; margin-top: 35px; margin-bottom: 4px; } #about-opacity {opacity: 0.7; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; margin-right:5px; } #about-opacity:hover{ opacity: 1; margin-left: 0px; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); zoom: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } .about-picture{ border:0px solid #0c6aff; margin:2px 15px 0px 0px; padding:2px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; } .about-picture{ border:4px solid #0c6aff; cursor:pointer; } #MBG-About-Box .social_profiles { line-height: 1.2em; display: table; float: none; margin: 0px auto; text-align: center; min-width: 300px; padding: 5px 0px; border: 0; } #MBG-About-Box .social_profiles a:hover { color: #FFF; background-color: #111; border-color: #0c6aff; } #MBG-About-Box .social_profiles a { color: #fff; margin: 0 5px; text-align: center; float: left; display: table; padding: 4px 5px; background-color: #0c6aff; border-radius: 50px; border: 2px solid #fff; width: 20px; height: 20px; line-height: 0; font-size: 20px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
STEP4] In above step we have added the CSS Part of this widget. Now wea re going to Add HTML Part of This about/admin author box widget. To add HTML Part Search for <div class='post-footer-line post-footer-line-1'> and paste below HTML Code just after of it.

(Don't save it, Changing required in this code area. To see what you have to change scroll down this post.)

  <!-- Below-Post-About-Author-Box-Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
                            <div id='MBG-About-Box'><div class='wrap-me'>
    <img align='left' class='about-picture' height='100px' id='about-opacity' src='http://2.gravatar.com/avatar/36385217f6c2ea9f4d3751db14bf8c3d?s=320' width='100px'/><div id='about'/>
    <div class='MBG-About-Text'>I&#39;m Paramjot singh, a young addicted Blogger  &amp; Author at My Blogger Guides Blog. I&#39;m from Lucknow, Uttar Pradesh, India. I&#39;ve good knowledge of CSS &amp; HTML. I always love to share my Blogger resources and will continue to add my two cents that might be helpful in your Blogging journey. :) </div><div class='clr'>
    <div class='social_profiles'>
       <a class='ripple-effect' href='http://www.facebook.com/techfrnz' rel='nofollow' target='_blank' title='Join on Facebook'><i class='fa fa-facebook'/></a>
       <a class='ripple-effect' href='http://www.twitter.com/techfrnz' rel='nofollow' target='_blank' title='Follow on Twitter'><i class='fa fa-twitter'/></a>
       <a class='ripple-effect' href='http://plus.google.com/+MyBloggerGuides' rel='nofollow' target='_blank' title='Follow on Google+'><i class='fa fa-google-plus'/></a>
       <a class='ripple-effect' href='http://www.pinterst.com/paramjotsingh' rel='nofollow' target='_blank' title='Follow on Pinterest'><i class='fa fa-pinterest'/></a>
       </div></div>
    <div class='MBG-About-Credit'><a class='ripple-effect' href='http://www.mybloggerguides.com/2016/08/below-posts-author-box-with-social-icons-for-blogger.html'><i aria-hidden='true' class='fa fa-download'/>
    Get Widget</a>
      </div></div></div>
    <!-- /Below-Post-About-Author-Box-Ends -->
</b:if>
Possible Customization
This Color = Change This Color With your Profile Link URL.
This Color = Change This Color with your little Biography.
This Color = Change This Color with your Social Profile Links.

STEP5] Now, Click on save template button.

That's it. You have added about admin/author box widget to the footer of each post on your blogger blog. Open any post of your blog and see it live on your blog.

Also Read: How To Add Stylish Email Subscription To Each Post's Footer in Blogger?
Also Read: Add Jumbo Social Sharing Counter Widget to Blogger

Conclusion:

So above guide is about "How To Add About Admin/Author Box to the Below Of Each Post in Blogger?" We hope by this guide you have added this on your blogger blog. If anything goes wrong or you are facing any problem in its responsiveness then drop a comment below. We will help you out of sure.  Did you like this author box widget? Do Subscribe us to get our Next Updates direct into your mailbox. Do Share it. 
Thank You! Stay Blessed!
Read More

Aug 20, 2016

Introducing Viral Grid-Mag Blogger Template - Responsive & Pro Version

Paramjot Singh | 8:10 PM | 14 Comments so far
Viral Grid-Mag, Free Blogger Template, Responsive Blogger Template, Professional Blogger Template, Gridy Blogger Template, Magazine Blogger Template
Hey guys, As we have tell you in our previous post tomorrow we will share a good looking and professional blogger template with all of you. So today we came up with stylish, responsive and professional looking blogger template for all of you. We have named it Viral Grid-Mag Blogger Template. Viral Grid-Mag Blogger Template is totally free means no need to spent a single coin for this blogger template. In upcoming days we will also share more free blogger template with all of you and just for all of you.

If you are first time on our blog then we will tell you this is our second blogger template. We have also shared 'BlackReen A Responsive Blogger Template" 3-4 days ago. So also have a look on Blackreen blogger template because that is also an free and impressive blogger template.

Viral Grid-Mag template is totally free means there is no need to pay a single coin for this template and yes we have not added any non-removable credit link to this blogger template. Means it is totally yours. So before download it look a screenshot below and see it live by clicking on below demo button.


Features of Viral Grid-Mag Blogger Template

  1. Nice & Cool Design.
  2. Responsive Layout.
  3. Slider Featured Posts on HomePage. 
  4. Jumbo Social Share Counter Widget on Post Pages with Fade In Fade Out Effect on Scroll.
  5. SEO Optimized.
  6. Responsive Navigation Bars.
  7. Fixed Top Menu Bar.
  8. Stunning Comments Threaded Section.
  9. Inbuilt Related Posts Widget.
  10. About Author - Subscribe Box Widget Below of Each Post with Theme Color Combination.
  11. Added WordPress Like Fade-In, Fade-Out Responsive Social Sharing Bar with "Jumbo Share counter".
  12. Cool Heading Styles.
  13. Custom Bullet Lists Style with Hover effect.
  14. Custom Numbered Lists Style with nice Hover Effect.
  15. Footer Subscription Box Matching color With Blogger Theme.
  16. Next-Previous Navigation on each post.
  17. Search Box added in Navigation bar.
  18. Customized Popular Posts Widget.
  19. Customized Cloud Label Widget for Footer Wrapper.
  20. Custom Page Navigation.
  21. Customized Official Featured Post Widget.
  22. Elegant Look.
  23. Custom 404 error Page.
  24. One time Stylish Popup email box.
  25. 3 Column Footer Bar.
  26. Totally Free :) and much more.

Download Viral Grid-Mag A Responsive Blogger Template

Yes, this template is totally free but we have designed it by doing hard work day and night. So if you wanted to use this template then you have to subscribe us using below Subscribe box and after verifying make contact with us via using contact us page and wait for very short time to get template in your mailbox. :)


Subscribe Us
Just Enter Your Email, Hit Sign Up and Verify to Download.

How To Upload The Blogger Template?

  1. Go to Blogger Dashboard > Locate your Blog if you have more then one blog.
  2. Click on More Options Drop Down and choose Template.
  3. Click on the Backup/Restore button on Top Right Corner.
  4. Click on Download Full Template button to backup your Old template for safety.
  5. Click the Browse button and locate Viral Grid-Mag Responsive blogger template.
  6. Click on the Upload Button. And you are Done!

Customize The Template

There are basic steps you need to follow for doing customization inside your blogger template code. Follow each step for making it totally your's. :)
  1. Go To Blogger Template >> Edit HTML.
Customize Top Fixed Navigation Bar
Search for the Following Code

<!-- Sticky-Menu-Start -->

After that you will see a Link list items Customize it your own.
Customize Drop Down Navigation Bar
Again Search for the Following Code and change all links to make it your own.

<!-- /Below-Header-Navigation-Bar-Start -->

Customize Featured Slider Content
Once again Search for the Following Code to make changes in featured slider content.

 <!-- Featured-Slider-Start -->

Customize Header Right Ad Sidebar
Search for the Following Code to add a Ad Banner.

<!-- Header Right -->

Customize Below Post About Admin Box
Search for the Following Code to customize About Admin Box which appears on below each blog post.

<!-- Below-Post-About-Author-Box-Start -->

Customize Below Post Subscribe Box
Search for the Following Code to customize Email Subscribe Box which appears on below each blog post.

<!-- Below-Post-Subscribe-Box-Start -->

Customize Jumbo Counter  Social Share Bar Twitter Sharing Button
Search for the Following Code to make changes in Twitter Social Share Button.

<!-- Jumbo-Share-Counter -->

Change Below line into your twitter username.

@MyBloggerGuides

Customize One Time Pop-Up Email Subscribe Box
Search for the Following Code to customize One Time Pop-up Subscribe Box.

<!-- Popup Subscribe Box -->

Customize Footer Subscribe Box
Search for the Following Code and make changes in Footer Email Subscribe Box.

<!-- Footer Subscribe Box -->

Customize Footer Top Navigation Links
Search for the Following Code and make changes in Footer Top Links.

<!-- footer-Top-Navigation -->

Terms & Condition to Use this Blogger Template

Please follow our four simple terms and conditions before using this template. :)
  • You can Use this Template for Personal and Commercial Use.
  • If You can then keep the Footer links Intact. (Please Respect our hard work)
  • You can Re-Distribute but you must give us the credits and you must keep the footer links with out editing!
  • If you like the Template then Please Feel free to Share it!
Also Read:
  1. Blogger Contact Form Gone Viral! Never Seen Before.
  2. Cute & Stylish Popup Email Subscribe Box For Blogger.
  3. Three Stylish Styles to Make Youtube Embedded Videos Responsive.

Conclusion:

So above is all about "Viral Grid-Mag - A Responsive Blogger Template". This is our second blogger template which we are sharing with all of you. Kindly Let us know your feedback about this theme in comment and please Share it with your friends. ;) Stay tuned with us for our upcoming Blogger Templates. :)
Thank You! Stay Blessed!
Read More

Aug 19, 2016

Stylish Subscription Box for Blogger! Add to Below Post.

Below Post Subscribe Box, Blogger Subscription Box
Everyone know Feedburner is the only free source to collect email newsletter subscribers and increase their blog's page views  and without the readers and subscribers blogs are meaningless. As you know subscription box widget help their blog owner to grow up their email subscriber list and it also helps to the blog readers to get free newsletter from their loved ones blog. If you have huge subscriber list than there is no need to promote your blog content because it automatically send the newsletter to your subscriber whenever you published the new article on your blog.

Placing a Email Subscription Box to Each Post's footer is good idea to increase email subscribers for your blog. So, We highly recommend everyone to must have a feedburner subscribe box on your blog to gain new subscribers for their blogs. Although a subscription is none of use when it is not unique, stylish and professional. We think you have understand what we want to say. Yes guys attractive and professional look widgets attract more visitors to your blog and also having a attractive and stylish subscribe box widget can also increase mail subscribers for your blog.

Most of us use feedburner in order to send to blog readers and subscribers. Therefore we have designed a unique, professional and stylish feedburner email subscribe box for all of you. You can add it on each post's footer of your blogger blog. Actually, this widget we have designed for one of our upcoming blogger template, which we are going to share on tomorrow with all of you. We hope you will like because it was free and have stylish, professional and unique look. Below we are going to attach a demo screenshot and a live demo button. Have a look on it before adding it on your blogger blog.

Below Post Email Subscribe Box, Subscription Box for Blogspot, Below Post Subscribe Box, Blogger Subscription Box

Live Demo

Also Read : Stylish Pop-Up Email Subscribe Box Widget for Blogger.

So, we hope you have liked it and now you want to add it on your blogger blog to increase your email subscribers. But before adding it on your blogger blog you should know why to add this widget on your blogger blog? What is special in this widget? Read below features of this email subscribe box widget.

Features of This Email Subscribe Box Widget

There are many good features which we have added it in this email subscribe box widget. Features are given below.
  1. Neat & Clean Widget.
  2. Made With Pure CSS, HTML and JavaScript Language.
  3. Email Subscribe Box Has Light Theme.
  4. Gradient Background with CSS Language.
  5. Added Ripple Effect On Sign Up Button.
  6. Responsive Design.
  7. Very Fast Loading.
  8. Light Theme.
  9. Pleasant Look for eyes.
  10. No Need to say, It has also Stylish look.
Also Read: Another Stylish Below Post Email Subscribe Box for Blogger.

So, now we are going to explaining how you can add this widget on your blogger blog to below of each post. Lets follow the all below steps carefully to save yourself to making a mistake inside your blogger template code area. Follow instructions below.

How To Add Email Subscribe Box to Below of Each Blogger Post?

Note1: Before doing any customization inside your blogger template code are must download a backup copy of your blogger template to save yourself to facing a big problem if you do any mistake. Having a backup copy of blogger template before doing customization is a good habit of blogger users.
STEP1] Go To Blogger >> Choose Your Blog >> Click on Template >> Now Click On Edit HTML.

STEP2] Now, Using CTRL+F (Windows) or CMD+F (Mac) Search for <head> tag inside your blogger template code are and paste below FontAwesome Stylesheet Link just below of this.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

STEP3] Now again Using CTRL+F (Windows) or CMD+F (Mac) Search for ]]></b:skin> tag inside your blogger template code are and paste below code just above of this.

Note2: You don't have permission to share my codes on your blog in any condition. Respect the hard work of developers.

///******************************************************////
Ripple Effect by MyBlogger
///******************************************************////
@-webkit-keyframes ripple-animation {
0% {
-webkit-transform: scale(.01);
transform: scale(.01);
}
100% {
-webkit-transform: scale(5);
transform: scale(5);
}
}
@keyframes ripple-animation {
0% {
-webkit-transform: scale(.01);
transform: scale(.01);
}
100% {
-webkit-transform: scale(5);
transform: scale(5);
}
}
/*  Subscription Box V2 by:   www.MyBloggerGuides.com  */
div#MBG-Sub-Boxv2 .wrap-mev2:hover{box-shadow: 4px 4px 4px 4px #444444;}
div#MBG-Sub-Boxv2 .wrap-mev2 {
margin: 0 auto;
display: block;
padding: 30px 20px;
box-shadow: 4px 4px 4px -4px #444444;
box-sizing: border-box;
background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%);
padding: 12px 0px 1px 0px;
clear: both;
text-align: center;
display: block;
margin: 10px 0;
height: auto;
}
.MBG-Enter-Emailv2 {
color: #444242;
width: 50%;
height: 45px;
background: #fff url(https://lh4.googleusercontent.com/-dPJx9mWYWPw/UtV5aN-6mRI/AAAAAAAAAJs/ibo7iZsN4nw/h120/MAIL.png) no-repeat 15px 19px;
padding: 5px 0px 5px 38px;
border-radius: 2px;
border: 1px solid #000;
margin-top: 36px;
float:left;
margin-left:30px;
}
.MBG-Buttonv2:hover {
background: #111;
box-shadow: 4px 4px 4px 4px #444444;
}
.MBG-Buttonv2 {
width:30%;
background: #0c6aff;
font-family: normal, FontAwesome;
box-shadow: 4px 4px 4px -4px #444444;
  cursor: pointer;
color: #fff;
font-weight: bold;
text-shadow: 2px 2px 2px #444343;
font-size: 40px;
padding: 5px;
  margin-top:-30px;
}
.MBG-Creditv2 a{color:#0c6aff}
.MBG-Creditv2{
text-align: right;
padding-right: 10px;
padding-bottom: 10px;
color: #CAFFFD;
font-size: 10px;
font-family: Lobster, FontAwesome;
margin-top: 7px;
}
.MBG-Headlinev2 {
text-shadow: 2px 2px 2px #fff;
text-align: center;
color: #0c6aff;
font-size: 30px;
font-family: Arial, FontAwesome;
line-height: 1.1em;
}
@media screen and (max-width: 500px){
.MBG-Enter-Email{width:60%; margin-top:5px; margin-left:10px; margin-right:10px;
float:none;}
.MBG-Button {width:auto; font-size:30px;}}
STEP4] In above step we have added the CSS Part of this widget. Now wea re going to Add HTML Part of This email subscribe widget. To add HTML Part Search for <div class='post-footer-line post-footer-line-1'> and paste below HTML Code just after of it.

(Don't save it, Changing required in this code area. To see what you have to change scroll down this post.)
<b:if cond='data:blog.pageType == "item"'>
<!-- Below-Post-Subscribe-Box-Start -->
<div id='MBG-Sub-Box'><div class='wrap-me'><div class='MBG-Headline'>Subscribe Us &amp; Get Latest Updates Direct into Your Mailbox!</div><form action='http://feedburner.google.com/fb/a/mailverify' class='MBGEmailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='MyBloggerGuides'/> <input name='loc' type='hidden' value='en_US'/> <input class='MBG-Enter-Email' 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;}' required='' type='text' value='Enter your email...'/><br/><br/><input class='MBG-Button ripple-effect' title='' type='submit' value='Sign Up'/><div class='clr'/><div class='MBG-Credit'> <a class='ripple-effect' href='http://www.mybloggerguides.com/2016/08/add-stylish-subscription-box-below-blogger-posts.html' target='_blank'><i aria-hidden='true' class='fa fa-download'/> Get Widget</a>
</div>
  </form>
</div>
</div>   
<!-- /Below-Post-Subscribe-Box-Ends -->       
</b:if>

Possible Customization

This Color - To Change The Text Area.
This Color - Change it With Feedburner Id(URL). If you don't have Feedburner of your blog. Then go and create one.

STEP5] Now, Search for </head> tag and paste below script code just above of the </head> tag inside your blogger template code area.

<script>
          //<![CDATA[
          jQuery(document).ready(function(e){e("body").on("click",".ripple-effect",function(t){t.preventDefault();var i=e(this),a=i.attr("data-ripple-limit"),n=i.attr("data-ripple-color");if("undefined"==typeof n)var n="rgba( 0, 0, 0, 0.3 )";var o=i.attr("data-ripple-wrap-radius");if("undefined"==typeof o)var o=0;if("undefined"==typeof a)var r=i;else var r=i.closest(a);var p=r.offset(),d=t.pageX,s=t.pageY,f=r.outerWidth(),l=r.outerHeight(),u=e('<span class="ripple-effect-wrap"></span>');u.css({width:f,height:l,position:"absolute",top:p.top,left:p.left,"z-index":1e4,overflow:"hidden","background-clip":"padding-box","-webkit-border-radius":o,"border-radius":o});var c=i.attr("data-ripple-wrap-class");"undefined"!=typeof c&&u.addClass(c),u.appendTo("body");var b=d-p.left,m=s-p.top,g=1e3,h=e('<span class="ripple"></span>');h.css({width:g,height:g,background:n,position:"absolute",top:m-g/2,left:b-g/2,content:"","background-clip":"padding-box","-webkit-border-radius":"50%","border-radius":"50%","-webkit-animation-name":"ripple-animation","animation-name":"ripple-animation","-webkit-animation-duration":"5s","animation-duration":"5s","-webkit-animation-fill-mode":"both","animation-fill-mode":"both"}),e(".ripple-effect-wrap:last").append(h),setTimeout(function(){u.fadeOut(function(){e(this).remove()})},500);var v=i.attr("href"),w=i.attr("target");w||(w="_self"),"undefined"!=typeof v&&"#"!=v.substring(0,1)&&setTimeout(function(){window.open(v,w)},200),(i.is("input")||i.is("button"))&&setTimeout(function(){i.removeClass("ripple-effect"),i.trigger("click"),i.addClass("ripple-effect")},200)})});
          //]]>
    </script>

STEP6] Now, Click on save template button.

That's it. You have added email subscribe box to the footer of your blogger blog post. Open any post of your blog and see it live on your blog.

Also Read: How To Add Stylish Email Subscription To Each Post's Footer in Blogger?

Conclusion:

So above guide is about "How To Add Stylish Email Subscribe Box to the Below Of Each Post in Blogger?" We hope by this guide you have added this on your blogger blog. If anything goes wrong or you are facing any problem in its responsiveness then drop a comment below. We will help you out of sure.  Did you like this subscribe box? Do Subscribe us to get out Next Updates direct into your mailbox. Do Share it. 
Thank You! Stay Blessed!
Read More

Aug 18, 2016

Add Multi Author Image, Date, Labels & Comments below Post Titles

Below Post add Multi Author Image, Below Post Add Date, Time, Comments, and Author Image
Hey guys, You might have seen many blogger blogs who are displaying Multi Author Image, Date, Labels & how much comments so far below of post titles. One of our reader ask us how to show multi author image just below of post titles. So for his question we are here to show how you can add this widget just below of post title. First see a demo screenshot of this widget.

Below Post add Multi Author Image, Below Post Add Date, Time, Comments, and Author Image

There are many website and blogs who have shared this widget already but we have not find any website who share the task to display multi author image with labels, time and comments. Therefore we are going to share the technique to show multi author image with labels, time of publishing the and comments so far in blogger blog.

Also Read: Customized Blogger Official Contact Form! Never Seen Before

Now, we are going to learn how to add multi author image with Date, Labels and comments just below of Blogger Post's title. Follow all the instruction carefully to safe yourself from making any mistake inside your blogger template.

How To Add Multi Author Image, Date, Label & Comments below Post Titles?


Note1: Before doing any customization inside your blogger template must download a backup copy.

Step1] Go to Blogger >> Template >> Edit HTML.

Step2] Click anywhere inside the code area and press CTRL+F to search below code lines.

Note2: After pasting or typing below lines in search box hit Enter button two times to find the second occurrence of below code lines.
<div class='post-header-line-1'>
Note3: If you can't find above lines then search for below code line.
<div class='post-header'>
Step3] Now, just after of that line paste whole the code which is given below.
<div style='margin: 10px 0;'><span style='background:transparent url () no-repeat scroll top left;padding-left:5px;font-size:11px;'><span style='margin-right:5px; bottom:-7px; position:relative;'><img expr:src='data:post.authorPhoto.url' height='25' itemprop='image' width='20' style="border-radius:20px; border:1px solid;"/></span><data:post.author/></span> | <span style='background:transparent url(https://3.bp.blogspot.com/-8zBVC26ojQE/UrcfeqmWuXI/AAAAAAAAFng/f_xOYkEhdVA/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.timestamp/></span> | <span style='background:transparent url(https://2.bp.blogspot.com/-Zz2yZeaJG6U/UrcfOYO6_JI/AAAAAAAAFnY/1WHah9jzmhE/s1600/tag.png) no-repeat scroll top left;background-position:0px -1px;padding-left:23px;font-size:11px;'><b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop></b:if></span><span class='post-comment-link' style='float:right;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://4.bp.blogspot.com/-rC0rrfpsbhE/UrcdZ37f_uI/AAAAAAAAFnA/ZIiB7SJgx0I/s1600/comment.png) no-repeat;padding-left:20px;font-size:10px;'><b:if cond='data:post.numComments == 0'>Be first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comments so far<b:else/><data:post.numComments/> Comments so far</b:if></b:if></a></b:if></span></div>

Customization If You want to Change

Replace This Color Link - To Change the Clock Image with your image link.
Replace This Color Link - To Change the Tag (Label) Image with your image link.
Replace This Color Link - To Change the Comment Image with your image link.
Change This Color - To Change The Text When Your Post don't have any comment.
Change This Color - To Change The Text When your Post Have 1 Comment. Its looks like 1 Comment so far.
Change This Color - To Change The Text When Your Post have comments more than 1. Its looks like 2 Comments so far, 3 comments so far, etc.

Step4] Now, Simply hit the save template button and open your blog to see how it looks like on your blogger blog. :)

Also Read: BlackReen Responsive Blogger Template - By MyBloggerGuides
Also Read: Jumbo Counter Responsive Social Sharing Widget with Fading Effect for Blogger

Conclusion:

So above guide is about "How To Add Multi Author Image, Date, Label & Comments below Post Titles?" We hope you like this trick and have successfully add this function to your blogger blog. If anyhow problem persist after following all above steps carefully then drop a comment below. We will help you out of sure. Do Share.
Thank You! Stay Blessed!
Read More

Aug 17, 2016

Add Jumbo Social Sharing Counter Widget to Blogger Post's V2

Jumbo Social sharing widget, floating social share bar for blogger, blogger social sharing counter widget
Hey guys, How are you? Today we are going to share "FLOATING SOCIAL SHARING WIDGET WITH JUMBO COUNTER". Jumbo social sharing widget is just like WordPress websites and it is fully responsive, Means your readers also can share your blogger blog content with this jumbo share counter widget. Before preaching the features of this widget we are going to attach a live demo screenshot of this widget. Have a look on below picture and see how it works. :)


We hope you have liked above demo screenshot of this widget and we're damn sure you could not ignore this widget due to its attractive look. Actually this is second version of our previous WP like social sharing counter widget. Social sharing counter widget V1 has not features like this (V2). We have included many features to this widget, For example: Jumbo Effect, More Pleasant Look, Share This Article Heading and much more. If you want to add this widget on your blogger blog then you should know about features of jumbo share counter before add it to your blog.

Also Read: BlackReen Responsive Blogger Template - By MyBloggerGuides

Features of Jumbo Social Sharing Counter Widget

  1. Responsive Design.
  2. Designed with CSS, HTML and .js language.
  3. Animated Jumbo Share Counter.
  4. Fast Loading.
  5. Floating Social Share Bar.
  6. Show Hide Button.
  7. Fixed on Little Space in Left Sidebar.
  8. Integrated FontAwesome Icons.
Okay! Now, if you want to add this social sharing widget to your blogger blog then follow all instruction step by step which are given below.

How To Add Jumbo Social Sharing Counter Widget to Blogger?

Note1: Before doing any customization inside your blogger template code must download a backup copy of your blogger template.
STEP1] Go To Blogger Dashboard >> Template >> Edit HTML.
STEP2] Using CTRL+F Search for <head> tag and just after it paste below stylesheet link of FontAwesome Icons and Lobster Fonts. 

Note2: If you are using Version 1 of this social sharing widget then skip this step and headover to the next.
     <link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/><link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
Note3: Above FontAwesome Stylesheet is the latest version. If you are using old version which is before 4.2.0 then you have to replace with this stylesheet link because in old versions have not included StumbleUpon Icons.

STEP3] Now again using CTRL+F search for ]]></b:skin> tag and just above of it paste below CSS Code.

Note4: You don't have permission to share my widget codes on your blog with in any condition. Respect the hard work of developers.
/*------------------------------------------------------------
Floating WordPress Like Jumbo Social Share Bar Version 2.0
Designed by: Paramjot Singh
Blogger at: http://www.mybloggerguides.com
Counting Code by:: http://donreach.com/social-share-count
Jumbo Effect By : STC Network
Distributed Under GPL License
Icons:: FontAwesome 4.6.3
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.MBG_SocialBar{max-width:410px; width:100%; height:auto; max-height:138px; position: fixed; bottom:5px; padding: 0; left:0px; text-align: center; margin: 0 auto; z-index: 99999999;}
.MBG_SocialBar label:hover {  cursor: pointer; opacity:1; }
.MBG_SocialBar label { text-align: center; opacity: 0.9; background: #393939; color: #FFF; border: 0; font-family: fontawesome; display: block; font-size: 22px; padding: 15px 5px 5px 5px; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; position: absolute; width: 70px; height:30px; margin-left:249px; margin-top:85px;}
input.ShowHide_Button:checked + label { transform-origin: 50% 0%!important; -webkit-transform-origin: 50% 0%!important; -moz-transform-origin: 50% 0%!important; -ms-transform-origin: 50% 0%!important; -o-transform-origin: 50% 0%!important; opacity: 1; -webkit-transform: translateX(0px) rotateY(-180deg); -moz-transform: translateX(0px) rotateY(-180deg); -ms-transform: translateX(0px) rotateY(-180deg); -o-transform: translateX(0px) rotateY(-180deg); transform: translateX(0px) rotateY(-180deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; border: 1px solid #3A3939; margin-top:107px; margin-left:-7px; padding: 5px; width:50px; }
input.ShowHide_Button ~ .ShowHideMe { -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); }
input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-500px !important; } input.ShowHide_Button { display: none; } 
.MBG_SocialBar .social_menu:before{padding:5px 180px 3.2px 0.1px; top:-0.5px; color:#fff; z-index:99999; background:#393939; position:relative!important; content:'Share This Article \f1e0'; font-family:Lobster,FontAwesome;}
.MBG_SocialBar .social_menu { border:3px solid #cecece; background-color:#f0f0f0; height:132px; display: inline-block; float: left; list-style:none; max-width:325px; width:410px; margin: 0; padding: 0; }
.MBG_SocialBar .social_menu .button_facebook { background: #3a579a;}
.MBG_SocialBar .social_menu .button_facebook:hover { background: #314a83; } .MBG_SocialBar .social_menu .button_twitter { background: #00abf0; } .MBG_SocialBar .social_menu .button_twitter:hover { background: #0092cc; } .MBG_SocialBar .social_menu .button_googleplus { background: #df4a32; } .MBG_SocialBar .social_menu .button_googleplus:hover { background: #be3f2b; } .MBG_SocialBar .social_menu .button_pinterest { background: #cd1c1f; } .MBG_SocialBar .social_menu .button_pinterest:hover { background: #ae181a; } .MBG_SocialBar .social_menu .button_stumbleupon { background: #ea4b24; } .MBG_SocialBar .social_menu .button_stumbleupon:hover { background: #c7401f; } .MBG_SocialBar .social_menu .button_linkedin { background: #2554BF; } .MBG_SocialBar .social_menu .button_linkedin:hover { background: #224EB4; }
.MBG_SocialBar .social_menu .button_facebook, .MBG_SocialBar .social_menu .button_twitter, .MBG_SocialBar .social_menu .button_googleplus, .MBG_SocialBar .social_menu .button_pinterest, .MBG_SocialBar .social_menu .button_stumbleupon , .MBG_SocialBar .social_menu .button_linkedin{border-radius:1px;}
.MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_stumbleupon .count, .MBG_SocialBar .social_menu .button_linkedin .count {
  color: #8ff!important; font-size: 14px !important; font-family: sans-serif; font-weight: normal; }
.MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count  { padding: 5px 5px 5px 5px; background-color:#111; font-weight:normal; color: #8ff!important; font-size: 16px !important; float:right; margin-top:-7px; margin-right:-1px; border-bottom-left-radius:15px; border-top-left-radius:20px;}
.MBG_SocialBar .social_menu > ul { margin: 5px 0px 0px 0px;; padding: 0; list-style: none; }
.MBG_SocialBar .social_menu .share { background: #111; color: #8ff; font-size: 12px; height: 50px !important; max-width:80px; margin-bottom:1px; border-radius:1px; }
.MBG_SocialBar .social_menu .share .count.h4 { background:#111; font-size: 18px; font-family: "Oswald",sans-serif; color: #8ff; height: 25px !important; line-height: 1.5em; font-weight: normal; }
.MBG_SocialBar .social_menu .share .h6 { font-family: sans-serif;}
.MBG_SocialBar .social_menu > ul > li { margin: -5px -2px 0px 0px; position: relative; text-align: center; list-style: none; list-style-type: none; padding: 0px; border-left: 0 solid rgba( 0,0,0,.4); height: 50px; width:80px; overflow: hidden; display: inline-block; box-sizing: border-box; background: none; box-sizing: content-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.MBG_SocialBar .social_menu > ul > li a { display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 0px px 0px 0px; cursor: pointer; text-decoration: none; }
.MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 75px; }
.MBG_SocialBar .social_menu > ul > li i { color: #fff !important; font-family: FontAwesome; font-size: 20px; font-style: normal; font-weight: normal; line-height: 1em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; top:13px; position:relative; }
.MBG_SocialBar .social_menu > ul > li:hover i { opacity: 0.9; }
@media only screen and (min-width:768px) and (max-width:979px) {
.MBG_SocialBar{bottom:0px; left:-1px;}
input.ShowHide_Button:checked + label {margin-top:105px; margin-left:-15px;}
input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
}
@media only screen and (min-width:480px) and (max-width:767px) {
.MBG_SocialBar{bottom:63.5px; left:-0.5px;}
.MBG_SocialBar .social_menu{max-width:180px; width:100%; height:195px;}
input.ShowHide_Button:checked + label {margin-top:170px; margin-left:-15px;}
input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
.MBG_SocialBar .social_menu:before{padding:3px 30px 3px 0.1px; z-index:1;}
.MBG_SocialBar .social_menu .share {max-width:90px;}
.MBG_SocialBar .social_menu > ul > li {height: 40px; max-width:89px; width:100%; }
.MBG_SocialBar .social_menu > ul > li:hover {max-width: 84px; width:100%; height: 40px; position:relative!important;}
.MBG_SocialBar label {line-height:10px; width: 79px; margin-left:93px; margin-top:158px; height:20px;}
.MBG_SocialBar .social_menu .share {line-height:10px; height: 40px!important; max-width:90px; margin-top:0.3px; }
.MBG_SocialBar .social_menu .share .count.h4 { font-size: 16px;}
.MBG_SocialBar .social_menu .share .h6 {font-family: sans-serif;}
.MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count { margin-top:-16px;}
.MBG_SocialBar .social_menu > ul > li i { position:relative; top:6px; }
.MBG_SocialBar .social_menu .button_facebook {position:relative; top:1px;}
.MBG_SocialBar .social_menu .button_linkedin {position:relative; top:-0.2px;}
}
@media only screen and (min-width:320px) and (max-width:479px){
.MBG_SocialBar{bottom:63.5px; left:-0.5px; max-width:140px;}
.MBG_SocialBar .social_menu{max-width:140px; width:100%; height:195px;}
input.ShowHide_Button:checked + label {margin-top:170px; margin-left:-15px;}
input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
.MBG_SocialBar .social_menu:before{padding:3px 7px 3.2px 0.1px;font-size:16px; }
.MBG_SocialBar .social_menu > ul > li {height: 40px; max-width:69.2px; width:100%; }
.MBG_SocialBar .social_menu > ul > li:hover {max-width: 64.2px; width:100%; height:40px; position:relative; }
.MBG_SocialBar label {width: 59px; margin-left:73px; margin-top:158px; height:20px;}
.MBG_SocialBar label i{top:-5px; position:relative;}
.MBG_SocialBar .social_menu .share {line-height:10px;}
.MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count { margin-top:-16px;}
.MBG_SocialBar .social_menu > ul > li i { position:relative; top:8px; }
}
STEP4]  Now, You need to add HTML Part and JavaScript API. Find out this code line <div class='post-footer-line post-footer-line-3'> and just below of this line paste below HTML Part given below as it is.


Note5:  You will find the above code lines two times in your template, but you have to paste the below code just after the second appearance of this code line.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='MBG_SocialBar'>
  <input class='ShowHide_Button' id='roTater' type='checkbox'/>
  <label for='roTater'><i class='fa fa-arrow-left'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<ul>
<li>
<div class='share'>
    <div class='share-btn tcount' data-service='total'>
      <div class='count h4 anim'/>
        <div class='h6'>SHARES</div>
  </div></div></li>
<li class='button_facebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @MyBloggerGuides - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count anim'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[

ADD CODE HERE

$(document).ready(function() {
var shareUrl=$("link[rel=canonical]").attr("href");
$.getJSON('http://share-counters.rhcloud.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?",function(data){shares=data.shares;$(".count").each(function(index,el){service=$(el).parents(".share-btn").attr("data-service");count=shares[service];$(el).text(count)});
}); /*#########Animation Settings###########*/
$(window).load(function() {
    $('.anim').counterUp({
      delay:1, //Smaller value gives more frames
      time: 60 //Higher value slows down animation
    }); });
});
//]]></script>
</b:if>
</b:if>
<script>
$(&quot;.MBG_SocialBar&quot;).hide();
$(window).scroll(function() {
    if ($(window).scrollTop() &gt; 50) {
        $(&quot;.MBG_SocialBar&quot;).fadeIn(&quot;slow&quot;);
    }
    else {
        $(&quot;.MBG_SocialBar&quot;).fadeOut(&quot;slow&quot;);
    }
  });</script>

STEP5] Now Click on below button and Paste whole code (Using CTRL+A & after that CTRL+C) by replacing ADD CODE HERE in above code to make animated effect in social sharing widget.

Get Code


STEP6] Replace @MyBloggerGuides from above code area with your Twitter UserId.

STEP7] Now Click on Save Template. That's it. Now checkout your blog to see it is working properly or not?

Also Read: Customized Blogger Official Contact Form! Never Seen Before

Conclusion:

So above guide is about "How To Add Floating Jumbo Social Sharing Counter Widget to Blogger Blog?" We hope you will like this sharing widget. Do comment below if you have any advise to imporove this widget. Your opinion are always welcome. Do comment below if problem persist. Do Share.
Thank You! Stay Blessed!
Read More
Copyright © . MyBloggerGuides. All Rights Reserved.
Designed by: MyBloggerGuides