كيف نضيف
اجزاء (اشترك معنا في هذه المدونة و تابعنا ) اسفل الهيدر لمدونة بلوجر
----------------------
How do you add parts (Join us in this blog and follow us) down header for a blog Blogger
-----------------------
السلام عليكم اخواني اخواتي متتبعيمنا
اهلا و سهلا بكم على موقعنا، سنشرح في هذا الدرس
كيفية اضافة اشترك معنا عبر البريد الالكتروني ليصلك كل جديد من مدونتنا، و اضافة
تابعنا على الموقع الاجتماعي حيث يتم وضعهما اسفل الهيدر ، لتأتي بصورة جد متناسقة
مع بعضيهما البعض، و هضا قصد تمكين الزوار من الاشتراك في مدونتك و متابعتها عبر
مواقع التواصل الاجتماعي ............
سنبدا
الشرح لهذا نطلب منك القليل من التركيز فقط ...............
قم
بفتح مدونتك على البلوجر Blogger ثم اختر قسم قالب ، و منه انقر على HTML قصد تحويل الصفحة الى
كود HTML كما
في الصورة التالية:
تظهر لنا الصفحة التالية التي تحتوي على كود HTML الخاص بموقعنا، ثم ننقر بداخل الكود و نضغط على CTRL+f من لوحة المفاتيح ،
لتظهر لنا مكلن البحث عن الكلمات بداخل الكود الخاص بنا في الاعلى ، نبحث عن الكود
التالي:
<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://feeds.feedburner.com/blogspot/SBWxz' class='byard-subsbox-form' method='post' <input class='topsubsboxname' name='name' onblur='if (this.value == '') {this.value = 'أسمك هنا';}' onfocus='if (this.value == 'أسمك هنا') {this.value = '';}' value='أسمك هنا'/>
target='_new'>
<input class='topsubsboxemail' name='email' onblur='if (this.value == '') {this.value = 'ضع إميلك هنا ';}' onfocus='if (this.value == 'ضع إميلك هنا ;) {this.value = '';}' 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/pages/Abdo-bady/280689625390249' rel='nofollow' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghWl8nIyNBrrXHzx39157k7fsCAfJmkMDYC9axx1FHlOZt47iZ4z70pTqLzdIcrFl1tepyoCPWQkmQmDmhjKvCFKUmvcnKJktZ9JIZbGnOwQdCsCe4s6O9Bm8kaYzaxVrDMn-8LpeA7fRt/s1600/facebook_64.png' title='Facebook'/>
</a>
</li>
<li>
<a href='https://www.facebook.com/abdo.bady90' rel='nofollow' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2QhTVvPHSMRnDg8_sYIF3HQUYeFJ0XREEIhtK2pADRAsHVPm-pzb9wF1hmqvi_8CttogjHH1XQzmKidmv8GLzg9x_ew-KLUCiG2ZE5KJiwyLb86qYM1eRIYK1wX8ik63NxESI7K6Xa9s/s1600/twitter_64.png' title='Twitter'/>
</a>
</li>
<li>
<a href='http://ecomedfot.blogspot.com/feeds/posts/default' rel='nofollow' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoBBONY2egMvckcbD0Bpu7GRsRSZuyihedIff8xlRn5Duu5EPhR6Immiumo83oobEM4LQLpyBV2B8oH8B0bfkzPxyeKx4UpWpDYgNxxqq1KaqUQd1rxE0NuUlJGXLrdb8WjYkez0rRutOt/s1600/google-plus_64.png' title='Google +'/>
</a>
</li>
<li>
<a href='http://feeds.feedburner.com/ blogspot/NcsFk' rel='nofollow' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBl5h7C04rvrx_OPWrWnUWcjZVVlIG8MBExf0XIhTWAYcQx-I_KBsQaaeQjPZc7aL6GgIFa1tz65vOrdFfnDCGfkE9MhpAZw1PEAKotMY-KeUVOROCp_1Y8ty0qtbblWjJgNJVA2b5IZV/s1600/rss_64.png' title='Rss'/>
</a>
</li>
<li>
<a href='https://www.youtube.com/channel/UCXoIozrHfZGYsqbDo1YTd1Q' 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>
|
مع اجراء
التعديلات التالية على الكود السابق بما يتوافق مع مدونتك:
رابط ال feedburner الخاص بك من
الاسم NcsFk الى اسم رابط مدونتك
غير رابط
الفايسبوك برابط صفحتك على الفايسبوك
قم بتغيير
رابط صفحة التويتر برابط صفحتك
قم بتغيير
رابط صفحة اليوتوب برابط قناتك على اليوتوب
قم بتغيير
رابط صفحة على غوغل + برابط صفحتك على غوغل +
4- بعد التعديلات ابحث عن الكود التالي بنفس الطريقة السابقة :
]]></b:skin>
كما
بالصورة التالية:
<----- by www.ecomedfot.blogspot.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/AVvXsEj1Bw3BIIvuCje36hYcBabaIayEVy-kai-wS59sjy0wH0o-QHOkcNzq1UUk3tT3Uz5n8r-pnDONSEG8EcKGMgTyMd3U_hSizCqrh2jODYbDh36Sg-l_-BnSnWU1mLTgaTadZuoOyzaKDPk/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/AVvXsEglGUrVTZgJ9Ven7uuaqbfD7lG1_iyr99ajSyoColg-tDmgfQCP37-cdQiAzyOllJewytZ-mIX9i8tA3WQEB-XegEolaCT89_wj2WqbIOpcOvtSv2CZFEfWiGD1npPOVuJg0IFPxShfGeA/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='#00B3FF', endColorstr='#349ECB');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='#349ECB', endColorstr='#00B3FF');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 www.ecomedfot.blogspot.com------>
|
الى هنا نكون قد قدمنا لكم هذا
الوضوع ليكون اضافة في سرح المعرفة للتلاميد و الاساتذة .... اتمنى ان يكون في
متناول الجميع ....
اذا واجهتك أي مشكل او تسائل
ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....
ان اعجبك الموضوع لا تنسى
بمتابعتنا بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل
جديد في موقع تعلم توظف ...
يمكنكم
متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....
زورو المواقع التالية
|
|
|
|
|
|
|
|
|
ليست هناك تعليقات