Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

Download our app on Google Play Store

Saturday, June 8, 2013

Geek Template For Blogger With All New Features

Hey bloggers, what's up? it's nice to back writing on my blog, i missed you all, this topic will be about blogger templates, yes, i'll share with you some new templates that you will tell me if you like it or not, but i'm sure you'll enjoy with us today, this template was created by syed from mybloggerlab, i used to use this template in my own blog, and now i'm giving it to you dear readers, you can download it right now from the designer website.
First you can check out the last post blogger templates here.

Geek Template

Features:

Popular Blogger Widget:

Popular Posts Widget with new style, the widget, contains thumbnails with title and few summary, as you see in the below picture.

Popular Posts Widgets


Advertise Here Widget:


Advertise Here Widget

The next widget is "Advertise Here" this widget allow other webmasters to add their banners into your blog and make an exchange of traffic,  you can make this service paid or free.
To add it just check this post, there is two kind of it choose what you like:


Grab Our Button Widgets:


Grab Our Button

This is a small widget, or i should say it's just a small button that you can offer it on your blog, and your visitors will copy the HTML code and add it to your blog; to add it just copy and past the below code in javascript element.

<center>Grab Our Lil Button On Your Blog</center><center>
</center><center><img style="-webkit-user-select: none" src="http://76.74.156.72/images/ccb/ccb96ba8bbc538d68c26b65e8c128cc8ac318061.gif" /></center><center>
</center><center><input readonly value="&lt;center&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: center;&quot; trbidi=&quot;on&quot;&gt; &lt;a href=&quot;http://myway2blogging.blogspot.com&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;http://76.74.156.72/images/ccb/ccb96ba8bbc538d68c26b65e8c128cc8ac318061.gif&quot; title=&quot;My Way 2 Blogging&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;/center&gt;" type="text" onclick="this.focusundefined);this.selectundefined)" /> </center>

Customization:

  • change the green color text with your own.
  • change the blue link with your own button.
  • Change the red link with your.

Add Facebook Fan Page Box To Your Sidebar:

Facebook Like Box, is very useful widget to add it into your blog, now with the new style, the box will take just a small area. as you see in the picture below:

Facebook Like Box For Blogger

Add the following code and past it in JavaScript element:
<style>
.facebookOuter {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
</style>
<div class="facebookOuter" style="float:left;">
<div class="facebookInner">
  <div class="fb-like-box"
      data-width="300" data-height="179"
      data-href="http://www.facebook.com/pro.widgets"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>
 </div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Customization:

  • Change the green link with your facebook fan page.
  • Change the red & the blue codes if you want to customize the width & hight of the box.

More Beautiful and awesome features:


cute sharing buttons below title and author small picture

Ad you see in the picture above, the template have a cute sharing buttons below title, with a small picture of the author beside "posted by", sure you can change the picture, and the name of the author.

  • To change the picture you have to replace the following link by your: http://3.bp.blogspot.com/-x9r9DWXmK_E/UVmy6pXF5hI/AAAAAAAAAGE/yUJoYnl5WWo/s1600/Ankit-Kumar-Singla.jpg

About The Author Widget:

One other cool widget is about author widget in the footer, this one contains a summary about the author, picture with awesome mouse hover, and read more link, this link will be referrers to your about page. take a look

About The Author Widget


Copy and past the following code on JavaScript element.
<!--[if !IE]> -->
    <style>
    #profilekarim{
    border:2px solid #FFFFFF; margin:2px 5px 0px 0px; padding:2px;
    }
    #profilekarim:hover {
    border:2px solid #ccc;
    cursor:pointer;
    }
    .opacity  {
    opacity: 0.5;
    margin-left: 50px;
    -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;
    }
    .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;
    }
    </style>
       <![endif]-->
    <style>
    #profilekarim{
    border:2px solid #FFFFFF; margin:2px 5px 0px 0px; padding:2px;
    }
    #profilekarim:hover {
    border:2px solid #FFFFFF;
    cursor:pointer;
    }
    .opacity  {
    opacity: 0.5;
    -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;
    zoom: 1;
    }
    .opacity:hover  {
    opacity: 1;
    zoom: 1;
    -moz-box-shadow: 1px 1px 4px #000;
    -webkit-box-shadow: 1px 1px 4px #000;
    box-shadow: 1px 1px 4px #000;
    }
    </style>
    <img class="opacity" id="profilekarim" src="YOUR-PICTURE-LINK-HERE" align="left"/>
<h4>
    My name is Abdelkarim Zanni I'm the founder of <a href="YOUR-BLOG-URL">Professional Blogger Widgets</a> Blog & a funny blog under name of <a href="http://justdamnlool.blogspot.com/">JustDamnLool</a>, I’m from Morocco, 20 years old, student and blogger, I've started blogging in August 2010 as an amateur and step by step I learned the important things on blogger, after 2 years (that mean now), I founded this blog in order to share my knowledge with all my visitors, and to make it a “harbor” for all who like blogging. All articles that I published on my blog it from my individual coinage, I do not deny that may I write some things which it the same on other websites, virtue of I am looking for new additions and exclusive topics. All that I do it just for share with other people, which may need it
<h4/><a style="color:#FFFFFF;"
href="YOUR-ABOUT-PAGE-LINK-HERE">Read More..</a>  <br/> </h4></h4></![endif]-->

Customization:

  • Change the Purple Link with your picture 150 x 150.
  • Change the red text with your blog link.
  • Change the blue text with your own text, it should be something about you.
  • Change the orange text with your About Page link.

Stylish Comments Form:

Try to add a comment, you'll find two forms, one for blogger profiles and the other is google+ form, this feature help people to let their comments as they logged in, this feature created by MyBloggerLab.

2 in one Blogger and google plus comment form

Cool Footer:

"Powered By" is a nice addition, its an image with mouse hover check it on live in the blog demo above.

stylish footer Powered by

You can change what you want. just keep the credits links, if you didn't i'll kik your as# :).

That's all, you have to discover more features, feel free to use it on your blog, if you need help just comment below, i'll reply as soon as possible,
PS: You really should keep the credits links in the footer, because the template is designed by MyBloggerLab, and Abdelkarim has add some of the rest features, so you have to do this, enjoy.
Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB
Comment Using

Comment Policy : We’re enthusiastic to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

4 comments :

  1. Thnxx for sharing with Us....
    www.techblogguide.blogspot.com

    ReplyDelete
    Replies
    1. You're welcome buddy, wait for the upcoming !

      Delete
  2. Everything is very open with a really clear clarification of the issues. It was definitely informative. Your site is useful. Many thanks for sharing!
    blogger templates

    ReplyDelete
  3. Hi, Abdelkarim

    I found this article looking for this geek template with a dropdown menu. Do you know if it is possible to add a drop down menu? Could you make a version of this template with this type of menu? You did a beautiful job here, but I prefer the original layout of this template, the only thing missing is the sub-menu. :/

    ReplyDelete

Download our app on Google Play Store

Contact Us

Name

Email *

Message *

 
Copyright © . Skill Blogger . All Rights Reserved.
Designed by :- Way2themes