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

- اذهب الى لوحة التحكم ثم
تحرير "HTML" - وابحث عن كلمة
<body/> والصق الاكواد التالية فوقها :
<b:if cond='data:blog.pageType == "item"'> <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>
- ضع الاكواد التالية فوق
<head/> او اسفل<b:skin/>
<b:if cond='data:blog.pageType == "item"'> <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: "";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:'شارك هذه التدوينة على : ';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:'Karla',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>
- ضع الاكواد التالية في اي مكان يناسبك, مثل: اسفل القائمة الرئيسية
<b:if cond='data:blog.pageType == "item"'> <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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ 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='"http://twitter.com/share?url=" + data:post.url + "&title=" + 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='"https://plus.google.com/u/0/share?url=" + 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='"http://pinterest.com/pin/create/button/?source_url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Share to pinterest'><i class='fa fa-pinterest'/></a></li> </ul></div> </header></b:if>
- ملاحظة هامة: ادا لم تشتغل ظهور صورة الموضوع
- ضع الكود التالي فوق
<b:skin>
<script src='https://googledrive.com/host/0B2v7cH8soLJrV2plNzMxRm5icnM' type='text/javascript'/>
أزال المؤلف هذا التعليق.
ردحذفهناك خطأ في التدوينة
ردحذفهدا الطود يوضع فوق الهيد src='https://googledrive.com/host/0B2v7cH8soLJrV2plNzMxRm5icnM' type='text/javascript'/>
لا اخي انا درست الموضوع
حذفارجوك ازلي ما حدتك عنه :(
حذفنقس الشيئ المهم يكون داخل ال head
ردحذف=q
حذفكيف نجعل صورة هذا الهيد تكون بنفس صورة التدوينة
ردحذفتم وضع كود التشغيل في الملاحظة الاخيرة
حذف<script src='https://googledrive.com/host/0B2v7cH8soLJrV2plNzMxRm5icnM' type='text/javascript'/>
ممكن الحل لهذا الخلل
ردحذفhttps://4.bp.blogspot.com/-DtlUowzL02Q/V0t63cWJU5I/AAAAAAAAbGo/C4Fk_F_6J6Q98JhXBXfpVuEqCwDVVXyCQCLcB/s1600/2016-05-30_012640.jpg
عدل القياس اخي width: 1170px
حذفلم تعمل معي
ردحذف:(
حذفتبادل اعلاني مجاني ? تواصل معي هنا => fb.com/ara1tech
ردحذفالتبادل مقابل 5$ فقط
حذفباي قياس و اي مكان
هل تظهر الصور أوطوماتيكيا أم ماذا
ردحذفنعم اخي, تظهر صورة التدوينة تلقائيا
حذفللأسف أخي لم تظهر صور التدوينة :(
ردحذفارسل القالب عبر اتصل بي
حذفاو اجعلني مشرف
لقد أرسلت لك القالب :)
ردحذفاخي اصلحلي المشكل انا لا تعمل معي بلييييييييييييييييييز
ردحذفشكرا شغالة 100/100
ردحذفرائع ياخي كل يوم جديد
ردحذفموضوع رائع :)
ردحذفللأسف أخي لم تظهر صور التدوينة ممكن تساعدني :-s
ردحذفراسلني عبر اتصل بي
حذفاخي لم استطيع نسخ الكتابة
ردحذفاضغط مرتين داخل الاقتباس ثم "Copier"
حذفمبادره رائعة منك الاخ حسام لأن هذي ميزة منتشره في قوالب الووردبيس وفي بلوجر موجودا ولكن الاغلب يضعها سرا ويخفيها لميز نفسه
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفاخي الاضافة لا تظهر بها اي صور ممكن حل
ردحذفتم تحديث كود الاول سكريبت
حذفجرب من جديد =q
وضعت هاذا الكود
ردحذفقوف
تضهر صورة التدوينة لاكن حجمها كبير جدا
كما هو موضح فصورة https://1.bp.blogspot.com/--2QGLnW4FHU/V7CbrjtMJGI/AAAAAAAAAIQ/o9MhxdU3U1whVoJEdACywk3GRkPiSrqaACLcB/s1600/Sans%2Btitre.bmp
هل يوجد حل
تم التطبيق من عقلي اضافة تلقائية http://www.ps43.tk/
ردحذفأخي ممكن جعل عنوان التدوينة يظهر بين عنوان المدوّنة و شارك على , من فضلك أنا في حاجة للمساعدة شكرا مسبقا
ردحذفمش هقولك حاجه غير انك قمة في روعة :)
ردحذفواريد ان اسال سوال في قالب بتاعك :)
هنا مشكلة عندما يدخل زائر احدي مشاركات
لا يجد زر الرجوع للرئسية لماذا
وهذه المدونة
وشكرا لك
www.mindmix.cf
انا لم اجد داخل قالبي هذه الكتابة الاولى المرجي الرد مع الحل و شكرا
ردحذفالسلام عليكم أخي العزيز
ردحذفكيفيةتغييرهذاالعنوان(اجعل مدونتك افضل مدونة مع التصاميم المجاني)بعنوان الموضيع الخاصة بي
مدونتي
وكيفية إظهار صورة المواضيع
وشكرا
اعمل فيديو عشان نفهم
ردحذفكود إضهار الصورة الاخير لا يعمل :)
ردحذف