Manajmnt blogger free template100% without copyright [ blogger free templates ]

manajmnt template it's free template for blogger by manajmnt-code:
Template features:
free template without copy right
grid system css like bootstrap
owl carsoule for recent post and related post
resposive for all device
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:responsive='true' b:templateUrl='indie.xml' 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'>
<!--manajmt code created by mahfoud mami front-end developer-->  
  <head>

    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <title>
      <b:if cond='data:blog.pageType == "index"'>
        <data:blog.pageTitle/>
        <b:else/>
        <b:if cond='data:blog.pageType != "error_page"'>
          <data:blog.pageName/> | <data:blog.title/>
          <b:else/>
          Page Not Found | <data:blog.title/>
        </b:if>
      </b:if>
    </title>
    <b:include data='blog' name='all-head-content'/>
    
<!--link-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
 

  
    

 <!--link-->   
<!--style-->
<!--bootstrap css basic-->
  <style>
  html{font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;scroll-behavior: smooth;} 
  *, ::after, ::before { box-sizing: border-box; }
  body{margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.7; color: #212529;  background-color: #fff;word-break: break-word;}
 
  /*container*/
.container { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; }
  
@media (min-width: 1200px) .container { max-width: 1140px; } @media (min-width: 992px) .container { max-width: 960px; } @media (min-width: 768px) .container { max-width: 720px; } @media (min-width: 576px) .container { max-width: 540px; }  
  
/*container*/
  /*row*/
.row {  display: flex;  flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
/*row*/
  
/*col*/ 
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10{position: relative; width: 100%; padding-left: 15px; padding-right: 15px;}
@media (min-width: 768px) {.col-1 {  flex: 0 0 10%; max-width: 10%; }}
  @media (min-width: 768px) {.col-2 {  flex: 0 0 20%; max-width: 20%; }}
  @media (min-width: 768px) {.col-3 {  flex: 0 0 30%; max-width: 30%; }}
  @media (min-width: 768px) {.col-4 {  flex: 0 0 40%; max-width: 40%; }}
  @media (min-width: 768px) {.col-5 {  flex: 0 0 50%; max-width: 50%; }}
  @media (min-width: 768px) {.col-6 {  flex: 0 0 60%; max-width: 60%; }}
  @media (min-width: 768px) {.col-7 {  flex: 0 0 70%; max-width: 70%; }}
  @media (min-width: 768px) {.col-8 {  flex: 0 0 80%; max-width: 80%; }}
  @media (min-width: 768px) {.col-9 {  flex: 0 0 90%; max-width: 90%; }}
  @media (min-width: 768px) {.col-10 {  flex: 0 0 100%; max-width: 100%; }}
/*col*/

</style> 
   <!--bootstrap css basic-->    
    
    
    
    
    <b:if cond='data:blog.pageType == "index"'>


   <style> 
.post-outer {  box-sizing: border-box; padding: 0 10px; border-radius: 5px;transition: 0.5s; } .post-outer:hover { box-shadow: 0 0 10px 2px; transition: 0.5s; } h3.post-title.entry-title a { font-size: 20px; } h3.post-title.entry-title a:hover { text-decoration: underline; }

     @media (min-width: 768px) {
.blog-posts.hfeed { display: flex; flex-wrap: wrap; }    
.date-outer { flex: 0 0 100%; max-width: 100%; margin-top:10px; border-bottom: 2px solid #eee; }}     
.post-header-line-1 { display: none; }
     iframe, video{width:100%}
     .clearfix::after {content: "";clear: both;display: table;}
     
/* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #eee; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #b30000; }
     
  </style>  
</b:if>    
    

<style>
@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);body,a,div,span,p,h1,h2,h3,h4,h5,h6 {font-family: 'Droid Arabic Kufi', serif !important;} 
  
  
.post-header-line-1 {margin: 10px 0;border-bottom: thin solid #dadce0;}      
.post-footer-line.post-footer-line-2 {margin: 10px 0px;}
.post-labels a { box-shadow: 0 0 2px 0; padding: 0 9px; border-radius: 3px;display: inline-block;margin: 3px; } .post-labels a:hover { background: #dedede; text-decoration: none; } .post-labels a:before { content: "# "; } 
  #content img { display: block; margin-left: auto; margin-right: auto; width: 100%; min-width: 100%; border-radius: 3px; }
  
 #blog-pager a button { background: white; border-radius: 50%; width: 36px; height: 36px; border: 0; box-shadow: 0 0 4px 1px; margin: 5px 2px;outline: 0;cursor: pointer; }
  
 blockquote { box-sizing: border-box; padding: 15px; font-size: 14px; margin: 20px 20px;border-radius: 3px; } 
  blockquote:before { content: "\201D"; font-size: 53px; font-weight: bold; color: #bf0000; }
  blockquote:after { content: "\201C"; font-size: 53px; font-weight: bold; color: #bf0000;margin-right:100% }
  body a {text-decoration: none;font-size: 14px;}body {font-size: 1rem;color: #3e3e3e;}a:hover {text-decoration: underline;}
  b { color: #a50000; }img.icon-action {width: 20px !important;min-width: 11px !important;}
  .blog-posts.hfeed li, .blog-posts.hfeed ol {padding-inline-start: 15px;}
  
  
  
 .widget-content.popular-posts ul { list-style: none;  padding-inline-start: 0; } .PopularPosts .widget-content ul li { padding: .7em 3px; border: thin solid #dadce0; margin: 2px; }
.PopularPosts .item-thumbnail {margin: 0px 0px 0px 5px;} 

.post-author.vcard:before {content: "\f007";font-family: 'FontAwesome';}
.post-timestamp:before { content: "\f017"; font-family: 'FontAwesome'; margin-left: 5px; }
  
.entry-content button { cursor: pointer; background: #fff; border: 0; padding: 5px; outline: 0; box-shadow: 0 0 3px 0px #3e3300; border-radius: 3px; margin: 4px 0; } 
  
</style>
    

<b:skin><![CDATA[

/*body style -------------------------------------*/



/*font style -------------------------------------*/
h1{font-size: 1.6rem}h2{font-size: 1.5rem;color: #c00;}h3{font-size: 1.4rem;color: #c00;}h4{font-size: 1.3rem;color: #c00;}h5{font-size: 1.2rem;color: #c00;}h6{font-size: 1.1rem;color: #c00;}
h2,h3,h4,h5,h6{padding-top: 55px;}




     /*start header css---------------------------------------------------------*/
  .header { display: block; margin: 0 auto; width: 100%; max-width: 100%; box-shadow: 0px 0px 4px 0px; background-color: white; position: fixed;top: 0; height: 48px!important; overflow: hidden; z-index: 10;transition: 0.5s; } .main { margin: 0 auto; display: block; height: 100%;  } .mainInner { display: table; height: 100%; width: 100%; text-align: center; } .mainInner div { display: table-cell; vertical-align: middle; font-size: 3em; font-weight: bold; letter-spacing: 1.25px; } #sideMenu { overflow-y: auto; height: 100%; position: fixed;top:0; left: 0; width: 250px; margin-top: 48px; transform: translateX(-250px); transition: transform 250ms ease-in-out; background: #ffffff; z-index: 1;box-shadow: 0 0 2px 0px; } .sideMenuInner { margin: 0; padding: 0; border-top: 1px solid black; } .sideMenuInner li { list-style: none; color: #fff; text-transform: uppercase; font-weight: bold; padding: 20px; cursor: pointer; } .sideMenuInner li:hover {background:#d6b400} .sideMenuInner li span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.50); } .sideMenuInner li a { color: #000; text-transform: uppercase; font-weight: bold; cursor: pointer; text-decoration: none; } input[type="checkbox"]:checked~#sideMenu { transform: translateX(0); } input[type=checkbox] { transition: all 0.3s; box-sizing: border-box; display: none; } .sideIconToggle { transition: all 0.3s; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 16px; left: 15px; height: 22px; width: 22px; } .spinner { transition: all 0.3s; box-sizing: border-box; position: absolute; height: 3px; width: 100%; background-color: #000; } .horizontal { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } .diagonal.part-1 { position: relative; transition: all 0.3s; box-sizing: border-box; float: left; } .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } input[type=checkbox]:checked~.sideIconToggle>.horizontal { transition: all 0.3s; box-sizing: border-box; opacity: 0; } input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 { transition: all 0.3s; box-sizing: border-box; transform: rotate(135deg); margin-top: 8px; } input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; transform: rotate(-135deg); margin-top: -9px; } #sidenav-overlay { position: fixed; top: 0; left: 0; width: 0; height: 100%; background: rgba(0, 0, 0, .1); cursor: pointer; z-index: 1; } #search-input1{;text-align: center; width:100%;position:fixed ;z-index:999; height:48px; width:100%; top:0;background:white;display:block} #search-input{display:none} .fa {font-size: 24px;vertical-align: middle;} i.fa.fa-search{float:right; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; top: 10px; right: 15px; height: 22px; width: 22px;color:#484848} .header img{width: 160px} i.fa.fa-close { position: absolute; left: 37px; top: 10px; }

.multlevel:after {content: "\f078";font-family: 'FontAwesome';position: absolute;right: 12px;}
 .multlevel, .onelevel { background:#ffffff ; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.9s; } .active, .multlevel:hover { background-color: #e5e5e5; }
.active, .onelevel:hover { background-color: #c1c1c1; }.subitem { padding: 0 ; display: none; background-color: white; overflow: hidden; }
  
  button.fa.fa-search {position: absolute;height: 38px;margin-left: 1px;top: 5px;font-size: medium;right: 37px;width: 92px;background: none; border: 0;} button.fa.fa-search:focus {outline:none}  input[type="search"] {direction: ltr;}#sideMenu a {color: #616161;}
   /*end header css---------------------------------------------------*/

/*start ads header css---------------------------------------------------*/
center {margin: 10px auto;}
  #ads-header { display: inline-block; width: 728px; height: 90px; background: orange; margin-top: 48px; }
@media (max-width: 732px) {#ads-header{display:none}h1{margin-top: 48px;}}
/*end ads header css---------------------------------------------------*/
 


/*start wrapper content css---------------------------------------------------*/





/*end wrapper content css---------------------------------------------------*/


/*start sidebar css---------------------------------------------------*/
#sidebar-content {position: sticky;top: 53px;}
  
@media (max-width: 768px){.col-2 #sidebar-content {display:none}}
/*end sidebar css---------------------------------------------------*/



/*start footer css---------------------------------------------------*/
footer {margin-top: 10px;}
  #social-media{ }
#social-media button {width: 37px; height: 37px; padding: 6px;cursor: pointer;border: 0; box-shadow: 0px 0px 5px 0px black; color: #fff; border-radius: 50%;margin: 0px 3px;}
  #copy-right{ }
  
  #copy-right,#social-media {width:100%;height:48px;text-align: center;padding-top: 20px;}

/*end header css---------------------------------------------------*/
  
     

 

        
]]></b:skin>
    
    
<!--read more-->    
<script type='text/javascript'>
posts_no_thumb_sum = 190;
posts_thumb_sum = 100;
img_thumb_width = 192;
img_thumb_height = 108;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float: right;margin-left: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerText,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
  .readmore {  margin-top: 20px; }
 .readmore a {text-decoration: none; }.posts-thumb { width: 35%; }
</style>
</b:if>
</b:if>    
<!--read more-->    
    
 
    
   
</head>
<body>


  
  
  
  
  
  <header>
  <div class='row'>
  <div class='col-10'>
  
<div class='header'>
<div id='header-nav'>  
  
<center>
  <style>
  .search-box{position: relative; top: 5px; height: 38px; width: 50%;border: 0;border-bottom: 2px solid #b5b5b5; font-size: 1.2rem;}input.search-box:focus {outline: none; border-bottom: 2px solid #b79803;}
    @media screen and (max-width: 240px){ #search-input1, .header img,i.fa.fa-search { display: none; }}
  @media screen and (min-width: 240px){.search-box{width: 70%;right: 6px;} button.fa.fa-search {right: 5px;width: 40px;}i.fa.fa-close {left: 0px;width: 40px;}}
    @media screen and (min-width: 400px){ button.fa.fa-search {right: 5px;width: 57px;}}
    @media screen and (min-width: 618px){ button.fa.fa-search {right: 5px;width: 92px;}}
    @media screen and (min-width: 828px){ button.fa.fa-search {right: 37px;}i.fa.fa-close {left: 37px;}}
</style>
<form action='/search' id='search-input'>
  <i class='fa fa-close' onclick='document.getElementById('search-input1').id='search-input'' style='float:left'/>
  <input autocomplete='off' class='search-box' name='q' placeholder='search...' type='search' value=''/><button class='fa fa-search' style='float:right'/>
</form>
</center>

  
<i class='fa fa-search' onclick='document.getElementById('search-input').id='search-input1''/>
<a href='/' style='position: absolute; top: 9px; left: 50px; text-decoration: none;'><img alt='Manajmnt code' src='https://lh3.googleusercontent.com/-kxWYbFz10J8/YFkDFPgGXlI/AAAAAAAADKk/LvwV8xJ11wU3cVAExGfF6KaJGdlYI8fUQCLcBGAsYHQ/h63/manajmnt_code_logo.png' title='Manajmnt code'/> </a>


<div id='sidebarContainer'>
  <input class='openSideMenu' id='openSideMenu' type='checkbox'/>
<label class='sideIconToggle' for='openSideMenu'>
    <div class='spinner diagonal part-1'/>
    <div class='spinner horizontal'/>
    <div class='spinner diagonal part-2'/>
  </label>
  

  <div id='sideMenu'>
    
    
    <ul class='sideMenuInner'>
      <!--onelevel-->
      <button class='onelevel'><a data-toggle='tab' href='/search/label/Manajmnt-Tools' onclick='hideSidebar()'>Manajmnt-Tools</a></button>
      <button class='onelevel'><a data-toggle='tab' href='/search/label/blogger' onclick='hideSidebar()'>blogger</a></button>
      <button class='onelevel'><a data-toggle='tab' href='/search/label/HTML' onclick='hideSidebar()'>HTML</a></button>
      <button class='onelevel'><a data-toggle='tab' href='/search/label/CSS' onclick='hideSidebar()'>CSS</a></button>
      <button class='onelevel'><a data-toggle='tab' href='/search/label/JavaScript' onclick='hideSidebar()'>JavaScript</a></button>
      <button class='onelevel'><a data-toggle='tab' href='/search/label/jquery' onclick='hideSidebar()'>jquery</a></button>
      <button class='onelevel'><a data-toggle='tab' href='/search/label/Framework_Front-End' onclick='hideSidebar()'>Framework Front-End</a></button>
      
      <!--onelevel-->

      
    </ul>
  </div>

</div>
<script type='text/javascript'>
//<![CDATA[
function hideSidebar() {
  document.getElementById('openSideMenu').checked = false;
}

var sideIconToggle = document.getElementById('sidebarContainer');

document.addEventListener('click', function(event) {
  if (!sidebarContainer.contains(event.target))
    hideSidebar();
});
//]]>
</script>
  
<script>
  //<![CDATA[
var acc = document.getElementsByClassName("multlevel");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var subitem = this.nextElementSibling;
    if (subitem.style.display === "block") {
      subitem.style.display = "none";
    } else {
      subitem.style.display = "block";
    }
  });
}
//]]>
</script>


  
  </div>
  
</div>
    
    </div></div>
  </header>
<div class='clearfix'/>
  
 <center>
<div id='ads-header'> 
   <b:section class='ads-h' id='ads-h' showaddelement='yes'>
      <b:widget id='HTML1' locked='true' title='' type='HTML'>
        <b:widget-settings>
          <b:widget-setting name='content'><![CDATA[<div class="ads"></div>]]></b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
      </b:widget>
    </b:section>
    
    </div>
  <div class='clearfix'/>
 </center>


  
  
  <div class='container wrapper'>
<div class='row'>
  <div class='col-2'>
    <div id='sidebar-content'>
  <center>
    
    <b:section class='sidebar1' id='sidebar1' showaddelement='yes'>
      <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
        <b:widget-settings>
          <b:widget-setting name='numItemsToShow'>7</b:widget-setting>
          <b:widget-setting name='showThumbnails'>true</b:widget-setting>
          <b:widget-setting name='showSnippets'>false</b:widget-setting>
          <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, "1:1")                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
      </b:widget>
    </b:section>
    </center>
    </div>
    
    
    
    
    
    
    
    
  </div>
  <div class='col-5'>
    
  <div id='content'>
    <b:if cond='data:blog.pageType == "index"'>
<b:section class='sliderrecent-post' id='sliderrecent-post' showaddelement='yes'>
  <b:widget id='HTML4' locked='false' title='' type='HTML'>
    <b:widget-settings>
      <b:widget-setting name='content'><div id="slider-recentpost">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" type="text/css" />
 <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" type="text/css" />
<style>

  .recent-post .owl-item img {
    display: block;
    width: 100%;
    height: 330px;
}
  .recent-post .title-recpost{display:none}
.recent-post .item:hover .title-recpost{
    display: flex;
position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
   justify-content: center;
    align-items: center;
    color:white;
    transition: 0.5s;
   background: #0000008c;
    text-decoration:none;text-align: center;
}
  
.recent-post .term{position:absolute; left: 4; border-radius: 3px; background:red; color:white; padding: 0 8px;}


#slider-recentpost{position:relative; top:12px}
@media(max-width:732px){#slider-recentpost{top:50px}}



</style>


      <div class='owl-carousel recent-post'></div>
<script style='display:none' type='text/javascript'>
   //<![CDATA[
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
         
          break;}}
      var postTitle = json.feed.entry[i].title.$t;
      var term= json.feed.entry[i].category[0].term;
      if (json.feed.entry[i].media$thumbnail != null){
       
       var thumbnail= json.feed.entry[i].media$thumbnail.url.replace(/\/s72\-c\//,'/s600/');
        var item = '<div class="item"><p class="term">'+term+'</p><img class="rpostimg" src='+ thumbnail +' /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>';
            }
      else{
         var item = '<div class="item"><p class="term">'+term+'</p><img class="rpostimg" src="https://cdn.pixabay.com/photo/2015/05/31/10/55/tablet-791051_960_720.jpg" /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>';
      }
      var doc=document.createElement("div");
      doc.className="item";
      doc.innerHTML=item;
      document.getElementsByClassName('recent-post')[0].appendChild(doc)
      
    }
  }
   //]]>
</script>
 <script id='rcp' src='/feeds/posts/summary?max-results=5&alt=json-in-script&callback=mycallback'></script>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
    <script type='text/javascript'>
  (function ($) {
    'use strict';
    $('.owl-carousel').owlCarousel({
        rtl:true,
loop:true,
        margin:10,
        nav:false,
        dots:false,
      autoplay:true,
    autoplayTimeout:3000,
      autoplayHoverPause:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    })

  })(jQuery); 
  </script>

</div></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</b:if>
    
    
    
   <b:section class='main' id='main' showaddelement='yes'>
     <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
       <b:widget-settings>
         <b:widget-setting name='commentLabel'>Comments</b:widget-setting>
         <b:widget-setting name='showShareButtons'>true</b:widget-setting>
         <b:widget-setting name='authorLabel'>كتابة :</b:widget-setting>
         <b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
         <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
         <b:widget-setting name='timestampLabel'>last update</b:widget-setting>
         <b:widget-setting name='reactionsLabel'/>
         <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
         <b:widget-setting name='style.layout'>1x1</b:widget-setting>
         <b:widget-setting name='showLocation'>false</b:widget-setting>
         <b:widget-setting name='showTimestamp'>true</b:widget-setting>
         <b:widget-setting name='postsPerAd'>1</b:widget-setting>
         <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
         <b:widget-setting name='backlinksLabel'>روابط هذه الرسالة</b:widget-setting>
         <b:widget-setting name='showDateHeader'>false</b:widget-setting>
         <b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
         <b:widget-setting name='showCommentLink'>true</b:widget-setting>
         <b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
         <b:widget-setting name='showAuthor'>true</b:widget-setting>
         <b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
         <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
         <b:widget-setting name='showLabels'>true</b:widget-setting>
         <b:widget-setting name='postLabelsLabel'> </b:widget-setting>
         <b:widget-setting name='showBacklinks'>false</b:widget-setting>
         <b:widget-setting name='showInlineAds'>true</b:widget-setting>
         <b:widget-setting name='showReactions'>false</b:widget-setting>
       </b:widget-settings>
       <b:includable id='main' var='top'>
  <b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          </div></div>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          <div class="date-outer">
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          <div class="date-posts">
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
        </div>

        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        </div></div>
      </b:if>
    </div>

    <!-- navigation -->
    <b:include name='nextprev'/>

    <!-- feed links -->
    <b:include name='feedLinks'/>

  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>

  <b:include cond='data:top.showPlusOne' name='googlePlusBootstrap'/>
</b:includable>
       <b:includable id='backlinkDeleteIcon' var='backlink'/>
       <b:includable id='backlinks' var='post'/>
       <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></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-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <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-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
    </script>
  </div>
</b:includable>
       <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='"item-control " + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
        <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
  </span>
</b:includable>
       <b:includable id='comment_count_picker' var='post'>
  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <data:post.commentLabelFull/>:
  </a>
</b:includable>
       <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </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><data:post.commentLabelFull/>:</h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
               
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
               
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
             
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
             
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
           
          <data:post.commentRangeText/>
           
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <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:elseif cond='data:post.allowComments'/>
          <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
        </b:if>
        <b:if cond='data:post.showManageComments'>
          <a expr:href='data:post.manageCommentsUrl' expr:onclick='data:post.manageCommentsOnclick'><data:manageCommentsMsg/></a>
        </b:if>
      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

  </div>
</b:includable>
       <b:includable id='feedLinks'>
  <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds' style='display:none'>
        <b:include data='feedLinks' name='feedLinksBody'/>
      </div>
    </b:if>

  <b:else/> <!--Post feed links -->
    <div class='post-feeds' style='display:none'>
      <b:loop values='data:posts' var='post'>
        <b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
      </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' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>
       <b:includable id='iframe_comments' var='post'>
  <!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</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'>&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:include cond='data:blog.pageType != "static_page"                          and data:post.allowComments                          and data:post.numComments != 0' data='post' name='comment_count_picker'/>
      </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 == "index"'>
        <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='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><button class='fa fa-chevron-right'/></a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><button class='fa fa-chevron-left'/></a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><button class='fa fa-home'/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><button class='fa fa-home'/></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'>
            <h1 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            </h1>
          </b:if>

          <div class='post-header'>
            <div class='post-header-line-1'/>
          </div>

          <div class='post-body entry-content' expr:id='"post-body-" + 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' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='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.url.canonical' itemprop='url'/>
                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>

              <span class='post-comment-link'>
                <b:include cond='data:blog.pageType not in {"item","static_page"}                                  and data:post.allowComments' data='post' name='comment_count_picker'/>
              </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-share-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.dummyTag/></div>
              </b:if>
              
              
              
              
              
            </div>

          </div>
        </div>

        <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
      </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='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><button class='fa fa-chevron-left'/></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='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><button class='fa fa-chevron-right'/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><button class='fa fa-home'/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>
       <b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' 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'>
      <h1 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h1>
    </b:if>

    <div class='post-header'>
    <div class='post-header-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' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='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.url.canonical' itemprop='url'/>
                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>
      </div>
    </div>

    <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
      
<!--read more-->
      <b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
 <span class='readmore' style='float:left;'><a expr:href='data:post.url'><button style='outline: 0; cursor: pointer; background: #ffffff; box-shadow: 0 0 2px 0; border: 0; font-family: Droid Arabic Kufi;' title='Show more'> Show more ... </button></a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
  
  <!--here article exist -->

<data:post.body/>
  
 
  
  <!--here article exist --> 
      </b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
      <!--read more-->
      
      
      <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 + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
      

      <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> </td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span>

      <span class='post-comment-link'>
        <b:include cond='data:blog.pageType not in {"item","static_page"}                          and data:post.allowComments' data='post' name='comment_count_picker'/>
      </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.emailPostMsg'>
            <img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>

      <!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>
      
      
      <div id='post-share'>
  


<style>
.share-button {display: none !important;}
  #share-item { padding: 10px 30px; width: max-content; }
      #share-item button.fa{font-size: 20px;color:#2d2d2d;margin:0 5px;background:#f3f3f3 ;border-radius:50%; padding:3px; width:30px; height: 30px; border:0; box-shadow:0 0 5px 0px; transition: 0.5s;outline: 0;}
 #share-item button.fa:hover { background:radial-gradient(#f7cf05, #b79900); color: white; text-shadow: 0 0 4px #ffc107; transform: rotate( 360deg ); box-shadow: 0 0 3px 2px; transition: 0.6s; cursor: pointer; }
button.fa-img.gmail {background: url(https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_rtl_r2.png);}button.fa-img.blogger {background: url(https://www.blogger.com/img/logo_blogger_40px.png);background-position-x: 30px;border:0}
button.fa-img.blogger, button.fa-img.gmail{background-size: cover; background-position-x: 26px; border-radius: 50%; width: 30px; height: 30px; border: 2px solid #f3f3f3; box-shadow: 0 0 5px 0; margin: 0 5px; padding: 3px; transition: 0.5s; outline: 0; cursor:pointer}
  
</style>
  <center>
<div id='share-item'>
  <p> Share to :</p>
 <b:if cond='data:top.showEmailButton'>
  <a expr:href='data:post.sharePostUrl + "&target=email"' target='_blank' title='emailThis'><button class='fa-img gmail'/></a>
</b:if>

<b:if cond='data:top.showBlogThisButton'><a expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><button class='fa-img blogger'/></a></b:if><hr/>

  
  
<a class='facebook' target='_blank' title='share to facebook'><button class='fa fa-facebook'/></a>
<a class='twitter' target='_blank' title='share to twitter'><button class='fa fa-twitter'/></a>
  <a class='pinterest' href='https://www.pinterest.com/pin-builder/?url=' target='_blank' title='share to pinterest'><button class='fa fa-pinterest'/></a>
<a class='reddit' target='_blank' title='share to reddit'><button class='fa fa-reddit'/></a>
  <a class='linkedin' target='_blank' title='share to linkedin'><button class='fa fa-linkedin'/></a>
</div>
   
  </center>
<script>
var share_item= document.getElementById("share-item");
var share_facebook=share_item.getElementsByClassName("facebook")[0].href="https://facebook.com/sharer.php?u="+location.href;
  var share_pinterest=share_item.getElementsByClassName("pinterest")[0].href="https://pinterest.com/pin/create/button/?url="+location.href;
  var share_twitter=share_item.getElementsByClassName("twitter")[0].href="https://twitter.com/intent/tweet?url="+location.href;
 
  var share_reddit=share_item.getElementsByClassName("reddit")[0].href="https://www.reddit.com/submit?url="+location.href;
  var share_linkedin=share_item.getElementsByClassName("linkedin")[0].href="https://www.linkedin.com/uas/login?session_redirect="+location.href;

</script>
  </div>

      <!--related post-->
      
            <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' rel='stylesheet' type='text/css'/>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css' rel='stylesheet' type='text/css'/>
<style>
.related_post img {width:100%; height:150px} 
.related_post .item{background:white; }

</style>

      

  
  
  <b:if cond='data:blog.pageType == "item"'>
    <script style='display:none' type='text/javascript'>
   //<![CDATA[
  function related_post(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
         
          break;}}
      var postTitle = json.feed.entry[i].title.$t;
      var term= json.feed.entry[i].category[0].term;
      if (json.feed.entry[i].media$thumbnail != null){
       
       var thumbnail= json.feed.entry[i].media$thumbnail.url.replace(/\/s72\-c\//,'/s300/');
        var item = '<img src='+ thumbnail +' /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a>';
            }
      else{
         var item = '<img src="https://cdn.pixabay.com/photo/2015/05/31/10/55/tablet-791051_960_720.jpg" /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a>';
      }
      var doc=document.createElement("div");
      doc.className="item";
      doc.innerHTML=item;
      document.getElementsByClassName('owl-carousel related_post')[0].appendChild(doc)
      
    }
  }
   //]]>
</script>
    <div class='owl-carousel related_post'/>
    
  <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'/>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_post&max-results=6"' type='text/javascript'/></b:loop>
  
  <div style='clear:both'/><!-- remove --></b:if>
  


    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'/>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'/>
    <script type='text/javascript'>
  (function ($) {
    'use strict';
    $('.owl-carousel.related_post').owlCarousel({
      rtl:true,
        loop:true,
        margin:10,
        nav:false,
        dots:false,
      autoplay:true,
    autoplayTimeout:1500,
      autoplayHoverPause:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:3
            }
        }
    })

  })(jQuery); 
  </script>






      
      
      <!--related post-->

      </div>

      <div class='post-footer-line post-footer-line-2'>
      <span class='post-labels'>
        <b:if cond='data:top.showPostLabels and 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='not data:label.isLast'> </b:if>
          </b:loop>
        </b:if>
      </span>
        
        

        
        
        
      </div>

      <div class='post-footer-line post-footer-line-3'>
      <span class='post-location'>
        <b:if cond='data:top.showLocation and data:post.location'>
          <data:postLocationLabel/>
          <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
        </b:if>
      </span>
      </div>
      <b:if cond='data:post.authorAboutMe'>
        <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
          <b:if cond='data:post.authorPhoto.url'>
            <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
          </b:if>
          <div>
            <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
              <span itemprop='name'><data:post.author/></span>
            </a>
          </div>
          <span itemprop='description'><data:post.authorAboutMe/></span>
        </div>
      </b:if>
    </div>
  </div>
</b:includable>
       <b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='https://resources.blogblog.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 + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' 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.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
</b:includable>
       <b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap' style='display:none'>
    <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-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' 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-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
    </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) {
        var text = (entry &&
                    ((entry.content && entry.content.$t) ||
                     (entry.summary && entry.summary.$t))) ||
            '';
        if (entry && entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + text + '</span>';
            }
          }
        }
        return text;
      }

      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].href);
                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].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  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)) {
          replybox.src = '';
          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:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
      <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>
      <b:if cond='data:post.showManageComments'>
        <a expr:href='data:post.manageCommentsUrl' expr:onclick='data:post.manageCommentsOnclick'><data:manageCommentsMsg/></a>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
      <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
    </div>
    </div>
  </div>
</b:includable>
     </b:widget>
     <b:widget id='HTML2' locked='false' title='' type='HTML'>
       <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
     </b:widget>
   </b:section>
    

    </div>
    

    
   
    
    
    
    
    
    
  </div>
  <div class='col-3'>
  <div id='sidebar-content'>
     <center>
    
    <b:section class='sidebar2' id='sidebar2' showaddelement='yes'>
      <b:widget id='HTML3' locked='false' title='' type='HTML'>
        <b:widget-settings>
          <b:widget-setting name='content'><![CDATA[<div class="ads"></div>]]></b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
      </b:widget>
      <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
        <b:widget-settings>
          <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
          <b:widget-setting name='showThumbnails'>true</b:widget-setting>
          <b:widget-setting name='showSnippets'>false</b:widget-setting>
          <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, "1:1")                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
      </b:widget>
    </b:section>
    </center>
    </div>
    </div>
    </div>
    
   
