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

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

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

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

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

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

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

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/AVvXsEiSu_zOKAJfic7o44FaQBJ5JacbpquWTSTMucGNhrPuPOF29eZ9vtbGW0jPi2D1u6EtHJXqBRrua3zOFBdshXDrhkLWtpYRK_43gbYIsQFXmSaBfR8lc2PmxmY6ZaVisT1tkoBtDmPqSN-7/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/AVvXsEjTpI_BcL8ux7izxVQHqQF8x8x8bGwiKv56z15_hOnXy2UulJj_T1MCK2cD7FAQ8ufmAOxfl008apHO_Akc0WxrpzeHjJM3UWi6ad5RsLpM2W-GS_Y1Bz7QJgewIkJw4jtYejeGwDSC5n4/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/AVvXsEhoRj1ce9ArkGfkHuBnVewFXXu4giP1VdAagZCED7N5vLCTXftSLZ0Fra4TeisAEZ9B_lt1VU5ZsH92nuISEC5tIulYoFZgG9ASCqw4T8PB5IoYmnOM7WDTTEdXjUI12FkweTyCee_ygRo/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/AVvXsEg46ZWmx7BXzCvKVzoH0IZE-f0LOcTmv2xcNNhSEr8NTb6KFQt-O_GuxrBm3VX2UspZ4MP3Sdei7pDNroSGHLh0KHECefxymVCn_qjASo09O4WOSDlKKVujpvRlAFfY1uqLFS_KYQzVr0FI/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/AVvXsEiSu_zOKAJfic7o44FaQBJ5JacbpquWTSTMucGNhrPuPOF29eZ9vtbGW0jPi2D1u6EtHJXqBRrua3zOFBdshXDrhkLWtpYRK_43gbYIsQFXmSaBfR8lc2PmxmY6ZaVisT1tkoBtDmPqSN-7/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/AVvXsEgpZMPXNSz80Y4_Svv2Ikc-YR_02dLihj9QKnngFSobrLuXYEVUsG2FTM8pVjQZ-MaO2plR9QUi_ZrmQjheYeFs7AKGVywvM3PJY-UPRcbPqfY6A1Jw04J1wy5Tnl7Qm3IVUPIGwZB10RBD/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/AVvXsEim1ny6gk1wIA4iZ63rVJewS28GCf696Vp8Ec9wT6bOOTFRinrxlvbvHE6WM6wV47quSoVjbokLrAO9k9HjzMVYSJJAVQaNZ7ddE47ZIwnbz6Z4Yi1sjzcozYxIn52achns8Yjp62Zcye5K/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 الخاص بك .

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

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

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