Add Facebook Timeline Tree-Leaf Widget to Blogger

Facebook's Timeline Tree Leaf widget for Blogger blogs is finally here. It's often great to display your achievements of your brand, blog in the form of the tree and leaf widget that goes top to bottom laying down all the key events, achievements and ground breaking moments of your brand till date.

Lets get started and see how you can add Facebook Timeline Tree-Leaf Widget to your Blogger blog.

facebook timeline treeleaf widget bloggingehow

The below procedure lays down steps to add the widget to your About Us page of your blog/company. Though, you can free add the widget to any section of your blog as you wish.

Step#1 Visit Your About Us Page's HTML

For Blogger, you got to navigate to:

Blogger Dashboard >> Pages >> About Page >> Edit HTML

Step#2 Place the widget code

Once you're with in the Edit HTML section of the About page, you can simply place the below code within it.

<div id="BeH-timeline-widget" class="timelinewrap cf">
<h2 id="timeline" class="big">A trip down memory lane</h2>
<p>Here's are couple of nostalgic moments of our history</p>
<div class="timeline center"></div>
<div class="timeline left">
<ul>
<li>
<em class="point"></em>
<em class="arw"></em>
<em class="arwb"></em>
<span class="date">May 2014</span>
<span class="title">Your Company Name Launched</span>
<span class="desc">
Description Goes Here
</span>
</li>
<li>
<em class="point"></em>
<em class="arw"></em>
<em class="arwb"></em>
<span class="title">A Mile Stone Moment</span>
<span class="date">May 2014</span>
<span class="desc">
Description Goes Here
</span>
</li>
</ul>
</div>
<div class="timeline right">
<ul>
<li>
<em class="point"></em>
<em class="arw"></em>
<em class="arwb"></em>
<span class="title">A Mile Stong Moment</span>
<span class="date">May 2014</span>
<span class="desc">
Description Goes Here
</span>
</li>

<li>
<em class="point"></em>
<em class="arw"></em>
<em class="arwb"></em>
<span class="title">A Mile Stong Moment</span>
<span class="date">May 2014</span>
<span class="desc">
Description Goes Here
</span>
</li>

<a href="http://www.bloggingehow.com">Get TimeLine Tree-Leaf Widget</a>
</ul>
</div>
</div>

<style>.timelinewrap {
    background: none repeat scroll 0 0 #F7F7F7;
    display: block;
    padding: 25px 0;
    position: relative;
    text-align: center;
}
.timeline {
    display: block;
}
.timeline.left {
    float: left;
    margin: 0;
    padding: 83px 0 0;
    width: 50%;
}
.timeline.right {
    float: right;
    margin: 0;
    padding: 0;
    width: 50%;
}
.timeline.center {
    border-left: 1px solid #C8C8C8;
    border-right: 1px solid #C8C8C8;
    height: 60%;
    position: absolute;
    right: 49.9%;
    top: 110px;
    width: 0;
}
.timeline ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.timeline.right ul li:first-child {
    margin-top: 11px;
}
.timeline.left ul li:first-child {
}
.timeline ul li {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C8C8C8;
    border-radius: 3px;
    margin: 0 0 25px;
    padding: 15px 20px;
    position: relative;
}
.timeline ul li .title {
    color: #027DC4;
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 3px;
}
.timeline ul li .date {
    color: #888888;
    font-size: 12px;
    margin: 0 10px;
    padding: 0;
}
.timeline ul li .desc {
    color: #343434;
    display: block;
    font-size: 13px;
    line-height: 17px;
    margin: 5px 0 0;
}
.timeline.right ul li {
    margin-left: 15px;
    margin-right: 65px;
    text-align: left;
}
.timeline.left ul li {
    margin-left: 65px;
    margin-right: 15px;
    text-align: right;
}
.timeline .point {
    background-color: #C8C8C8;
    border: 3px solid #F7F7F7;
    border-radius: 8px;
    display: block;
    height: 6px;
    position: absolute;
    right: -22px;
    top: 11px;
    width: 6px;
}
.timeline.right .point {
    left: -22px;
}
.timeline.right .arw {
    border-color: rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 7px;
    display: block;
    height: 0;
    left: -14px;
    position: absolute;
    top: 8px;
    width: 0;
    z-index: 2;
}
.timeline.right .arwb {
    border-color: rgba(0, 0, 0, 0) #BBBBBB rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 7px;
    display: block;
    height: 0;
    left: -15px;
    position: absolute;
    top: 8px;
    width: 0;
    z-index: 1;
}
.timeline.left .arw {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;
    border-style: solid;
    border-width: 7px;
    display: block;
    height: 0;
    position: absolute;
    right: -14px;
    top: 8px;
    width: 0;
    z-index: 2;
}
.timeline.left .arwb {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #BBBBBB;
    border-style: solid;
    border-width: 7px;
    display: block;
    height: 0;
    position: absolute;
    right: -15px;
    top: 8px;
    width: 0;
    z-index: 1;
}

#beh-timeline-widget {color: #323323;
    font-family: ProximaNovaRgRegular,"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif;}

#beh-timeline-widget h2.big {
    color: #444444;
    font-size: 30px;
    font-weight: normal;
    line-height: 32px;
    margin: 5px 0 10px;
    padding: 0;
}

#beh-timeline-widget p {
    font-size: 15px;
    line-height: 22px;
    margin: 5px 0 15px;
}

.cf:after {
    clear: both;
}

.cf:before, .cf:after {
    content: "";
    display: table;
}

</style>

Customization:

For adding new leafs on the left side of the tree, simply place the code below under the <div> that says"

<div class="timeline left"> <ul>

Now place the following code beneath it.

<li>
<em class="point"></em>
<em class="arw"></em>
<em class="arwb"></em>
<span class="title">A Mile Stong Moment</span>
<span class="date">May 2014</span>
<span class="desc">
Description Goes Here
</span>
</li>

There are 3 elements of every leaf:

1- Title
2- Date
3- Description

To place the leaf on the right side of the tree, look for the highlighted code i.e

<div class="timeline right"> <ul>

<li>
<em class="point"></em>
<em class="arw"></em>
<em class="arwb"></em>
<span class="title">A Mile Stong Moment</span>
<span class="date">May 2014</span>
<span class="desc">
Description Goes Here
</span>
</li>

You can add as many leafs to the tree as you wish. The widget is fully responsive and it would display fluid layout.

I hope the widget would be a great addon to your About Us pages. We can do tons of new customizations to the widget and I'll be posting those very soon, if you guys would like.