You are on page 1of 40

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd"> <html expr:dir='data:blog.

languageDirection' xmlns='http://www.w3.org/1999/xhtml ' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2 005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='' name='keywords'/> <meta content='' name='description'/> <meta content='text/html; charset=utf-8' http-equiv='content-type'/> (http://2.bp.blogspot.com/_qJEkQRe5y8U/SwRb4C4E7WI/AAAAAAAABOk/lp_Az49K6Io/s1600 /templatemo_main_bg_repeat.jpg); } a:link, a:visited { color: #e77e02; text-decoration: none; font-weight: bold;} a:active, a:hover { color: #e77e02; text-decoration: underline; } p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .margin_bottom_10 } .margin_bottom_20 } .margin_bottom_30 } .margin_bottom_40 } .margin_bottom_50 } .margin_bottom_60 } { clear: both; width: 100%; height: 10px; font-size: 1px; { clear: both; width: 100%; height: 20px; font-size: 1px; { clear: both; width: 100%; height: 30px; font-size: 1px; { clear: both; width: 100%; height: 40px; font-size: 1px; { clear: both; width: 100%; height: 50px; font-size: 1px; { clear: both; width: 100%; height: 60px; font-size: 1px;

.margin_right_40 { margin-right: 40px; } .border_bottom { border-bottom: 1px solid #999; } .rc_btn_01 a{ display: block; padding: 1px 0; width: 100px; font-size: 13px; padding-left: 20px; background: url(http://4.bp.blogspot.com/_qJEkQRe5y8U/SwRbRiDBYeI/AAAAAA AABOQ/inCLcxLGV7o/s1600/templatemo_icon_01.png) left center no-repeat; color: #5fccff; font-weight: bold; text-decoration: none; } .h1 { color: #5fccff; font-size: 18px; font-weight: bold;

padding: 3px 0 10px 0; margin: 0 0 20px 0; } .h2 { color: #e20000; font-size: 20px; font-weight: bold; padding: 3px 0 5px 0; margin: 0 0 15px 0; } "outer-wrapper{ width: 100%; margin: 0 auto; background: url(http://2.bp.blogspot.com/_qJEkQRe5y8U/SwRaK1HhugI/AAAAAA AABOM/vOtjH1_VgbI/s1600/templatemo_header_repeat.jpg) repeat-x; } #templatemo_container{ width: 980px; margin: 0 auto; } #header-wrapper { width: 980px; height: 170px; background: url(http://4.bp.blogspot.com/_qJEkQRe5y8U/SwRaKvMoc8I/AAAAAAAABO I/PPXEUEKalik/s1600/templatemo_header_bg.jpg) no-repeat; } #header { float: left; width: 265px; height: 60px; margin: 90px 0 0 20px; background: url() bottom no-repeat; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header h1 { color: #5fccff; font-size: 40px; font-weight: bold; padding: 3px 0 10px 0; margin: 0 0 20px 0; } #header a { color: #5fccff text-decoration:none; } #header a:hover {

color: #ffffff } #header .description { float: left; width: 265px; height: 60px; color: #5fccff; font-size: 15px; font-weight: bold; padding: 3px 0 10px 0; margin: 0 0 20px 0; } #header img { margin-left: auto; margin-right: auto; } #templatemo_top_panel { clear: both; width: 880px; height: 285px; padding: 0 50px; background: url(http://4.bp.blogspot.com/_qJEkQRe5y8U/SwRaKYnGIBI/AAAAAA AABN8/VAmhjH0efZ8/s1600/templatemo_banner_bg.png) center top no-repeat; } #templatemo_latest_project { float: left; width: 575px; padding: 70px 30px 0 0; } #templatemo_latest_project .image_frame_01 { float: left; position: relative; width: 295px; height: 174px; margin-right: 30px; } .image_frame_01 span { position: absolute; top: 0; left: 0; width: 294px; height: 174px; background: url(http://3.bp.blogspot.com/_qJEkQRe5y8U/SwRbR2Cgo8I/AAAAAA AABOc/IQmw5HOtmOA/s1600/templatemo_image_frame.png) no-repeat; } .image_frame_01 img { margin: 12px; width: 270px; height: 150px; } #templatemo_latest_project #latest_project_content { float: left;

width: 250px; color: #ffffff } #latest_project_content p{ font-size: 13px; margin-bottom: 30px; }

/* menu */ #menu { float: right; width: 220px; margin: 40px 0 0 0; } #menu ul { margin: 0px; padding: 0px; list-style: none; } #menu ul li{ margin: 0 0 15px 0; padding: 0 0 5px 0; background: url(http://2.bp.blogspot.com/_qJEkQRe5y8U/SwRaKvqn_HI/AAAAAA AABOE/Golhd2UM5jc/s1600/templatemo_hd_01.jpg) bottom left repeat-x; } #menu ul li a{ font-size: 14px; font-weight: bold; letter-spacing: 3px; text-decoration: none; color: #CCC; outline: none; padding: 0 0 0 0; } #menu li a:hover, #menu li .current{ color: #ffd200; background: url(images/templatemo_list_icon_01.jpg) left center no-repea t; } #content-wrapper { clear: both; width: 940px; margin: 30px 19px 0 19px; background: #ffffff; border: 1px solid #000; } #main-wrapper { float: left; width: 580px; padding: 30px;

} /* Posts ----------------------------------------------*/ h2.date-header { margin:1.5em 0 .5em; } .post { padding-bottom: 10px; text-align: justify; } .post h3 { color: #e20000; font-size: 20px; font-weight: bold; padding: 3px 0 5px 0; margin: 0 0 15px 0; } .post h3 a, .post h3 a:visited, .post h3 strong { color: #e20000; font-size: 20px; font-weight: bold; padding: 3px 0 5px 0; margin: 0 0 15px 0; } .post h3 strong, .post h3 a:hover { color: #e20000; font-size: 20px; font-weight: bold; padding: 3px 0 5px 0; margin: 0 0 15px 0; } .post-body { padding-bottom: 10px; text-align: justify; } .post-body blockquote { line-height:1.3em; } .post-footer { padding-bottom: 10px; text-align: justify; } .comment-link { } .post img { margin: 0px; padding: 0px; border: none; } .post blockquote { }

.post blockquote p { } /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: #000000; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } .feed-links { clear: both; line-height: 2.5em; } .jump-link { float: left; display: block; padding: 1px 0;

width: 100px; font-size: 12px; padding-left: 20px; background: url(http://4.bp.blogspot.com/_qJEkQRe5y8U/SwRbRkKLIVI/AAAAAA AABOU/ti4hVA2Qn-s/s1600/templatemo_icon_02.png) left center no-repeat; color: #e77e02; font-weight: bold; text-decoration: none; } /* Sidebar Content ----------------------------------------------- */ #sidebar-wrapper { float: right; width: 240px; padding: 30px } .sidebar { clear: both; } .sidebar h2 { color: #e20000; font-size: 20px; font-weight: bold; padding: 3px 0 5px 0; margin: 0 0 15px 0; } .sidebar ul { margin: 10px 0 10px 30px; padding: 0px; } .sidebar li { margin: 0px; padding: 0 0 10px 0; list-style:none; } .sidebar .widget, .main .widget { margin:0px; padding:0px; } .main .Blog { border-bottom-width: 0; } /* ----- Footer ----- */ #footer { clear: both; padding: 20px 0; width: 980px; text-align: center; color: #ffffff;

} #footer a{ color: #ffd200; font-weight: normal; } /* ----- End of Footer ----- */

<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"/> <title>MODUS</title> <!--[if lt IE 9]> <script src="js/css3-mediaqueries.js"></script> <![endif]--> <link rel="stylesheet" media="all" href="css/style.css"/> <meta name="viewport" content="width=device-width, initial-scale =1"/> <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ --> <!-- JS --> <script src="js/jquery-1.6.4.min.js"></script> <!-- <script src="js/less-grid-4.js"></script> --> <script src="js/custom.js"></script> <script src="js/tabs.js"></script> <!-- Masonry --> <script src="js/masonry.min.js" ></script> <script src="js/imagesloaded.js" ></script> <!-- ENDS Masonry --> <!-- Tweet --> <link rel="stylesheet" href="css/jquery.tweet.css" media="all" /> <script src="js/tweet/jquery.tweet.js" ></script> <!-- ENDS Tweet --> <!-- superfish --> <link rel="stylesheet" media="screen" href="css/superfish.css" / > <script src="js/superfish-1.4.8/js/hoverIntent.js"></script> <script src="js/superfish-1.4.8/js/superfish.js"></script> <script src="js/superfish-1.4.8/js/supersubs.js"></script> <!-- ENDS superfish --> <!-- prettyPhoto --> <script src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" media="screen" /> <!-- ENDS prettyPhoto --> <!-- poshytip -->

<link rel="stylesheet" href="js/poshytip-1.1/src/tip-twitter/tip -twitter.css" /> <link rel="stylesheet" href="js/poshytip-1.1/src/tip-yellowsimpl e/tip-yellowsimple.css" /> <script src="js/poshytip-1.1/src/jquery.poshytip.min.js"></scri pt> <!-- ENDS poshytip --> <!-- GOOGLE FONTS --> <link href='http://fonts.googleapis.com/css?family=Allan:700' re l='stylesheet' type='text/css'> <!-- Flex Slider --> <link rel="stylesheet" href="css/flexslider.css" > <script src="js/jquery.flexslider-min.js"></script> <!-- ENDS Flex Slider --> <!--[if IE 6]> <link rel="stylesheet" href="css/ie6-hacks.css" media="screen" / > <script type="text/javascript" src="js/DD_belatedPNG.js"></scrip t> <script> /* EXAMPLE */ DD_belatedPNG.fix('*'); </script> <![endif]--> <!-- Lessgrid --> <link rel="stylesheet" media="all" href="css/lessgrid.css"/> <!-- modernizr --> <script src="js/modernizr.js"></script> </head> <body lang="en"> <!-- mobile-nav --> <div id="mobile-nav-holder"> <div class="wrapper"> <ul id="mobile-nav"> <li><a href="index.html">home</a></li> <li class="current-menu-item"><a href="b log.html">blog</a></li> <li><a href="page.html">about</a> <ul> <li><a href="page-full.h tml">Fullwidth Page</a></li> <li><a href="page-featur es.html">Features</a></li> <li><a href="page-typogr aphy.html">Typography</a></li> <li><a href="page-icons. html">Icons</a></li> </ul>

</li> <li><a href="portfolio.html">portfolio</ a></li> <li><a href="contact.html">contact</a></ li> <li><a href="http://luiszuno.com/blog/do wnloads/modus-html-template">Grab it!</a></li> </ul> <div id="nav-open"><a href="#">Menu</a></div> </div> </div> <!-- ENDS mobile-nav --> <header> <div class="wrapper"> <a href="index.html" id="logo"><img src="img/lo go.png" alt="Tandem"></a> <nav> <ul id="nav" class="sf-menu"> <li><a href="index.html">home<sp an class="subheader">welcome</span></a></li> <li class="current-menu-item"><a href="blog.html">blog<span class="subheader">read me</span></a></li> <li><a href="page.html">about<sp an class="subheader">great features</span></a> <ul> <li><a href="pag e-full.html">Fullwidth Page</a></li> <li><a href="pag e-features.html">Features</a></li> <li><a href="pag e-typography.html">Typography</a></li> <li><a href="pag e-icons.html">Icons</a></li> </ul> </li> <li><a href="portfolio.html">por tfolio<span class="subheader">recent work</span></a></li> <li><a href="contact.html">conta ct<span class="subheader">get in touch</span></a></li> <li><a href="http://luiszuno.com /blog/downloads/modus-html-template">Grab it!<span class="subheader">Download it For Free</span></a></li> </ul> </nav> <div class="clearfix"></div> </div> </header>

<!-- MAIN --> <div id="main">

<!-- social --> <div id="social-bar"> <ul> <li><a href="http://www.facebook.com" t itle="Become a fan"><img src="img/social/facebook_32.png" alt="Facebook" /></a> </li> <li><a href="http://www.twitter.com" tit le="Follow my tweets"><img src="img/social/twitter_32.png" alt="Facebook" /></a ></li> <li><a href="http://www.google.com" tit le="Add to the circle"><img src="img/social/google_plus_32.png" alt="Facebook" / ></a></li> </ul> </div> <!-- ENDS social -->

<!-- Content --> <div id="content"> <!-- masthead --> <div id="masthead"> <span class="head">Blog</span><span clas s="subhead">this is a sub heading</span> <ul class="breadcrumbs"> <li><a href="index.html">home</a ></li> <li>/ blog</li> </ul> </div> <!-- ENDS masthead -->

<!-- posts list --> <div id="posts-list"> <article class="format-standard"> <div class="feature-image"> <a href="img/slides/01.j pg" data-rel="prettyPhoto"><img src="img/slides/01.jpg" alt="Alt text" /></a> </div> <h1><a href="single.html" class= "post-heading">Lorem ipsum dolor amet</a></h1> <div class="meta"> <span class="entry-date" >23 Sep, 2011</span> in <span class="categori es"><a href="#">Category 1</a>, <a href="#">Category 2</a></span> </div> <div class="excerpt">Pellentesqu e habitant morbi tristique senectus et netus et malesuada fames ac turpis egesta s. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Ma

uris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed. </div> <a href="single.html" class="rea d-more">read more</a> </article> <article class="format-standard"> <div class="feature-image"> <a href="img/slides/02.j pg" data-rel="prettyPhoto"><img src="img/slides/02.jpg" alt="Alt text" /></a> </div> <h1><a href="single.html" class= "post-heading">Lorem ipsum dolor amet</a></h1> <div class="meta"> <span class="entry-day"> 23</span> <span class="entry-year" >sep 2011</span> </div> <div class="excerpt">Pellentesqu e habitant morbi tristique senectus et netus et malesuada fames ac turpis egesta s. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Ma uris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed. </div> <a href="single.html" class="rea d-more">read more</a> </article> <article class="format-standard"> <div class="feature-image"> <a href="img/slides/03.j pg" data-rel="prettyPhoto"><img src="img/slides/03.jpg" alt="Alt text" /></a> </div> <h1><a href="single.html" class= "post-heading">Lorem ipsum dolor amet</a></h1> <div class="meta"> <span class="entry-day"> 23</span> <span class="entry-year" >sep 2011</span> </div> <div class="excerpt">Pellentesqu e habitant morbi tristique senectus et netus et malesuada fames ac turpis egesta

s. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Ma uris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed. </div> <a href="single.html" class="rea d-more">read more</a> </article> </div> <!-- ENDS posts list --> <!-- sidebar --> <aside id="sidebar"> <div class="block"> <h4>categories</h4> <ul> <li posts">Film and video</a></li> <li posts">Print</a></li> <li posts">Photo and lomo</a></li> <li posts">Habitant morbi</a></li> <li posts">Film and video</a></li> <li posts">Print</a></li> <li posts">Photo and lomo</a></li> <li posts">Habitant morbi</a></li> </ul> </div>

class="cat-item"><a class="cat-item"><a class="cat-item"><a class="cat-item"><a class="cat-item"><a class="cat-item"><a class="cat-item"><a class="cat-item"><a

href="#" title="View all href="#" title="View all href="#" title="View all href="#" title="View all href="#" title="View all href="#" title="View all href="#" title="View all href="#" title="View all

<div class="block"> <h4>archives</h4> <ul> <li class="cat-item"><a href="#" title="View all posts">January</a></li> <li class="cat-item"><a href="#" title="View all posts">February</a></li> <li class="cat-item"><a href="#" title="View all posts">March</a></li> </ul> </div> </aside> <div class="clearfix"></div> <!-- ENDS sidebar --> <!-- pager --> <ul class="pager">

<li class="paged">Page 1 of 2</li> <li class="active"><a href="#">1</a></li > <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="clearfix"></div> <!-- ENDS pager --> </div> <!-- ENDS content --> <div class="clearfix"></div> <div class="shadow-main"></div> </div> <!-- ENDS MAIN --> <footer> <div class="wrapper"> <ul id="footer-cols"> <li class="first-col"> <div class="widget-block"> <h4>Recent posts</h4> <div class="recent-post" > <a href="#" clas s="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a> <div class="post -head"> <a href= "#">Pellentesque habitant morbi senectus</a><span>March 12, 2011</span> </div> </div> <div class="recent-post" > <a href="#" clas s="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a> <div class="post -head"> <a href= "#">Pellentesque habitant morbi senectus</a><span>March 12, 2011</span> </div> </div> <div class="recent-post" > <a href="#" clas s="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a> <div class="post -head"> <a href= "#">Pellentesque habitant morbi senectus</a><span>March 12, 2011</span> </div> </div> </div> </li>

<li class="second-col"> <div class="widget-block"> <h4>Dummy text</h4> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibu lum tortor quam, feugiat vitae, ultricies ege. Aenean ultricies mi vitae est. Ma uris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> </div> </li> <li class="third-col"> <div class="widget-block"> <div id="tweets" class=" footer-col tweet"> <h4>Twitter widget</h4> </div> </div> </li> </ul> <div class="clearfix"></div> </div> <div id="to-top"></div> </footer> </body> </html>]]></b:skin> <!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center ; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier n ew; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNo de.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files /theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a ></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; over flow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/ files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You a re using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div> </div> <div style='width: 75px; float: left;'><a href='http://www.firefox.com' ta rget='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.j pg' style='border: none;' alt='Get Firefox 3.5'/></a></div> <div style='width: 75px; float: left;'><a href='http://www.browserforthebe tter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files

/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/>< /a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safar i/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6n omore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left;'><a href='http://www.google.com/chrome' target='_ blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' styl e='border: none;' alt='Get Google Chrome'/></a></div> </div> </div> <![endif]--> </head> <body> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'> <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt; function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener(&#39;load&#39;, function(){ object[attribute] = val; }, false); } else { window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val ; }); } } &lt;/script&gt; &lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js /plusone.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; gapi.load(&quot;iframes-styles-bubble&quot;, function() { if (window.iframes &amp;&amp; iframes.open) { iframes.open( &#39;//www.blogger.com/navbar.g?targetBlogID\0752578198139712246 223\46blogName\75strongPower\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\ 75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://masterard.blogspot.com/sear ch\46blogLocale\75in\46v\0752\46homepageUrl\75http://masterard.blogspot.com/\46b logFollowUrl\75https://plus.google.com/100787828762228734830\46vt\75-25395857856 84426311&#39;, { container: &quot;navbar-iframe-container&quot;, id: &quot;navbar-iframe&quot; }, { }); } }); &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt; (function() { var script = document.createElement(&#39;script&#39;); script.type = &#39;text/javascript&#39;; script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#3 9;; var head = document.getElementsByTagName(&#39;head&#39;)[0]; if (head) { head.appendChild(script); }})(); &lt;/script&gt; </b:includable>

</b:widget> </b:section> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='templatemo_container'> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement= 'no'> <b:widget id='Header1' locked='true' title='strongPower (Header)' type='Header'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == &quot;REPLACE&quot;'> <!--Show just the image, no text--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:wid get.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='d ata:width' style='display: block'/> </a> </div> <b:else/> <!-Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUr l + &quot;\&quot;); &quot; + &quot;background-position: &qu ot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: & quot; + data:height + &quot;px;&quot; + &quot;_height: &quo t; + data:height + &quot;px;&quot; + &quot;background-repea t: no-repeat; &quot;' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:include name='title'/>

</h1> </div> <b:include name='description'/> </div> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> </b:widget> </b:section> </div> <div id='templatemo_top_panel'> <div id='templatemo_latest_project'> <div class='image_frame_01'> <img alt='image' src='https://fbcdn-sphotos-a.akamaihd.net/hphot os-ak-ash3/600248_397884283597139_1667711253_n.jpg'/> <span/> </div> <div id='latest_project_content'> <div class='h1'>PPPA Daarul Qur&#39;an</div> <p>PPPA Daarul Qur&#39;an Nusantara Mengajak Anda Menjadi Relawan Ramadhan 1433 H &#8220;Wahai orang-orang yang beriman, jika kamu menolong (agama) Allah, niscaya Dia akan menolongmu dan meneguhkan kedudukanmu.&#8221; (QS Muhammad : 7)</p> <div class='rc_btn_01'><a href='https://www.facebook.com/daqu.ma lang'>Read more</a></div> </div> <div class='cleaner'/> </div> <div id='menu'> <ul> <li><a class='current' expr:href='data:blog.homepageUrl'><span/> Home</a></li> <li><a href='#'><span/>About Us</a></li> <li><a href='#'><span/>Project</a></li> <li><a href='#'><span/>Gallery</a></li> <li><a href='#'><span/>Blog</a></li> <li><a href='#'><span/>Contact</a></li> </ul> </div> </div>

