طريقة مبتكره لعمل "صندوق الاشتراك عبر الايميل" فى بلوجر عن طريق رابط نصى

هل تعلم ما هو صندوق الاشتراك عبر البريد الالكترونى أو Email Subscription form ؟ إنه الصندوق الذى يزودك بالكثير من الزوار الدائمين Traffic ، حيث يقوم زوار مدونتك بوضع البريد الالكترونى الخاص بهم فى صندوق خاص بذلك ثم يقومون بالضغط على "تقديم" أو "اشتراك" وبذلك يحصلون على كل ما تنشره يومياً من تدوينات ومقالات فى صندوق الوارد Inbox فى البريد الالكترونى Email الخاص بهم .

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

وضع الصندوق فى شكل رابط نصى :

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

إذن كيف نضع هذه الطريق للاشتراك فى مدونة بلوجر ، تابع معى الطريقه :

إذهب إلى بلوجر وادخل على المدونه التى تريد الاضافه فيها ثم اختر قالب ثم تعديل القالب أو بالانجليزى كالتالى :
Blogger Dashboard > Template > Edit HTML

أولا عليك أن تضيف بعض أكواد الـ css الخاصه بتصميم الاضافه وشكلها كما يلى :

ابحث بالضغط على ctrl+f عن ]]></b:skin>

ثم قم بإضافة الكود التالى فوق ]]></b:skin> مباشرةً

.newsletter-sm {

background:#fff;

width: 100%;height: 253px;

margin: 0;

padding: 20px;

}

.newsletter-sm form {

padding: 10px;

margin-top: -37px;

}

.newsletter-sm h3 {

color: #FFF;

font-family: algerian;

font-size: 24px;

font-weight: normal;

text-align: center;

padding: 10px;

text-shadow: 2px 2px 2px #000;

margin-top: -18px;

box-shadow: 0px 0px 5px 2px #000;

margin-right: -20px;

position: static;

margin-left: -20px;

margin-bottom: 10px;

background: #009EFF;

}

.text {

font-size: 14px;

color: #FFF;

margin-left: -20px;

padding-bottom: 28px;

margin-right: -20px;

background: #009EFF;

font-family: cursive;

line-height: 20px;

}

.newsletter-sm .fa {

float: left;

padding-left: 16px;

padding-right: 16px;

padding-bottom: 16px;

padding-top: 7px;

font-size: 140px;

}

.newsletter-sm .newsletter-input-sm {border: 0;

padding: 5px 10px;

width: 69%;

float: left;

height: 40px;

font-family: oswald;

color: #555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}

.newsletter-sm .newsletter-sm-bot{ background: #009EFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFK6sQdnHNKx5_4gfUm-x1AkPyCgV-_eDdPyRf9iwmQLwBfWL2_LGLo6uN54a2NvnELlyK_ajqZEe_lkdAdhQ78rpvpMejv0bcRI6oquIoISl9uDKXDm5kgX4OBbfCWNZGF3UyW8BUAA/s1600/bg.png) no-repeat;

margin: 27px -30px 0px;

height: 64px;

padding-left: 16px;

padding-top: 16px;

}

.newsletter-sm .newsletter-button-sm {

float: right;

height: 50px;width:23%

display: inline-block;

text-shadow: 2px 2px 1px #000;

font-size: 16px;

font-family: oswald;

padding: 10px 22px;

position: relative;

color: #fff;

text-align: center;

margin-right: 16px;

background: #009EFF;

border: 1px solid #fff;

cursor: pointer;

border-radius: 3px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

}

.modalDialog {

position: fixed;

font-family: Arial, Helvetica, sans-serif;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0,0,0,0.6);

z-index: 99999;

opacity:0;

-webkit-transition: opacity 200ms ease-in;

-moz-transition: opacity 200ms ease-in;

transition: opacity 200ms ease-in;

pointer-events: none;

}

.modalDialog:target {

opacity:1;

pointer-events: auto;

}

.modalDialog:target > div {

margin: 8% auto;

}

.modalDialog > div {

-webkit-transition: all 100ms ease-in;

-moz-transition: all 100ms ease-in;

transition: all 100ms ease-in;

width: 500px;

position: relative;

margin: 5% auto;

background: #fff;

min-height: 200px;

}

h2.signup {

background:#00aa9f;

border-bottom: 1px solid #008d84;

font-weight: normal;

text-align:center;

padding: 10px;

color:#fff;

font-size: 18px;

}

.close {

color: #888!important;

position: absolute;

top: 1px;

right: -40px;

width: 30px;

height: 30px;

line-height: 30px;

text-align: center;

font-size: 16px;

}

.close:hover { text-decoration:none; }

.close:hover { color:#555; }

والآن بقى أن نضيف كود html الأساسى كالتالى :

ابحث بالضغط على ctrl+f داخل تعديل القالب عن </body> وقم بلصق الكود التالى فوق كلمه </body> مباشرةً

<div class="modalDialog" id="signup">

<div>

<a class="close" href="#close" title="Close"><i class="fa fa-times"></i></a>

<div class="signup-container">

<div class="newsletter-sm">

<h3>اشترك فى قائمتنا البريديه</h3>

<div class="text"><i class="fa fa-envelope"></i><br><div class="texts">ضع ايميلك هنا وسوف نرسل لك كل ما هو جديد يومياً فى مجال التدوين</div></div>

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

<div class="newsletter-sm-bot">

<input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text">

<button class="newsletter-button-sm" type="submit">اشتراك</button>

</div>

<input name="uri" type="hidden" value="كود feedburner">

</form>

</div>

استبدل كلمه "كود feedburner" بإسم المستخدم الخاص بك فى خدمة feedburner

يمكنك تغيير النص المكتوب فى خلفيه صفراء إلى ما يناسب مدونتك

والآن قم بحفظ القالب save template

الآن تستطيع كتابة رابط أو لينك يفتح نافذه منبثقه للاشتراك فى القائمة البريديه الخاصه بك كالتالى :

هذا هو كود الرابط الذى سوف يُظهر نافذة الاشتراك

<a href='#sign-up'>اشترك معنا ليصل على ايميلك كل جديد</a>

أو أن تقوم بعمل رابط وتكتب الـ url الخاص بالرابط #sign-up وكده تكون خلصت المهمه بنجاح .

هناك شئ آخر أود أن أقوله ، يمكنك وضع الرابط على صوره بالكود التالى :

<a href='#signup'><img src='الرابط المباشر للصوره' alt='اشترك فى القائمة البريديه للموقع الشامل' title='الاشتراك بالايميل فى الموقع الشامل من الالف الى الياء'/></a>

غَيّر كل النصوص المكتوبه على خلفيه صفراء.

وإلى هنا إنتهينا ، إن كان لديك أى إستفسار أو سؤال ولو بسيط لا تتردد فى كتابة تعليق أسفل هذا المقال .