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



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




شرح طريقة التركيب + معاينة الاضافة من هنا  :
  1. اذهب الى لوحة التحكم ثم تحرير "HTML"  
  2. وابحث عن كلمة  <head/>  والصق الاكواد التالية فوقها :
<style> #header-wrap_slider {background-image: url(http://3.bp.blogspot.com/-uqabgsYy1ig/VmcReCIGhoI/AAAAAAAAAmg/SRfXKWrDcMk/s1600/home.jpg); background-repeat: repeat; background-attachment: fixed; background-position: center center!important; background-size: cover;margin: auto 0; height: 250px; margin-bottom: 5px; margin-top: 10px; 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: Electrolize,ge_dinar_tworegular; }#header-wrap_info { background: #fff; margin: auto 0; height: auto; overflow: hidden;margin-top: 15px; } </style> <style> .letter-jazairiweb { height: 215px; margin: 0; z-index: 99999; margin-top: 48px;}.letter-jazairiweb h2 {font-weight: normal; font-family: Niconne,ge_dinar_tworegular; letter-spacing: 3px; text-align: center; }.letter-jazairiweb h2 a:first-child { font-family: Niconne,ge_dinar_tworegular; } .letter-jazairiweb h2 a { display: block; font-size: 130px; line-height: 122px;margin-bottom: -34px;}.letter-jazairiweb h2 a span:nth-child(1) { animation-delay: 0s; moz-animation-delay: 0s; ms-animation-delay: 0s; webkit-animation-delay: 0s; } .letter-jazairiweb h2 a span { animation: sharpen .9s linear backwards; color: #fff; moz-animation: sharpen .9s linear backwards; moz-transition: all .3s linear; ms-animation: sharpen .9s linear backwards; ms-transition: all .3s linear; opacity: 1; o-transition: all .3s linear; text-shadow: 0 0 2px #fff,1px 1px 4px rgba(0,0,0,.7); transition: all .3s linear; webkit-animation: sharpen .9s linear backwards; webkit-transition: all .3s linear; }.letter-jazairiweb h2 a span:nth-child(2) { animation-delay: .1s; moz-animation-delay: .1s; ms-animation-delay: .1s; webkit-animation-delay: .1s; }.letter-jazairiweb h2 a span:nth-child(4) { animation-delay: .3s; moz-animation-delay: .3s; ms-animation-delay: .3s; webkit-animation-delay: .3s; }.letter-jazairiweb h2 a span:nth-child(3) { animation-delay: .2s; moz-animation-delay: .2s; ms-animation-delay: .2s; webkit-animation-delay: .2s; }.letter-jazairiweb h2 a:last-child { font-family: Niconne,ge_dinar_tworegular; font-size: 35px!important; } </style>

  1. وهدا كود الاضافة ضعه في المكان الدي يناسبك :
<header class='jazairiweb_wrap_jazairiweb wow bounceIn animated' id='header-wrap_slider'> <div id='poster'> <div class='letter-jazairiweb' id='letter-jazairiweb'> <h2> <a href='/'><span class='char1'>JazairiWeb</span><span class='char2'> </span> <span class='char3' style='color:#F74047;font-family: Clicker Script;font-weight: normal;'>2016</span> <span class='char4'> </span> </a><a href='/' style='font-size:52px;style='color:#f74047;font-family: clicker script;font-weight: normal;'> <span class='char1'>افضل موقع </span> <span class='char2'/> <span class='char3'>جزائري </span> <span class='char4'/> <span class='char5'>لتصبح </span> <span class='char6'/> <span class='char7'>مدون </span> <span class='char8'/> <span class='char9'>محترف </span> </span></span></span></span></a></h2></div></div> </header>

 لتشغيل تاثير اللمعان و الخط المزخرف فقط ضع الكود التالي اسفل  <b:skin/>  
<link href='https://googledrive.com/host/0B2v7cH8soLJrOWlYOG9LSEY0eGs' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Clicker+Script' rel='stylesheet' type='text/css'/>

  1. مثلا أريد وضعه مكان الوجو هل ينفع و إذا نعم كيف ذلك https://teqnet02.blogspot.com/

    ردحذف
    الردود
    1. يمكنك وضعه اسفل main-nav او فوق Footer wrapper

      حذف
  2. إضافة مميزة مشكور جدا

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

    ردحذف
  4. انت في اي مكان وضعته

    ردحذف
    الردود
    1. اسفل القائمة الرئيسية في اعلى الموقع

      حذف
  5. هل استطيع ان اجعلك مشرف و تقوم بها انت
    انا لدي قالب v4 الدي انت وضعته
    ادا اردت ان اضعك مشرف فراسلني

    ردحذف
  6. أريد وضعه قرب البنر هنا https://infospaace.blogspot.com/2016/04/maroc-ramiz-yil3Ab-binar-2016.html

    ردحذف
    الردود
    1. ‏لم افهم اخي .....
      اسفل البنر اي اسفل القائمة الرئيسية !!
      ام بجانب اللوجو على اليسار !!
      - و بخصوص الاضافة سهلة التركيب و فقط عدل القياس.

      حذف
  7. اخي كيف اضعه في المكان الذي يناسبني هل تقصد في التخطيط ام في تحريرالقالب

    ردحذف
    الردود
    1. يمكنك وضعه داخل التخطيط "ادات جديدة"
      او داخل تحرير "HTML"

      حذف
  8. الاضافه طلعت بس كبيره هل من طريقه لتصغيرها
    انضر كيف طلعت http://alawdhly3.blogspot.com/
    واشكرك للتجاوب معنا

    ردحذف
    الردود
    1. قم بحدف الاضافة و قم بوضعها فوق content-wrapper
      و عدل القياسات فقط =q

      حذف
  9. السلام عليكم ورحمه الله وبركاته .. اهلا بك اخي .. انا مبتدي في التصميم وفي عالم بلوجر والحمد الله كل تمام وبطور نفسي بنفسي .. ولكن عندي مشكله جميله ليس اجد لها حل .. هو اضافة عمود جنبي اخر في بلوجر.. وشاهد درسين في في مدونات اخري ولكن الشرح سيء جدا ولن افهمه .. رجاءا ضف درس ع هذا الموضوع .. طريقة اضافة عمود اخر الي القالب .. وشكرا لك

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

      حذف
    2. شكرا لك اخي .. وانا في انتظار هذه الدردس لان الدردس لايوجد حتا الان !

      حذف
  10. هناك خطاء فى كود الاداه

    ردحذف
  11. هل من الممكن وضعها خلف اللوجو
    او وضع اللوجو او اسم المقع عليها

    ردحذف
  12. هذه الاضافة لا تدعم الهواتف عندما افتح المدونة من الهاتف لا تظهر بالقياسات المناسبة

    ردحذف

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