<div id='content-wrapper'> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> <b:includable id='main' var='top'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <data:defaultAdStart/> <b:loop values='data:posts' var='post'> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='comments'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:include data='post' name='comments'/> </b:if> <b:if cond='data:post.includeAd'> <b:if cond='data:post.isFirstPost'> <data:defaultAdEnd/> <b:else/> <data:adEnd/> </b:if> <div class='inline-ad'> <data:adCode/> </div> <data:adStart/> </b:if> <b:if cond='data:post.trackLatency'> <data:post.latencyJs/> </b:if> </b:loop> <data:adEnd/> </div> <!-- navigation --> <b:include name='nextprev'/> <!-- feed links --> <b:include name='feedLinks'/> <b:if cond='data:top.showStars'> <script src='http://www.google.com/jsapi' type='text/javascript'/> <script type='text/javascript'> google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: & quot;<data:top.languageCode/>&quot;}); function initialize() { google.annotations.setApplicationId(<data:top.blogspotReviews/>); google.annotations.createAll(); google.annotations.fetch(); } google.setOnLoadCallback(initialize); </script> </b:if> </b:includable>

<b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMs g'> <img src='http://www.blogger.com/img/icon_delete13.gif'/> </a> </span> </b:includable> <b:includable id='backlinks' var='post'> <a name='links'/><h4><data:post.backlinksLabel/></h4> <b:if cond='data:post.numBacklinks != 0'> <dl class='comments-block' id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'>&#160;</span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title /></a> <b:include data='backlink' name='backlinkDeleteIcon'/> </dt> <dd class='comment-body collapseable'> <data:backlink.snippet/> </dd> <dd class='comment-footer collapseable'> <span class='comment-author'><data:post.authorLabel/> <data:backlink .author/></span> <span class='comment-timestamp'><data:post.timestampLabel/> <data:ba cklink.timestamp/></span> </dd> </div> </b:loop> </dl> </b:if> <p class='comment-footer'> <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:wi dget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post .createLinkLabel/></a> </p> </b:includable> <b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h4 id='comment-post-message'><data:postCommentMsg/></h4> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comm ent-from-post' frameborder='0' height='410' id='comment-editor' name='comment-ed itor' src='' width='100%'/> <data:post.friendConnectJs/> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:p ost.communityId/>&#39;); </script> </div> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> <span expr:class='&quot;item-control &quot; + data:comment.adminClass'> <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'

