Best Online Freelance Job Sites

Best Online Freelance Job Sites

Millions of individuals and small business owners rely on freelance job sites to find work online. Be it simple data entry and web research or content writing, programming, website designing and development etc. Freelance sites may be niche specific or they may allow users to post work related to literally any topic they like.

Whether you need to hire someone or you yourself are looking for work, here is a list of job sites for you.

Elance

elance.com
Elance has over 2 million skilled freelancers from around the world using the platform to find work. From web developers to mobile programmers and designers to writers and marketing pros, you can find them here.

Freelancer

freelancer.com
Freelancer is a massive freelance jobs website with millions of freelance jobs and millions of professional freelancers ready to bid on your projects.

UpWork

upwork.com
Upwork, formally oDesk is the premier platform for top companies to hire and work with the world’s most talented independent professionals.

Guru

guru.com
Guru is the best place for businesses and freelancers to connect, collaborate, and get work done. Find, hire and manage talented freelancers around the world.

Problogger

jobs.problogger.net
The ProBlogger Job Board is where bloggers looking for jobs and companies looking for bloggers to hire meet. Its a good place to find content writing / editing jobs.

ifreelance

ifreelance.com
Find your next freelance job at ifreelance.com. The site offers an effective and affordable way for talented freelance professionals and businesses to connect.

People Per Hour

peopleperhour.com
PeoplePerHour consists of about 250,000 active users, of whom 180,000 are freelancers and 70,000 who are clients. The majority of clients using the services are small companies. As the name suggests, it offers hourly jobs. Common categories include marketing, legal, accounting, writing and programming.

Project 4 Hire

project4hire.com
Freelance Marketplace that connects hiring clients with freelancers such as programmers, website and graphic designers, translators, writers, virtual assistants etc.

Fiverr

fiverr.com
Fiverr is a global online marketplace offering tasks and services, beginning at a cost of $5 per job performed, from which it gets its name.

Journalism Jobs

journalismjobs.com
Into journalism? This site is a gold mine for you. It's clientele includes ESPN, Time Magazine, Slate.com, National Geographic Magazine and many more.

Rent A Coder

rent-acoder.com
As the domain states, the site gives people the tools to rent programmers project based. It intermediates between freelance developers (or companies) and people who need a website, mobile- or desktop-app, brochure design or logos done.

Get A Coder

getacoder.com
Get A Coder is another excellent site for programmers. You'll also find Web Designers and Freelance Writers willing to work at low rates.

99 Designs

99designs.com
A marketplace for graphic design, including logo design, web design and other design contests.

Logo My Way

logomyway.com
Are you a logo creator? or a business looking for an amazing design for your company's logo. LogoMyWay holds logo design contests on it's community of more than 20,000 talented logo designers. The winner earns the money.


Custom Responsive Search Box Styles For Blogger

Custom Responsive Search Box Styles For Blogger

Onsite search boxes are an important element of every website. When you have loads of content and would like your visitors to quickly dig through pages and find exactly what they were looking for, search boxes come in really handy.

Blogger allows users to quickly add a simple search box from the list of available gadgets. The default search box looks fine on most sites, however you can even add a custom search box to blogger and apply any style that goes with your blog scheme. The only thing that you need is some HTML/CSS know-how and a bit of time.

To make things easy for you, here we have included a collection of free pre-styled search boxes that would go well with almost any website design. The best thing is that these are fluid width, responsive search boxes which will adjust to all screen sizes.

Manually Adding Search Box:

The following code will add a search box to blogger. You can grab the code and add a new JavaScript/Text Gadget and then paste the code there.

<form action='/search' autocomplete='off' id='searchbox' method='get'>
<input name='q' placeholder="Search" type='text'/><button type="submit">Search</button>
</form>

Different Style Search Boxes For Blogger:

Here are a couple of search bar styles you can choose from for your blog. Simply grab one of the codes below and add it where you like.

Custom Search box Style 1

custom css search box blogger
<div class='search-box'>
<style>
.box {
    height: 115px;
    background: #FFF;
}
.searchbg {
    position: relative;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
#search-input:focus, #search-input:active {
    outline: none;
}
.searchbg:before, .searchbg:after {
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
#sbutton {
    background: rgba(248, 248, 248, 0.41);
    border: 0;
    font-weight: bold;
    font-size: 14px;
}
.search-field {
    width: 69%;
    border: 0;
    border-bottom: 1px dashed rgb(232, 232, 232);
    padding-left: 10px;
    font-family: arial;
    font-size: 13px;
    background: transparent;
}
#searchbox {
    padding: 44px 0;
    text-align: center;
}
</style>
<div class="box searchbg">
<form action='/search' autocomplete='off' id='searchbox' method='get'>
<input class='search-field' id='search-input' name='q' placeholder="I'm looking for..." type='text'/><button id="sbutton" type="submit">Search</button>
</form>
</div>
</div>

Custom Search box Style 2

custom search bar style for blogger
<div class='search-box'>
<style>
#search-input {
    float: left;
    width: calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    padding: 10px 5px 5px;
    margin-top: 5px;
    margin-left: 2px;
    border: 1px solid rgb(153, 153, 153);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-radius: 4px;
    -webkit-box-shadow: rgb(204, 204, 204) 0px 5px 0px inset, rgb(152, 152, 152) 0px 6px 0px inset, rgb(223, 222, 222) 0px 11px 0px inset;
    box-shadow: rgb(204, 204, 204) 0px 5px 0px inset, rgb(152, 152, 152) 0px 6px 0px inset, rgb(223, 222, 222) 0px 11px 0px inset;
    font-size: 14px;
}
#search-input:focus, .search-button:focus {
    outline: none;
}
.search-button {
    float: left;
    cursor: pointer;
    padding: 4px 5px;
    margin-left: 4px;
    background-color: #f8b838;
    color: rgba(134, 79, 11, 0.8);
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #99631d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(84, 76, 67, 0.9);
    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
    -webkit-transition: background 0.2s ease-out;
    margin-top: 5px;
    font-size: 14px;
}
.search-button:active {   
    background: #f6a000;   
    position: relative;   
    top: 3px;   
    border: 1px solid #702d00;   
    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;   
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;   
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}
.sb-container{
    height: 52px;
    background: #f2f2f2;
    padding: 0px 10px;
    border: 1px solid #D6D6D6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede;
    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede;
}
</style>
<div class='sb-container'>
    <form action='/search' autocomplete='off' id='searchbox' method='get'>
        <span><input class='search' id='search-input' name='q' placeholder='' type='text'/><input class="search-button" type="submit" value="Go"/></span>
    </form>
</div>
</div>

Custom Search box Style 3

custom search box for blogger
<div class='search-box'>
<style>
#search-area {
    background: #ffffff url('http://3.bp.blogspot.com/-MwrrIYVDUVw/VLNoaSyTJ5I/AAAAAAAADqc/K3j7KYlQ2oQ/s1600/search-input-bg.png') no-repeat;
    height: 52px;
}
#search_field {
    margin-top: 8px;
    margin-left: 12px;
    outline: 0;
    border: 0;
    padding: 2px 0;
    height: 38px;
    float: left;
    width: calc(100% - 70px);
    width: -moz-calc(100% - 70px);
}
#search_submit {
    background: #ffffff url('http://4.bp.blogspot.com/-M9mjb64M91U/VLNoaZCwJuI/AAAAAAAADqY/oQUKnb-SbD4/s1600/search-input-btn.png') no-repeat -1px -1px;
    background-size: 56px 40px;
    border: 0;
    width: 58px;
    height: 38px;
    margin-top: 8px;
    float:right;
}
#search_submit:active, #search_submit:focus {
    border: 0;
    outline:0;
}
</style>

<div id="search-area">
    <form expr:action="/search" method="get">
        <input autocomplete="off" type="text" name="q" placeholder="Search..." id="search_field"/>
        <input type="submit" id="search_submit" value=""/>
    </form>
</div>
</div>

Search box Style 4

cool blogger search box
<div class='search-box'>
<style>
.form-wrapper {
    padding: 8px;
    background: rgba(220, 220, 220, 0.2);
    border-radius: 3px;
    box-shadow: 0 -1px 1px rgba(0,0,0,.2) inset;
}
.form-wrapper input {
    border: 0;
    padding: 10px 5px;
    float: left;
    font: normal 13px 'arial', sans-serif;
    background: #FFF;
    border-radius: 3px 0 0 3px;
    position: absolute;
    width: calc(100% - 106px);
    width: -moz-calc(100% - 106px);
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 37px;
    width: 62px;
    font: bold 13px 'arial' sans-serif;
    color: #fff;
    background: #454545;
    border-radius: 0 3px 3px 0;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{     
    background: #454545;
}   
.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #454545;
    outline: 0;   
}
.form-wrapper button:before {
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #639B71 transparent;
    top: 12px;
    left: -8px;
}
.form-wrapper button:hover:before {
    border-right-color: #639B71;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
    border-right-color: #639B71;
}      
.form-wrapper button::-moz-focus-inner {
    border: 0;
    padding: 0;
}    
.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
} 
</style>
<form class="form-wrapper cf" action='/search' autocomplete='off' id='searchbox' method='get'>
<input class='search-field' id='search-input' name='q' placeholder="I'm looking for..." type='text'/><button type="submit">Search</button>
</form>
</div>

These search boxes are responsive and will adjust automatically to any template style. You can either simply grab the code and use it in a new HTML/JavaScript widget or paste the code in your template to display anywhere you feel appropriate.

100+ Best Free Responsive Blogger Templates 2015 - 2014

100+ Best Free Responsive Blogger Templates 2015 - 2014

Blogger is one of the oldest and easiest blogging platforms available. The platform itself being free, comes with several useful customizable themes. Then, there are thousands of other templates that are available online as both, paid and free. Responsive templates specifically are the ones most in-demand.

You can go to sites like 'theme forest' and choose from a small collection of well designed, paid responsive blogger templates or search the web for a free responsive blogger template that goes well with your blog. You may be looking for a professional template for your company's website or an attractive theme for your ecommerce store or even a decent template for your personal blog. But finding the right template can be a cumbersome task. To make things easy for you we have listed many of the top free responsive templates available for different blog categories.


Responsive Portfolio / Business Blogger Templates

Portify

Portify is a portfolio blogger template with a responsive design and also with a remarkable clean layout with easy codes. It can be used for any type of site like portfolio, gallery, photography and designer's blog.

Portify Responsive Blogger Template

3 Columns: A Free Responsive 3 Column Blogger Template

3 Columns: A Free Responsive 3 Column Blogger Template

Looking for a neat blogger template that features a left and right sidebar? Check out '3Columns' - a free responsive template built on bootstrap. This elegantly designed template features a 3 column layout and will resize perfectly on all screen sizes.

The header comes with a navigation bar placed beside the logo while the left sidebar to comes with pre-installed with a vertical navigation bar, giving you ample space to manage your links. You can use the right sidebar to add your own widgets.

3 Columns Responsive blogger template

DemoDownload

Header Navigation Links

Search for <!-- Header Navigation --> in your template and change the URL and link text shown in blue below.

<!-- Header Navigation -->
<nav class='collapse navbar-collapse bs-navbar-collapse' role='navigation'>
  <ul class='nav navbar-nav'>
    <li>
      <a href='/p/contact.html'>
        Contact
      </a>
    </li>
    <li>
      <a href='/p/about.html'>
        About
      </a>
    </li>
    <li class='dropdown'>
      <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
        Dropdown Menu
          <b class='caret'/>
      </a>
   <ul class='dropdown-menu'>
    <li>
      <a href='#'>
        Action
      </a>
    </li>
    <li>
      <a href='#'>
        Another action
      </a>
    </li>
    <li>
      <a href='#'>
        Something else here
      </a>
    </li>
      <li class='divider'/>
    <li>
      <a href='#'>
        Separated link
      </a>
    </li>
  </ul>
   </li>
<li class='dropdown'>
  <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
     Dual-Column dropdown 
      <b class='caret'></b>
  </a>
 <div class='dropdown-menu main-drop-two'>
  <div class='col-50'>
   <ul class='dropdown-menu'>
    <li>
      <a href='#'>
        Download
      </a>
    </li>
    <li>
      <a href='#'>
        Homes
      </a>
    </li>
.
.
. 
and so on..
</nav>

Sidebar Navigation Links

Search for <!-- Sidebar Navigation --> in your template and change the URL and link text shown in blue below.

<!-- Sidebar Navigation -->

<div id='MainMenu'>
 <div class='list-group'>
<!-- Link 1 -->  
  <a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo1'>Item 1</a>
<!-- Link 2 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo2'>Item 2 <i class='fa fa-caret-down'/></a>
<div class='collapse' id='demo2'>
    <!-- Link 2 SubItem 1 -->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' data-toggle='collapse' href='#SubMenu1'>Subitem 1 <i class='fa fa-caret-down'/></a>
<div class='collapse list-group-submenu' id='SubMenu1'>
    <!-- Link 2 SubItem 1 a-->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' href='#'>Subitem 1 a</a>
    <!-- Link 2 SubItem 2 b-->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' href='#'>Subitem 2 b</a>
</div>
    <!-- Link 2 SubItem 2 -->
<a class='list-group-item list-group-item-success' href='#'>Subitem 2</a>
    <!-- Link 2 SubItem 3 -->
<a class='list-group-item list-group-item-success' href='#'>Subitem 3</a>
</div>
<!-- Link 3 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 3</a>
<!-- Link 4 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo4'>Item 4 <i class='fa fa-caret-down'/></a>
  <div class='collapse' id='demo4'>
<a class='list-group-item list-group-item-success' href='#'>Subitem 1</a>
<a class='list-group-item list-group-item-success' href='#'>Subitem 2</a>
  </div>
<!-- Link 5 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 5</a>
<!-- Link 6 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 6</a>
<!-- Link 7 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 7</a>
<!-- Link 8 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 8</a>
<!-- Link 9 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 9</a>

</div>
</div>

Social Links

To link to relevant social profiles, simply search for <!-- Social Links --> in the template and make changes to the text shown in blue below..

<!-- Social Links -->

<div class='contact-box'>
<a href='mailto:wajahat-xyz123@gmail.com?Subject=Hey!' target='_top'>
<i class='fa fa-envelope-o' rel='tooltip' title='wajahat-xyz123@gmail.com'/>
</a>
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'/>
</a>
<a href='https://facebook.com/wajahat-xyz' target='_blank'>
<i class='fa fa-facebook'/>
</a>
<a href='https://plus.google.com/wajahat-xyz' target='_blank'>
<i class='fa fa-google-plus'/>
</a>
<a href='https://pinterest.com/wajahat-xyz' target='_blank'>
<i class='fa fa-pinterest'/>
</a>
<a href='https://youtube.com/wajahat-xyz' target='_blank'>
<i class='fa fa-youtube-play' rel='tooltip' title='YouTube'/>
</a>
</div>

Do let us know of any anomalies/layout problems that you may find in the template.

3Columns template is absolutely free for use. Please do not edit/remove the footer credit link.

Wondrous: A Simple, Responsive Blogger Template (Free)

Wondrous: A Simple, Responsive Blogger Template (Free)

'Wondrous' is a beautifully designed responsive blogger template with a simple one column layout. This general purpose template comes pre-installed with social sharing buttons and a profile box displayed below the post area. Whether you writer, journalist or even a blogger with liking for simple designs, check out Wondrous. It may be exactly what you are looking for.

Wondrous responsive blogger template
DemoDownload

Embed Videos Responsively

