اضافة هيدر يضهر على التدوينات فقط مع ازرار المشاركة و صورة الموضوع



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




شرح طريقة التركيب + معاينة الاضافة من هنا  :
  1. اذهب الى لوحة التحكم ثم تحرير "HTML"  
  2. وابحث عن كلمة  <body/>  والصق الاكواد التالية فوقها :
<b:if cond='data:blog.pageType == &quot;item&quot;'> <script style='text/javascript'>/*<![CDATA[*/$(document).ready(function(){$(".post-body img:eq(0)").each(function(){var r=$(this),t=r.attr("src"),a=r.parent().attr("href"),e=$("#blog-banner"),c=$('<a rel="prettyPhoto" href="'+a+'"><img src="'+t+'" /></a>');c.appendTo(".bckpic"),e.css({"background-image":"url("+t+")"})})}); var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array; /*]]>*/ </script> </b:if>

  1. ضع الاكواد التالية فوق <head/>  او اسفل<b:skin/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style>#blog-banner{position: absolute; width: 100%; height: 260px;;background-attachment: fixed;-webkit-filter: blur(2px); background-size: 75%; background-position: 50% -35%;}.titlewrapper-intop { margin: 20px; text-align: center; color: #fff; font-size: 26.3px; background: url(https://lh3.googleusercontent.com/-RxN2gAXtwwM/VwEux4gRx5I/AAAAAAAAGCM/2tNonX1Q1a0vCr33Yya9YlkF9P7uYi89gCCo/s230-Ic42/slicses2016.png); background-position: center bottom; background-repeat: no-repeat; margin-bottom: 30px; padding-bottom: 55px;position: relative;z-index: 99;}.mg_intop{height: 260px; position: relative; overflow: hidden; width: 1170px;}.fcenter{max-width: 1179px; display: block; margin: auto; position: relative;}.mg_intop .breadcrumbs a{font-weight: 700; font-size: 12px;}.mg_intop .breadcrumbs i{color:#fff;padding:0 5px;}.mg_intop:after{content: &quot;&quot;;background: rgba(0,0,0,.5);position: absolute; right: 0;width: 100%; height: 100%;top: 0;background-image: url(https://lh3.googleusercontent.com/-r8fJlEPNon4/VmXMcHiwAmI/AAAAAAAAE0Y/WjHJ0MYfZN4qyNdcBoQDqYRogGgk481NwCCo/s8-Ic42/repeat-all-JAZAIRIWEB.png);}.ymr-item{padding-right:20px!important;}</style><style>#header-wrap_slider {background-color: #fff; width: 1170px; margin: 0 auto; height: 245px; margin-bottom: 5px; margin-top: 15px; border: 5px solid #fff; overflow: hidden;}.titlewrapper-jazairiweb {margin: 20px; text-align: center; font-weight: normal; color: rgb(255, 255, 255); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.35) 50%,rgba(255, 255, 255, 0) 100%); font-size: 26.3px; font-family: Lobster,ge_dinar_tworegular; }#header-wrap_info { background: #fff; margin: auto 0; height: auto; overflow: hidden;margin-top: 15px; }</style> <style>.titlewrapper-intop {font-family: Electrolize,ge_dinar_tworegular; text-align: center; color: #fff; font-size: 26.3px;margin-top: 6px;position: relative;z-index: 99;}</style><style>.post-sharing {margin:0 auto 20px;position :relative;text-align:center;z-index: 99;} .post-sharing a{width: 40px; height: 40px; display: inline-block; line-height: 43px; color: #fff!important; text-align: center; border-radius: 100%; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; font-size: 19px;} .post-sharing a:hover {opacity: 0.80;box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);transition: all .2s ease-in-out; background:rgba(255, 255, 255, 0.8);color: #1B1A1A!important;-webkit-transform: translateY(-4px); transform: translateY(-4px);} .post-share{float :right;width : 100%;padding-left:20px;padding-right:25px;margin:0 auto;text-align:center;} .post-share li,.post-sharing li{display :inline-block;font-size:15px} ul.post-sharing:before{content:&#39;شارك هذه التدوينة على : &#39;;display :block;margin-bottom:10px;color: #fff;} .post-share li a{position :relative;margin:0 1px 0 0;padding:4px 11px;line-height:2.2;font-weight:400;vertical-align:middle;color:#fff;font-size:16px;text-transform:uppercase;display :inline-block;transition:background-color .3s} .post-share .fa{padding:0 0 0 5px;top:1px;font-size:16px;position :relative} .post-share ul{list-style:none} .post-share ul li{padding-bottom:3px;font-size:16px;font-family:&#39;Karla&#39;,sans-serif;display :inline-block;margin-top:5px;} .post-footer .post-share li a{color:#fff;} .post-sharing .facebook-share,a.facebook.df-share{background-color:#3B5998;} .post-sharing .twitter-share,a.twitter.df-share{background-color:#00ACED;} .post-sharing .google-share,a.google.df-pluss{background-color:#D14836;} .post-sharing .pinterest-share,a.pinterest.df-pinterest{background-color:#CB2027;} .post-share li a:hover{color:#fff;background-color:#212026}</style> </b:if>

  1. ضع الاكواد التالية في اي مكان يناسبك, مثل: اسفل القائمة الرئيسية 
<b:if cond='data:blog.pageType == &quot;item&quot;'> <header class='jazairiweb_wrap_jazairiweb' id='header-wrap_slider'> <div class='mg_intop'><div id='blog-banner'/> <div class='titlewrapper-intop'>اجعل مدونتك افضل مدونة مع التصاميم المجانيه</div> <ul class='post-sharing wow bounce animated'> <li><a class='facebook-share' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' rel='nofollow' target='_blank' title='Share to facebook'><i class='fa fa-facebook'/></a></li> <li><a class='twitter-share' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share to twitter'><i class='fa fa-twitter'/></a></li> <li><a class='google-share' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share to google+'><i class='fa fa-google-plus'/></a></li> <li><a class='pinterest-share' expr:href='&quot;http://pinterest.com/pin/create/button/?source_url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Share to pinterest'><i class='fa fa-pinterest'/></a></li> </ul></div> </header></b:if>


  1. ملاحظة هامة:  ادا لم تشتغل ظهور صورة الموضوع
  2. ضع الكود التالي فوق <b:skin>  
<script src='https://googledrive.com/host/0B2v7cH8soLJrV2plNzMxRm5icnM' type='text/javascript'/>
  1. أزال المؤلف هذا التعليق.

    ردحذف
  2. هناك خطأ في التدوينة
    هدا الطود يوضع فوق الهيد src='https://googledrive.com/host/0B2v7cH8soLJrV2plNzMxRm5icnM' type='text/javascript'/>

    ردحذف
  3. نقس الشيئ المهم يكون داخل ال head

    ردحذف
  4. كيف نجعل صورة هذا الهيد تكون بنفس صورة التدوينة

    ردحذف
    الردود
    1. تم وضع كود التشغيل في الملاحظة الاخيرة
      <script src='https://googledrive.com/host/0B2v7cH8soLJrV2plNzMxRm5icnM' type='text/javascript'/>

      حذف
  5. ممكن الحل لهذا الخلل
    https://4.bp.blogspot.com/-DtlUowzL02Q/V0t63cWJU5I/AAAAAAAAbGo/C4Fk_F_6J6Q98JhXBXfpVuEqCwDVVXyCQCLcB/s1600/2016-05-30_012640.jpg

    ردحذف
  6. تبادل اعلاني مجاني ? تواصل معي هنا => fb.com/ara1tech

    ردحذف
    الردود
    1. التبادل مقابل 5$ فقط
      باي قياس و اي مكان

      حذف
  7. هل تظهر الصور أوطوماتيكيا أم ماذا

    ردحذف
    الردود
    1. نعم اخي, تظهر صورة التدوينة تلقائيا

      حذف
  8. للأسف أخي لم تظهر صور التدوينة :(

    ردحذف
    الردود
    1. ارسل القالب عبر اتصل بي
      او اجعلني مشرف

      حذف
  9. لقد أرسلت لك القالب :)

    ردحذف
  10. اخي اصلحلي المشكل انا لا تعمل معي بلييييييييييييييييييز

    ردحذف
  11. رائع ياخي كل يوم جديد

    ردحذف
  12. للأسف أخي لم تظهر صور التدوينة ممكن تساعدني :-s

    ردحذف
  13. اخي لم استطيع نسخ الكتابة

    ردحذف
    الردود
    1. اضغط مرتين داخل الاقتباس ثم "Copier"

      حذف
  14. مبادره رائعة منك الاخ حسام لأن هذي ميزة منتشره في قوالب الووردبيس وفي بلوجر موجودا ولكن الاغلب يضعها سرا ويخفيها لميز نفسه

    ردحذف
  15. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  16. اخي الاضافة لا تظهر بها اي صور ممكن حل

    ردحذف
    الردود
    1. تم تحديث كود الاول سكريبت
      جرب من جديد =q

      حذف
  17. وضعت هاذا الكود
    قوف
    تضهر صورة التدوينة لاكن حجمها كبير جدا
    كما هو موضح فصورة https://1.bp.blogspot.com/--2QGLnW4FHU/V7CbrjtMJGI/AAAAAAAAAIQ/o9MhxdU3U1whVoJEdACywk3GRkPiSrqaACLcB/s1600/Sans%2Btitre.bmp
    هل يوجد حل

    ردحذف
  18. تم التطبيق من عقلي اضافة تلقائية http://www.ps43.tk/

    ردحذف
  19. أخي ممكن جعل عنوان التدوينة يظهر بين عنوان المدوّنة و شارك على , من فضلك أنا في حاجة للمساعدة شكرا مسبقا

    ردحذف
  20. مش هقولك حاجه غير انك قمة في روعة :)
    واريد ان اسال سوال في قالب بتاعك :)
    هنا مشكلة عندما يدخل زائر احدي مشاركات
    لا يجد زر الرجوع للرئسية لماذا
    وهذه المدونة
    وشكرا لك
    www.mindmix.cf

    ردحذف
  21. انا لم اجد داخل قالبي هذه الكتابة الاولى المرجي الرد مع الحل و شكرا

    ردحذف
  22. السلام عليكم أخي العزيز
    كيفيةتغييرهذاالعنوان(اجعل مدونتك افضل مدونة مع التصاميم المجاني)بعنوان الموضيع الخاصة بي
    مدونتي
    وكيفية إظهار صورة المواضيع
    وشكرا

    ردحذف
  23. كود إضهار الصورة الاخير لا يعمل :)

    ردحذف

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