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

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

@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;}

<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>

<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>

<link href='https://googledrive.com/host/0B2v7cH8soLJrOWlYOG9LSEY0eGs' rel='stylesheet' type='text/css'/>