Add Timeline To Blogger (Easy Way)

Timeline ini mendukung pemanggilan data dari sumber yang berbeda. Dibangun untuk mendukung Tweets media dari Twitter, YouTube, Flickr, Vimeo, Google Maps dan SoundCloud. Membuat spreadsheet Google atau JSON.Keuntungan dari kita memilik resource terbaik tidak lain untuk belajar lebih giat. Tengok saja blogger² yang kebanyakan konten blognya memuat source² good master Assad Syaifullah Harahap salah satu contohnya, atau mungkin yang ini Functionn Blog :d
Jika sudah menemukan macam gituan, Beben Koben si bloglang anu ganteng kalem tea suka lupa dengan yg namanya blog walking :-" Ta' babad dulu semua :)) Trend tampilan dengan gaya timeline sedang melanda saat ini. Satu dari sekian banyak script timeline, mari kita jatuh pilihan pada Timeline © vérité.co
Kenapa pilihan jatuh ke sana, sudah Open Source tentunya dan yang tidak kalah penting karena master Emilio Cobos Álvarez sudah memaparkan penerapan timeline ini pada blogger :d You can read here Timeline del blog :-bd

Kata dia, saya cuma menambahkan beberapa baris script saja disana. Masalahnya bukan itu, bagi kita yg tidak paham tentang script (kayak aku ini) tetap saja kagak bisa mengaplikasikan pada blog =))
Bagaimana cara pemasangan timeline pada blog, dengan pemanggilan data memakai JSON! Mau paham tinggal belajar sendiri, tinggal pake yuk mari lanjut :p Bijaknya buat terlebih dahulu satu postingan statik (stand-alone pages) biar cepat dan mudah :)) Masukan semua bumbu berikut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src="http://emiliocobos.site40.net/blogger/demos/timeline/timeline-min.js"></script>
<link href="http://veritetimeline.appspot.com/latest/timeline.css" rel="stylesheet"></link>
<script type="text/javascript">
function loadTimeline(){
window.TimelineConfig = {
// if we want the first page had a special image:
// window.TimelineConfig = { 'URL_imagen' chars: 500 }
}
document.getElementById('timeline').style.display = "block"
var time = new VMM.Timeline("100%","500px");
$.ajax ({
dataType:'jsonp',
url:'http://YOUR-BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=20',
success:function(data){
time.init(bloggerTimeline(data))
}
});
}
</script>
<style>
#timeline{
display:none;
height:auto;
position:relative;
border:3px solid #eee;
box-shadow: 0 0 10px rgba(0,0,0,.6);
border-radius:15px;
margin: 0 auto;
margin-bottom:20px;
}
#timeline a{
background-color:transparent;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
}
.boton{
display:inline-block;
cursor: pointer;
color:#515151;
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
text-decoration:none;
font-weight:600;
border:1px solid #CCC;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:#F9F9F9;
-webkit-box-shadow:0 1px rgba(255,255,255,.2) inset;
-moz-box-shadow:0 1px rgba(255,255,255,.2) inset;
box-shadow:0 1px rgba(255,255,255,.2) inset;
padding:3px 10px;
}
.boton:hover{
background:#e3e3e3;
color:#515151;
}
</style>
<div id="timeline"></div>
<p class="grupo-botones" style="text-align:center">
<span onclick="loadTimeline()" class="boton">Open Timeline</span>
<span onclick="document.getElementById('timeline').style.display='none'" class="boton">Close</span>
</p>

Jangan lupa ganti YOUR-BLOG

http://jsbin.com/erolol

Kabuuurrr...
http://tutorialzine.com/2012/04/timeline-portfolio/
Happy timeline \m/