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

السلام عليكم ورحمة الله وبركاته

أعضاء وزوار مدونة هوم بلوجر أسعد الله أوقاتكم بكل خير ومحبة

أحبائي اليوم في درسنا هذا سوف نتعرف على طريقة إضافة مشاركة مميزة في الصفحة الرئيسية لمدونات بلوجر .

- طريقة تركيب الإضافة :

1- أدخل إلى مدونتك ثم أختر تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- ضع الكود التالي فوقه .

 /* 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: nowrap;
 text-overflow: ellipsis;
}
/* text */
.featured-post-banner .text {
 padding: 3px 0;
 font-size: 8px;
 min-height: 14px;
 line-height: 14px;
}
.ribbon .text::before,
.ribbon .text::after {
 content: '';
 display: block;
 height: 30px;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: -1;
}
/* text */
.ribbon.featured-post-banner .text::before,
.ribbon.featured-post-banner .text::after {
 height: 20px;
}

.ribbon .text::before {
 -webkit-transform: translateX(-15%) skewX(-45deg);
 -moz-transform: translateX(-15%) skewX(-45deg);
 -ms-transform: translateX(-15%) skewX(-45deg);
 -o-transform: translateX(-15%) skewX(-45deg);
}

.ribbon .text::after {
 -webkit-transform: translateX(15%) skewX(45deg);
 -moz-transform: translateX(15%) skewX(45deg);
 -ms-transform: translateX(15%) skewX(45deg);
 -o-transform: translateX(15%) skewX(45deg);
}
/*--- RIBBON COLORS ---*/
.ribbon-color .banner::after,
.ribbon-color .banner::before {
 background-color: #5BC3EE;
}
.ribbon-color .text::before,
.ribbon-color .text::after,
.ribbon-color .text {
 background-color: #5BC3EE;
}

4- بعد إذهب إلى أي مشاركة من مشاركاتك التي تريد أن تجعلها " مشاركة مميزة " وضغط علية بزر الماوس كللك يمين ثم أختر من القائمة فحص العنصر ، كما بالصورة التالية :

5- بعد ذلك سوف تظهر لك قائمة فحص العنصر أختر منها <div class="post-outer"> اضغط عليها بزر الفأرة ثم كلك يمين وأختر Edit as HTML بالضغط عليها بزر الفأر كما بالصورة التالية :

6- بعد ذلك سوف تفتح لك قائمة تحتوي على أكواد المشاركة المميزة كلك يمين عليها بالفأرة ثم أختر تحديد الكل ثم أنسخ الكود

وضعه في صفحة النوتباد ، كما بالصورة التالية :

7- بعد ذلك اذهب إلى تخطيط ثم أختر إضافة أداة HTML/JavaScript واللصق الكود التالي في صتدوق الأداة ثم إحفظ .

<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>

وأخيراً نترككم برعاية المولى وتوفيقه .