السلام عليكم مرحبا بكم في مدونة عبدو تكنولوجي اليوم اقدم لكم شكل جديد من هيدر فوق المواضيع هوا هيدر تكون فيه معلومات التدوينة و عنوانها و شكل اليوم يمتاز ب عنوان رائع و اسم الكاتب و وقت النشر و كم من معلق على الموضوع و في الاسفل نلاحظ ازرار مشاركة الموضوع بأحترافية لمعاينة الكوفر من هنا
http://www.abdoutech.com/2017/08/cover-post-blogger.html
ضع هذا فوق ال
</head>
-------------------------------------------
<style>
.cover-post {margin: 0;margin-bottom: 10px;padding: 115px;background: rgb(34, 34, 34);overflow: hidden;position: relative;text-align: center;height: 350px;}
.in-cover-post {position: relative;z-index: 10;}
.author-pic {width: 60px;border-radius: 50%;border: 3px solid #FFF;margin: 0px 0px 0 0;float: right;}
h1.post-title.entry-title {display: none;color: #FFFFFF;font-size: 20px;font-weight: 100;padding: 10px 5px;margin: 0;margin-bottom: 15px;font-family: Neo;border-bottom: none;}
.cover-post h1.post-title.entry-title {display: block;}
.c-posts-info a {display: inline-block;margin-left: 10px;font-family: Neo;font-size: 15px;color: #fff;}
img.backimg {position: absolute;top: 0;right: 0;left: 0;width: 100%;height: 100%;opacity: 0.3;-webkit-filter: blur(4px);-moz-filter: blur(4px);}
.writer::before{display:-moz-inline-box;display:-webkit-inline-box;content:"\f007";font-family:fontawesome;margin:-1px 17px 0 5px}
.timer::before{display:-moz-inline-box;display:-webkit-inline-box;content:"\f073";font-family:fontawesome;margin:0 0 0 5px}
.commenterr::before{display:-moz-inline-box;display:-webkit-inline-box;content:"\f086";font-family:fontawesome;margin:0 0 0 5px}
.c-posts-info {padding: 10px;}
.share-box2 span {display: inline-block;font-family: Neo;color: #fff;font-size: 16px;}
.share-art2 {display: inline-block;padding:0;padding-top:0;font-size:13px;font-weight:500;font-family: Neo;text-transform:capitalize;text-align:left}
.share-art2 a{height: 30px;line-height: 35px;color: #fff;padding: 0px 10px;margin-right: 4px;border-radius: 2px;display: inline-block;margin-left: 0;}
.share-art2 a:hover{color:#fff}
.share-art2 .fac-art i{padding-left:2px}
.share-art2 .fac-art{background:#3b5998}
.share-art2 .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art2 .twi-art{background:#00acee}
.share-art2 .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art2 .goo-art{background:#db4a39}
.share-art2 .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art2 .pin-art{background:#CA2127}
.share-art2 .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art2 .lin-art{background:#0077B5}
.share-art2 .lin-art:hover{background:rgba(0,119,181,0.7)}
@media screen and (max-width: 600px) {
.cover-post {margin: 0;margin-bottom: 10px;padding: 50px 20px;background: rgb(34, 34, 34);overflow: hidden;position: relative;text-align: center;height: 350px;}
}
</style>
<script type='text/javascript'>
$(function(){
$( ".cover-post" ).appendTo( ".abdoutechnologiecover" );
});
</script>
هذا تابع الشرح لكي تعرف اين تضعه
-------------------------------------------
<b:if cond='data:blog.pageType == "item"'>
<div class='cover-post'>
<div class='in-cover-post'>
<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>
<div class='postmetandshare'>
<div class='c-posts-info'>
<a class='writer'><data:post.author/></a>
<a class='timer'><data:post.date/></a>
<a class='commenterr'><data:post.numComments/></a>
</div>
</div>
<div class='share-box2'>
<span> شارك الموضوع : </span>
<ul class='share-art2'>
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook-official'/><span class='resp_del'/></a>
<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'/></a>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'/></a>
<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/></a>
<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/></a>
</ul>
</div>
</div>
<img class='backimg' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
ضع هذا في المكان الذي تريد ان يضهر فيه الكوفر
-------------------------------------------
<div class='abdoutechnologiecover'/>
ليست هناك تعليقات:
إرسال تعليق