Add 'MP3 player' to your Blogger blog

Sometime we need to insert MP3 sounds to our Blogger blogs, but there is no such option available on Blogger blog, so here we are going to show How to add MP3 player' to your Blogger blog very easily; Read on:

Add 'MP3 player' to your Blogger blog

 

1. Using SoundCloud (Add music player by single post)
SoundCloud is a global online audio distribution platform based in Berlin, Germany, that enables its users to upload, record, promote, and share their originally-created sounds, SoundCloud is an audio platform that lets you listen to what you love and share the sounds you create.

• Step 1: Go to SoundCloud, open an account and verify email, and login

• Step 2: Go to Upload option, Select choose file to upload, and upload your MP3

• Step 3: Go to Track list, select the song, Go to the track page

• Step 4: Click on share icon (shown below)

• Step 5: Select Embed, copy embed code (shown below)

• Step 6: Get back to Blogger, edit post, and select HTML

• Step 7: Now paste the copied code here and Switch to 'Compose' mode, Done now you have music player on your blog post.

2. Using Wikplayer (Add music player to Blog, universally)
Read how to add and generate here:



So don't forget to mention how it working on your blog :)

How to Fix Mixed Content Errors in Blogspot Blogs

With HTTPS now automatic in Blogger the benefits have been considerable. However, there are some issues that are now facing bloggers thanks to this change in policy and one of the most common is mixed content errors.

What are mixed content errors?

This is when a web page becomes secured by SSL, but it contains both secure HTTPS and also the non-secure HTTP which is usually links, scripts, style sheets, video, and images. This results in browser errors that negatively affect the performance of your website and cause security issues. This means that source codes such as template, layout gadget, and post and paste may be causing the issues in the HTML side of the equation.

How to identify mixed content errors?

This is a fairly straightforward process that you can use through Google Chrome:

1. Visit blog using HTTPS, for example - https://yourblog.blogspot.com
2. Access the Chrome Menu at the top-right of your browser window and go to "More Tools" > "Developer Tools" and switch to the "Console" tab or use the CTRL + SHIFT + J keys to open the JavaScript console
3. Look in the Console for mixed content errors which will look similar to these:

Examples of mixed content errors include, but are not limited to the following:

- Insecure Script Request
- Insecure Image Request
- Insecure URL Request

You should list all unsecured URLs and visit the other pages on your blog to check for other mixed content errors.

Fix the mixed content errors in a Blogger template

To fix the errors encountered which may be found in the template or layout, you will need to do the following:

1. Go to Blogger and select your blog, then click on "Template" and press the "Edit HTML" button
2. Click anywhere in the code area and press CTRL + F to search for http://

3. Replace all http:// prefixes with https://

Verify that the new URLs using the HTTPS addresses work by opening them in a new window on your browser. If the links you are receiving provide the same results, then you can Save Template.

To check for layout errors:

Go to Blogger and click on 'Layout' > check for any HTML/JavaScript gadget and click 'Edit' on each gadget. Replace all http:// prefixes with https:// then verify that they are working and hit Save.

Fix the mixed content errors in Blogger posts and pages

To check for post and page errors, do the following:

1. Log into your Blogger Dashboard and select your blog, then click on 'Posts' or 'Pages' and select any post or page > hit the "Edit" link below the Post/Page title.

2. Once the Post editor opens, switch to the "HTML" tab and press CTRL + F keys to look for http:// prefixes. After you found them, replace http:// with https://

Be sure to verify that the new link works by opening up your browser and testing them. After you've tested them, hit Update.

Update to the Blogger post editor to fix mixed content

To find and fix mixed content errors automatically, Blogger has released a warning tool that alerts you to possible mixed content issues in your posts. All you need to do is go to "Edit" inside a post, switch to the "HTML" tab and hit the Update button. All of the errors will be presented along with the ability to fix them. Once they have been corrected, hit Update.

In the end, fixing these types of errors will greatly improve the performance of your blog, particularly when it comes to pages that may have this particular issue with mixed content generating errors. It also applies to custom domains as well as long as you have an SSL certificate. All it takes is a few minutes and you can greatly improve your blog site that has been impeded with mixed content errors.

Add featured post slider in Blogger (homepage)

Got some worth mentioning posts in your Blogger blog, and want to represent them with style here I am presenting to you a high end very popular featured post/content slider for your Homepage. Featured post sliders are seen in many blogs because they create a very good impression about your site and also increase the beauty of landing page, as well as they reduce bounce rate. And speaking of Featured post slider I personally like Coin Slider very much and recently I integrated it to Blogger blogs. I like Coin Slider because it has many advantages like:

•     Unique transition effects

•     Valid markup

•     Flexible configuration

•     Auto slide

•     Navigation box

•     Lightweight (8kb only)

•     Linking images

•     Fully customizable using CSS

•     Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+   

•     Free to use under MIT license

•     Compatible with Android and iPhone

Let's see how it looks like and how to install it to Blogger site. The difficulty level is intermediate, Read on:

Add featured post slider in Blogger (homepage)

Live Demo: Click Here

Codes for copy:

<!-- Crawlist.net Coin Slider CSS -->
<style>
.tsc_clear { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
.sliderContainer { margin:0; padding:0;}
.coin-slider { zoom: 1; position: relative; width:800px;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left;}
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { font-size: 22px; width: 778px; padding: 11px; background-color: #000000; color: #FFFFFF; }

.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }</style>

<!-- Crawlist.net Javascript Library -->
<script type="text/javascript" src="https://c7bef9b379dc0bc48bbf02631cdf78357be11070.googledrive.com/host/0B6ENtyPAfM-tY2l5ekxXcWV4cHM/"></script> <!-- jQuery Library (do not call twice on same page) -->

<!-- Crawlist.net Coin Slider JS -->
<script type="text/javascript" src="https://94e98a2008aa792477d832018a4e10511754c51e.googledrive.com/host/0B6ENtyPAfM-tUUlObzZ0MU91eVk/"></script>

<!-- Crawlist.net Coin Slider Settings -->
<script type="text/javascript">
$(function() {
    $('#coin-slider').coinslider({             
        width: 800, // width of slider panel in pixels
        height: 400, // height of slider panel in pixels
        navigation: true, // prev next and buttons
        spw: 7, // squares per width
        sph: 5, // squares per height
        delay: 3000, // delay between images in ms (3000 = 3 seconds)
        sDelay: 30, // delay beetwen squares in ms
        opacity: 0.7, // opacity of title and navigation
        titleSpeed: 500, // speed of title appereance in ms
        effect: 'random', // random, swirl, rain, straight
        hoverPause: true // pause on hover 
    });
});
</script>

  <!-- Crawlist.net Coin Slider Start -->
  <div style="width:800px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
  <div class="sliderContainer">
    <div id="coin-slider">
      
        <a href="post link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
        <a href="ipost link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
        <a href="post link"><img src="image link" width="800" height="400" /> <span>place text</span></a>
    </div>
    <div class="tsc_clear"></div>
  </div>
  </div>
  <!-- Crawlist.net Coin Slider End -->
 

Adding this widget 

• First log into Blogger, select your blog,

• Go to ‘Layout’ tab and click ‘add a gadget’ from the below space of header

• Select ‘HTML/JavaScript’ from pop up page;

• Copy and paste given codes in content box, configure and Save

• Now hit ‘View blog’ and hover mouse on slider widget’s editing icon wrench;

• And look bottom of web browser and you will see a line, that contains Widget ID;

• Detect your widget id it generally looks like (HTML1, HTML2, HTML3, Blog1) see image below;
  

• Then, go to ‘Template’ tab, ‘Edit HTML’ and search for your widget ID (using Ctrl+F or Cmd+F) into code snippet;

• You will see chunks of codes starts with <b:section and ends with </b:section>

Like this

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
        <b:widget id='WIDGET ID' locked='false' title='' type='HTML'>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
        </b:widget>
      </b:section>

• Identify them and place this line (see image) Before the codes chunk
  

<b:if cond='data:blog.url == data:blog.homepageUrl'>

• and at the end of code this line

</b:if>

• And Save template.

How to configure:

• In "post link" place your links and add your post title in ‘place text’

• In "image link" place your image link, you can host image on Blogger; just upload you image; preview them and from address bar copy image’s direct code and place them in Image link; otherwise use Tinypic-Upload your image; then copy links from ‘direct links for layout’. You should use images size of 800px width and 400px height bigger size will be scaled into this size.

• You can delete a slide content by deleting <a> to </a>

• You can add more slide by coping <a> to </a>

• You can also change the default image size by changing value of height and width in case you will have change all height width values.

How it working on your blog don’t forget to mention and any question and feedback leave with comment. Goodluck...

Overlay style navigation menu for Blogger

In my past posts I published two different position style navigation menus, Fixed to header and static position menus, here I am publishing a new style of menu it’s calls Overlay style; full navigation will appear top-left side of your blog interface with bar/burger style trigger and hover on the trigger will show full navigation menu on a full screen overlay page. It also responsive so also works seamlessly on mobile devices; it has an extra close button in case automatic overlay closing function unable to work. Made with CSS, CSS3, HTML, Google font let’s see how it looks like and how to add it to your blogger blog.

Overlay style navigation menu for Blogger

Live Demo:

(Click here)

Codes for Copy:

<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <!--crawlist.net widget starts-->
    <div class="nav">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Blogger</a></li>
           <li><a href="#">Wordpress</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
       </ul>
   </div>
   <!--crawlist.net widget ends-->
</div>
<a class="menu-close" onClick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>



<style>
/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

.menu-outer:hover ~ .menu-close {
  margin-right:-100px;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > .nav ul { top:15%; }


.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'Montserrat', serif;
  z-index: 998; 
  width: 100%;
  left: 100%;
  margin-left: -100px;
  height: 200%;
  background:rgba(100,200,240,.9); 
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-outer:hover {
  background: rgba(100,200,240,.98);
  left: 0;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu-icon {
  z-index: 999;
  position: absolute;
  top: 58px;
  left: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-icon .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
  opacity: 0;
}
.nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  left: 10%;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .nav ul {
  left: 0;
}
.nav li {
  list-style:none;
  text-align: center;
  text-transform: uppercase;
}
.nav li a {
  font-size: 2em;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
  display:block;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  text-align:center
}
.nav li a:hover {
  color: rgba(255,255,255,1);
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  .nav ul {font-size:.75em;}
  .nav ul a {padding: 10px;}
}
.menu-close {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 100%;
  width: 200px;
  height: 200px;
  background: rgba(250,130,70,1);
  cursor: pointer;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .menu-icon {
  right: 15px; left: auto;top: 68px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-close .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  position:absolute;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
.menu-close .bar:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .bar:last-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.tabs .widget li, .tabs .widget li {float:none}
/*crawlist.net CSS ends*/
</style>

How to add:

• First log into your Blogger blog, Select your blog

• Go to ‘Layout’ tab, select ‘add a gadget’

• From popup menu select ‘Html/Javascript’

• Copy the following codes and paste into content box;

• Save template, then (follow this if you using Blogger default template)

• Go to ‘Template’ tab; ‘Edit HTML’

• And search for /* Tabs (using Ctrl+F or Cmd+F inside of code snippet)

• Then delete all Tabs CSS codes 

/* Tabs ----------------------------------------------- */ .tabs-inner .section:first-child { border-top: $(header.bottom.border.size) solid $(tabs.border.color); }  .tabs-inner .section:first-child ul { margin-top: -$(header.border.size); border-top: $(header.border.size) solid $(tabs.border.color); border-left: $(header.border.horizontalsize) solid $(tabs.border.color); border-right: $(header.border.horizontalsize) solid $(tabs.border.color); }  .tabs-inner .widget ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; border-bottom: $(tabs.border.width) solid $(tabs.border.color);  margin-top: $(tabs.margin.top); margin-left: -$(tabs.margin.side); margin-right: -$(tabs.margin.side); }  .tabs-inner .widget li a { display: inline-block;  padding: .6em 1em;  font: $(tabs.font); color: $(tabs.text.color);  border-$startSide: $(tabs.border.width) solid $(content.background.color); border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color); }  .tabs-inner .widget li:first-child a { border-$startSide: none; }  .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: $(tabs.selected.text.color); background-color: $(tabs.selected.background.color); text-decoration: none; }

• After doing all of these steps; save template.

How to configure:

• Fill <a href="#">Home</a>'s # with your label links and change the anchor words;

Now check your blog out for make sure it’s working.

FAQ and Caution:

• Tested on many template; should work perfectly on any template; if the design breaks then try to find out what breaking the design (mostly the thing disrupt the default design is, default code setting for .widget and .tabs CSS codes)

• You may change the default color of this menu just change the background color of .menu-outer and .menu-outer:hover with any rgba or hex color;

• Works fine on most latest updated web browsers.

SO what you thinking about this menu don’t forget to mention. Chill.....

Add animated underline links of your Blogger blog

I published couple of cool tutorial and tricks for customizing your blogs post area elements before; here to mention some notable using Google font in post, customized blockquote, syntax highlighter, setting up 404 error page, Flickr images gallery, Remove default border and shadow from images, embedding vimeo videos etc. Here to the next stage of Blogger post customization I presenting to you here animated underline links. By applying this tutorial in post all links will show different way; animated underline will appear on mouse hover on links. This trick made with CSS3 animation and it’s easy to set up. Let’s see how it works and how to add it on your Blogger blog.

Add animated underline links of your Blogger blog

Live Demo: (click here)

Codes for Copy:

<style>/*crawlist.net CSS starts*/
.post-body a, a:visited {
  text-decoration: none;
  position: relative;
  color: #3498DB;
}
.post-body a:after, a:visited:after {
  content: '';
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  background: #19B5FE;
  transition: 0.2s;
  margin-top:2px
}
.post-body a:hover:after, a:visited:hover:after {
  width: 100%;
}
.post-body a.block, a:visited.block {
  display: block;
  padding: 0.5em;
}
.post-body a.block:hover, a:visited.block:hover {
  background: #fff;
}/*crawlist.net CSS ends*/
</style>

How to add:

• Login to Blogger, select your blog,

• Go to ‘Layout’ tab, select ‘add a gadget’

• Select ‘HTML/JavaScript’ from pop up page

• Copy and paste all given codes in there,

• And save the gadget, later template

Now check your blog out for new link outlook.

FAQ and Caution:

• This code won’t work if your template has a different name for Post body class, so if this code fails then search within your template for the class name of the post area, and replace them with my given default codes classes.

• You can change the links and underlines color, together or separately; just find and replace the color code with your demand.

• This code chunk made with CSS and CSS3 should work nicely on any latest web browsers.

So what your opinion about this tutorial don’t forget to mention :) Goodluck,,,

Add Flat Post sharing widget below posts of Blogger

Few days ago I published a fresh post sharing widget for Blogger blogs named Stylish post sharing widget, today I am publishing another version of that sharing widget calls Flat post sharing widget. The specialty of this widget is it made with flat retina ready colors and modern Flat UI. Made with CSS, CSS3 and HTML; featuring Google font, 6 sharing service. Let’s see how it looks like and how to add it in Blogger:

Flat post sharing widget below posts of Blogger 

Preview:

Live Demo:  (Click here)

Codes for copy:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-flatsharo { border:2px solid #CCC; height:110px; width:600px;
background: #ffffff; margin:auto; padding-left:20px}
.ks-flatsharo h3 {font-family: 'Titillium Web', sans-serif; font-size:20px; text-align:center;
font-weight:600; margin-top:8px; margin-bottom:7px; color:#151515}
.sharo-contino a { text-decoration:none; color:#151515}
.sharo-contino a:hover { text-decoration:none; color:#fff}
.sharo-contino ul{list-style:none;text-align:center;margin:0;padding:0; margin-top:20px;}
.sharo-contino ul li{ float:left; margin-left:5px; margin-right:5px}

.tweet.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.fb-tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.googleplus.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.linkedin.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.pin-it.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.stumble.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.tweet.tips:hover {background:#00A0D1;border:2px solid #00A0D1; color:#fff;}
.fb-tips:hover {background:#3B5998;border:2px solid #3B5998; color:#fff;}
.googleplus.tips:hover {background:#DA4834;border:2px solid #DA4834; color:#fff;}
.linkedin.tips:hover {background:#0077B5;border:2px solid #0077B5; color:#fff;}
.pin-it.tips:hover {background:#CB2027;border:2px solid #CB2027; color:#fff;}
.stumble.tips:hover {background:#EB4924;border:2px solid #EB4924; color:#fff;}
/*crawlist.net CSS ends*/</style>
<div class="ks-flatsharo"><!--crawlist.net sharer starts-->
<h3>Like the article? Please share on your social network :)</h3>
<div class="sharo-contino">
<ul class='share-story'>
<li><a class='fb-tips' data-title='Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Facebook</a>
</li>
<li><a class='tweet tips' data-title='Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Twitter</a></li>
<li><a class='googleplus tips' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Google+</a></li>
<li><a class='linkedin tips' data-title='Linkedin' 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;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;'>LinkedIn</a></li>
<li><a class='pin-it tips' data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Pin it</a></li>
<li><a class='stumble tips' data-title='Stumle-Upon' 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, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Stumble</a></li>   
</ul><!--crawlist.net sharer ends--></div></div></b:if>

How to add:

Back up your template (Optional step)

• Log in to your blogger, select your blog,

• Select 'Template' tab option, click 'backup/restore' from upper right corner.

• Download full template and save it on your pc's Harddrive

Installing (Mandatory step)

• From 'Template' tab, select 'Edit html'

• And find (Using Ctrl+F or Cmd+F) into code snippet this line-

<div class='post-footer-line post-footer-line-1'>

• You may find this line twice; ignore first one after second time paste all following codes below that line; and Save template.

Caution and FAQ:

• If your template doesn’t contains <div class='post-footer-line post-footer-line-1'>

• Or contains this line one time then search for </article> instead of that; and below </article> paste following codes.

• This widget won’t appear on Homepage.

• This widget is compatible with all standard templates but unique styled templates won’t support it. That case or if the widget design breaks remove it.

Last words, How it looking on your site and if you having any trouble with this widget don't forget to mention. Check out other Blogger sharing widgets Foldable, Floating share bar with icon, Floating share bar with count, Coldblooded etc Goodluck……

Add Stylish Post sharing widget below posts of Blogger

Few months ago I published couple of fresh post sharing widget for Blogger blogs. Starting with Foldable, Floating share bar with icon, Floating share bar with count, Coldblooded, Truck icon style etc. If you already used one of them now it’s time to use the latest Crawlist sharing widget. It’s a very popular sharing widget can be seen on a lots of popular sites powered by Wordpress I duplicated and remade it for Blogger platform. Made with CSS, CSS3 and HTML no image just gradient colors; featuring Google font, 6 sharing service. Let’s see how it looks like and how to add it in Blogger:

Stylish Post sharing widget below posts of Blogger

Preview:

Live Demo: (here you go)

Codes for copy:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-sharo { border:1px solid #CCC; height:110px; width:600px; border-radius:10px;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 44%, #e5e5e5 84%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(44%,#ffffff), color-stop(84%,#e5e5e5));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: radial-gradient(ellipse at center, #ffffff 44%,#e5e5e5 84%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 );}
.ks-sharo h3 {font-family: 'Pacifico', cursive; font-size:20px; text-align:center;
font-weight:300; margin-top:8px; margin-bottom:7px; color:#151515}
.sharo-contino a { color:#fff; text-decoration:none}
.sharo-contino a:hover { color:#fff; text-decoration:none}
.sharo-contino ul{list-style:none;text-align:center;margin:0;padding:0; margin-top:20px;}
.sharo-contino ul li{text-align:center;display:inline-block;margin:0 5px}
.tweet,.fb-tips,.googleplus,.linkedin,.pin-it,.stumble{color:#fff;border:1px hidden #CCC;font-family: 'Montserrat', sans-serif;
padding:8px 12px;
font-size:14px;
border-radius:5px;}
.tweet.tips{background:#00A0D1;border:1px solid #00A0D1}
.fb-tips{background:#3B5998;border:1px solid #3B5998}
.googleplus.tips{background:#DA4834;border:1px solid #DA4834}
.linkedin.tips{background:#0077B5;border:1px solid #0077B5}
.pin-it.tips{background:#CB2027;border:1px solid #CB2027}
.stumble.tips{background:#EB4924;border:1px solid #EB4924}
/*crawlist.net CSS ends*/</style>
<div class="ks-sharo"><!--crawlist.net sharer starts-->
<h3>Like the article? Please share on your social network :)</h3>
<div class="sharo-contino">
<ul class='share-story'>
<li><a class='fb-tips' data-title='Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Facebook</a>
</li>
<li><a class='tweet tips' data-title='Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Twitter</a></li>
<li><a class='googleplus tips' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Google+</a></li>
<li><a class='linkedin tips' data-title='Linkedin' 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;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;'>LinkedIn</a></li>
<li><a class='pin-it tips' data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Pin it</a></li>
<li><a class='stumble tips' data-title='Stumle-Upon' 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, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Stumble</a></li>   
</ul><!--crawlist.net sharer ends--></div></div></b:if>

How to add:

Back up your template (Optional step)

• Log in to your blogger, select your blog,

• Select 'Template' tab option, click 'backup/restore' from upper right corner.

• Download full template and save it on your pc's Harddrive

Installing (Mandatory step)

• From 'Template' tab, select 'Edit html'

• And find (Using Ctrl+F or Cmd+F) into code snippet this line-

<div class='post-footer-line post-footer-line-1'>

• You may find this line twice; ignore first one after second time paste all following codes below that line; and Save template.

Caution and FAQ:

• If your template doesn’t contains <div class='post-footer-line post-footer-line-1'> Or contains this line one time then search for </article> instead of that; and below </article> paste following codes.

• This widget won’t appear on Homepage.

• This widget is compatible with all standard templates but unique styled templates won’t support it. That case or if the widget design breaks remove it.

Last words, How it looking on your site and if you having any trouble with this widget don't forget to mention. New styled (Flat/minimalist designed) sharing widget under development so keep in touch on Crawlist’s fanpages. Goodluck……