قالب Litemag هوه قالب لامثيل له أبدأ ويعد من القوالب ذات الافضلية العالية المستجيبة للهواتف الذكية,يجمع القالب بين البساطة والجمال مع أمكانية التعديل علية بكل سهولة ودون الحاجة الى خبرة في برمجة الاكواد,والقالب مثالي للمدونات الشخصية والتقنية والمجلة وغيرها من الفئات الاخرى.
ويتميز القالب بكثير من المميزات التي تجعلة قالب مدون ومحترف ومنها يستجيب مع الشاشات الذكية وسريع التصفح وغيرها من المميزات الأخرى ويمكنك مشاهدة طريقة تركيب القالب على منصات بلوجر من خلال المقال التالي:
طريقة تخصيص القالب
أولأ:اضافة أيقونات التواصل الأجتماعي
من بلوجر أختر التخطيط وأختر top-social وقم بنسخ ولصق الكود التالي في top-social وقم بعملية الحفظ.
<a href='#' target='_blank'> <i class='fa fa-facebook'> </i></a> <a href='#' target='_blank'> <i class='fa fa-twitter'/> </i></a> <a href='#' target='_blank'> <i class='fa fa-instagram'/> </i></a> <a href='#' target='_blank'> <i class='fa fa-pinterest'/> </i></a> <a href='#' target='_blank'> <i class='fa fa-heart'/> </i></a> <a href='#' target='_blank'> <i class='fa fa-google-plus'/> </i></a> <a href='#' target='_blank'> <i class='fa fa-tumblr'/> </i></a>
ثانيأ: تخصيص القائمة العلوية
من بلوجر أختر المظهر ومن ثم أختر تحرير وقم بالبحث عن الكود التالي:
<div class='site-top-navigation-menu-container'>سوف تجد جميع روابط القائمة العلوية قم بتغييرها الى روابطك الخاصة.
ثالثأ: تخصيص القائمة الرئيسية
من بلوجر أختر التخطيط ومن ثم أختر navigation-wrapper وقم بنسخ ولصق الكود التالي:
<li><a href='#'>الرئيسية</a> <ul class='sub-menu'> <li><a href='#'>Category</a></li> <li><a href='#'>Category</a></li> <li><a href='#'>Category</a></li> </ul> </li> <li><a href='#'>أدوات</a> <ul class='sub-menu'> <li><a href='#'>ادوات 1</a></li> <li><a href='#'>ادوات 2</a></li> <li><a href='#'>ادوات 3</a></li> </ul> </li> <li><a href='#'>قائمة رئيسية</a> <ul class='sub-menu'> <li><a href='#'>قائمة جانبية 1</a></li> <li><a href='#'>قائمة جانبية 2</a></li> <li><a href='#'>قائمة جانبية 3</a></li> </ul> </li> <li><a href='#'>الهواتف الذكية</a></li> <li><a href='#'>مميز</a></li> <li><a href='#'>تحميل القالب</a></li>سوف تجد جميع روابط القائمة الرئيسية قم بتغييرها الى روابطك الخاصة.
رابعأ: تخصيص شريط الأخبار
من بلوجر أختر المظهر ومن ثم أختر تحرير وقم بالبحث عن الكود التالي:
<script type='text/javascript'> //<![CDATA[ $(document).ready(function () { var url_blog = 'http://litemag-bloggersinarabic.blogspot.com/', // Replace With your Blog Urlقم بتغييرالرابط أعلاه برابط الموقع الخاص بك.
خامسأ: تخصيص المشاركات المميزة
قم بوضع أضافة "featured" الى التسميات كما في الصورة التالية:
*يجب ان تكون مدونتك عامة ويجب تعيين خلاصة لمدونتك والا فأن قسم المشاركات المميزة لايعمل.
سادسأ: أضافة صندوق الكاتب او عن الموقع
قم بأضافة الكود التالي في المكان الذي تريدة أن يظهر في الموقع وانا أنصحك بوضعة في المكان الذي الخاص به.
<div class='iuauthor-item'> <h4 class='iuauthor-name'> <a href='https://www.facebook.com/gsffj89' target='_blank'>بلوغر بالعربي</a> <p> مدون و مصمم عربي مواليد 1994 صاحب موقع "بلوغر بالعربي " هدفى هو نشر جميع المواضيع فى شتى مجالات بلوجر عبر موقعي الى المحتوى العربي </p> </h4> </div> <style> /*------------------------------------------------------ Iuauthor-Item ------------------------------------------------------*/ .iuauthor-item { padding: 15px 10px; text-align: center; margin-top: -20px; } .iuauthor-item .image-wrap { position: relative; overflow: hidden; border-radius: 50%; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); width: 230px; margin: 0 auto; height: 230px; margin-bottom: 15px; } .iuauthor-item h4.iuauthor-name a { font-size: 18px; margin-bottom: 10px; display: block; color: #a32f37; border-bottom: 1px dashed #ccc; padding-bottom: 9px; border-top: 1px dashed #ccc; padding-top: 6px; } .iuauthor-name p { color: #22273d; font-size: 14px; margin-top: 17px; font-weight: 100; margin-bottom: -30px; } .iuauthor-item .image-wrap:before { content: ''; display: block; position: absolute; border-radius: 50%; border: 10px solid #f9f9f9; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; opacity: .7; margin: auto; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: all .4s linear; transition: all .4s linear; } </style>
0 تعليق
إرسال تعليق