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

blogger page navigation

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.

Your Response Means Further Beautiful Customizations


Your response would let me know if you guys would want more customizations to the nodes, the entire tree etc.

Peace.

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Add Facebook Timeline Tree-Leaf Widget to Blogger
Add Facebook Timeline Tree-Leaf Widget to Blogger
http://4.bp.blogspot.com/-_co3wZSqQ4U/U2TtRNb4TfI/AAAAAAAAM4Q/67I5LgcMK3I/s1600/facebook+timeline+treeleaf+widget+bloggingehow.png
http://4.bp.blogspot.com/-_co3wZSqQ4U/U2TtRNb4TfI/AAAAAAAAM4Q/67I5LgcMK3I/s72-c/facebook+timeline+treeleaf+widget+bloggingehow.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2014/05/how-to-add-facebook-timeline-tree-leaf-widget-to-blogger.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2014/05/how-to-add-facebook-timeline-tree-leaf-widget-to-blogger.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade