اضافة هيدر يظهر على التدوينات فقط مع أزرار التواصل الاجتماعي

إعلان أدسنس

آخر المواضيع

breaking/مقالات/15
بلوجر

الاثنين، 25 يوليو، 2016

10:12:00 ص

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

يمكنك معاينة الهيدر من خلال الزر التالي:

شرح طريقة تركيب الهيدر

  1. ابحث عن الوسم  </head> وضع هذه الأكواد فوقها
<style> /*===================================== = Follow by nak1ha =====================================*/ #follow { background: #fff; width: 99.5%; float: left; margin: 0; margin-bottom: 20px; margin: auto ; border: 4px solid #fff; border-radius: 3px ; } .parallax-407 { background-image: url(http://www.level-iv-consulting.com/wp-content/uploads/2014/04/Information-Technology-Page.jpg); background-attachment: fixed; } .img_size { background-size: cover; background-position: 100% top; } .wrap2 { width: 100%; max-width: 100%; position: relative; margin: 0 auto; padding-top: 60px; } .parallax-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(41, 86, 125, 0.37); } .titleblock, .insisi .widget&gt;h2 { text-align: center; position: relative; font-weight: normal; } .titleblock h2 { padding: 0; margin: 0 0 10px; font-size: 68px; color: #fff; line-height: 50px; font-weight: normal; } .titleblock h5 { padding: 0; margin: 0 0 20px; font-size: 22px; color: #fff; line-height: 30px; font-weight: normal; display: inline-block; display: block; } .fa-icon-wrap { text-align: center; margin: 0 auto 0; padding: 0 0 40px; width: 100%; position: relative; text-transform: uppercase; } .fa-icon-wrap a { margin: 15px 30px; color: #fff; background: trasparent; padding-bottom: 10px; font-weight: normal; display: inline-block; text-align: center; position: relative; } .fa-icon-wrap a { margin: 15px 30px; color: #fff; background: trasparent; padding-bottom: 10px; font-weight: normal; display: inline-block; text-align: center; position: relative; } .fa-icon-wrap i.fa { border: 10px solid 10px solid rgba(254, 0, 1, 0.11) !important; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; background: rgba(247, 64, 71, 0.51); } .fa-icon-wrap .fa { display: inline-block; font-size: 14px; margin-bottom: 10px; cursor: pointer; width: 100px; height: 90px; text-align: center; position: relative; z-index: 1; color: #fff; text-transform: uppercase; color: #4d90fe; border-radius: 20%; -moz-border-radius: 20%; -webkit-10px border-radius: solid rgb(225, 62, 62) !important -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; background: rgba(255,255,255,0.15); } .fa-icon-wrap .fa:before { speak: none; font-size: 50px; line-height: 80px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .fa-icon-wrap .fa:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: &#39;&#39;; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } </style>
  1. ثاني خطوة يمكنكم وضع هذه الاكواد في اي مكان يناسبك بالقالب وأحسن مكان هو أسفل القائمة الرئيسية.



<b:if cond='data:blog.pageType == "item"'> <div id='follow'> <div class='img_size clearfix slide-menu parallax-407'> <div class='wrap2'> <div class='parallax-overlay'/> <div class='box10' id='box10'> <div class='titleblock'><h2 class='wow bounceInLeft animated' data-wow-delay='0.3s' style='visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;'><data:blog.pageName/></h2><br/><br/> <h5 class=' wow bounceInRight animated' data-wow-delay='0.3s' style='visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;'>تواصل معنا عبر مواقع التواصل الاجتماعية التالية</h5> </div> <div class='fa-icon-wrap'> <a class='wow zoomInRight hvr-bounce-out animated' data-wow-delay='0.2s' href='https://www.facebook.com/nak1ha/' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-facebook'/></a> <a class='wow zoomInLeft hvr-bounce-out animated' data-wow-delay='0.2s' href='https://twitter.com/nak1ha' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-twitter'/></a> <a class='wow zoomInRight hvr-bounce-out animated' data-wow-delay='0.3s' href='https://plus.google.com/u/0/117526277138998925869' style='visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;'><i class='fa fa-google-plus'/></a> <a class='wow zoomInLeft hvr-bounce-out animated' data-wow-delay='0.2s' href='https://www.youtube.com/channel/UCcJtSOYELy8bIHPQAf5gIVw' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-youtube'/></a> <a class='wow zoomInRight hvr-bounce-out animated' data-wow-delay='0.2s' href='https://www.instagram.com/_ismail_junior_/' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-instagram'/></a> <a class='wow zoomInRight hvr-bounce-out animated' data-wow-delay='0.2s' href='https://goo.gl/tsXOeX' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-rss'/></a> </div> </div> <div class='clear'/> </div> </div> </div> <br/> </b:if>

  1. قم بحفظ القالب
  2. ومبروك عليك الاضافة
الى هنا نكون قد انهينا الدرس اذا عجلتكم الاضافة لا تنسو وضع تعليق لنستمر في تقديم المزيد

  1. واصل أخي بالتوفيق :)

    ردحذف
  2. الردود
    1. لن يتم الارسال لك :p لأنك سارق =( والأن أتيت بإيميل جديد :ng

      حذف
  3. YASSINE AGROUR
    agrouryassine@Gmail.com

    ردحذف
  4. موضوع جميل يا اخي انت مبدع :-bd
    medo_man705@yahoo.com

    ردحذف
  5. اخى لم ترسل لى الاضافه بعد

    ردحذف
  6. موضوع جميل يا اخي انت مبدع
    موضوع رائع انت فعلان

    ردحذف
  7. موضوع جميل يا اخي انت مبدع
    maxsye685@gmail.com

    ردحذف
    الردود
    1. شكرا لك :lv انت الأجمل
      تم الارسال

      حذف
  8. الردود
    1. تم وضع شرح طريقة التركيب في التدوينة وشكرا

      حذف

أخبار الانترنيت