</div>


  
  
  <center id='ads-footer'>

  </center>
  
  <div class='clearfix'/>
<footer style='box-shadow: 0px -1px 2px 0px; margin-top: 20px;'>
 
<center><div id='social-media'> 
  
<a class='facebook' href='#' target='_blank'><button class='fa fa-facebook' style='background: #3b5998'/></a>
<a class='twitter' href='#' target='_blank'><button class='fa fa-twitter' style='background: #1da1f2'/></a>
<a class='youtube' href='https://www.youtube.com/channel/UC3IPFwc-Cuak2HTNPHf_w7A' target='_blank'><button class='fa fa-youtube' style='background: #ff0000'/></a>
<a class='pinterest' href='#' target='_blank'><button class='fa fa-pinterest' style='background: #bd081c;'/></a>
<a class='reddit' href='#' target='_blank'><button class='fa fa-reddit' style='background: #ff4500'/></a>
<a class='linkedin' href='#' target='_blank'><button class='fa fa-linkedin' style='background: #0077b5'/></a>  
  
</div></center>
  
<center><div id='copy-right'>
  <a expr:title='data:blog.title' href='/'><data:blog.title/></a>
        ©
<span id='copyright'><script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script></span>
    
  </div></center>
 
  
  
</footer>

  
  
  
  
  
  
  
<!--script-->  
  

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

