كيفية إضافة مشاركة مميزة في الصفحة الرئيسية لمدونات بلوجر

مدونة هوم بلوجر مدونة عربية عصرية تهم بكل ماهو جديد في عالم التدوين.

by homeblogger

HTML

<div class="ribbon featured-post-banner ribbon-color">
    <div class="banner">
        <div class="text">مشاركة مميزة</div>
    </div>
</div>
<div style='background:white;padding:10px;margin-top:10px;border-left:5px solid #5BC3EE; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.38);'>

<div class="post-outer">
<article class="post hentry" id="4836450855659460801">
<a class="post_thumb" href="http://homeblog7.blogspot.com/2015/08/2015_28.html" title="قالب استارت بلوجر الإحترافي 2015"><img alt="قالب استارت بلوجر الإحترافي 2015" class="post_thumb" src="http://3.bp.blogspot.com/-CTP-CS6aQ-s/VeCZ1nJVIwI/AAAAAAAAEIY/RW56k_-jopI/s250/%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8%2B%25D8%25A7%25D8%25B3%25D8%25AA%25D8%25A7%25D8%25B1%25D8%25AA%2B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1%2B%25D8%25A7%25D9%2584%25D8%25A5%25D8%25AD%25D8%25AA%25D8%25B1%25D8%25A7%25D9%2581%25D9%258A%2B2015.jpg" width="250" height="250" style="display: inline;"></a>
<h2 class="post-title entry-title"><span>
<a href="http://homeblog7.blogspot.com/2015/08/2015_28.html" title="قالب استارت بلوجر الإحترافي 2015">قالب استارت بلوجر الإحترافي 2015</a>
</span></h2>
<div class="post-body entry-content" id="post-body-4836450855659460801">
<div class="post-body">
</div>
<div style="clear: both;"></div>
</div>
<div style="display:none">
<a href="http://homeblog7.blogspot.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1" rel="tag">قوالب بلوجر</a>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1"><span class="post-author vcard">
مرسلة بواسطة
<span class="fn">
<a href="https://plus.google.com/107922803903972641858" rel="author" title="author profile">
Home Blogger
</a>
</span>
</span>
<span class="post-timestamp">
في
<a class="timestamp-link" href="http://homeblog7.blogspot.com/2015/08/2015_28.html" rel="bookmark" title="permanent link"><abbr class="published" title="2015-08-28T20:33:00+03:00">8/28/2015</abbr></a>
</span>
<span...

CSS

/* Featured Post By www.homeblog7.blogspot.com */
.ribbon {
 position: relative;
 top: 0;
 right: 0;
}
.ribbon a {
 color: #fff;
 text-decoration: none;
}
.ribbon .banner {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 color: #fff;
 -webkit-font-smoothing: antialiased;
 display: block;
 float: right;
 position: relative;
 right: -14px;
 top: 22px;
 width: 100px;
}
.featured-post-banner .banner {
 right: -8px;
 top: 15px;
 width: 65px;
}

.ribbon .banner::after,
.ribbon .banner::before {
 content: '';
 display: block;
 height: 12px;
 position: absolute;
 width: 30px;
}
.featured-post-banner .banner::after,
.featured-post-banner .banner::before {
 height: 6px;
 width: 20px;
}

.ribbon .banner::before {
 -webkit-transform: skewY(-45deg) translate(50%,15px);
 -moz-transform: skewY(-45deg) translate(50%,15px);
 -ms-transform: skewY(-45deg) translate(50%,15px);
 -o-transform: skewY(-45deg) translate(50%,15px);
 -webkit-transform-origin: 100% center;
 -moz-transform-origin: 100% center;
 -ms-transform-origin: 100% center;
 -o-transform-origin: 100% center;
 left: -45px;
}
.featured-post-banner .banner::before {
 top: -5px;
 left: -30px;
}
.ribbon .banner::after {
 -webkit-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -moz-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -ms-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -o-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -webkit-transform-origin: 0 center;
 -moz-transform-origin: 0 center;
 -ms-transform-origin: 0 center;
 -o-transform-origin: 0 center;
 right: -17px;
}
.featured-post-banner .banner::after {
 top: 18px;
 right: -12px;
}
.ribbon .text {
 position: relative;
 z-index: 2;
 padding: 6px 0;
 font-size: 12px;
 font-weight: bold;
 min-height: 18px;
 line-height: 18px;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20);
 white-space:...