صندوق الاشتراك مثل مدونة تعلم الامن المعلوماتي

بسم الله الرحمن الرحيم اللهم صل علي محمد واله وصحبة وسلم تسليماً كبيراً اللهم يا معلم ابراهيم علمنا انك انت العليم الحكيم ويا مفهم سليمان فهمنا انك انت الجواد الكريم . اتيت لكم اليوم باضافة جميلة لمدونات بلوجر وهي الخاصة بمدونة تعلم الامن المعلوماتي وهي اضافة الاشتراك بالقائمة البريدية بشكل جميييييييل ورائع وبسيط ويتناسب مع كل المدونات لمعرفة طريقة الاضافة تابع معي

اولاً نضيف خواص css للقالب
قم بالبحث عن ]]>  واضف قبلة الكود التالي

.ins{
width: 100%;
height:63px;
margin-top:19px;
}
.ins .txt2 {
border: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTK_gOwBK2vZZynl7fUMaXWDDcj0yI_b9rHNsBLicKXxNm4C_o4n5M0cIiJyo-XHMxkPCX5RxvMWPUnRMj6RmxRMLgsmIuUhyNyt-yzHJRXPaGr0o_e6DQ1hTxm-FN83z1Y_bwqKBKEgg/s1600/back-sub.png);
font: 13px Tahoma, Geneva, sans-serif;
color: #adadad;
padding: 24px 7px 23px;
float: right;
margin: 0;
text-align: right;
width: 243px;
}
.ins .btn2 {
background: #ffb546 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDi_RFL4rwVoI0FjrF5-2NvzcYr0aee_lE1daNFz3bpKfooZ86cj8Cy5pqforgFPuqgVcrdlvaFiGgt6D28NM7qO2V0OJnWohAvFlv9-jyYFHJr-FzKYGN2gKfC8BNsHMoj00L5GoPnAs/s1600/btn-sub.png) center no-repeat;
float: right;
border: none;
border-right: 3px solid #ffa116;
width: 63px;
height: 63px;
cursor: pointer;
}
.ins .btn2:hover {
background: #ffb546 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDL0GHKsG6VgvTACqwPuOsbDRDi4vSLrsKB717guaqCVX4M6feJfgOdbAUknf9Mm3WxokOW8sOEcwyyIgVUf0jfZ0KDHEpKxOHBH3qF1X1xFd09xhPLoepva5JbFRmMX2Yb9eKxXPt9tA/s1600/back-sub2.png) center no-repeat;
}
بعد اضافة هذا الكود افتح اداة جافا اسكربت واضف الكود التالي

<div class="ins">
        <center>
        <div id="sleek-subscribe">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=ta3alam-it-security/zxYd", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow">

<input class="follow-by-email-address txt2" name="email" placeholder="ضع ايميلك هنا ليصلك كل جديد ..." type="text" />
<input class="follow-by-email-submit btn2" type="submit" value="" />
<input name="uri" type="hidden" value="3rab-computer/zxYd" />
<input name="loc" type="hidden" value="en_US" />
form>

        div>
        center>
    div>

ثم غير ما يلزم تغيره

الان قم بعمل معاينة للمدونة ومبروووووووك عليك الاضافة

Tweet