> <img src='http://www.blogger.com/img/icon_delete13.gif'/> </a> </span> </b:includable> <b:includable id='comment_count_picker' var='post'> <b:if cond='data:post.commentSource == 1'> <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments ' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post. url' expr:data-url='data:post.canonicalUrl'> </span> <b:else/> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='da ta:post.addCommentOnclick'> <data:post.commentLabelFull/>: </a> </b:if> </b:includable> <b:includable id='comment_picker' var='post'> <b:if cond='data:post.commentSource == 1'> <b:include data='post' name='iframe_comments'/> <b:else/> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> </b:includable> <b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLink Url'><data:post.oldestLinkText/></a> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkU rl'><data:post.olderLinkText/></a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkU rl'><data:post.newerLinkText/></a> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLink Url'><data:post.newestLinkText/></a> </span> </b:if> <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'> <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass ' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-b ottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment .author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLink Url'> <data:post.oldestLinkText/> </a> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkU rl'> <data:post.olderLinkText/> </a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkU rl'> <data:post.newerLinkText/> </a> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLink Url'> <data:post.newestLinkText/> </a> </span> </b:if>

<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.addCo mmentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </b:includable> <b:includable id='feedLinks'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div class='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/> <!--Post feed links --> <div class='post-feeds'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.feedLinks'> <b:include data='post.feedLinks' name='feedLinksBody'/> </b:if> </b:if> </b:loop> </div> </b:if> </b:includable> <b:includable id='feedLinksBody' var='links'> <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' tar get='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:includable> <b:includable id='iframe_comments' var='post'> <b:if cond='data:post.allowIframeComments'> <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>

