Skip to main content

Posts

Showing posts from October, 2015

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;
  …

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 BloggerPreview:

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:…

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 BloggerPreview:
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;…