var navbar = document.getElementById("sidebar-content");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
  navbar.classList.add("sticky")
  } else {
  navbar.classList.remove("sticky");
  }
}

//]]>
</script>
  
  
      
<!--Maintain Optimal Dimensions-->

<script>
 function MOD (){
  var wimg = document.getElementsByClassName("post-body entry-content")[0].offsetWidth;
  var himg= (wimg * 1080)/1920;

var imgstyle=document.createElement("style");

 imgstyle.innerHTML=".rpostimg,.separator img, #content iframe,#content video{width:100%;height:"+himg+"px !important}";
  document.body.appendChild(imgstyle)
}
window.onload=MOD ;
window.onresize=MOD;

</script>
<!--Maintain Optimal Dimensions-->

  
  

  
  
 <!--gototop-->
<style>
#Gototop {display: none; position: fixed; bottom: 20px; left: 30px; z-index: 99; font-size: 20px; border: none; outline: none; background-color: white; color: #020202; cursor: pointer; padding: 6px; border-radius: 50%; box-shadow: 0 0 3px 1px;}#Gototop:hover {background-color: #555;}
</style>
<button class='fa fa-arrow-circle-up' id='Gototop' onclick='topFunction()' title='Go to top'/>
<script>
  //<![CDATA[
//Get the button
var mybutton = document.getElementById("Gototop");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
//]]>
</script>  
<!--gototop--> 
  
  
   <!--hide navbar onscroll-->
<script>

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  
  if (prevScrollpos >= currentScrollPos ) {
    document.getElementsByClassName("header")[0].style.top = "0";
  document.getElementById("sideMenu").style.marginTop = "48px";
  }

  
  else {
    document.getElementsByClassName("header")[0].style.top = "-50px";
	document.getElementById("sideMenu").style.marginTop = "0px";

  }
  prevScrollpos = currentScrollPos;
}

</script>
<!--hide navbar onscroll-->   
  
  

  
  
  
<!--script-->

</body>
</html>
Categories

Manajmnt blogger free template100% without copyright [ blogger free templates ]

Comments

Post a Comment

Trending

Meta keywords generator for Blogger

blogger meta description generator

Friendly url converter for blogger

What is CSS Language?

custom PayPal button html code