Embedded videos are not responsive by default. To embed your videos responsively, just copy the following div block and simply paste the URL of your video as shown in blue below.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="http://www.dailymotion.com/embed/video/x2ccnkp"></iframe>
</div>

Profile Box

Simply search for <!--Profile Box--> in your template and make changes to the text shown in blue below.

<!--Profile Box-->
<div class='profile-box'>
 <div class='row'>
  <div class='col-xs-4 col-sm-3 col-md-3 col-lg-3'>
<img class='img-responsive pimg' src='http://2.bp.blogspot.com/-N74swJOCMho/VIFIQ1YtiWI/AAAAAAAADfs/QkPMxvL_iQQ/s1600/img-profile.jpg'/>
  </div>
  <div class='col-xs-8 col-sm-9 col-md-9 col-lg-9'>
<h4 style='font-size: 16px; font-weight: 700; color: #444444;'><data:post.author/></h4>
<span style='font-size: 15px;'>A 27-year-old freelance journalist based in London, specialising in the media industry.</span>
    <br/>
<!-- Insert Links To Your Social Profile's Here -->
<div class='contact-box pull-right'>
<!-- Email -->
<a href='mailto:wajahat-xyz123@gmail.com?Subject=Hey!' target='_top'><i class='fa fa-envelope-o' rel='tooltip' title='wajahat-xyz123@gmail.com'/>
</a>
<!-- Twitter -->
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'>
</i></a>
<!-- Facebook -->
<a href='https://facebook.com/wajahat-xyz' target='_blank'>
<i class='fa fa-facebook'>
</i></a>
<!-- Google Plus -->
<a href='https://plus.google.com/wajahat-xyz' target='_blank'>
<i class='fa fa-google-plus'>
</i></a>
<!-- Pinterest -->
<a href='https://pinterest.com/wajahat-xyz' target='_blank'>
<i class='fa fa-pinterest'>
</i></a>
</div>
  </div>
 </div>
</div>

Profile Box

Simply search for <!-- Social --> in your template and make changes to the text shown in blue below.

<!-- Social -->
<div class='contact-box-footer'>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' target='_blank'>
<i class='fa fa-rss'></i>
</a>
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'></i>
</a>
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-pinterest'></i>
</a>
<a href='https://facebook.com/wajahat-xyz' target='_blank'>
<i class='fa fa-facebook'></i>
</a>
<a href='https://plus.google.com/wajahat-xyz' target='_blank'>
<i class='fa fa-google-plus'></i>
</a>
<a href='mailto:wajahat-xyz123@gmail.com?Subject=Hey!' target='_top'>
<i class='fa fa-envelope-o' rel='tooltip' title='wajahat-xyz123@gmail.com'/>
</a>

</div>

The template is free for use. Please do not edit/remove the footer credit link.

Easily Add Social Sharing Icons To Blogger Posts

Easily Add Social Sharing Icons To Blogger Posts

Allow users to share your blog posts on popular social networks such as Facebook, Google, Twitter, LinkedIn and Email with this quick loading, social sharing widget. It uses 'Font Awesome', allowing you to easily customize the icons using pure css.



Step 1. Adding Font Awesome

Just below the opening <head> tag in your template add the following code.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Step 2. Social Sharing Icons


Find the <data:post.body/> tag (usually the second one) in your template and add the following code right below it.

<!-- Social Sharing Icons -->
<!-- Code by: helparchive.blogspot.com -->
<div id='share-btns'>
<!-- CSS -->
<style>
#share-btns img {float: left; width: 60px; margin-right: 10px}
#share-btns ul {list-style-type: none;}
#share-btns ul li {display: inline-block; padding: 3px 5px 0 1px;}
</style>

<img src='http://3.bp.blogspot.com/-BLgbb6up_zY/U_t74dcn6EI/AAAAAAAADU8/lvYsGSZKhKY/s1600'/>

<ul class='post-sharing-menu'>
<!-- Google Plus -->
<li class='share-gpl'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Google +'>
   <i class='fa fa-google-plus'></i>
 </a>