<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr: data-viewtype='data:post.viewType'/> <b:if cond='data:post.embedCommentForm == &quot;false&quot;'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentO nclick'><data:postCommentMsg/></a> </b:if> </b:if> </b:includable> <b:includable id='mobile-index-post' var='post'> <div class='mobile-date-outer date-outer'> <b:if cond='data:post.dateHeader'> <div class='date-header'> <span><data:post.dateHeader/></span> </div> </b:if> <div class='mobile-post-outer'> <a expr:href='data:post.url'> <h3 class='mobile-index-title entry-title' itemprop='name'> <data:post.title/> </h3> <div class='mobile-index-arrow'>&amp;rsaquo;</div> <div class='mobile-index-contents'> <b:if cond='data:post.thumbnailUrl'> <div class='mobile-index-thumbnail'> <div class='Image'> <img expr:src='data:post.thumbnailUrl'/> </div> </div> </b:if> <div class='post-body'> <b:if cond='data:post.snippet'><data:post.snippet/></b:if> </div> </div> <div style='clear: both;'/> </a> <div class='mobile-index-comment'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.numComments != 0'> <b:include data='post' name='comment_count_picker'/> </b:if> </b:if> </b:if> </div> </div> </div> </b:includable> <b:includable id='mobile-main' var='top'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'> <b:loop values='data:posts' var='post'> <b:include data='post' name='mobile-index-post'/> </b:loop> <b:else/> <b:loop values='data:posts' var='post'> <b:include data='post' name='mobile-post'/> </b:loop> </b:if> </div> <b:include name='mobile-nextprev'/> </b:includable> <b:includable id='mobile-nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <div class='mobile-link-button' id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='da ta:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newe rPageTitle'>&amp;lsaquo;</a> </div> </b:if> <b:if cond='data:olderPageUrl'> <div class='mobile-link-button' id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='da ta:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olde rPageTitle'>&amp;rsaquo;</a> </div> </b:if> <div class='mobile-link-button' id='blog-pager-home-link'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </div> <div class='mobile-desktop-link'> <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/ ></a> </div> </div> <div class='clear'/> </b:includable> <b:includable id='mobile-post' var='post'> <div class='date-outer'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if> <div class='date-posts'> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemscope='itemscope ' itemtype='http://schema.org/BlogPosting'> <b:if cond='data:post.thumbnailUrl'> <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/> </b:if> <meta expr:content='data:blog.blogId' itemprop='blogId'/> <meta expr:content='data:post.id' itemprop='postId'/> <a expr:name='data:post.id'/>

<b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <div class='post-header'> <div class='post-header-line-1'/> </div> <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' ite mtype='http://schema.org/Person'> <meta expr:content='data:post.authorProfileUrl' itemprop=' url'/> <a expr:href='data:post.authorProfileUrl' rel='author' tit le='author profile'> <span itemprop='name'><data:post.author/></span> </a> </span> <b:else/> <span class='fn' itemprop='author' itemscope='itemscope' ite mtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/></span> </span> </b:if> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <meta expr:content='data:post.canonicalUrl' itemprop='url'/> <a class='timestamp-link' expr:href='data:post.url' rel='boo kmark' title='permanent link'><abbr class='published' expr:title='data:post.time stampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a> </b:if>

</b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:post.allowComments'> <b:include data='post' name='comment_count_picker'/> </b:if> </b:if> </b:if> </span> </div> <div class='post-footer-line post-footer-line-2'> <b:if cond='data:top.showMobileShare'> <div class='mobile-link-button goog-inline-block' id='mobile-sha re-button'> <a href='javascript:void(0);'><data:shareMsg/></a> </div> </b:if> <b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'><data:post.dummyT ag/></div> </b:if> </div> </div> </div> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='comment_picker'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:include data='post' name='comment_picker'/> </b:if> </div> </div> </div> </b:includable> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='da ta:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newe rPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='da ta:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olde rPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></ a> </b:if> </b:if> </div> <div class='clear'/> </b:includable> <b:includable id='post' var='post'> <div class='post hentry uncustomized-post-template'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'><data:post.author/></span> </b:if> </span> | <span class='post-comment-link'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onc lick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <da ta:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlu ral/></b:if></a> </b:if> </b:if> </span> | <b:if cond='data:post.dateHeader'> <data:post.dateHeader/> </b:if><br/> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop> </b:if> </span> <div class='post-body entry-content'> <br/><data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats -->

</div>

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></ a> </div> </b:if> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <data:post.timestamp/> </b:if> </b:if> </span> <span class='reaction-buttons'> <b:if cond='data:top.showReactions'> <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr> <td class='reactions-label-cell' nowrap='nowrap' valign='top' width= '1%'> <span class='reactions-label'> <data:top.reactionsLabel/></span>&#160;</td> <td><iframe allowtransparency='true' class='reactions-iframe' expr:s rc='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></t d> </tr></table> </b:if> </span> <span class='star-ratings'> <b:if cond='data:top.showStars'> <div expr:g:background-color='data:backgroundColor' expr:g:text-color ='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='Ratin gPanel' g:width='280'/> </b:if> </span>

<!-- backlinks --> <span class='post-backlinks post-comment-link'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.showBacklinks'> <a class='comment-link' expr:href='data:post.url + &quot;#links&quo t;'><data:top.backlinkLabel/></a> </b:if> </b:if> </span>

<span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMs g'> <img alt='' class='icon-action' height='13' src='http://www.blogge r.com/img/icon18_email.gif' width='18'/> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> </div> <div class='post-footer-line post-footer-line-2'> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> <b:if cond='data:top.showLocation'> <b:if cond='data:post.location'> <data:postLocationLabel/> <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post .location.name/></a> </b:if> </b:if> </span> </div> </div> </div> </b:includable> <b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='&quot;item-control &quot; + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' height='18' src='http://www.blogger.com/ img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if> </b:includable> <b:includable id='shareButtons' var='post'> <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' ex pr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-linktext'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThi sButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post. sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(thi s.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false; &quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-but ton-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.sho

wTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href=' data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.s hareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top .shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'>< a class='goog-inline-block share-button sb-facebook' expr:href='data:post.shareP ostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this. href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&q uot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='shar e-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond=' data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' exp r:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data :top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data :top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div cla ss='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if> </b:includable> <b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if> </b:includable> <b:includable id='threaded-comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <b:if cond='data:mobile'> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-co mment-from-post' frameborder='0' height='410' id='comment-editor' name='commenteditor' src='' style='display: none' width='100%'/> <b:else/> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-co mment-from-post' frameborder='0' height='410' id='comment-editor' name='commenteditor' src='' width='100%'/> </b:if> <data:post.friendConnectJs/> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:p ost.communityId/>&#39;); </script> </div> </b:includable> <b:includable id='threaded_comment_js' var='post'> <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/> <script type='text/javascript'>

(function() { var items = <data:post.commentJso/>; var msgs = <data:post.commentMsgs/>; var config = <data:post.commentConfig/>; // <![CDATA[ var cursor = null; if (items && items.length > 0) { cursor = parseInt(items[items.length - 1].timestamp) + 1; } var bodyFromEntry = function(entry) { if (entry.gd$extendedProperty) { for (var k in entry.gd$extendedProperty) { if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') { return '<span class="deleted-comment">' + entry.content.$t + '</sp an>'; } } } return entry.content.$t; } var parse = function(data) { cursor = null; var comments = []; if (data && data.feed && data.feed.entry) { for (var i = 0, entry; entry = data.feed.entry[i]; i++) { var comment = {}; // comment ID, parsed out of the original id format var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t); comment.id = id ? id[2] : null; comment.body = bodyFromEntry(entry); comment.timestamp = Date.parse(entry.published.$t) + ''; if (entry.author && entry.author.constructor === Array) { var auth = entry.author[0]; if (auth) { comment.author = { name: (auth.name ? auth.name.$t : undefined), profileUrl: (auth.uri ? auth.uri.$t : undefined), avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined) }; } } if (entry.link) { if (entry.link[2]) { comment.link = comment.permalink = entry.link[2].href; } if (entry.link[3]) { var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].hr ef); if (pid && pid[1]) { comment.parentId = pid[1]; } } } comment.deleteclass = 'item-control blog-admin'; if (entry.gd$extendedProperty) { for (var k in entry.gd$extendedProperty) { if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {

comment.deleteclass += ' ' + entry.gd$extendedProperty[k].valu e; } else if (entry.gd$extendedProperty[k].name == 'blogger.display Time') { comment.displayTime = entry.gd$extendedProperty[k].value; } } } comments.push(comment); } } return comments; }; var paginator = function(callback) { if (hasMore()) { var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false &max-results=50'; if (cursor) { url += '&published-min=' + new Date(cursor).toISOString(); } window.bloggercomments = function(data) { var parsed = parse(data); cursor = parsed.length < 50 ? null : parseInt(parsed[parsed.length - 1].timestamp) + 1 callback(parsed); window.bloggercomments = null; } url += '&callback=bloggercomments'; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; document.getElementsByTagName('head')[0].appendChild(script); } }; var hasMore = function() { return !!cursor; }; var getMeta = function(key, comment) { if ('iswriter' == key) { var matches = !!comment.author && comment.author.name == config.authorName && comment.author.profileUrl == config.authorUrl; return matches ? 'true' : ''; } else if ('deletelink' == key) { return config.baseUri + '/delete-comment.g?blogID=' + config.blogId + '&postID=' + comment.id; } else if ('deleteclass' == key) { return comment.deleteclass; } return ''; }; var replybox = null; var replyUrlParts = null; var replyParent = undefined; var onReply = function(commentId, domId) { if (replybox == null) { // lazily cache replybox, and adjust to suit this style:

replybox = document.getElementById('comment-editor'); if (replybox != null) { replybox.height = '250px'; replybox.style.display = 'block'; replyUrlParts = replybox.src.split('#'); } } if (replybox && (commentId !== replyParent)) { document.getElementById(domId).insertBefore(replybox, null); replybox.src = replyUrlParts[0] + (commentId ? '&parentID=' + commentId : '') + '#' + replyUrlParts[1]; replyParent = commentId; } }; var hash = (window.location.hash || '#').substring(1); var startThread, targetComment; if (/^comment-form_/.test(hash)) { startThread = hash.substring('comment-form_'.length); } else if (/^c[0-9]+$/.test(hash)) { targetComment = hash.substring(1); } // Configure commenting API: var configJso = { 'maxDepth': config.maxThreadDepth }; var provider = { 'id': config.postId, 'data': items, 'loadNext': paginator, 'hasMore': hasMore, 'getMeta': getMeta, 'onReply': onReply, 'rendered': true, 'initComment': targetComment, 'initReplyThread': startThread, 'config': configJso, 'messages': msgs }; var render = function() { if (window.goog && window.goog.comments) { var holder = document.getElementById('comment-holder'); window.goog.comments.render(holder, provider); } }; // render now, or queue to render when library loads: if (window.goog && window.goog.comments) { render(); } else { window.goog = window.goog || {}; window.goog.comments = window.goog.comments || {}; window.goog.comments.loadQueue = window.goog.comments.loadQueue || []; window.goog.comments.loadQueue.push(render); } })(); // ]]>

