[بلوجر] إضافة روعة تحت الهيدر ( اشترك معنا - تابعنا ) 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/AVvXsEhdpg1qHLL2YE9uONlpxD-8q4_VvbmhgnA8d7-QdsfT0OLNuhWPfSBJwjDFZW66rrYAzEhjSg2htMuGYFOIK6BvwGATmgS0hb2iZBy48PDTW06XPkqcm6AU0l1E6C0fPljihpH17CTXtfk5/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/AVvXsEgNY7XpLqvBFs_YNO85ay13xD-B0Ht9va7EELC-VnyHTPnLx0GVucfR35-bDF22-aBKRpfXglO-dYAzKYudGiV3SPbpNVa_9Mebyad6y0vXyYToreEyuRGECg258vnoA4Ekw2u6QkVEbvFj/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/AVvXsEgzSWjqxIG0fs3S8g9qDme-1iD0vFNCDPA-ZiOJA314GazPU9G8XBlK2SugdYwF_PZtEPcnbd8jSYgzWF0NS8lKBWtmcZYOw1tJxaSUFU8diVVTvnfkNb7eQnKfoXE-NGlMulICOOyCJbb1/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/AVvXsEhGj6IkYKvZVPpjDSu-sho_YBNmSOXOHq4GV6KXeep9a9FWUL_R0X8rQulXCfQOg4qCTsQSLmDdgYjvKyhUeOOrje7N1MuKCBigU86_sUicoF5BdNsDksRbHR-8PBLQ92fxaDnsBnfecR_4/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/AVvXsEhynF-m_PsGw76UbBO-Rs5lXGwLOe6mz57K60gosGhZwa8yVrGJhZOpGG5kex7-LTo5LfwT8DPsvjemHvfFkDfp8SQwCtfzzNN-IGcd-E8he4eFXFxghOon8btGkKoG11YMszqdJC6B70o/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/AVvXsEjNYw3iMHOXcLRAA12qyqgDHIywHmfK5KF6z-GUUuqv1NTjJspk2uTgkU8rdNzKlB7zQj1J2PyFlP9wyYgrb50i4XlBjLrpJ_PGmNe78BhQTVErHTMo_5JeknQ22uc1el5uIZkM-WTFQ4g/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 ------>

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

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