[بلوجر] إضافة روعة تحت الهيدر ( اشترك معنا - تابعنا ) 2014 | مدونة برو ايوب

[بلوجر] إضافة روعة تحت الهيدر ( اشترك معنا - تابعنا ) 2014

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

<div class='main-outer'>

بعد إيجاده أضف قبله الكود التالي :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='navhead'>
<div id='byard-topsubsbox'>
            <div id='subscriptionsection'>
              <div class='subsbox-heading'>
                اشترك معنا وتوصل بأخر المستجدات !
              </div>
              <form action='http://feedburner.google.com/fb/a/mailverify?uri=pro-ayoub' class='byard-subsbox-form' method='post' target='_new'>
                <input class='topsubsboxname' name='name' onblur='if (this.value == &apos;&apos;) {this.value = &apos;أسمك هنا&apos;;}' onfocus='if (this.value == &apos;أسمك هنا&apos;) {this.value = &apos;&apos;;}' value='أسمك هنا'/>
                <input class='topsubsboxemail' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;ضع إميلك هنا &apos;;}' onfocus='if (this.value == &apos;ضع إميلك هنا ;) {this.value = &apos;&apos;;}' value='ضع إميلك هنا '/>
                <input class='topsubsboxbutton' type='submit' value='أشترك الأن!'/>
              </form>
              <p style='margin-top: 8px;font-size: 14px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;'>
               
              </p>
            </div>
            <div class='socialicons'>
              <div class='socialheading'>
                تابعنا على مواقع التواصل الأجتماعي!
              </div>
              <ul>
                <li>
                  <a href='https://www.facebook.com/BlogProAyoub' rel='nofollow' target='_blank'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkUiUo-4XU7S5PzZUfEFhK6kO0XTtAS0np3on79LQFZKrDq2b-beab1dbkDaMplbEd6Hvt2Kdr7AsmmB8uO9O5mGr8IM30WsKD8QMBD-QHs0Xq-VPVRrIGZxPq_bYxSXQl2RFdmw0uYvBU/s1600/facebook_64.png' title='Facebook'/>
                  </a>
                </li>
                <li>
                  <a href='https://twitter.com/blogproayoub' rel='nofollow' target='_blank'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNinl9nh_9ztJ8298XX0CMRzoMGDopL-oyxE_wyNrLm-2TqWmWRxMDUhbM62upQkOmptS-ZgY4-ecswdXq7CWo_fDJrlDX-AdCq5khYTJvEPl_rAtGzUGcEf7hTVfOaNh-ZAjHq0Wj4s6W/s1600/twitter_64.png' title='Twitter'/>
                  </a>
                </li>
                <li>
                  <a href='https://plus.google.com/+ayoubboulaich' rel='nofollow' target='_blank'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFqJskBksiR3C8s97FZg3SB6Z63J8d1dNYcIEwSyvYn9716XJeul29RxjCrcnqyd6mMHSjnCmVCB1980Fh9sxYAJeTJOsho46Fh9UrGWNOvdZMVGTjCNZz-R1O2hbKBb7hzDljra6Q1Fd/s1600/google-plus_64.png' title='Google +'/>
                  </a>
                </li>
                <li>
                  <a href='http://feeds.feedburner.com/pro-ayoub' rel='nofollow' target='_blank'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigkHfDbQvEctVHRZCyfFwb4n4X7AYOWTRVLTQu5Dm8zTC0rHZYR5dEIzQxuqIDygPEKqQczLhGDoE_kluGArZ2jYWa0RAOqfMSVmg_AKUi-XH_rw1YB8ib3qtbudsxzZ0ZGMRbQU8V1sXQ/s1600/rss_64.png' title='Rss'/>
                  </a>
                </li>
                <li>
                  <a href='https://www.youtube.com/user/BlogProAyoub' rel='nofollow' target='_blank'>
                    <img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSTBd38d53uWAo3ELfSgkR61JOWAlGTGdFwxYChvKZ0pkEzdBOo' title='youtube'/>
                  </a>
                </li>
              </ul>
            </div>
          </div>
  </div>
  </b:if>

