السلام عليكم و رحمة الله تعالى و بركاته،إخواني أخواتي الكرام في هذا الدرس سوف نتعرف على كيفية إضافة أداة "صندوق الإشتراك في القائمة البريدية وبشكل إحترافي " والذي يعتبر من أهم الأدوات التي يجب أن تتوفر عليها كل مدونة ,وتكمن أهميتها في جعل كل مشترك في هذه الخدمة دائما على إطلاع على كل جديد المدونة و ذلك بتوصله بكل موضوع جديد كتبته على مدونتك عن طريق بريده الإلكتروني ،أليست هذه الخدمة رائعة حقاً ؟ كلنا نعلم الطريقة التقليدية لإضافة هذه الأداة و ذلك عن طريق الحصول على الكود من موقع فيد بيرنرFeedburner ولكن هذه الإضافة التي نقدمها لكم رائعة وفيها لمسة جمالية وتهر مرة واحدة للزائر .
- طريقة التركيب :
1- اختر لوحة التحكم .
2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب : HTML
3- ابحث عن الوسم :
</head>
4- ضع الكود التالي فوقه .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BxFbqjck0GDdcGVnVVNtbWFVMzg"></script> - ملحوظة / إذا هذا الكود متوفر في مدونتك لا تستخدمه :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 5- ابحث عن الوسم :
</body>
6- ضع الكود التالي فوقه .
<!--homeblog7 Feedburner OTP-->
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#popupcc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7GHs50hg0WoCBBNKA21HfdnjdIOMR9cHiOwKcpgUJTYWv4ky2cAPjYkD3lZjft_zgIui75z5-9SPjM2qj-rj_k09pLW42M1wu2qbrluJdPY88RliEjLzGiefNDJ_iBmFo_butyxO1PKYa/s1600/overlay.png');position:fixed;z-index: 9999990;width:100%;color:#fff; height:100%;top:0;font-family: 'Open Sans Condensed', sans-serif;display:none;}
#main-box { position:fixed;top:100px;right:50%;margin-right: -265px;padding:15px;background: #353535; box-shadow: 0px 0px 3px #000;-moz-box-shadow: 0px 0px 3px #000;-webkit-box-shadow: 0px 0px 3px #000;width:500px;height:auto;z-index:9999999; }
#main-box h2 { margin:5px;color:#fafafa; text-align:center;font-weight:normal;text-transform:uppercase; font-family: 'Open Sans Condensed', sans-serif; }
#popup-body h2{text-align:right; width:300px;}
#popup-body h2 img{width:25px; position:relative; left:5px; }
.body-inner{float:right;width:300px;} .popup-image{float:left} .popup-image img{position:relative;top:10px;}
#main-box h2 img { border:0; position:relative;top:3px; left:5px;}
#main-box-in { padding:10px; border-radius: 5px;-webkit-border-radius: 5px; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5); }
#buttonfeed { width:30%; color: #fff;-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;box-shadow:inset 0px 1px 0px 0px #cf866c;background:-webkit-gradient(linear, right top, right bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315)); background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%); background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%); background-color:#d0451b;-moz-border-radius:3px;-webkit-border-radius:3px; border-radius:3px;border:1px solid #942911;cursor:pointer;font-size:15px; padding:9px 2px;text-decoration:none;margin: 5px 0px; font-family: 'Open Sans Condensed', sans-serif; }
#buttonfeed:hover {background: #d0451b;}
#boxfeed {outline: none;padding:10px 2%;width:60%;-moz-boder-radius:3px;-webkit-border-radius:3px;border-radius:3px;background: #333; color: #fafafa;font-size:15px; border: 1px solid #333; box-shadow: inset 0 0 3px #000; -moz-box-shadow: inset 0 0 3px #000;-o-box-shadow: inset 0 0 3px #000;-webkit-box-shadow: inset 0 0 3px #000; font-family: 'Open Sans Condensed', sans-serif; }
#main-box a { margin:5px;color:#fff;text-decoration:none;text-transform:uppercase; }
#main-box a img { position:relative; left:3px; top:2px;border:0; }
#creditcc { width:200px;padding:5px;margin:auto;text-align:center; }
</style>
<div id='popupcc'>
<div id='main-box'>
<div id='main-box-in'>
<h2><img src='http://cdn.top4top.co/p_559ykrdz2u1.png' width='32px'/>اشترك معنا للحصول على آخر التحديثات</h2>
<div id='popup-body'>
<div class='body-inner'>
<h2><img src='http://cdn.top4top.co/p_559l4oj03q1.png'/> قوالب بلوجر مجانية </h2>
<h2><img src='http://cdn.top4top.co/p_559l4oj03q1.png'/> إضافات بلوجر مجانية</h2>
<h2><img src='http://cdn.top4top.co/p_559l4oj03q1.png'/> دروس بلوجر مجانية</h2>
</div>
<div class='popup-image'>
<img src='http://cdn.top4top.co/p_559jjbl1or1.png'/>
</div></div>
<!--The Subscribtion Box. Make sure you edit it before saving-->
<center><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=homeblog7; , "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='homeblog7'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput' id='boxfeed' name='email' onblur='if (this.value == "") {this.value = "ادخل بريدك الإلكتروني";}' onfocus='if (this.value == "ادخل بريدك الإلكتروني") {this.value = ""}' type='text' value='ادخل بريدك الإلكتروني'/>
<input id='buttonfeed' type='submit' value='انقر هناللإشتراك'/>
</form></center>
<div id='creditcc'>
<a href='http://homeblog7.blogspot.com/' target='_blank'><img src='http://cdn.top4top.co/p_559b18hpvt1.png' width='12px'/>هوم بلوجر</a>~ <a href='JavaScript:void(0)' id='closecc'><img src='http://cdn.top4top.co/p_559los0r4i1.png' width='15px'/>أغلق</a>
</div>
</div><!--Main in-->
</div><!--main-box-->
</div><!--homeblog7 popup--> 7- احفظ القالب .
- ابحث بالكود عن " homeblog7 " واستبدله برابطك عللى موقع فيد بيرنرFeedburner .
رااااااااااااااائع
ردحذفالمرجو زيارتنا على