<body>5. Kemudian Kopi lalu pastekan kode di bawah ini setelah kode <body>
<div id='fb-root'/>maka hasilnya akan seperti ini
<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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
6. Tahap pertama selesai lanjut ke tahap berikutnya, masih ingat langkah ke 2 yap buka notepad yang berisi kode tadi kemudian kopi lalu letakan kode tadi setelah kode<body>
<div id='fb-root'/>
<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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<p class='comment-footer'>atau yang mirip dengan kode diatas karena posisi komentar facebook nya berada dibawah komentar bawaan blogspot, atau anda bisa menonaktifkan komentar bawaannya dengan pilih Setelan-Pos dan komentar-lokasi komentar, lau pilih Sembunyikan.
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
*Yang diwarnai merah adalah kode yang di dapat dari langkah 1 dan 2<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
<div class="fb-comments" data-href="http://bloganda.blogspot.com" data-num-posts="5" data-width="470"></div>
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrkRu9afpi-cYYBdqRtuyVHyeDISUV3Il-97WsW6lTgk1gQwWBVjWsk_IqE5oVKkn32JNA6VOeWnpFVF2lUAxsRpEZSh1i-j9REgDspgEdTHaqr8yPJseqswN-YX5kE0RPWL5ecswhkf8/s1600/menuwrap.png) repeat-x top;border-top:5px solid #26231c;border-bottom:5px solid #26231c;width:100%;margin:0 auto;padding:0 auto;height:37px}
#menuwrapper{width:980px;height:37px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:none;color:#ddd;padding:11px 12px 11px;border-right:1px solid #6c6250;border-left:1px solid #373123}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgveFFDqexn_TWkiLRzPhV4uJ6t5IHNrpD8t94PFzJfADzVtLqfQyNrTQeqCBf7Wbefu_FSyAjqsce7IMM3JcRxN2ZnPzl0X9m4rreVKZJG7ZbnVHZ28TId3ngCBqMTt1b1CwR_pSPdyq0/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:11px 24px 11px 12px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#26231c;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#26231c;color:#fff}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#nav-wrapper{background:#ebe8e1;height:30px;font-family:Arial;overflow:hidden;width:100%}
#nav{margin:0 auto;width:980px;height:30px;padding:0auto}
#nav ul{float:left;width:auto;height:30px;margin:0;padding:0;list-style-type:none}
#nav ul li{float:left;height:30px}
#nav ul li a,#nav ul li a:visited{float:left;height:30px;padding:7px 10px;color:#000;font:bold 12px Arial;text-transform:none}
#nav ul li a:hover,#nav .selected{color:#626262;text-decoration:none;}
#search{float:right;width:180px;height:20px;margin-top:3px;margin-right:5px}5. Kode diatas ada tiga bagian, Menubar Horizontal Atas, Menubar Horizontal Bawah, dan Kolom Pencarian/Search. Sesuaikan dengan selera anda pakah mau dipakai tiga-tiganya atau hanya pilih salah satu. Setelah itu kemudian temukan kode
#search form{float:left}
#search input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSA6Vng-4T4TZcJxb9WaBw7jG-XfLgMFaE5xmzEA9sP0bwJLrS224AXEqSzEzw8718y3f-YnH4ym4LdqSdV9xH5DkfGbE-ffhK95c1DYaW4M6skqhBEwpXemY4NgBBKlj6akM4avULaY/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #999;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}
#search input[type="text"]:focus{background:#fff}
#search input[type="submit"]{display:none}
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’false’ title=’Beautiful Beta (Header)’ type=’Header’/>
</b:section>
</div>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBi5F2szJMgwkzl0DCQLWB0UzM8CKiPDACfZdyxu9xed1Uqq0HABAyY2o5TUuRD28PPf33eXrSP4YH-RDTvPbF8QrmjX_0EKRoccQ_xiMXn-FptRqs8HX5th3ZvhFEejOxB8B1S8ZuIakf/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='masukkan link disini'>Menu 1</a></li>
<li><a href='masukkan link disini'>Menu 2</a></li>
<li><a class='trigger' href='#'>Menu 3</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='masukkan link disini'>Menu 4</a></li>
<li><a class='trigger' href='#'>Menu 5</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
<div id='nav-wrapper'>
<div id='nav'>
<b:section class='page' id='page' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<div id='search'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
</div>
</div>
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’false’ title=’Beautiful Beta (Header)’ type=’Header’/>
</b:section>
</div>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBi5F2szJMgwkzl0DCQLWB0UzM8CKiPDACfZdyxu9xed1Uqq0HABAyY2o5TUuRD28PPf33eXrSP4YH-RDTvPbF8QrmjX_0EKRoccQ_xiMXn-FptRqs8HX5th3ZvhFEejOxB8B1S8ZuIakf/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='masukkan link disini'>Menu 1</a></li>
<li><a href='masukkan link disini'>Menu 2</a></li>
<li><a class='trigger' href='#'>Menu 3</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='masukkan link disini'>Menu 4</a></li>
<li><a class='trigger' href='#'>Menu 5</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
<div id='nav-wrapper'>
<div id='nav'>
<b:section class='page' id='page' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<div id='search'>7. Setelah selesai klik tombol Pratinjau jika sudah Fix dan OK baru klik tombol Simpan Template.
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
</div>
</div>
<li><a href='http://m4zone.blogspot.com/search/label/Bola?max-results=4'>BOLA</a></li>9. Sedangkan untuk menu horizontal bagian bawah, anda dapat mengedit, menambah, mengurangi link dan sebagainya, anda tinggal menuju ke layout dan klik pada Menu Laman.
.bawahpic{background:#e3ddd1;width:100%;height:25px;}7. Setelah itu cari kode </body> lau pastekan kode dibawah ini diatas kode </body>
.bawah-wrapper{width:980px;margin:0 auto;padding:0 auto}
.bawahtext{padding-top:4px;font:bold 12px Arial;color:#444;text-align:center}
<div class='bawahpic'>8. Gantilah atau sesuaikan tulisan yang berwarna merah sesuai dengan kreasi anda, entah itu di rubah dengan kata-kata indah, tautan-tautan, nama anda, judul blog, nama/alamat sebuah perusahaan, alamat rumah, nomer telepon, dan lain sebagainya.
<div class='bawah-wrapper'>
<div class='bawahtext'>
Thanks to <a href='http://phophopunyablogs.blogspot.com/'>Phopho Poomkiller The'saint</a> From <a href='http://www.facebook.com/dundee.al.baihaqi'>Dee Shaint Al Baihaqi</a>
</div></div></div>
.headline-wrapper{background:#319DCF repeat-x bottom;width:100%;height:30px;}4. Selanjutnya cari kode <body> lalu pastekan kode dibawah ini tepat dibawah kode <body>
.headline{width:980px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#fff;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}
.headline a:hover{color:#eace12;text-decoration:underline}
<div class='headline-wrapper'>5. Setelah itu anda cari kode </head> lalu pastekan kode dibawah ini tepat diatas kode </head>
<div class='headline'>
<div style='float:left;padding:7px 5px 5px 10px;font:bold 12px Arial;color:#fff;text-transform:none;'>
Headlines News :
</div>
<div style='float:left;width:800px;padding:7px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")
cssfeed.addFeed("Headline News", "http://m4zone.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>
6. Selesailah sudah pekerjaan kita, eit..!! tapi tunggu, jangan klik Simpan Template dulu, klik Pratinjau untuk memastikan apakah yang sudah kita perbuat ini sudah diterima, jika lancar dan baik-baik saja baru klik Simpan Template.
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
]]></b:skin>5. Copy kode di bawah ini dan taruh tepat sebelum kode ]]></b:skin> :
#kolom-kiri {width: 49%;float: left;}#kolom-kanan {width: 49%;float: right;}6. Cari kode pada bagian sidebar, misalnya seperti kode berikut :
<div id='sidebar-wrapper'>Catatan:
<b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Label99' locked='false' title='Labels' type='Label'/> </b:section>
</div>
<div id=' .......... '>7. Sisipkan kode dibawah ini diantara </b:section> dan </div> :
<b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='HTML' locked='false' title='' type='HTML'/> </b:section>
</div>
<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>Sehingga tampak seperti berikut :
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>
<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>
<div style="clear: both;"></div>
<div id='sidebar-wrapper'>8. SIMPAN TEMPLATE
<b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Label99' locked='false' title='Labels' type='Label'/> </b:section>
<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>
<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</div>
