الدرس الرابع تخصيص قالب بلوجر واضافة ادوات له|layout lerning and how to add html

الدرس الرابع :كيفية تخصيص قالب بلوجر|layout lerning and how to add html

سوف نتحدث في هذا الدرس عن التخطيط في المدونة ونشرح كل تبويب فيها 

السلام عليكم ورحمة الله وبركاته بسم الله والصلاة والسلام على رسول الله ، ثم اما بعد :

ما هو التخطيط ؟!

التخطيط : قسم من أدوات التحكم فى مدونات بلوجر لتنسيق القالب وإضافة الأدوات

حيث تنظم فيه شكل قالبك وتضع فيها إضافات تخدم زائريك وموقعك

أهم الإضافات والادوات التى يجب توافرها فى كل مدونة :

1 - المشاركات الشائعة : هى أداة مهمة جداً يظهر فيها اكثر الموضوعات زيارة خلال مدة تحددها ( كل الوقت ، أخر شهر ، اخر 7 أيام ) ويظهر فيها عدد من 1 : 10 موضوع حسب اختيارك وفائدتها انها تزيد من الروابط الداخلية للموقع ومدة بقاء الزائر داخل موقعك حيث يتصفح اهم مواضيعك

2 - أرشيف المدونة : ارشيف المدونة يعتبر بمثابة فهرس للمدونة حيث يظهر فيها كل مواضيعك من البداية بنظام محدد تحدده انت

3 - الملف الشخصى : حيث يظهر فيه حساب مسئول المدونة او المسئولين ليتمكن الزوار من معرفة أصحاب المدونة ومتابعتهم والتعرف عليهم

4 - رأس الصفحة : وفيه يظهر عنوان مدونتك او الشعار الخاص بها 

كود تثبيت ابعاد الصورة في حال اردت التعديل عليه

طريقة  ايجاده نضغط  غلى المظهر---->تعديل كود html ثم نضغط على مكان فارغ من الاكواد ونقوم بالضغط على ازرار( ctrl+f)ونبحث عن كلمة header-logo img في مربع البحث حتى نصل الى كود مشابه للكود التالي:

.header-logo img{height:auto;max-height:90px;margin:14px 0 0;max-width:100%}

حيث الرقم في اللون الاصفر هو: ارتفاع \طول الصورة التلقائي 
اما الرقم في اللون الازرق:هو لمعايرة مكان الصورة* نقوم بالتعديل عليهم للحصول على الشكل المطلوب.

5 - متابعة بالبريد الالكترونى : حيث تظهر الاضافة كـ  مربع نصى يدخل فيه الزائر بريده الالكترونى لمتابعة جديد مدونتك على بريده الالكترونى

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

7 - تابعنا على : وهى اضافة خارجية تقوم بإضافتها عن طريق  HTML/JavaScript

8-  رمز مفضلة: وهو رمز الصفخة الذي يظهر في اعلى الصفحة في المتصفح

9-Social Media Icons: وفيها يتم وضع قائمة التواصل الاجتماعي الخاصة بك وفي القالب المستخدم 

للشرح الايقونات المتواجدةفي القالب:facebook,twitter,rss,gplus,youtube,skype,stumbleupon,

tumblr,vine,overflow,linkedin,dribbble,soundcloud,behance,

digg,instagram,pinterest,delicious,codepen

ويعد الاكثر استخداما بين الايقونات :youtube وtwitterوfacebookوpinterestوinstagram

10-ads: هنا حيث يتم وضع كود الاعلان في حال اردت ان تضع صورة خاصة بك تكتب الرمز التالي

<true><a href="#"><img alt="LightBlog" src="ضع رابط الصورة المراد (ابعاد الصورة   (659,90)" /></a></true>

مع استبدال ضع رابط الصورة ------->>>>> برابط الصورة المرادة

11-اضافة اداة فيس بوك :وهي عبارة عن اضافة HTML/JavaScript شكل الاضافة 

طبعا مع اختلاف لون الاطار وكلمة فيسبوك حسب اعدادات القالب

  والكود الخاص بها هو

<center><div class="fb-page" data-href="ضع رابط صفحة الفيس" data-width="360" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div></center>

مع استبدال ضع رابط الفيس ------->>>>> برابط صفحتك على الفيس

12-اضافة اداة عداد التواصل :

الكود الخاص بها هو

