اضافة صندوق أنيق للقائمة البريدية لمدونات بلوجر

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

أهلا و سهلا بكم اصدقائي متتبعي مدونة ديما كليك .

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

كيف نقوم بذلك ؟

 نتجه ببساطة الى لوحة التحكم لمدونتك ثم توجه إلى تخطيط ثم نضغط على إضافة أداة و نختار HTML/JavaScript و من بعدها نلصق هذا الكود .

 

لا تنسى القيام بالتغييرات التالية:

.

اللون الازرق مخصص لكتابة ما يناسبك أنت ومدونتك

اللون الاحمر مخصص لعنوان التغذية ( Your FeedBurner feed )

اللون الاخضر مخصص لتغيير عرض الاضافة ان لم تتناسب مع مدونتك .

اخيرا قم بالحفظ و هنيئا لك الاضافة .

<div class="fixed-widget"><div class="widget-container">

<h1>توصل بجديدنا يوميا </h1>

<p>إشترك في مدونة ديما كليك و تواصل معنا</p>

<fieldset class="inputs">

<form
action="http://feedburner.google.com/fb/a/mailverify"
style="border:1px solid #ccc;padding:3px;text-align:center;"
target="popupwindow" method="post"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DimaClick', 'popupwindow',
'scrollbars=yes,width=500,height=520');return true">

<input id="email"class="email" type="text" value="أدخل بريدك ..." style="width: 202px; 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 value="DimaClick" name="uri"
type="hidden"/>

<input
value="en_US" name="loc" type="hidden"/>

<input class="sean
orange-btn" type="submit" value="إشترك" name="commit" />

</form>

</fieldset>

<span style="
line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;"><a style="color:#D3D3D3;"

href="http://tips4pc-users.blogspot.com">subcription</a></span>

</div>

</div>

<style>

.fixed-widget p {

background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQzQpzRkRJ8sZfQO4XyqGFNBKzaxBaXrhyphenhyphenqg05g2xUWi9Cmre68l9zjVQu1b6LAbjzmVi65l9Y5yuFcIjiIOaK423kd9Z7rPLgxBC42VTUAIvtW84sbrELnRcfjyuCVXGVrupIi5WV5Y/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKn2HuUksv1_YW6fHtzWO46758-ydpl4xQUCV5ZPHgFuNPo9RwwRT1ngfXx8lEhi0hMUjXYcLSlp-VVUt8y64mU_sN8A18m1eJyKnd8npqxMYoL6EnTFNBMy63LuzXM-mttojTp4JAKk/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKn2HuUksv1_YW6fHtzWO46758-ydpl4xQUCV5ZPHgFuNPo9RwwRT1ngfXx8lEhi0hMUjXYcLSlp-VVUt8y64mU_sN8A18m1eJyKnd8npqxMYoL6EnTFNBMy63LuzXM-mttojTp4JAKk/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKR0jTlC5_2iEe_Ju_n3JTOv0QhPcXAEp0DFh9r4ndd1hi2p8HXGIy_CrQYqKNrnM1f3FMJAN7SOAvrOfVzsd1d5SQCXcXUwdaE7jIVG2zl4QQnSnWyhX5YpzNw-o5QhEAEPD3e8LfXg/s1600/gradient-big-grey2.jpeg")
no-repeat scroll center top #F0F1EC;

}

.fixed-widget h1 {

 background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYraXzWKHWHx9SQRmBh1IfFAUrDtaj0P1nq5IOymPRtw_X2NjO-zGcArQX5rEE5boVb3dD5aeJO7eltdr6f_axXjPdwf0nlYQujnwdlOaHsmui_bIKVuZ7CMyKmDZ13f5s2jv4qzyDqBc/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>

اخيرا قم بالحفظ و هنيئا لك الاضافة و شكرا لك المتابعة و الى موضوع آخر .