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

<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/AVvXsEhu0WG4MZIy14GRn9WrneemFYFsDhG0xjCwZKSB5tR4fQAvjGBDl12IG8fRvG9os6Ft5f70mFagvuqfja73usoBdUIIOoA9TfTlqTCjxypWX8HLeVwD6QTiY7DOn4w9-_Kx0ChlNDGe8hgH/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/AVvXsEjFJHBrzuwOLmnNzLCgDA3wtqnpbQa_zZUK3unEJkzPVCOK8NH8sw1wecfXzcYmq1ZD5pF2etcnwn7qbKnEBR8pPDsOCtwII9lCKGuT2VU_iveXAIMpRZJntUr5wOBNnOVL7h6nDoL1Dgo/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/AVvXsEhvKBK69ZeOCMvl_ZHfPhyT3Dmi2eJXrcOYtnshb0uM3k0GlbRAUukE3ffx5MEz2vxmDsnSB0zaj1Rjx_ShXkh7Nc8bXtJjytq5hGrmE9PgeI-S5uQVaYuHWJFRhkZpK-RFXSakFrX3va0/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/AVvXsEhxeoioYo2dpbevRhyJpz4OHIsQImJrGkC5O080-B9dwrG9sZXenLqy-MCHIotObvZEm71cuAZYQ8Zm5zB86PUUy5udtCgALkCTHv3YSoFr3FUmj7iNOx10pcbUmbyMjmX_UX1qSCXY0A3j/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/AVvXsEhu0WG4MZIy14GRn9WrneemFYFsDhG0xjCwZKSB5tR4fQAvjGBDl12IG8fRvG9os6Ft5f70mFagvuqfja73usoBdUIIOoA9TfTlqTCjxypWX8HLeVwD6QTiY7DOn4w9-_Kx0ChlNDGe8hgH/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/AVvXsEgEc0T8seWfJK39UkhhaisTqGXOHZf1N7CQWpMDHB6TkXx1vky5s1Kw4paUZWXyJkKzvoAPhfRkwR9DhtEdSTh44gXZbMViNHlxIo-77kpliCwyR5sj_FkNYYRn-nbL6kZrT81LzxuQNy_6/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/AVvXsEilqFmL6mZbY8QZVyMytSdFnE6JPbWNA8wjZTFYwS75UFhM9GybbOqvp9zpGPAmeQINxe0I9BvhU0i4rzg6WslwPwVroizsrGrXwfg5FAPx-T91YiCWxOINAAxf2b5gjQW84U40E-BgDumI/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>