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



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



كود الخط الاجنبي هدية مني لكم:

@font-face { font-family: 'Niconne'; font-style: normal; font-weight: 400; src: local('Niconne'), local('Niconne-Regular'), url(http://fonts.gstatic.com/s/niconne/v6/at9nZeERhG1mh4D7CWUJzfY6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face { font-family: 'Niconne'; font-style: normal; font-weight: 400; src: local('Niconne'), local('Niconne-Regular'), url(http://fonts.gstatic.com/s/niconne/v6/Ci0yFRBPDqtg7EHO7VR0Zw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}


شرح طريقة التركيب + معاينة الاضافة من هنا  :
  1. اذهب الى لوحة التحكم ثم تحرير "HTML"  
  2. وابحث عن كلمة  <head/>  والصق الاكواد التالية فوقها :
<style> #header-wrap_slider {background: linear-gradient(45deg, #34495E 0%,#F74047 100%);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-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. وهدا كود الاضافة ضعه في المكان الدي يناسبك :
<b:if cond='data:blog.url == data:blog.homepageUrl'> <header class='jazairiweb_wrap_jazairiweb wow animated bounce' 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'>2016</span><span class='char4'> </span> </a><a href='/' style='font-size:52px'> <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 class='char10'/> <span class='char11'>ويب </span> </span></span></span></span></span></a></h2></div></div> </header> </b:if>


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

  1. السلام عليكم ~~~~
    ممكن قالب موقعك لو سمحت
    وشكرا على هاد الموضوع الرائع والجميل

    ردحذف
  2. صديقي هذا هو الكود الصحيح -_-
    https://drive.google.com/file/d/0B4BialIxeFHzdUl1dFh5b0pZNjA/view

    ردحذف
  3. السلام عليكم
    شكرا على جمùيع المجهودات التي تقدمها
    فقط اريد ان اسال اين ساضع كود الخط

    ردحذف
    الردود
    1. ضع الكود مابين <style> و <style/> فوق <Head/>

      حذف
  4. اسف هذا هو الرابط
    https://docs.google.com/document/d/1s5IoKt3wvBpoZotvi-FmdbnafmXEA_3Z3-hop6tBlG4/edit?usp=sharing

    ردحذف

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