تبادل اعلاني جديد من مدونة نكهة

مرحبا يا رمضان

نكهة التقنية تتمنى لكل متابعيها رمضان مبارك سعيد وكل عام وانتم لله اقرب

down
×

الاثنين، 16 مايو 2016

حصريا !! إضافة أداة النشرة البريدية بشكل منزلق احترافي وأنيق

السلام عليكم ورحمة الله تعالى وبركاته
سِؤقدم لكم اليوم في هذا الدرس إضافة جديدة وأداة جديدة على مدونة المحترف إسماعيل للمعلوميات وهى أداة الإشترك فى النشرة البريدية بشكل منزلق احترافي وأنيق.



1- قم بالبحث فى قالب مدونتك عن الوسم ]]></b:skin>  ثم قم بوضع الكود التالي فوقه.
#subscribe-css{position:relative;padding:20px 0;overflow:hidden;} .subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%} .subscribe-form{clear:both;display:block;overflow:hidden} form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden} .subscribe-css-email-field{background: rgba(226, 32, 32, 0.84);color: #FFF;margin: 10px 0;padding: 15px 20px;width: 62%;border: 0;border-radius: 3px;height: 51px;font-family: Electrolize,ge_dinar_tworegular;} .subscribe-css-email-button{ background: rgba(226, 32, 32, 0.84);color: #fff;cursor: pointer;font-weight: 100;padding: 14px 30px;margin-right: 10px;text-transform: none;font-size: 15px;border: 0;border-radius: 3px;transition: all .6s;font-family: Electrolize,ge_dinar_tworegular;} .subscribe-css-email-button:hover{ background: rgba(255, 255, 255, 1);color: #C5252B;} #subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;} #subscribe-css p.subscribe-note span {color: #fff;position:relative;overflow:hidden;font-weight:100;transition:all .5s} #subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase} #subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none} #subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0; background: #fff;transition:all .5s} #subscribe-css:hover p.subscribe-note span:before{width:100%;} #arlinafollowSubscribe{background-color: rgba(25, 44, 87, 0.87);width:320px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0} .arlinafollowButton{color: #fff;font-size: 13px;line-height: 28px;padding: 0 10px;position: absolute;top: -28px;right: 0;display: block;border-radius: 2px 2px 0 0;height: 28px;font-weight: 100;font-family: Electrolize,ge_dinar_tworegular;background: rgba(226, 32, 32, 0.84);} .arlinafollowButton span{background:url("https://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px} .arlinafollowButton:hover,.arlinafollowButton:focus,.followActive,.followActive:hover{color:#fff} .arlinafollowButton:hover span,.followActive span{background-position:0 -37px!important} .followactive{background-color:#333} .arlinafollowForm{padding:15px;margin:auto;text-align:center;font-size:12px} .arlinafollowForm p{ font-family: Electrolize,ge_dinar_tworegular;font-size: 18px;margin-bottom: 10px;margin-top: -15px;} .arlinaFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c} .arlinaFollowFooter a{color:#aaa;background:none;text-decoration:none} .arlinaFollowFooter a:hover{color:#fff;background:none} a.arlinafollowButton.followActive {font-weight: 100;font-family: Electrolize,ge_dinar_tworegular;background: rgba(226, 32, 32, 0.84);}
2- قم بالبحث عن الوسم <head> ثم قم بوضع الكود التالي أسفل منه .

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700|Electrolize' rel='stylesheet' type='text/css'/><link href='http://cdn.jsdelivr.net/darfonts/0.1/dinone-dintwo-sstext-ssthree/stylesheet.css' rel='stylesheet'/>

3- الأن مع الكود  الأخير يمكنك وضعه فى أداة جديده من التخطيط أو يمكنك وضعه فوق الوسم </body> كما تريد .

<script type="text/javascript">/*<![CDATA[*/ !function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery); /*]]>*/ </script><div id="arlinafollowSubscribe" style="bottom: -971px;"><div class="arlinafollowForm"><a class="arlinafollowButton" href="#" title="Follow"><b>إشترك معنا</b></a><br /><div id='subscribe-css'><p class='subscribe-note'><span>إشترك الأن</span></p><div class='subscribe-wrapper'><div class='subscribe-form'><form action='http://feedburner.google.com/fb/a/mailverify?uri=wdbloog' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=wdbloog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='wdbloog'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='ضع ايميلك هنا'/><input class='subscribe-css-email-button' title='' type='submit' value='إشترك'/></form></div></div></div><br /><p>للحصول على كل جديد المدونة</p></div></div>

4- مبروك عليك الأضافة .



ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)
جميع الحقوق محفوضة لـ قالب برو ميكس
صمم بكل من طرف مدونة نكهة و مكتبة المدون