قالب سفيدا الإحترافى المعرب كامل

الرئيسية تطوير بلوجر قوالب بلوجر كل قالب سفيدا الإحترافى المعرب كامل

تطوير بلوجر قوالب بلوجر كل

قالب سفيدا الإحترافى المعرب كامل

محمد عبد الوهاب 2

A+ A-

بسم الله الرحمن الرحيم

و الصلاة و السلام على سيدنا محمد وعلى آله و صحبة اجمعين اما بعد :-

قالب سفيدا ريسبونسيف نسخة 1.55 فقط و حصرياً على قاهر الجبابرة

اليوم اقدم لكم قالب sevida responsive المعرب الإحتراف بجميع مميزاته فقط و حصرياً على مدونتنا قاهر الجبابرة

بسم الله نبدأ

صورة القالب للمعاينة

تحميل القالب معاينة القالب(قريباً)

رائع اليس كذلك و الآن مع الإضافات ومواضعها

شرح تفاصيل القالب

1- منطقة السلايدر شو الرئيسى

2- منطقة سايد بار اعلى التابر

3- منطقة التابر

a / المشاركات الشائعة

b / التعليقات

c / ارشيف المدونة

4- منطقة سايد بار اسفل التابر

5- منطقة سلايدرات عن طريق التسميات (سيتم شرحها لاحقاً)

6- منطقة الفوتر

اعدادات القوائم

من قائم بلوجر اختر تصميم Template

ثم تعديلEdit HTML

ثم ابحث عن الكود التالى

<ul class='sf-menu' id='topmenunav'> 
 <li><a href='#'>عن المدونة
</a></li>  <li><a href='#'>اتصل بنا</a></li> 
 <li><a href='#'>اكثر</a>    <ul>     
 <li><a href='#'>Menu 1</a></li>    
  <li><a href='#'>Menu 2</a></li>   
   <li><a href='#'>Menu 3</a></li>     
 <li><a href='#'>Menu 4</a></li>   
 </ul>  </li>  <li><a href='#'>قائمة</a></li></ul>

غير # بروابط موقعك

تغيير النافبار الثانى

ابحث عن الكود التالى

<ul class='sf-menu' id='menunav'>
<li><a class='home' expr:href='data:blog.homepageUrl'>الرئيسية</a></li>
<li><a href='#'>عن المدونة</a></li>
<li><a href='#'>أرشيف</a></li>
<li><a href='#'>تعليقات</a></li>
<li><a href='#'>With Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#'>Error 404</a></li>
</ul>

كذلك غير # بروابط موقعك

للعلم توجد فى هذا القالب صفحتين فريدتين من نوعهما تندرفى القوالب الأخرى

مثل صفحة خطأ 404

يتم تسطيبها عن طريق

www.yoursite.blogspot.com/error404.html

و الأخرى هى ارشف خاص بالمدونة سوف نطرحه فيما بعد

اعدادات المواقع الإجتماعية

من قائم بلوجر اختر تصميم Template

ثم تعديلEdit HTML

ثم ابحث عن الكود التالى

نبحث عن الكود التالى

    <ul class='sociico' id='icon-socialmn'>

    <li class='sotw'><a href='#'
    target='_blank'>twitter</a></li>

    <li class='sofb'><a href='#'
    target='_blank'>facebook</a></li>

    <li class='sogo'><a href='#'
    target='_blank'>google</a></li>

    <li class='sorss'><a href='#'
    target='_blank'>rss</a></li>

    <li class='solinkn'><a href='#'
    target='_blank'>linkedin</a></li>

    <li class='sodrib'><a href='#'
    target='_blank'>dribbble</a></li>

    <li class='sopint'><a href='#'
    target='_blank'>pinterest</a></li>

    </ul>

ثم نغير # بروابط موقعك

اعدادات الساعة و التاريخ

من قائم بلوجر اختر تصميم Template

ثم تعديلEdit HTML

ثم ابحث عن الكود التالى

            datetime();

ثم نبحث عن الكود التالى و نغيره بلغة المدونة



datetime({

months:["January","February","March","April","May","June","July","August","September","October","November","December"],

timeFormat:"12"

});

و ذلك ايضاَ



timemonthName: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], // Define Time Month Name

timeFormat:"12", // Define Time Format for Date Time Widget

الآن مع محتويات القالب سلايدشو وسلايدرات هناك طريقتين لكى تعمل هذه السلايدرات اما عن طريق اداة التسميات

او عن طريق اداة Html/JavaScript

ايهما تفضل

سوف نشرح الطريقتين و نضع روابط و صورة لهما

اولاً السلايدشو الرئيسى

ولك ان تختار ما بين نوعين من السلايدشو اما العشوائى او الأوتوماتيكى او ان تحدد انت ما يتم عرضه او المانوال

نذهب الى تخطيط

اضافات

ثم نختار التسميات

ننسخ الكود التالى ونضعة مكان كلمة التسميات كما سنرى الآن




