اضافة لوحة صندوق الاشتراك بالقائمة البريدية بشكل لطيف و إحترافى

السلام عليكم ورحمة الله وبركاته 

متابعى مدونة خبراء الحاسوب ، فى أول تدوينه لى فى إضافات البلوجر

حيث فى هذا الدرس سأعطيكم إضافه رائعه و هي :

صندوق الإشتراك بالقائمه البريديه

الاضافة جميلة جدا وشكلها بسيط . يتناسب مع جميع المدونات .

لنبدأ ، يجب التركيز معى :

1. نذهب الى لوحه تحكم البلوجر و نختار تخطيط .
2. ثم نضيف اداه جديده .
3. ثم نختار اداه HTML/Javascript .

ثم نضيف هذا الكود :

<div class="sub-box">                                                                                                                        <div style="text-align: center; display: inline-block;" >
<h8 style="display:block; padding-left: 23px; font-family:'GESSTwoMediumRegular';font-size:12px;font-weight:normal;">لا تفوت مواضيعنا تابعنا لحضة بلحضة كل ما عليك هو التسجيل معنا لتتلقى الجديد مباشرة على بريدك الإلكتروني</h8>
<style>
.sub-box{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1NP50acJeLyhjKzJKSQMaCdPrbhfNIUXC9L4bSaQKxtFIWN9g6PCmOwdbPSFxGMHD5kjjqgJms0thBdYf-WAO41P0IzEdZNbiXKSLdyjKO0EOmEMxJ-PbnSrOcMQtYYL9FTNrwbZn2Bh/s1600/bg-pattern.png);
width: 290px;
padding: 2px 5px 7px 7px;
border: 2px solid #4BB5C1;
border-radius: 10px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #4BB5C1;
}
.emailform{margin:30px 0 0; display:block; clear:both;}
.emailtext{margin:20px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj2Bb3p8WZomw9xoc47hJjrvfXEDto2O_tNF5iWS4gqfXe60sH4SkwMlQAUURXW4PPiaRJ0DDwA1gdH8_V4xC105AT7Lmm-7ddG2b6aBNf0XrX1grRYB7QKdBZajR5jL9CdFqUMVn65wI/s1600/email.png) no-repeat scroll 0px center;padding:5px 5px 4px 30px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:170px;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:6px 8px; border:1px solid #666;cursor:pointer;background:#ff748c}
.sub-button:hover{color:#eee;border-color: #999;background:#ffa7b6}
.mbt-email{
width:295px;
padding:10px 0 0 0px;
float:right;
font-size:1.4em;
font-weight:normal;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:10px;
border-radius:6px;
font:12px tahoma;
}
.mbt-emailsubmit:hover{
background:#4BB5C1;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<center>
<div class="mbt-email" style="padding-left: 23px;">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.open(' http://feeds.feedburner.com/i-amprofessional', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="textarea" gtbfieldid="3" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;ضع ايميلك هنا&quot;;}" onfocus="if (this.value == &quot;ضع ايميلك هنا&quot;) {this.value = &quot;&quot;;}" type="text" value="ضع ايميلك هنا" />
<input name="uri" type="hidden" value="i-amprofessional" /><input name="loc" type="hidden" value="en_US" />
<input class="mbt-emailsubmit" type="submit" value="تسجــل" />
</form>
<h8 style="display:block; padding-left:5px; font-family:'GESSTwoMediumRegular';font-size:12px;font-weight:normal;">عليك تأكيد الإيمايل بعد التسجيل ليصلك الجديد <img alt="" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeciHRcK0ObgmllB7uDERoMILr2kdyxwHOkZ1H2Csqt02blCcp33_x0dHhAp-iPhXojc96v3cR-CEgvVh2hyRLJ0j2_mNgEyNtbvda-sYWCvsLcwFmLxdfWThbgXoqKui1rr3hWZqyfnM/s36/12.gif" width="24" /></h8>
</div>
</center></div></div>
<div style="clear:both;"></div>
<style type="text/css">#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjWHTzxx1V45ZTDIRqbEx-PnLgHcJnj5-ohyvx5B1eI1ScqbMD4NFsuwyXtrKJoyEog1I1vRlaUuD0eNHcVkHb09loaXa9Tik0rKFYn8Ra8Ls3hSUsos4cnieCga9dz7BR2VlFW7IMt6RM/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1NP50acJeLyhjKzJKSQMaCdPrbhfNIUXC9L4bSaQKxtFIWN9g6PCmOwdbPSFxGMHD5kjjqgJms0thBdYf-WAO41P0IzEdZNbiXKSLdyjKO0EOmEMxJ-PbnSrOcMQtYYL9FTNrwbZn2Bh/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiymspTBcSI2LB78vwnv5LlgvJmAjoZsKOgjTSFkPDoCPddEMXozpBYVAstjU7ulSeteP6lEOgW0hz__BxJdJcKAqyA8-pSv1xkbdigq9dyb02mdUHp2B94s2W5iN2GudU_12h7DK0WTeTp/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 0px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUQwSWtkNK5Zrpf4AdlN3xxD4aJoQJfzPHegvlRq0Yk6SfiOilzXE0FpDtiljgyboexmcZcXte4r3ZzhkuNxmB2ong_lJ35Qp-nTO2Yz7cyUqHLXyxbKOSUkH_RcqME7Q-p24h5LBAhtd/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
<div style="clear:both;"></div>
<div style="height:5px;clear:both;"></div>
<div style="clear:both;"></div> 

مع تغير ما بالون الأخضر الى النص الذي تريد ظهوره بنفس المعنى المكتوب .

مع تغير ما بالون البرتقالى الى اللون الذي تريد ظهوره .

مع تغير ما بالون الأحمر الى ما رابط الـ feed burner الخاص بك .

ارجو ان يكون اعجبكم الدرس و الإضافه ،

و السلام عليكم ورحمة الله وبركاته

منشورة في: إضافات بلوجر