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

السلام عليكم ورحمة الله تعالى وبركاته هذا هو موضوعي الثاني لهذا اليوم بعد أن وضعت لكم شرح إضافة إعلان أدسنس بجانب أزرار النشر الإجتماعية لمدونات بلوجر وأتمنى أن يعجبكم هذين الموضوعين التي إخترتهم لكم في هذا الموضوع سوف أشرح لكم كيفية إضافة صندوق برتقالي أنيق إلى القائمة الجانبية لموقعك يحتوي هذا الصندوق على مكان للإشتراك في القائمة البريدية.

نبدأ على بركة الله

الشرح

1- قم بالدخول إلى لوحة التحكم بلوجر الخاصة بمدونتك.

2- توجه إلى تخطيط أو تصميم.

3- ثم إضافة أداة.

4- إختر HTML/JavaScript .

5- الحقل الأول إتركه فارغا فأما الحقل الثاني ألصق هذا الكود مع تغيير ما هو بالأحمر بما يناسبك أنت ومدونتك :

<div class="fixed-widget"><div class="widget-container">
  <h1> توصل بجديدنا يوميا </h1>
<p>إشترك في مدونة بيت البلوجر وإحصل على جديدنا مجانا</p>
<fieldset class="inputs">
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=homeblooger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input id="email" class="email" type="text" value="أدخل بريدك..." style="width: 192px; font-size: 15px;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" name="email" />
<input type="hidden" value="homeblooger" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<fieldset class="submit">
<input class="sean orange-btn" type="submit" value="إشترك" name="commit" />
</fieldset>
</form>
</fieldset>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
  ">
<a style="color:#D3D3D3;" href="http://www.homeblooger.blogspot.com">subcription</a></span>
</div>
</div>
<style>
.fixed-widget p {
    background: url("http://1.bp.blogspot.com/-DoJ3WLQmrAY/UCnApalgexI/AAAAAAAAFpo/odnv6uFqyU8/s1600/highlight.png") no-repeat scroll center top transparent;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    margin: 0 0 10px;
    padding-top: 4px;
    text-align: center;
    text-shadow: 1px 1px 1px #111111;
}
.fixed-widget input[type="text"], .fixed-widget input[type="email"] {
    border: 1px solid #D8D9D4;
    color: #555555;
    display: block;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    margin: 0 0 10px;
    padding-right: 6px;
    width: 192px;
}

.fixed-widget a:hover {
    color: #000000;
    text-decoration: none;
}
.fixed-widget fieldset, .fixed-widget form {
    margin: 0 auto;
    width: 210px;
}
.fixed-widget form {
    border-top: 1px solid #E5E5E1;
}
.fixed-widget fieldset.inputs {
    border: 0px;
    border-top: 1px solid #FFFFFF;
    padding-top: 10px;
}
.fixed-widget fieldset.inputs label {
    display: block;
    padding: 0 0 5px;
}
.fixed-widget fieldset.submit {
    border: 0px;
    padding: 1 50 10px;
}
.fixed-widget .orange-btn {
    background: url("http://2.bp.blogspot.com/-73G7XA1YsAw/UCn6IYKZn_I/AAAAAAAAFr4/b27Pr4zpdjE/s1600/gradient-orange2.png") repeat-x scroll center top #FF6B29;
    border: 1px solid #CC5721;
    box-shadow: 1px 1px 1px #FFA04D inset;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-style: normal;
    height: 30px;
    line-height: 28px;
    padding: 0px 8px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #D35E24;
    text-transform: uppercase;
}
.fixed-widget .orange-btn:hover {
    background: url("http://2.bp.blogspot.com/-73G7XA1YsAw/UCn6IYKZn_I/AAAAAAAAFr4/b27Pr4zpdjE/s1600/gradient-orange2.png") repeat-x scroll center bottom #FF6B29;
}
.fixed-widget .orange-btn:active {
    position: relative;
    top: 1px;
}
.fixed-widget {
   
    width: 300px;
}
.widget-container {
    background: url("http://4.bp.blogspot.com/-Qnn9-Y1co4o/UCn5-itZlOI/AAAAAAAAFrw/yZ2Jk2uKjtU/s1600/gradient-big-grey2.jpeg") no-repeat scroll center top #F0F1EC;
   
}
.fixed-widget h1 {
    background: url("http://4.bp.blogspot.com/-cnVi7MLrSM8/UCnAocb5GcI/AAAAAAAAFpk/rgBtmoKLHi0/s1600/fixed-sidebar-header.png") no-repeat scroll center top #F0F1EC;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 900;
    height: 60px;
    line-height: 39px;
    margin: 0;
    padding-bottom: 10px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #D35E24;
}
</style>

6- الأن إختر حفظ ليتم حفظ الأداة.

إنتهى الدرس وأتمنى أن يكون قد نال إعجابكم وإلى درس أو إضافة أخرى بإذن الله