- fahad
- 3:38 ص
- أضافات ودروس بلوجر ، css ، JAVA/HTML
- 5 تعليقات
بسم الله الرحمن الرحيم
السلام عليكم ورجمة الله وبركاته
اليوم أضع لكم طريقة أضافة كود للأشتراك بالقائمة البريدية لمدونتك ولكنها بنكهة مختلفة وبشكل جميل وأحترافي
هذا الكود خاص feedburner ولكنه تم أضافة بعض اللمسات الجميلة لهذا الكود لتصبح بشكل راقي ومميز
الكود يكون ثابت في أسفل صفحة المدونة وعند الضغط علىها بمؤشر الماوس ينزلق للأعلى
صورة للمعاينة الأضافة
كما يمكنك الأطلاع عليها في مدونتي نت للمعاينة مباشرة
( أسفل الصفحة في الجهة اليمنى للمدونة )
طريقة التركيب
أتجه للوحة التحكم الخاصة بالمدونة البلوجر
تصميم
تحريرhtml
أضافة أداة
تهيئة HTML/JavaScript
ثم أضف الكود التالي
<style type="text/css">
/*<![CDATA[*/
#w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
.w2bfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkn2T4w4FLo94Nk9LiBXWA-HSWMQHtWFAzf_lM2OlLVv-VXufQmkcnYmURdMUw2UMl120WwgOYBstf5qUuNMqgWk92hujjtg0lmU_uL4ou3NTkEG4ovismXafpzA3WR6yY8Sk_qb5j2F5n/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.w2bfollowButton:hover,.followActive {color: #fff !important;}
.w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.w2bfollowForm {padding: 15px;}
.w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.w2bfollowForm p {margin: 0 0 10px;}
.w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
.w2bfollowForm form {text-align: center;}
.w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
.w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
.emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
.w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bfollowSubscribe" style="display:none;">
<div class="w2bfollowForm">
<a class="w2bfollowButton" href="#" title="تابعنا"><span>تابعنا</span></a>
<h3>تابعنا بالبريد الإلكتروني</h3>
<p>إكتب بريدك الإلكتروني لتكون أول من يعلم بجديد ما ينشر بالمدونه</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/ohflw', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="إكتب بريدك الإلكتروني هنا ..."/>
<input type="hidden" value="blogspot/ohflw" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="إشترك" class="emailSubmit"/>
</form>
<p class="w2bFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>
وأستبدل ما بلون الأحمرblogspot/ohflw برابط تغذية مدونتك
وأحفظ الأداة
وسلام عليكم ورحمة الله وبركاته
الأضافة جميلة ورائع
ردحذف(تم أقتباس الموضوع للمنتدى
مع ذكر رابط المصدر)
جزيت خيرا
أهلا بك أخي المهند
ردحذفسعدت بمرورك وتعليقك
أخى الكود لا يعمل بمدونتى أين الخطأ
ردحذفتأكد من نسخ الكود كامل أنا جربت الكود في أكثر من قالب وشغال مئة بالمئة
ردحذفودليل لاحظ مدونتي مضاف لها نفس الكود
مشكوووووووووووووور
ردحذف