صندوق الاشتراك عبر البريد الالكترونى لبلوجر بألوان مختلفة

0

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

صندوق الاشتراك عبر البريد الالكترونى لبلوجر بألوان مختلفة ، من الأمور الهامة التى لابد ان يهتم بها اى مدون.

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

الزائر المستهدف والمشترك بمدونتك هو من الزوار المهتمين بموضوع مدونتك وسيكون حريص على المتابعه اليومية لها.

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

شرح تركيب صندوق الإشتراك عبر البريد الالكترونى لمدونات بلوجر

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

2- للإشتراك أدخل على Google FeedBurner وستظهر لك قائمة بمواقعك وستجد موقعك موجود بالفعل هناك . ولكن يحتاج الى بعض التعديلات البسيطه لضمان وصول الموضوعات بمدونتك للمشترك بطريقة سليمة.

3- بعد الدخول للموقع ستظهر لك واجهة الموقع على سبيل المثال كالشكل التالى :

صندوق الاشتراك عبر البريد الالكترونى لبلوجر

4- إضغط على اسم الموقع الخاص بك من القائمة ، وانا هنا اخترت اسم مدونتى تعلم سيو بلوجر. ستظهر لك صفحه شبيهه كمابالصورة التالية.

صندوق الاشتراك عبر البريد الالكترونى لبلوجر

5- اتبع الخطوات بالترتيب كما بالصورة بالضغط على Puplicize من القائمة العلوية ستظهر لك قائمة جانبية إضغط فيها على Email Subscriptions ستظهر لك قائمة يمينا أنزل بالاسفل وإضغط على Active او تفعيل.

6- من خلال الصفحة السابقه انت هنا فعلت ايميلك وفعلت الFeed الخاصة بمدونتك.

7- مايهمنا الآن هو الكود المظلل باللون الأصفر وسيكون لديك شبيها به أبقى على هذه الصفحة وانتقل الآن لتركيب صندوق الإشتراك عبر البريد الالكترونى لمدونات بلوجر.

تركيب صندوق الإشتراك عبر البريد الالكترونى من خلال لوحة مدونتك على بلوجر

8- قم بالدخول الى لوحة تحكم مدونتك ثم المظهر ثم اضغط على تعديل HTML ستفتح معك صفحة قالب المدونة.

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

9- بالضغط على مفتاحى Ctrl+Fمعا ،ستفتح معك خانة البحث بالقالب . ابحث عن الوسم </body> . أعلاة أو فوقه مباشرةضع الكود التالى :

<div class='subscribebar'>
   <div class='container text-center'>
      Get the latest article updates from this site via email for free!
      <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
         <div class='arlina-form-fields'>
            <p>
               <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address...&quot;;}' onfocus='if (this.value == &quot;Email address...&quot;) {this.value = &quot;&quot;;}' placeholder='Email address...' required='' type='email'/>
            </p>
            <p><input type='submit' value='Submit'/></p>
            <input name='uri' type='hidden' value='ArlinaDesign'/>
            <input name='loc' type='hidden' value='en_US'/>
         </div>
      </form>
   </div>
 <button class='closeme' title='Close this message'>&#10005;</button>
</div>
<script type='text/javascript'>
//<![CDATA[
// Floating Subscribe Box
$(document).scroll(function(){$(this).scrollTop()>380?$(".subscribebar").slideDown('fast'):$(".subscribebar").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".subscribebar").fadeOut("slow",function(c){$(".subscribebar").remove()})})});
//]]>
</script>

10- ارجع الى ماجاء برقم 4  – شاهد الصوره – وانسخ رابط الــ FeedBurner وضعه مكان الــ feed الخاص بالمصمم والمظلل باللون الأصفر ثم احفظ القالب.

11- هناك أكثر من شكل على حسب أكواد الــ css ، ستقوم بنسخ وتجربة أى كود فيهم وتختار الشكل المناسب لك .

إقرأ أيضا : شرح تركيب كود اعلان منبثق مع زر الاغلاق فى مدونة بلوجر

فأعلا الوسم </head> قم بوضع كود CSS التالى والذى تختاره .

الشكل الأول .

كود Css

<style type='text/css'>
/* Floating Subscribe Box Light */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;color:#999;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:1px solid rgba(0,0,0,0.1);border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(0,0,0,0.01);color:#333}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.closeme{background:#fff;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:#ccc;border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:#aaa}
@media (max-width:767px){
.closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#34495e;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.3)}
.subscribebar .closeme:hover{background:#2c3e50;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

والنتيجة

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

الشكل الثانى :

كود Css

<style type='text/css'>
/* Floating Subscribe Box Night */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(57,67,77,.98);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}
.subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}
.subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.15);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.3)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

والنتيجة 

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

الشكل الثالث

كود Css

<style type='text/css'>
/* Floating Subscribe Box Gradient */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:#FF5722;background-image:linear-gradient(50deg,#ff4169,#8b41f6);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#f9a93c;border:1px solid #f9a93c;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#e49b36;border:1px solid #e49b36;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}
.subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}
.subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.25);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.4)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

والنتيجة

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

وهكذا

تستطيع ان تتحكم فى ألوان الشكل من خلال كود Css بتعديل اللون كمايناسبك.

شكل آخر مميز 

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

وطريقة التركيب:

من خلال التخطيط بمدونتك اختر إضافة اداة من السايدبار ثم أختر اداة HTML/JavaScript والصق بها الكود التالى :

<style type="text/css">
.hbzsignup-form {
    background: transparent url("https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
    height: 150px;
    width: 250px;
    margin: 10px auto 60px auto;
}

.hbzform-inner p {
    text-align: center;
    color: #fff;
    padding: 10px;
    font: bold 18px "trebuchet MS","Tahoma";
}

.hbzemailform {
    margin: 120px auto 5px;
    width: 215px;
}

#hbzemailbox {
    background: #FEFEFE none repeat scroll 0% 0%;
    border: medium none;
    font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;
    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
    padding: 7px;
    box-sizing: content-box;
    height: 15px;
    width: 100%;
}
#hbzemailbutton {
    background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
    box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
    border: medium none;
    color: #FFF;
    cursor: pointer;
    font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;
    padding: 6px;
    border-radius: 5px;
    height: 27px;
    width: 231px;
margin-top: 10px;
}

#hbzemailbutton:hover {
    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}

.hbzsocial-icons {
    margin-top: 111px;
    overflow: hidden;
    display: block;
    text-align: center;
}

.hbzsocial-icons ul {
    display: inline-block;
    margin: 0 auto !important;
    text-align: center;
    padding: 0px
}

.hbzsocial-icons ul li {
    background: transparent !important;
    border: none !important;
    float: left;
    list-style-type: none !important;
    margin: 0 4px 10px !important;
    padding: 0 !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("https://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 38px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s; width: 38px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-color: #3b5998;
    background-position: -60px 3px;
}

.hbzsocial-icons ul li.social-twitter a {
    background-color: #00aced;
    background-position: -253px 3px;
}

.hbzsocial-icons ul li.social-pinterest a {
    background-color: #cb2027;
    background-position: -157px 3px;
}

.hbzsocial-icons ul li.social-rss a {
    background-color: #F87E12;
    background-position: -189px 3px;
}
.hbzsocial-icons ul li a:hover {
    background-color: #333;
}

.hbzsocial-like {
    display: block;
    text-align: center;
}

.hbzsocial-like tbody, .hbzsocial-like tbody tr {
    display: block;
}

.hbzfb-likes {
    display: inline-block;
    padding-bottom: 15px;
    margin-right: 5px;
}

.hbztw-follow {
    display: inline
}

</style>

<div>
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <p>إشترك ليصلك جديد المواضيع.</p>
  </div>
  <div class='hbzemailform'>
   <form action='https://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[feedborner ID]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[feedborner ID]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='أدخل البريد الالكتروني...'/>
    <input id='hbzemailbutton' title='' type='submit' value='إشترك'/>
   </form>
  </div>
 </div>

 <div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div></div>

وقم بتغيير الآتى بالكود  التغيير يشمل الكلمة كاملة بالأقواس وليس مابداخل الأقواس فقط بالكود.

[FeedBorner ID] غيره بـ ID للفيدبرونر (الذي حددناه سابقا باللون الأصفر فى الفقرة 4).
[Fb url] غيره برابط صفحتك الخاصة بالمدونة او الشخصيةعلى الفيسبوك.
[Twitter url] رابط حسابك على تويتر.
[Pinterest url] رابط حسابك على Pinterest.
[RSS url] غيره برابط RSS وهو الخاص بالفيد برنر الخاص بمدونتك.
[Twitter Username] غيره باسم مستخدم حسابك على التويتر.

الخلاصة.

وجود الدعوه لتسجيل الإشتراك بمدونتك من قبل الزوار مهم جدا لتبنى قاعده عريضه من المتابعين لمواضيع مدونتك. فلاتهملها.

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

الأكواد من : Arlina Design

اتمنى ان تكون قد وجدت فى هذه المشاركه مايفيدك.

واى سؤال اتركة لى بالتعليقات حول هذا الموضوع

مودتى لك

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More