</script> </b:includable> <b:includable id='threaded_comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <h4><data:post.commentLabelFull/>:</h4> <div class='comments-content'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='threaded_comment_js'/> </b:if> <div id='comment-holder'> <data:post.commentHtml/> </div> </div> <p class='comment-footer'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> </p> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' na me='comment-actions' scrolling='no'> </iframe> </div> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </b:includable> </b:widget> <b:widget id='Gadget1' locked='false' title='Fish' type='Gadget'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:renderingUrl != &quot;&quot;'> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <b:if cond='data:gadgetSnippet != &quot;&quot;'> <data:gadgetSnippet/> <b:else/> <div class='widget-content'> <b:if cond='data:nonSocialFragment != &quot;&quot;'> <data:nonSocialFragment/> </b:if> </div> </b:if> <b:else/> <data:errorMessage/>

</b:if> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> <div class='cleaner'/> </div> <!-- end of content left --> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Image2' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != &quot;&quot;'> <h2 align='center'><data:title/></h2> </b:if> <div align='center' class='widget-content'> <b:if cond='data:link != &quot;&quot;'> <a expr:href='data:link'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:wid get.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:wi dth'/> </a> <b:else/> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widge t.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:widt h'/> </b:if> <br/> <b:if cond='data:caption != &quot;&quot;'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type=' BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'> <b:if cond='data:style == &quot;HIERARCHY&quot;'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == &quot;FLAT&quot;'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == &quot;MENU&quot;'> <b:include data='data' name='menu'/> </b:if> </div> </div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='flat' var='data'>

<ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul> <li expr:class='&quot;archivedate &quot; + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span> <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='menu' var='data'> <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'> <option value=''><data:title/></option> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</opt ion> </b:loop> </select> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == &quot;expanded&quot;'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'>&#9660;&#160;</span> </a> <b:else/> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'> &#9668;&#160; <b:else/> &#9658;&#160; </b:if> </span> </a> </b:if> </b:if> </b:includable>

</b:widget> <b:widget id='PageList1' locked='false' title='Laman' type='PageList'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <b:if cond='data:mobile'> <select expr:id='data:widget.instanceId + &quot;_select&quot;'> <b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'> <option expr:value='data:link.href' selected='selected'><data:link.t itle/></option> <b:else/> <option expr:value='data:link.href'><data:link.title/></option> </b:if> </b:loop> </select> <span class='pagelist-arrow'>&amp;#9660;</span> <b:else/> <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> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='LinkList1' locked='false' title='Recent Posts' type='Lin kList'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <li><a expr:href='data:link.target'><data:link.name/></a></li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='BlogList1' locked='false' title='Daftar Blog Saya' type= 'BlogList'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_ container&quot;'>

<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'> <b:loop values='data:items' var='item'> <li expr:style='data:item.displayStyle'> <div class='blog-icon'> <b:if cond='data:showIcon == &quot;true&quot;'> <input expr:value='data:item.blogIconUrl' type='hidden'/> </b:if> </div> <div class='blog-content'> <div class='blog-title'> <a expr:href='data:item.blogUrl' target='_blank'> <data:item.blogTitle/></a> </div> <div class='item-content'> <b:if cond='data:showItemThumbnail == &quot;true&quot;'> <b:if cond='data:item.itemThumbnail'> <div class='item-thumbnail'> <a expr:href='data:item.blogUrl' target='_blank'> <img alt='' border='0' expr:height='data:item.itemThum bnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemT humbnail.width'/> </a> </div> </b:if> </b:if> <b:if cond='data:showItemTitle == &quot;true&quot;'> <span class='item-title'> <b:if cond='data:item.itemUrl != &quot;&quot;'> <a expr:href='data:item.itemUrl' target='_blank'> <data:item.itemTitle/></a> <b:else/> <data:item.itemTitle/> </b:if> </span> </b:if> <b:if cond='data:showItemSnippet == &quot;true&quot;'> <b:if cond='data:showItemTitle == &quot;true&quot;'> </b:if> <span class='item-snippet'> <data:item.itemSnippet/> </span> </b:if> <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&q uot;'> <div class='item-time'> <data:item.timePeriodSinceLastUpdate/> </div> </b:if> </div> </div> <div style='clear: both;'/> </li> </b:loop> </ul> <b:if cond='data:numItemsToShow != 0'> <b:if cond='data:totalItems &gt; data:numItemsToShow'> <div class='show-option'> <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style

='display: none;'> <a href='javascript:void(0)' onclick='return false;'><data:showN Text/></a> </span> <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' sty le='margin-left: 5px;'> <a href='javascript:void(0)' onclick='return false;'><data:showA llText/></a> </span> </div> </b:if> </b:if> <b:include name='quickedit'/> </div> </div> </b:includable> </b:widget> <b:widget id='Image1' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != &quot;&quot;'> <h2><data:title/></h2> </b:if> <div align='center' class='widget-content'> <b:if cond='data:link != &quot;&quot;'> <a expr:href='data:link'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:wid get.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:wi dth'/> </a> <b:else/> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widge t.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:widt h'/> </b:if> <br/> <b:if cond='data:caption != &quot;&quot;'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </div> <!-- end of content right --> <div class='cleaner'/> </div> <div id='footer'> Copyright &#169; 2009 <a expr:href='data:blog.homepageUrl'><strong><data :blog.title/></strong></a> </div> <!-- end of footer --> </div> </div></div> <!-- end outer-wrapper --> </body> </html>