تحميل قالب Salbuta قالب بلوجر احترافي وأنيق



قالب Salbuta قالب من قوالب بلوجر ذات الجمال الذي لا يوصف، القالب له أشكال عديدة وقمة الروعة؛ حيث له تقريبا أكثر من شكل قمة الجمال والاحترافية
تصميم احترافي ومتميز لجعله قالب مدونتك، يمكنك استخدامه في المدونات الشخصية أو مدونة معرض لأعمالك أو مجلات أو أي مجال تريد لأنه قابل للتخصيص بشكل كامل

يدعم عرض الإعلانات بشكل احترافي داخل مقالاتك، سريع التحميل 

أشكال أزرار رائعة وبألوان متناسقة ومبهجة، تصميم القالب يجعلك تشعر وكأنك تتصفح مجلة الكترونية جميلة

أنصحك بتجربة هذا القالب لما يحتويه من أدوات وإضافات وإعدادات تخصيص تجعل من مدونتك أكثر احترافية وجمالا

القالب حديث وجديد حيث تم إنشاؤه 20 أبريل   2019 وآخر تحديث له 2 مايو 2019
من مميزات قالب Salbuta:
يحتوي على أكثر من شكل تصميم
متجاوب ومتوافق مع كل الشاشات
تصميم احترافي وألوان جذابة
أزرار مرنة واحترافية
قالب مدونة شخصية
قالب مجلة
تخصيص كامل 
يدعم عرض الإعلانات
3 أعمدة بالفوتر Footer
تغيير خلفية الفوتر Footer ورأس الصفحة Header
قوائم منسدلة
قائمة ميجا Mega وقائمة ميجا متعددة Mega Multi

إليك بعض الإعدادات التي تساعدك في جعل مدونتك أكثر احترافية:

إعدادات المدونة:
 اذهب إلي لوحة التحكم بلوجر ثم "إعدادات"
ثم اضغط "الأساسية"
ابحث عن قراءة المدونة الإلكترونية ثم اجعلها "علني"
ثم اختر "المشاركات والتعليقات والمشاركة"
الحد الأقصي لما يتم عرضه:
ضع رقم المشاركات التي تريد في كل صفحة
عرض الصور في العرض المبسط يمكنك ضغط "نعم أو لا"
ثم التعليقات اجعلها "مضمن"
وقم بإعداد الإشراف على التعليقات كما تريد

ثم اختر إعدادات البحث من "العلامات الوصفية"
في الوصف اكتب وصفك عن مدونتك بحد أقصي 150 حرفا

ثم اختر أخري
السماح بخلاصة موقع الويب اجعلها "قصير"
ثم احفظ الإعدادات


تثبيت القالب Template Installation:
قم بتسجيل الدخول إلي لوحة تحكم بلوجر لمدونتك
ثم اذهب إلي "المظهر"
ثم اضغط نسخ احتياطي/استعادة
اضغط تنزيل المظهر لتحتفظ بنسخة احتياطية من القالب القديم في حالة تحتاجه مرة أخري
ثم اختر ملف القالب الجديد الذي امتداده ينتهي بـ .xml
ثم اضغط تحميل


خيارات إعداد القالب:
اذهب إلي لوحة تحكم بلوجر ثم "المظهر"
ثم تعديل HTML
ثم اضغط (ctrl+f) من لوحة مفاتيحك ثم ابحث عن الكود التالي 
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='rockpool.xml' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>


احذف هذا الكود السابق ثم انسخ الكود التالي والصقه بدلا منه:
 <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='rockpool.xml' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale'>

ايقونات مواقع التواصل الاجتماعي  Social Icons 
اذهب إلي لوحة التحكم ثم "التخطيط"
ثم تعديل Social Icons في Link list

اسماء مواقع التواصل الاجتماعي المدعومة:
facebook, twitter, youtube, whatsapp, wordpress, github, google, instagram, tumblr, pinterest, behance, dribble, flickr, foursquare, github-alt, gitter, joomla, linkedin, pagekit, reddit,  soundcloud, tripadvisor, uikit,  vimeo, xing, yelp