</li>
<!-- Facebook -->
<li class='share-fbk'>
 <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'>
   <i class='fa fa-facebook'></i>
 </a>
</li>
<!-- Twitter -->
<li class='share-twt'>
 <a expr:href='&quot;http://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Twitter'>
   <i class='fa fa-twitter'></i>
 </a>
</li>
<!-- Pinterest -->
<li class='share-pnt' >
 <a 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.title' target='_blank' title='Pin It !'>
   <i class='fa fa-pinterest'></i>
 </a>
</li>
<!-- Linkedin -->
<li class='share-lkd'>
 <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Linkedin'>
   <i class='fa fa-linkedin'></i>
 </a>
</li>
<!-- Print -->
<li class='share-prn'>
 <a expr:href='&quot;http://www.printfriendly.com/print/v2?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Create PDF And Print Friendly !'>
   <i class='fa fa-print'></i>
 </a>
</li>
<!-- Email -->
<li class='share-eml'>
 <a href='mailto:?Subject=ENTER_SUBJECT_HERE&amp;Body=Hey! Check out this article...' rel='nofollow' target='_blank' title='Email This'>
   <i class='fa fa-envelope-o'></i>
 </a>
</li>
</ul>
</div>

That's it. The best thing about this widget is that there's no JavaScript used. You can also customize the icons using CSS only. Here are few customizations:

Original Colors


<!-- CSS -->
#share-btns ul li {display: inline-block; width: 30px; text-align: center;}
#share-btns ul li a {color:white;}
.share-gpl {background: #E13728;}
.share-fbk {background: #4A6EA9;}
.share-twt {background: #2DAAE1;}
.share-pnt {background: #CB1F26;}
.share-lkd {background: #0092C1;}
.share-prn {background: #A29F9F;}
.share-eml {background: #7CB09F;}

Rounded Icons in DarkSeaGreen


<!-- CSS -->
#share-btns ul li {display: inline-block; background: darkseagreen; text-align: center; width: 30px; border-radius: 50%;}
#share-btns ul li a {color:white; text-shadow: 1px 1px 1px rgb(38, 40, 39);}

Custom Icons

You can use your own icons simply by replacing the code "<i class='fa fa-...'></i>" with the URL <img src='URL_HERE'/> of the image you would like to use.

Change Thumbnail Size for Blogger Images, Popular Posts Widget

Change Thumbnail Size for Blogger Images, Popular Posts Widget

Blogger, by default assigns a 72 x 72 pixel size for thumbnails generated from your post images. You may desire to change the image thumbnail size on the Popular posts widget or even thumbnails displayed on homepage, generated from blog posts.

In your template, you'll find a couple of instances of the
"<img expr:src='data:post.thumbnailUrl'/>" tag . Using this tag, you can pick up the first image from a post and generate its thumbnail. By assigning a class/id to this tag and using a simple jquery code, we can define a custom thumbnail size for it.

Before you begin, make sure you have jquery installed in your template. If not, copy the latest version from below and paste it above the closing head tag </head>.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Custom thumbnail Size for Post Images


As mentioned in the begening, a 72 x 72 pixel size thumbnail from post image can be created using the tag:
<img expr:src='data:post.thumbnailUrl'/>

1. To the relevant image tag, simply add a class or id to the tag like this:
<img class="post-thumb" expr:src='data:post.thumbnailUrl'/>

2. Just above the closing head tag </head> in your template, paste the code below.

<script type="text/javascript">
 $(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>

3. The "120" is your new thumbnail size. You can increase or decrease the thumbnail width by changing the "120" to any other number. Lastly, ".post-thumb" is the class you have assigned to your images.

Changing thumbnail Size In Popular Posts Widget


Changing the thumbnail size for Popular Post images is simple. Just paste the code below just above closing head tag </head> in your template.

<script type="text/javascript">
 $(document).ready(function() {$('.PopularPosts img').attr('width', '100%').attr('height', 'auto').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>

Change "120" to any other number to set the desired size for popular posts thumbnail images.

Please give proper credit if you wish to cover this post on your blog.