[Title][featuredpost][random][5]

ثم نحفظ الإضافة

الطريقة القديمة طريقة HTML/JavaScript

نذهب الى تخطيط ثم اختيار اداة HTML/JavaScript

ثم نلصق بداخلها الكود التالى




<div id="featpost"></div><script type='text/javascript'>jQuery("#featpost").AutofeaturedPost({MaxPost:5});</script>

و نحفظ الآداة

كان هذا شرح السلايد شو الأتوماتيكى اما المانوال

ف كالتالى

نذهب الى تخطيط ثم اضافة اداة

ثم اختيار هذه الأداة

1- عنوان الموضوع

2- وصف الموضوع

3 - رابط الموضوع

4 - جلب الصورة من جهازك

5 - لكى تجعل الصورة ملائمة لمكانها اذا كانت اكبراو اصغر من اللازم

حجم الصورة الموصى به 670px x 280px

ثم نحفظ الإضافة

باقى السلايدرات عن طريق التسميات كما ذكرنا سابقاً

اولاً هذا السلايدر بالترتيب

سلايدر بوست

اختيار اداة التسميات

ثم اضافة الكود التالى



[Widget_Title][slider1][recent][9]

ثم حفظ

او عن طريق اداة جافاسكريبت

و نضع بداخلها الكود التالى




<div id="carouselpost1"></div><script type='text/javascript'>jQuery("#carouselpost1").RecentPostbyTag({MaxPost:9,ImageSize:"s180-p",postType:"s",tagName:"Your_TagName"});</script>

سلايد شو اخر

الطريقة الجديدة اضافة اداة التسميات

ثم نضع المود التالى بداخلها

    [Widget_Title][slider2][recent][5]

ثم حفظ الآداة

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

ثم نلصق بداخلها الكود التالى

<div id="postslideshow1"></div><script type='text/javascript'>jQuery("#postslideshow1").RecentPostbyTag({MaxPost:5,ImageSize:"s600",postType:"s",sliderType:"f",tagName:"Your_TagName"});</script>

ثم حفظ الآداة

الموضوعات الرأسية

عن طريق التسميات

نضع بداخلها الكود التالى

[Widget_title][vertical][recent][5]

اذا اردناه ثابت و الكود التالى متحرك

      [Widget_title][vertical][animated][7]

ثم نحفظ الآداة

الطريقة الثانية عن طريق الجافاسكريبت

هذا الكود لعرض الثابت

<div id="verticalpost1"></div><script type='text/javascript'>jQuery("#verticalpost1").RecentPostbyTag({MaxPost:6,tagName:"Your_TagName",postType: "v"});</script>

و هذا للمتحرك

      <div id="verticalpost2"></div><script type='text/javascript'>jQuery("#verticalpost2").RecentPostbyTag({MaxPost:6,tagName:"Your_TagName",postType: "v",animated:true});</script>

ثم نحفظ الآداة

ملحوظة اختار كود واحد فقط لكل اداة

العرض الأفقى

عن طريق التسميات

يوجد طريقتين للعرض الثابت او المتحرك

1 -الكود الثابت

[Widget_title][horizontal][recent][5]

2 -الكود المتحرك

[Widget_title][horizontal][animated][7]

ثم حفظ الآداة

عن طريق الجافاسكريبت

انسخ احد الأكواد الآتية

1- الكود الثابت

<div id="horizontalpost1"></div><script type='text/javascript'>jQuery("#horizontalpost1").RecentPostbyTag({MaxPost:6,tagName:"Web Design",postType: "h"});</script>

2- الكود المتحرك

<div id="horizontalpost2"></div><script type='text/javascript'>jQuery("#horizontalpost2").RecentPostbyTag({MaxPost:7,tagName:"Your_TagName",postType: "h",animated:true});</script>

ثم حفظ الآداة

العرض المدمج

عن طريق التسميات

ننسخ الكود التالى و نضعه كما يلى

[Widget_title][combine][recent][5]

ثم نحفظ الآداة

طريقة الجافاسكريبت

ننسخ الكود التالى و نضعه بداخلها

<div id="combinepost1"></div><script type='text/javascript'>jQuery("#combinepost1").RecentPostbyTag({MaxPost:5,tagName:"Your_TagName",postType: "c"});</script>

ثم نحفظ الآداة

طريقة المعرض 1

عن طريق التسميات

ننسخ الكود التالى و نضعه كما يلى

[Widget_title][gallery1][recent][10]

ثم نحفظ الآداة

طريقة الجافا سكريبت

ننسخ الكود التالى و نلصقه بداخله

<div id="gallery1post1"></div><script type='text/javascript'>jQuery("#gallery1post1").RecentPostbyTag({MaxPost:13,tagName:"Your_TagName",postType: "g1"});</script>

ثم نحفظ الآداة

طريقة المعرض 2

عن طريق التسميات

ننسخ الكود التالى و نضعه داخل التسميات كالتالى

[Widget_title][gallery2][recent][10]