ادخل اسم أي ايقونة تواصل في اسم موقع جديد ثم ضع الرابط
ثم اضغط ارتباط
ثم حفظ

إعدادات القائمة Menu:
من لوحة تحكم بلوجر ثم "التخطيط"
ثم تعديل Menu بتعديل إضافة الأداة HTML/JavaScript
انسخ الكود التالي ثم الصقه في الأداة
<li><a href='/'>Home</a></li>
<li><a href='#'>Pages</a>
  <ul>
    <li><a href="#!">Custom Pages</a>
      <ul>
        <li><a href="/2018/02/">Archive Page</a></li>
        <li><a href="/search/label/Nature">Label page</a></li>
        <li><a href="/search?q=How&max-results=9">Search Page</a></li>
      </ul>
    </li>
    <li><a href="/p/static-page.html">Static Page</a></li>
    <li><a href="/p/typography.html">Typography</a></li>
    <li><a href="/p/short-codes.html">Short Codes</a></li>
  </ul>
</li>
<li><a href='#'>Posts</a>
  <ul>
    <li><a href="/2017/05/how-star-isn-as-bad-as-you-think.html">Post with right sidebar</a></li>
    <li><a href="/2018/02/mars-can-get-you-your-heart-desire.html">Post with left sidebar</a></li>
    <li><a href="/2018/01/cards-could-help-you-win-game.html">Post without sidebar</a></li>
    <li><a href="/2018/02/layers-of-july-will-be-hidden.html">Post with full width title</a></li>
  </ul>
</li>
<li><a href="#">One Mega</a>
  <div class="mega" data-label="Nature"></div>
</li>
<li><a href="#">Multi Mega</a>
  <div class="mega" data-label="Sports"></div>
  <div class="mega" data-label="Happy Star"></div>
  <div class="mega" data-label="Mountains"></div>
</li>
<li><a href='/404'>Error 404</a></li>

ثم حفظ


التسميات أو التصنيفات Filtering Labels:
من لوحة التحكم ثم "التخطيط"
ثم تعديل Filtering Labels
بعد ذلك يمكنك اختيار كل التصنيفات أو تقوم بتحديد عدد معين من التصنيفات أو التسميات التي ستظهر
ثم اختر شكل ظهورها سواء كان شكل قائمة أو شكل سحابة
ثم اضغط حفظ

صندوق المؤلف أو الكاتب:
لإظهار الملف الشخصي للمؤلف أو الكاتب Author Profile
من لوحة التحكم ثم "إعدادات"
ثم "إعدادات المستخدم"
ثم تعديل ملفك الشخصي


ايقونات مواقع التواصل الاجتماعي بالفوتر Footer:
من لوحة التحكم بلوجر ثم "التخطيط"
ثم تعديل Footer Social Icons

اسماء مواقع التواصل الاجتماعي المدعومة:
facebook, twitter, youtube, whatsapp, wordpress, github, google, instagram, tumblr, pinterest, behance, dribble, flickr, foursquare, github-alt, gitter, joomla, linkedin, pagekit, reddit,  soundcloud, tripadvisor, uikit,  vimeo, xing, yelp
ادخل اسم أي ايقونة تواصل في اسم موقع جديد ثم ضع الرابط
ثم اضغط ارتباط
ثم حفظ

تخصيص تصميم القالب:
لوحة تحكم بلوجر ثم "المظهر"
ثم اضغط "تخصيص"
تستطيع تغيير صورة الخلفية للقالب واللون الأساسي
ومن "متقدم" اعداد عام Global
يمكنك تغيير الخطوط Font، الألوان Text Color، ألوان الروابط Link Color، ولون الـ hoverللرابط عندما تأشر بالماوس عليه Hover Link Color

اعداد راس الصفحة Header
Background Color 1 لون الخلفية الأولي لرأس الصفحة
Background Color 2 لون الخلفية الثانية المتداخلة مع الخلفية الاولي لرأس الصفحة 

اعداد الفوتر Footer
Background Color 1 لون الخلفية الأولي للفوتر Footer
Background Color 2 لون الخلفية الثانية المتداخلة مع الخلفية الاولي للفوتر Footer
اعداد Add CSS
تستطيع إضافة أي كود CSS إذا أردت التغيير في القليل من تصميم القالب

