Manajmnt blogger free template100% without copyright [ blogger free templates ]
Template features:
<?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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7lNTMtj6yE1Gr2S0vL5ZghGYpKfi9d-yWdm988TLmgGnE8Y_L-Rcol3fX7faRLGH5mDSV41eY52mKRoeh-F1wyUAaZpTsjbAXoHMIbaN7yKEgmqzeb1nXtcCSIno_qDZ9lZVgzSFrVSA/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'>›</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>
© 2025 Manajmnt code
emplate?
ReplyDeletewww.americazone.net