تغيير شكل مشاركة مميزة إلى شكل احترافي وجميل

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


تركيب اكواد تغيير شكل مشاركة مميز إلى شكل احترافي
توجه إلى لوحة التحكم في المدونة
تأكد من تفعيل إضافة مشاركة مميز من التخطيط.
بعد التأكد من تفعيل الإضافة توجه إلى المظهر تم تحرير HTML تم ابحث عن

<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>

قم باغلاقة عن طريق الضغط على المساحة الفارغة قبل رقم السطر في اليسار تم حدد علية الى ان تصل  </b:widget> واستبدلة بكود التالي
Change-FeaturedPost-from-professional-blogger
الكود هنا

  <b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>
    <b:widget-settings>
      <b:widget-setting name='showSnippet'>true</b:widget-setting>
      <b:widget-setting name='showPostTitle'>true</b:widget-setting>
      <b:widget-setting name='showFirstImage'>true</b:widget-setting>
      <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <b:include name='content'/>

  <b:include name='quickedit'/>
</b:includable>
    <b:includable id='content'>

<div class='item-list'>
<div class='item item-1'>
<div class='img'><a href='javascript:;'>
<div class='like'><i aria-hidden='true' class='fa fa-heart'/></div></a>

<a expr:href='data:postUrl'>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      &lt;div class=&quot;img-content&quot; style=&quot;background-image: url(<data:postFirstImage/>);&quot;&gt;&lt;/div&gt;
    </b:if>
  </a>

</div>
<div class='social'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:postUrl' target='_blank'>
<div class='fb'><i aria-hidden='true' class='fa fa-facebook'/></div></a>
<a expr:href='&quot;whatsapp://send?text=&quot; + data:postUrl' target='_blank'><div class='ig'><i aria-hidden='true' class='fa fa-whatsapp'/></div></a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:postUrl' target='_blank'><div class='tw'><i aria-hidden='true' class='fa fa-twitter'/></div></a></div>
<div class='text-container'>
<div class='title'><b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
     <a expr:href='data:postUrl'><data:postTitle/></a>
    </b:if></div>
<div class='content'>
<p><data:postSummary/></p>
</div>
<div class='readmore'>
  <h4><a expr:href='data:postUrl'>أقراء المزيد</a></h4>
</div>
</div>
</div>
</div>


  <style type='text/css'>
.item {
    width: 100%;
    background: #fff;
    position: relative;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border-bottom: 3px solid #c9c9c9;
    overflow: hidden;
}
.item .img {
    width: 100%;
    height: 195px;
    background: black;
    border-radius: 10px 10px 0 0;
    z-index: 5;
    overflow: hidden;
    display: block;
}
.item .img-content {
  width: 100%;
  height: 100%;
  transition: 0 !important;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/26th_Tokyo_International_Film_Festival-_Tom_Hanks_from_Captain_Phillips_%2814970103713%29.jpg/640px-26th_Tokyo_International_Film_Festival-_Tom_Hanks_from_Captain_Phillips_%2814970103713%29.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.item.showfull .text-container {
  height: 90%;
}
.item.showfull .content {
  height: 78%;
}
.item.showfull .social {
  top: 25px;
}
.item.showfull .img-content {
  transform: scale(1.04);
  filter: blur(5px);
}
.item.showfull .like {
  margin-top: 100px;
}
.item .text-container {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: -3px -6px 8px rgba(0, 0, 0, 0.3);
    display: block;
    margin: -20px 0 0 0;
    text-align: center;
    overflow: auto;
}
.item .content {
  overflow: hidden;
}
.item .social {
width: 100%;
    height: 33px;
    direction: ltr;
    position: absolute;
    z-index: 15;
    top: 39.5%;
    display: flex;
    justify-content: flex-end;
}
.item h2 {
    margin-bottom: 0;
    margin-top: 10px;
    display: block;
}
.item .social div {
    width: 30px;
    height: 30px;
    background: green;
    margin: 0 2px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.item .social div:hover {
  transform: scale(1.1);
}
.item .social a:last-child {
  margin-right: 10px;
}
.item a .tw {
  background-color: #0084b4;
}
.item a .fb {
  background-color: #3b5998;
}
.item a .ig {
  background-color: #0eba31;
}
.item .like {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #e82323;
    border-radius: 50%;
    color: #fff;
    right: 8px;
    top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.item .like:hover {
  transform: scale(1.1);
}
.item .like i {
  font-size: 10px;
}
.item .like.clicked {
  background: #ffcece;
}
.item .like.clicked i {
  color: #e60026;
}
.item .readmore {
    display: block;
    padding-bottom: 5px;
}
.item .readmore h3 {
    display: block;
    width: 70px;
    text-align: center;
    padding: 10px 15px;
    border-radius: 40px;
    border: 1px solid;
    cursor: pointer;
    font-size: 10px;
    margin: 0 auto 5px;
}
    .item .readmore h3:hover{
    background: #bababa;
    color: #fff;
}
    .item .readmore h3:hover a{
    color: #fff;
}
.text-container .title{
    margin: 11px 9px 0px;
    font-size: 17px;
    padding: 0 0 3px 0;
    border-bottom: 1px solid #e82323;
}
.text-container .content{padding: 0 9px 8px;}
  </style>
<script>
//<![CDATA[
$(".item a .ig").click(function() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var Ismobile = ua.indexOf("mobile") > -1;
var isiPhone = ua.indexOf("iPhone") > -1;
if(isAndroid) {
}else if(Ismobile){
}
else if(isiPhone){
} else {
alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
}
});
//]]>
</script>
</b:includable>
  </b:widget>


تم اضغط حفظ ومبروك عليك الإضافة , في حالت حصلت مشكلة ضعها في تعليق, كذالك من المرجح ان يحدث تضارب في شكل الإضافة بسبب عدم تناسبها مع أكود قالبك لذالك لو حدث لك المشكلة ضع رابط مدونتك في تعليق

هناك 13 تعليقًا:

  1. الأفلييت للمبتدئين : أفضل شركات يمكنك التعامل معها كمبتدئ في الربح من التسويق بالعمولة

    ردحذف
  2. Go for the best services and devices to help yourself. Talk to the customer care executives with the free spirit if some kinds of issues stop you to make the necessary decisions.

    netgear router not login
    netgear router setup without modem
    netgear Router customer support number
    reset your Netgear router

    ردحذف
  3. Our top of the line servers maintain 99% uptime withour any lags. With cheapseedboxes, you do not have to worry about any logs, contracts or ISP’s. You will enjoy full privacy with us. Our seedbox product is built with your security & anonymity in mind.

    ردحذف
  4. Nice Post Your content is very inspiring and appriciating I really like it please visit my site for
    kolkata fatafat and kolkata live result or for finding old result check kolkata ff old result and you can also checkout your lucky number on kolkata ff lucky number you can also visit our site for some tips and tricks kolkata ff tips & tricks
    kolkata fatafat for super fast kolkata ff result
    quote status for some amazing shayari

    ردحذف
  5. This is a very good Blog, Content and SEO Friendly blog is exllent !
    Lungs Specialist in lucknow

    ردحذف
  6. شكرا لك علي الاضافة الجميلة لقد قمت بتطبيقه في مدونتي لكن لم تظبط http://nice-weight.blogspot.com/

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

    ردحذف

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *