Skip to main content

Posts

Showing posts from August, 2014

Ribbon: Feedburner Email Subscription box for Blogger/Wordpress

Feedburner email subscription box is a must have widget for both Blogger and wordpress users. But the default subscription widget is pretty simple and non attractive, that’s what I did published custom attractive and eye catchy subscription box before (like- Cool Feedburner email subscription box, Total social subscription box widget, 4 stylish Feedburner subscription widget) And here I am publishing another one The Unique subscription box here. This widget is both attractive and eye catchy, it made with Pure CSS3 ribbon, retina ready background, flat pressable submit button and so so. It also smaller sized and will be fit with any kind of website I guess. Let’s see how it looks like and how to add it in your Blogger and wordpress blogs.

Ribbon: Feedburner Email Subscription box for Blogger/Wordpress
Preview-


Live demo-
(Here you go)

Codes for copy-

<style>/*crawlist.net CSS starts*/
.ks-ooo {position:relative; z-index:0;}
.ks-ooo > div {margin-bottom:40px;}
.ks-ooo > div:last-o…

2 Style Contact form for Blogger/websites

Having Contact form in blogsite and website is very important. You can here about what is site users feedback, recommendation, request even orders. There is a lot of way you can find to add contact form in your Blogger blog or websites. Using 'mailto:your email' tag to contact directly by email is pretty popular and this process use by various popular site all around the web. This 'mailto:your email' can be turned into a custom input field base contact form using HTML and CSS. And here I developed two colored contact form made up with HTML, CSS, CSS3, script and HTML5 markup, these contact forms looks neat, compilable with all web browsers, and got input fields of Name, Email, Subject and text area with warning! Below two styled contact form's code and configuration info given. Let's see how these looks, how to add in Blogger blogs or websites and configure.

Live demo- (Here you go)
Black contact form for Blogger/websites
Preview-


Codes for copy-

<style>/*cr…

Flickr Images Gallery widget for Blogger/Wordpress

You already know what Flickr is, for those of you who don't know a short version of Flickr is it's a Image and video hosting service by Yahoo, which service let you host 1000gb of images for forever and free also it's a community base social media service. For personal or professional we often use Flickr. If you running a blogsite (Blogger or Wordpress) how can you show your Flickr photo's on your site as widget, here in this post I'm explaining (Difficulty level is beginner) And of course it's a easiest way to add a image gallery to your site. Read on-

How to add Flickr Images gallery widget on Blogger/Wordpress
Preview-



Live Demo- (Here you go)

Codes for copy-

<!-- crawlist.net flickr widget starts -->
<iframe src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=122671826@N08&set_id=&text=" frameborder="0" width="auto" height="auto" scrolling="no"></iframe>
<!-- crawli…

2 Re-Designed Facebook Likebox for Blogger/Wp

Facebook likebox is a must have widget in all types of blogs. This likebox what provided by Facebook it's pretty much simple, but this likebox is customizable, so you can reshape it however you want to. Here is method I used make a widget box than putted the default likebox in there. These two custom likeboxes are made of HTML, CSS and CSS3. Let's see how them looks like and how to add and configure;

Shadow Style Facebook likebox
Preview-

Demo- (Click Here)

Codes for copy-

<style>
    .ks-faceboo{
      width:96%;
      margin:10px 0px;
      border:1px solid #b9b6b6;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      box-shadow: 10px 10px 10px #e3e3e3;
      height:155px;
      width:280px;
      overflow:hidden;
    }
</style>
<div class='ks-faceboo'>
<!--crawlist.net widget starts-->
   <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if …

(Ribbon+3D) Feedburner Email subscription form for Blogger/Wordpress

Looking for a fresher perspective with Feedburner email subscription form. and If you really looking for; here is a neat and clean and cool Feedburner email subscription I brought to you. It's design inspired by 3D button, 3D gradient ribbons, and not to being a random looking subscription box. This Cool Feedburner email subscription form got CSS3 3D button, edgy input box, 3D CSS and CSS3 gradient ribbon, Google fonts, promising quotes! This widget also works fine on modern web browsers. So what are you waiting for let's see how it looks like, how to add it on your Blogger blog/wordpress site and how to configure.

(Ribbon+3D) Feedburner Email subscription form for Blogger/Wordpress
Preview-



Live Demo- (Here you go)

Codes for copy-

<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
.ks_ribbon_wrap {
    background-color: #fff;
    border:1px solid #ccc;
    width:280px;
    height:280px;
    border-radius:5px;
    text-align: center;
   …

Glowing/Pulsating HTML5 Search bar for Blogger

Making a attitude and impression with your search bar on your Blogger site I did published some cool CSS3 search bars before. Keeping that continue here I publishing Glowing/Pulsating HTML5 Search bar for Blogger blogs. This search bar represent latest quality search bar what made with CSS, CSS3, Keyframe animation, gradient colored body as well as HTML5 mark up. Below preview, live demo, codes and how to add given below. read on-

Glowing/Pulsating HTML5 Search bar for Blogger
Preview-


Live Demo- (Click Here)

Codes for copy-


<section class="ks-glowingbar">
    <form action="/search" method="get">           
        <input name="q" type="search" placeholder="Search..." />               
        <button>Search</button>
    </form>
</section>

<style>/*crawlist.net search bar CSS*/
@import url(http://fonts.googleapis.com/css?family=Cabin:400);
.ks-glowingbar:before {
    background: …

Expandable/Dynamic width Search bar for Blogger

A stylish search bar can make your Blogger blog little bit smarter and professional. For changing the random taste of Blogger search bar I published Black stylish CSS3 search bar and 5 Simple search bar before so here I presenting to you another different style search bar, what's width is expandable/ dynamic width/ fluid layout. And comes up with orange default color. These search bar looks simple and elegant, stylish and lightweight constructed with CSS3, HTML. Let's see how it looks like and how to add it in your Blogger blog.

Expandable/Dynamic width search bar for Blogger
Preview-


Live Demo- (here you go)

Codes-

<style>/*crawlist.net CSS starts*/   
#ks-search{
border:1px solid #f63;
background:none repeat scroll 0 0 #f63;color:#FFF;transition:all ease 2s;
padding:5px;
color:#ffffff;
font:14px Verdana, Geneva, sans-serif;
cursor:pointer;
font-weight:bold;}
#ks-search:hover{
background: none repeat scroll 0 0#000;
border:1px solid #000;}
#ks-expandz{
border:1px solid #d5…

Total Social Subscription widget for Blogger/Wordpress

Compact social and feedburner subscription widget is very useful widget for use. It helps to increase email subscribers and social media fans. I published couple of Compact total social subscription widget before. Those widget got their style and now here another new style of total social subscription widget here, It uses CSS, CSS3 transition effect all over includes social icon with CSS sprite (change icon color with mouse hover with flip effect) It offers Facebook, Twitter, Google plus, Pinterest, Contact us page, feed profile slot. And flat designed feedburner email subscription form and it don't use much space in sidebar, no deep coding like scripts a lightweight CSS and HTML, sleek and modern looking cross browser compatibility, CSS sprite reduce http request on server, icon from just one image. Let's see how it looks how to add it in Blogger blog/wordpress sites and configure. Read on-

Total Social Subscription widget for Blogger/Wordpress
Preview-
Live demo- (here you go)
C…