3- التعديلات :

غير pro-ayoub باسم المستخدم في خلاصتك في feedburner .

غير BlogProAyoub باسم المستخدم الخاص بك في فيس بوك .

غير BlogProAyoub باسم المستخدم الخاص بك في تويتر .

غير BlogProAyoub باسم المستخدم الخاص بك في يوتيوب .

غير +ayoubboulaich باسم المستخدم الخاص بك في جوجل + .

غير pro-ayoub باسم المستخدم الخاص بك في الخلاصات .

4- بعد التعديلات ابحث عن الكود التالي :

]]></b:skin>

بعد أن تجده أضف فوقه الكود التالي :

<----- by pro-ayoub.com ------>
#navhead{
margin-top: 10px;
margin-bottom: -10px;
}
#byard-topsubsbox {background: #fff;
background: #fff;
width: 961px!important;
height: 90px!important;
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
overflow: hidden;
margin: 0 auto;}
#subscriptionsection {float: right;
border-left: 1px solid rgb(168, 168, 168);
padding-left: 56px;
margin-top: -3px;
padding-top: 9px;}
.subsbox-heading {font-size: 20px;
font-family: droidkufi-bold;
text-align: center;
font-weight: bold;}
.topsubsboxname {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinSJld4j7u3tj6eJdNVMNCFkmIHP4MDmCba_M3tjCk__C51K2TXRf7hPUhEruJ_joc-1xgYfVzreNBtwaIjHekd1qypC507N9pXddqQwnwpH602GyGxvrMeAli9n4Llhjg22aIedS2SHk/s320/name.png) no-repeat 7px 8px;border:1px solid #ddd; font-family:droidkufi-bold; font-size:14px; font-weight:bold;color:hsla(0,0%,27%,0.69); width:150px; margin-top:10px; height:24px; padding:5px 28px 5px 15px; vertical-align:top; display:inline-block;margin-right:15px;}
.topsubsboxemail {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcCVr_5_uFo9_2KdMY1zaAssO5IyKJ3-95abNerN6sk4PlyafezZhq6J_smVAJhn77ZcDnE5eseH2jkwmm4D31XjpbFFh9qNCjqXj-E62DAvJ5E_X68pxzgSVS4hbk7carudqjpxVo_M/s320/email.png) no-repeat 7px 10px; border:1px solid #ddd; font-family:droidkufi-bold; font-size:14px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:150px; height:24px; margin-right:5px; margin-top:10px; padding:5px 28px 5px 15px;vertical-align:top; display:inline-block;}
.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}
.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px #bbdaf7;background:-webkit-gradient( linear, right top, right bottom, color-stop(0.05, #00B3FF), color-stop(1, #349ECB) );background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00B3FF&#39;, endColorstr=&#39;#349ECB&#39;);background-color:#00B3FF;  margin-top:10px;  margin-right:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #84bbf3;display:inline-block;color:#ffffff;font-family:droidkufi-bold;font-size:13px;font-weight:bold;padding:5px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, right top, right bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF) );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#349ECB&#39;, endColorstr=&#39;#00B3FF&#39;);background-color:#349ECB;}.topsubsboxbutton:active {position:relative;top:1px;}
#socialsection {float:right;margin-top:20px;}
.socialheading{font-size: 20px;
font-family: droidkufi-bold;
text-align: center;
font-weight: bold;}
.socialicons ul {list-style: none;
display: inline;
float: left;
margin-top: 10px;
margin-left: 38px;}
.socialicons li {opacity: 1;float:right;padding:0px 0px 0px 10px;}
.socialicons li:nth-child(6) {padding: 0;}
.socialicons li a img{height:49px;width:49px}
<----- by pro-ayoub.com ------>

الأن احفظ القالب ومبروك عليك الإضافة .

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