ثم نحفظ الآداة

طريقة الجافا سكريبت

نلصق الكود التالى داخله

<div id="gallery2post1"></div><script type='text/javascript'>jQuery("#gallery2post1").RecentPostbyTag({MaxPost:12,tagName:"Your_TagName",postType: "g2"});</script>

ثم نحفظ الآداة

اضافة اخر المواضيع بدون صور

عن طريق التسميات

نلصق الكود التالى بداخله

      [Widget_title][vertical][noimage][5]

ثم نحفظ الآداة

طريقة الجافاسكريبت

نلصق الكود التالى بداخله

<div id="simplenoimagepost1"></div><script type='text/javascript'>jQuery("#simplenoimagepost1").RecentPostbyTag({MaxPost:5,tagName:"Your_TagName",ShowImage:false});</script>

ثم نحفظ الآداة

لتعديل صفحة الخطأ 404 بما يناسبك

ابحث عن الكود التالى



    <div class='error-custom'>

    <h2>404 Not Found</h2>

    <p class='error-body'>We&#39;re sorry but we could not find
        the page you are looking for.<br/>

    This may happen if you have entered site url incorrectly or this page
        doesn&#39;t exist anymore.</p>

    <p>You can try searching page again or go back to
        home</p>

    <form action='/search' id='searchform' method='get'>

    <input id='s' name='q' onblur='if (this.value ==
        &quot;&quot;) {this.value = &quot;Search...&quot;;}'
        onfocus='if (this.value == &quot;Search...&quot;) {this.value =
        &quot;&quot;;}' type='text' value='Search...'/>

    <input id='searchsubmit' type='submit' value='Go'/>

    </form>

    </div>

بالنسبة لصفحة الأرشيف انشأ صفحة جديدة و ضع بداخلها هذا الكود

<div id="table-outer"><table
          border="0"><tr><td><label>Sort List
          by:</label></td><td><select
          id="orderFeedBy"><option value="published" selected>Latest
          Published</option><option value="updated">Latest
          Update</option></select></td></tr><tr><td><label>Sort
          List by Category:</label></td><td><span
          id="labelSorter"><select disabled><option
          selected>Loading...</option></select></span></td></tr><tr><td><label>Search
          with Keyword:</label></td><td><form
          id="postSearcher"><input
          type="text"/></form></td></tr></table></div><header
          id="resultDesc"></header><ul
          id="feedContainer"></ul><div
          id="feedNav">Loading...</div><script
          src="http://guinys-mkr.googlecode.com/svn/trunk/JS/archive.min.js"
          type="text/javascript"></script>

ثم انشرها

لإضافة اداة التعليقات

اختار اداة جافاسكريبت

ثم الصق بداخله الكود التالى

<div id="rcentcomnets"></div><script type='text/javascript'>RecentComments();</script>

ثم احفظ الآداة

تسطيب التعليقات

هذه المدونة تحتوى على 3 انظمة للتعليقات

بلوجر- فيس بوك - ديسكس

يمكن استخدام اثنين منها فقط

فى المدونة

اما

بلوجر-ديسكس

او

بلوجر-فيس بوك

لكى نقم بإظهارها نتبع هذه الخطوات

لكى نضع تعليقات فيس بوك نقوم بالآتى

لكى نضع ديسكس ننستبدل

facebook with disqus

اعدادات الفيس بوك

نذهب إلى القالب و نبحث عن الأكواد الآتية

<meta content='218168578325095' property='fb:app_id'/><meta content='100002549773049' property='fb:admins'/>

و هذا الكود ايضاً

<div id='facebook-comment-appid'
                  style='display:none'>218168578325095</div>

نستبدل ما باللون الأحمر برقم التطبيق

و ما باللون البرتقالى ب id الخاص بك على فيس بوك

بالنسبة لتعليقات ديسكس

نبحث عن الكود التالى

<div id='disqus-shortname' style='display:none'>sevidamkrdezign</div>

و نستبدل ما باللون الأخضر باسمك على ديسكس

القالب يدعم اللغة العربية RTL مع اللغة الإنجليوية الأصلية LTR

لكى يتم ذلك ابحث عن الكود التالى

<Variable name="startSide" description="Side where text
                  starts in blog language" type="automatic" default="left"
                  value="left"/><Variable name="endSide" description="Side where text ends
                  in blog language" type="automatic" default="right"
                  value="right"/>

و استبدله بهذا الكود

<Variable name="startSide" description="Side where text
                  starts in blog language" type="automatic" default="right"
                  value="right"/><Variable name="endSide" description="Side where text ends
                  in blog language" type="automatic" default="left"
                  value="left"/>

للعلم كل الإضافات تم تسطيبها فى القالب ما عليك الا تغييرها بما يناسب مدونتك

شكراً و الى لقاء قريب

وصف المدون

احدث المقالات

المشاركات الشائعة

الوسوم

التعليقات

تطوير بلوجر

التصنيفات

احدث المقالات