اعداد Gadgets
تستطيع إظهار أو إخفاء الإضافات Gadgets داخل مدونتك عن طريق وضع علامة أو عدم وضعها
تستطيع أيضا تعديل اي إضافة من الإضافات(الصفحات، الارشيف، التسميات، ايقونات مواقع التواصل الاجتماعي،......
ملحوظة مهمة جدااا: قبل التغيير في أي شئ من القالب لتخصيصه عليك أن تأخذ نسخة احتياطية من القالب أولا في حين أخطأت في التخصيص أو أردت الرجوع إلي شكل القالب كما كان

بعدما تغير إعداداتك لتخصيص القالب اضغط "تطبيق على المدونة"

الأكواد القصيرة Short Codes:
لكتابة أي كود قصير في مقالتك ادخل إلي لوحة التحكم بلوجر ثم المشاركات ثم تعديل المشاركة التي تريدها أو مشاركة جديدة
ثم تعديل Html

إضافة العناوين Headings:
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading

استخدم من <h1> إلي <h6> 

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

أضف 
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 كتمييز بين كل نوع عنوان على سبيل المثال إذا أردت مثلا حجم h1 مثل حجم h3 فيمكنك الوصول للعنوان والتغيير بسهولة

<span class="uk-h1">H1 Heading</span>
<span class="uk-h2">H2 Heading</span>
<span class="uk-h3">H3 Heading</span>
<span class="uk-h4">H4 Heading</span>
<span class="uk-h5">H5 Heading</span>
<span class="uk-h6">H6 Heading</span>

لإضافة  Addresses عنوانك الشخصي
مثال:
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

تكتب الكود التالي:
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

لإضافة قوائم منظمة وغير منظمة:
القائمة المنظمة ومرتبة بأرقام Ordered list :
<ul>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
<ul>
  <li>Phasellus iaculis neque</li>
  <li>Purus sodales ultricies</li>
  <li>Vestibulum laoreet porttitor sem</li>
  <li>Ac tristique libero volutpat at</li>
</ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>

القائمة غير منظمة ومرتبة بأشكال دائرة أو غيرهاUnordered list :
<ul>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
<ul>
  <li>Phasellus iaculis neque</li>
  <li>Purus sodales ultricies</li>
  <li>Vestibulum laoreet porttitor sem</li>
  <li>Ac tristique libero volutpat at</li>
</ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>

لإضافة الجدول Table:
الكود التالي لجدول Divider Table
<div class="uk-overflow-auto">
<table class="uk-table uk-table-small uk-table-divider">
<thead>
<tr>
<th>#</th>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>2</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>3</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
</table>
</div>

الكود التالي لجدول Striped Table
<div class="uk-overflow-auto">
<table class="uk-table uk-table-small uk-table-striped">
<thead>
<tr>
<th>#</th>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>2</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>3</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
</table>
</div>

كيفية عمل عارض صور Slideshow:
لعمل Slideshow قم بإضافة data-uk-slideshow كـ attribute لمحتوي عنصر الـ <div> ثم قم بإضافة الخواص التالية لهذا الـ attribute :
animation: push; autoplay: true; autoplay-interval: 4000

بهذا الشكل:
<div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
</div>
ثم أضف <div> آخر داخله
<div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
<div class="uk-position-relative uk-visible-toggle uk-light">
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

وداخل الـ <div> قم بإضافة قائمة ul ليصبح الكود هكذا كالتالي:
<div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slideshow-items">
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-previous="" data-uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-next="" data-uk-slideshow-item="next"></a>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

ثم إضافة صورة لكل عنصر داخل القائمة ليصبح الكود هكذا:
 <div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slideshow-items">
<li>
<img src="assets/img/demo/11.jpg" alt="" data-uk-cover="">
</li>
<li>
<img src="assets/img/demo/12.jpg" alt="" data-uk-cover="">
</li>
<li>
<img src="assets/img/demo/13.jpg" alt="" data-uk-cover="">
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-previous="" data-uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-next="" data-uk-slideshow-item="next"></a>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

قالب Salbut... مجلة ... جمال تصميم ... بساطة