<div class="social-counter"><ul id="social"><li class="item-social facebook count=3.5k;"><a href="ضع رابط صفحة فيس بوك"><i class="item-icon fa"></i><span class="item-count">3.5k</span><span class="item-text">اعجاب</span></a></li><li class="item-social twitter count=1.7k;"><a href="ضع رابط صفخة تويتر"><i class="item-icon fa"></i><span class="item-count">1.7k</span><span class="item-text">تابع</span></a></li><li class="item-social youtube count=2.8k;"><a href="ضع رابط اليوتيوب"><i class="item-icon fa"></i><span class="item-count">2.8k</span><span class="item-text">اشتراك</span></a></li><li class="item-social pinterest count=524;"><a href=" pinterest ضع رابط "><i class="item-icon fa"></i><span class="item-count">524</span><span class="item-text">تابع</span></a></li><style  type="text/css">.social-counter{margin:0;padding:0;overflow:hidden}.social-counter ul{margin:0;padding:0}.social-counter ul li{list-style: none;width:42%;float:left;text-align:left;margin:0 0 5px;padding:0 0 5px;position:relative;    position: relative;border: 1px solid #f5f5f5;padding: 7px;}.social-counter ul li:nth-child(2),.social-counter ul li:nth-child(4),.social-counter ul li:nth-child(6),.social-counter ul li:nth-child(8){float:right}.social-counter ul li a{margin:0;padding:0}.item-icon{float:left;position:relative;text-align:center;vertical-align:middle;color:#fff;margin:0;display:inline-block;width:32px;height:32px;line-height:32px;font-size:16px;border-radius:2px}.hide-count{display:none}.item-count{display:inline-block;color:#333;font-weight:700;font-size:13px;line-height:32px;float:left;padding-left:10px}.item-text{float:right;display:inline-block;color:#666666;font-size:11px;line-height:32px;font-weight:400}.item-social.facebook .item-icon{background-color:#5271b3}.item-social.twitter .item-icon{background-color:#49aff8}.item-social.gplus .item-icon{background-color:#cb2027}.item-social.rss .item-icon{background-color:#FFC200}.item-social.youtube .item-icon{background-color:#eb1a21}.item-social.dribbble .item-icon{background-color:#ea4c89}.item-social.instagram .item-icon{background-color:#4E729A}.item-social.pinterest .item-icon{background-color:#cb2027}.item-social.facebook .item-icon:before{content:"\f09a"}.item-social.twitter .item-icon:before{content:"\f099"}.item-social.gplus .item-icon:before{content:"\f0d5"}.item-social.rss .item-icon:before{content:"\f09e"}.item-social.youtube .item-icon:before{content:"\f16a"}.item-social.instagram .item-icon:before{content:"\f16d"}.item-social.dribbble .item-icon:before{content:"\f17d"}.item-social.pinterest .item-icon:before{content:"\f0d2"}.social-counter ul li:hover .item-icon{background-color:#222222}.social-counter ul li:hover .item-text{color:#01BD5D}</style></ul></div>

13-اضافة اداة تابعنا على:وهي عبارة عن اضافة HTML/JavaScript شكل الاضافة 
الاداة تحتوي على شكلين الشكل الاول البسيط

فقط نقوم بلصق كود HTML/JavaScript

<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix"><li><a href="ضع رابط تويتر هنا" class="social-btn-twitter">تابعنا عبر تويتر<i class="fa fa-twitter"></i> </a></li><li><a href="ضع رابط فيس بوك هنا" class="social-btn-facebook">تابعنا عبر الفيس بوك <i class="fa fa-facebook"></i> </a></li><li><a href="ضع رابط يوتيوب هنا" class="social-btn-youtube">تابعنا في اليوتيوب <i class="fa fa-youtube"></i> </a></li><li><a href="ضع رابط انستغرام هنا" class="social-btn-instagram">تابعنا في انستجرام <i class="fa fa-instagram"></i> </a></li></ul></div>

وللحصول على لشكل التالي

نذهب الى المظهر------->تعديل كود html 

نبحث عنstyle type:

ثم نضع الكود التالي في الاسفل

.kt-social-buttons-widget ul {list-style: none;padding-left: 0; text-align: center;}.kt-social-buttons-widget li a {font-size: 10px;text-transform: uppercase; letter-spacing: 0px;text-decoration: none;display: block;padding: 10px 1px 10px 10px;}.kt-social-buttons-widget ul li {width: 100%;margin-bottom: 10px;}.kt-social-buttons-widget li a.social-btn-twitter {background: #1da1f2;color:#fff;}.kt-social-buttons-widget li a i {float: right;width: 35px;height: 14px;line-height: 14px;text-align:center ;margin: 0;padding: 0 0 0 10px;font-size: 14px;}.kt-social-buttons-widget li a i {border-left: 1px solid #666;line-height: 14px;}.kt-social-buttons-widget li a.social-btn-facebook {background: #3b5998;color:#fff;}.kt-social-buttons-widget li a.social-btn-youtube {background: #cd201f;color:#fff;}.kt-social-buttons-widget li a.social-btn-instagram {background: #405de6;color:#fff;}.kt-social-buttons-widget li a:hover {color: #0a0a0a !important;background:#f8f8f8 !important;

لمزيد من المعلومات تابع الفيديو :