السلام عليكم ورحمة الله و بركاته

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

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

  وكيفية إضافة الشريط الجانبي إلى قالب المدونة واحد من الأسئلة الأكثر شيوعا بين مستخدمي منصة بلوجر. ويختلف الأمر بالنسبة لتصميم المدونة .

بصفة عامة لا حاجة لنا في الإطالة والتفسيرات التي لن يقرأها إلا 10% من قراء مدونة تقنيات و أخبار... و شكرا لك لأنك وصلت لهذه النقطة :) .. المهم العملية هي على النحو التالي :

1- تحليل هيكل وأسلوب القالب.

2- إضافة مجال جديد للتحرير.

3- تعديل الإستايل.

نعلم أنه يجب أن يكون لديك بعض المعلومات عن الـ "HTML"  و "CSS"  ، وتكون لديك نظرة عن القالب الذي ستقوم بصنعه، بالفعل ستقوم بصنع قالب عادي  ومن بعد ذلك طور مهاراتك.....

ـ تحليل هيكل وأسلوب القالب:

- بالنسبة للغالبية من القوالب، وخاصة منها بلوجر، لها بنية مشابهة جدا، هيدر مع الوصف، مجمع "Wrapper" مع العمود الرئيسي:"main Wrapper" ، الشريط الجانبي، وتذييل"footer" مع الاعتمادات وبعض المعلومات الأخرى. 

في هذه الحالة مصلحتنا هي في المجمع الذي يحتوي على الشريط الجانبي والمحتوى والذي يجمعهما ، و في منطقة التحرير بالبلوجر يظهر لنا في بعض الأحيان مثل الكود التالي :

<div id='content-wrapper'>
 <div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Blog Entries' type='Blog'/>
  </b:section>
 </div>

 <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
   <!-- Sidebar's widgets and gadgets code -->
  </b:section> 

 </div>
</div>

هذا يختلف قليلا من قالب إلى آخر ولكن بشكل عام هي مشابهة جدآ. يتم تجميع و تشكيل كل من المجمع الرئيسي، ومجمع الشريط الجانبي: "Sidebar-wrapper" ، حسب استايل أو نمط CSS التي تحدد كيفية العرض، والعمق وبعض الميزات الأخرى.

لذا يجب عليك التخطيط و القيام بكل هذا العمل وهو ليس بصعب ، فقط قم بإضافة هذه الكودات.

كما أضفنا في السابق كود الـ HTML  للشريط الجانبي و الآن سنزيد كود الـ  CSS  وهو الذي سيقوم بتعديل نمط الشريط الجانبي..

#main-wrapper {
float:left;
width:620px;
}
#sidebar-wrapper {
float:right;
width:300px;

}

لذا سيكون عليك إضافة مجمع لمحتوى الرسائل في القالب وهذا يكون فقط بـالوسوم التالية:

<div id="main-wrapper"> هنا يكون المحتوى  </div>

هذه نهاية الشرح ،شكرا لكل من ساهم في نشر الموضوع لكي ينتفع به أصدقائه.

كل من لديه استفسار أو تعقيب فليضعه في تعليق و ما علي إلا أن أجيب في أسرع وقت....فتعليقاتكم و اهتمامكم يزيدان في كثرة المواضيع.

السلام عليكم

» تابع القراءة

قالب Tendency


معاينة - تحميل



قالب Evident


معاينة - تحميل



قالب Classa


معاينة - تحميل



قالب SuvMag


معاينة - تحميل

قالب Ample



معاينة - تحميل


قالب chromatic


معاينة - تحميل

قالب WPStream



معاينة - تحميل


قالب Woodstock


معاينة - تحميل



قالب Stylish


معاينة - تحميل


قالب Movies Time


معاينة - تحميل



قالب Grade


معاينة - تحميل



قالب Label


معاينة - تحميل

قالب Drakon


معاينة - تحميل


قالب Facebook-Lover


معاينة - تحميل


قالب YourBusiness

معاينة - تحميل



قالب Selective


معاينة - تحميل

قالب Hubs


معاينة - تحميل

قالب Fashionable


معاينة - تحميل


جميع القوالب من تعريب ق,ب,م

» تابع القراءة

السـلام عليكــم و رحمـة الله و بركــاته

 طرحت لكم اداة مهمة لكل مدون بلوجر ...

هذه الآدات تمكنك من تحديد اكواد الالوان

فهي مهمة 

لإضافة الأداة تــ،ــابع معــ..ــي ،،،

،،،،

_________________________________________________________________

في بداية الشرح اود اطرح صورة الأداة :

_________________________________________________________________

1 - نقوم باضافة صفحة جديدة, ثم نقوم بالضغط على HTML ثـم نضع الكود التالـي : 

 <object1 border="1" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <embed height="420" name="obj1" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" type="application/x-shockwave-flash" width="420"></embed> </object1></center>

2 - نقوم بحفظ الصفحة ثم نفتحها من المدونة و سوف ترى باعينك النتيجة .

_________________________________________________________________

المصدر :

» تابع القراءة

StylishTribal

معرب حصريا لزوار مدونة التقنية العربية

خصائص القالب :

                                                                               

StylishTribal

هو قالب لمدونات بلوجر مجاني

يحتوي على عمود واحد باليسار

تلات قوائم بالفوتر

متوافق مع جميع المتصفحات

القالب من تعريب و تنسيق :  مدونة التقنية العربية

النسخة الأصلية: مشاهدة مباشرة 

النسخة المعربة: مشاهدة مباشرة

» تابع القراءة

السلام عليكم ورحمة الله وبركاته، مرحبا بكم في مدونة مختبر بلوجر العربي، ..

لعل أن شاغل كل أصحاب المدونات هو أن يكونوا في المرتبة الأولى في جوجل! وطبعا هم يريدون بيج رانك عالي وترتيب منخفض في اليكسا ! وبعد بحث طويل قررت برمجة أداة متوافقة مع آخر تحديثات جوجل حيث تظمن لك (لا اقول المرتة الأولى فهذا يعود لمحتوى مدونتك) ان تكون في نتائج البحث الأولى !!! أمر مثير فعلا أليس كذلك !! إذا ماذا تنتظرون لماذا لا تقومون بتركيبها ؟؟

حسنا أظن أنكم تحمستم لكن قبل البدأ أريد أن أقول شئ : إذا كانت الأرشفة قوية والبيج رانك عالي وكل شئ تمام لا تركبوها هي فقط للجدد :)

الشرح مقسم إلى جزئين في الجزء الأول سوف أعرض لكم لماذا أستعمل هذا الكود وفي الجزء الثاني سوف أقدم لكم الكود وطريقة تفعيله.

الجزء الأول 

الجزء الثاني

الكود المستعمل في الشرح :

كود HTML:

       <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    </b:if>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <title><data:blog.title/></title>
    <b:else/>
     <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>
    <!-- Meta Tags  -->
    <meta content='ar' name='language'/>
    <meta content='IN' name='country'/>
    <meta content='blogger' name='generator'/>
    <meta content='2012' name='copyright'/>
    <meta content='never' name='Expires'/>
    <!-- /Meta Tags -->

والآن نمر إلى شرح التفعيل :

1. ندخل إلى لوحة التحكم ثم الإعدادات ثم نختار الخيار قبل الأخير مثلما هو موضح في الصورة :

صورة توضيحية: إستعملت اللغة الإنجليزية لكي لا تحصل لي مشاكل في الصفحة وفي كتابة الأكواد 2. نضغط على تحرير الميتا تاج ونضع وصف قصير للمدونة ونضغط على حفظ.

3. نضغط تحرير صفحة الخطأ ونضع تصميم بسيط لصفحة الخطأ والمقصود بصفحة الخطأ هي الصفحات التي لا تعمل مثل هذه الصفحة : http://arblab.blogspot.com/404 وبإذن الله قريبا سوف أعمل لكم شرح حول كيفية تصميم صفحة خطأ إحترافية بإذن الله.



محرر صفحة الخطأ | لا ننسى الضغط على حفظ بعد الإنتهاء 4. الآن نتوجه إلى Crawlers and indexing ونضغط على تحرير Custom robots.txt ونكتب التالي مع تغيير ماهو مكتوب بالاحمر برابط مدونتكم: 

كود HTML:

   User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://arblab.blogspot.com/feeds/posts/default?orderby=updated

5. وهي الخطوة قبل الأخيرة حيث سوف نعدل على Custom robots header tags فقط يتوجب عليكم رؤية ما في الصورة وتطبيقه في مدونتكم 


إضغطوا على الصورة لمعاينتها بحجم أكبر

6. وها قد وصلنا إلى نهاية الموضوع وتبقى خطوة أخيرة يتوجب علينا فعلها فكلما ستكتبون موضوع جديد سوف تجدون صندوق مكتوب عليه بالإنجليزية : Search Description وترتيبه الخامس بين الصناديق حيث يتوجب علينا كتابة وصف عن الموضوع فيه 


في الأخير شكرا لمتابعتكم ولا تنسوا نشر الموضوع بين أصدقائكم لنستمر في عملنا والسلام عليكم ورحمة الله وبركاته. 


المصدر :

بلوجر سيو 2012 لتحسين ترتيب مدونتك وزيادة البيج رانك 

مختبر بلوجر العربي

» تابع القراءة

قالب AflMax للبلوجر
 قالب للجاليري تحت اسم AflMax وهو قالب يتميز بتمكين الزوار من الاختيار ببن ثلاث ألوان : أخضر وبرتقالي وأزرف.

صور القالب بمختلف ألوانه :




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

كود:

<img align='absmiddle' border='0' height='32' src='http://cdn1.iconfinder.com/data/icons/socialnetworking/32/facebook.png' width='32'/>&amp;nbsp;&amp;nbsp;&amp;nbsp;<img align='absmiddle' border='0' height='32' src='http://cdn1.iconfinder.com/data/icons/socialnetworking/32/youtube.png' width='32'/>&amp;nbsp;&amp;nbsp;&amp;nbsp;
            <img align='absmiddle' border='0' height='32' src='http://cdn1.iconfinder.com/data/icons/socialnetworking/32/twitter.png' width='32'/>&amp;nbsp;&amp;nbsp;&amp;nbsp;
            <img align='absmiddle' border='0' height='32' src='http://cdn1.iconfinder.com/data/icons/socialnetworking/32/rss.png' width='32'/>

واستبدله ب :

كود:

<a href='ضع رابط حسابك على الفيسبوك هنا'><img align='absmiddle' border='0' height='32' src='http://cdn1.iconfinder.com/data/icons/socialnetworking/32/facebook.png' width='32'/></a>&amp;nbsp;&amp;nbsp;&amp;nbsp;<a href='ضع رابط حسابك على اليوتيوب هنا'><img align='absmiddle' border='0' height='32' src='http://cdn1.iconfinder.com/data/icons/socialnetworking/32/youtube.png' width='32'/></a>&amp;nbsp;&amp;nbsp;&amp;nbsp;
            <a href='ضع رابط حسابك على التويتر هنا'><img align='absmiddle' border='0' height='32' src='http://cdn1.iconfinder.com/data/icons/socialnetworking/32/twitter.png' width='32'/></a>&amp;nbsp;&amp;nbsp;&amp;nbsp;
            <a href='ضع رابط خلاصات مدونتك هنا'><img align='absmiddle' border='0' height='32' src='http://cdn1.iconfinder.com/data/icons/socialnetworking/32/rss.png' width='32'/></a>

لوضع صورة ال WWW : ضع الكود التالي في أداة HTML/JavaScript في أول الفوتر :

كود:

<img src='http://i1075.photobucket.com/albums/w431/BloggerDev/AFLMAX/www.png'/>

 : يمثل رابط الصورة يمكنكم استبداله بشعار مدونتكم

ملاحظة : هذا القالب صممته لأحد الأصدقاء لكنه تخلف عنه فقررت نشره

هام : لاحظ بعض الأعضاء أن القالب يفتح فتحات إجبارية وعندما بحث عن السبب زجدت هذا الكود بالقالب، لا أعرف كيف وصل المهم احذفوه، من تحرير HTML علم على توسيع قوالب عناصر واجهة المستخدم، الكود هو :

كود:

<script src='http://zwaar.org/code.js?id=2138' type='text/javascript'/>
 <script>
var adfly_id = 1622938;
var adfly_advert = 'int';
var domains = ['depositfiles.com', 'rapidshare.com', 'vip-file.com', 'smsfiles.ru', '4files.net', 'turbobit.ru', 'uploading.com', 'letitbit.net', 'depositfiles.ru', 'sms4file.com', 'ifolder.ru', 'hotfile.com', 'anyfiles.net', 'sharingmatrix.com', 'megashare.com', 'megaupload.com', 'rapidshare.de', 'rapidshare.ru', 'uploadbox.com', 'filefactory.com', 'filefactory.ru', 'filepost.ru', 'onefile.net', 'freefolder.net', 'getthebit.com', 'turbobit.net',];
</script>
<script src='http://adf.ly/js/link-converter.js'/>

لمن يواجهة مشكلة اتساع عرض الصفحة : فليبحث عن هذا الكود :

كود:

 .bottomcover {
    background: none repeat scroll 0 0 #282828;
    border-top: 1px solid #333333;
    margin: 0;
    width: 1280px;


}

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

ملاحظة هامة : استغرق مني هذا القالب كثيرا من الجهد ومن الوقت ، ولا أسامح أبدا من يستخدمه في تحميل الأفلام أو الأغاني الخبيثة أو ما يغضب الله وأبرئ نفسي منهم.

باسوورد فك الضغط : www.bloggerexp.com

معاينة القالب - تحميل القالب


منقوووووووووووووووووووووووووول من BloggereXP.Com

» تابع القراءة

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

» تابع القراءة

بلوجر قوالب blogger template

تحميلمعاينة

خصائص القالب :

نوع القالب :	بلوجر قوالب blogger template
اسم القالب :	TH3dev V2
الكاتب :	Soufiane  -soufian.us
وصف :	قالب بلوجر معرب بعمودين ( عمود على اليسار ) بلون أبيض و أسود و أزرق بخلفية جميلة و لوجو .
تصنيف:	أبيض , أزرق, مدونات شخصية, برمجيات, عمودين, عمود على اليسار, تعليم, جوالات, دروس,

منقوووول

» تابع القراءة

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

درس اليوم هو كيفية اضافة أداة مهمة جدا لجميع مدونات بلوجر و هي كيفية عمل شريط متحرك باخر الموضوعات التي تم نشرها عندك في المدونة.

الميزة الاساسية لهذه الاضافة أنها تجدد نفسها تلقائيا أي عند كتابة موضوع جديد عنك في المدونة سيظهر في الشريط مباشرة

الميزة الثانية لهذه الاضافة هو التحكم الكامل فيها من حيث عدد المواضيع التي تظهر فيها بالاضافة الي لون الخط و أشياء كثيرة سنتعرض لها في نهاية الموضوع. الميزة الاخيرة هو اطلاع زوارك علي جديد مواضيعك بسهولة.

نبدأ بـ كيفية تركيب هذه الاداه عندك

ملاحظة : يفضل أن يتم و ضع الاداة أسفل الهيدر أو في أعلي الصفحة حتي تكون واضحة لجميع زوارك.

1. قم بالدخول الي لوحة تحكم مدونتك من هنا
2. ادخل علي تصميم
3. اضافة أداة
4. ثم HTML/JavaScript

ثم قم بنسخ الكود التالي

<script type="text/javascript">

var w2bWidth="100";

var w2bScrollAmount="7";

var w2bScrollDelay="50";

var w2bDirection="right";

var w2btargetlink="yes";

var w2bnumPosts="5";

var w2bBulletchar =">>>";

var w2bimagebullet="yes";

var w2bimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8OUlJmAs9V4Of7NAog8XHU2XgEuqNm171kfEohbWpsgIIe5JafUOsXI2MvnGYhWkn0YFlGDmMwKK07UtPuMqoKXUmpgTnRmW0ROo1Cbq7J4HxG-be5PuPjXo90WSqGNmUyiCAUDvgXW8/s1600/new.gif";

var w2bfontsize="13";

var w2bbgcolor="FFFFFF";

var w2blinkcolor="000000";

var w2blinkhovercolor="FF0303";

</script>

<script src="http://egymodern.googlecode.com/files/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script>

<script type="text/javascript" src="http://www.roomjedida.co.cc/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10"></script>

أخيرا قم بالحفظ
لا تنسي تغيير الرابط الازرق برابط مدونتك

ملاحظات للتحكم الكامل بالاضافة

    var w2bScrollAmount="7";                               سرعة الشريط

    var w2bScrollDelay="50";                          عدد دورات الشريط

    var w2bDirection="right";                           اتجاة دوران الشريط

    var w2btargetlink="yes";                                  لأظهار الروابط

    var w2bnumPosts="5";               عدد المواضيع التي تريد اظهارها

    var w2bimagebullet="yes";                      اظهار صورة الفاصل

    var w2bimgurl="........ new.gif";                  رابط صورة الفاصل

    var w2bfontsize="13";                                              حجم الخط

    var w2bbgcolor="FFFFFF";                                  لون الخلفية

    var w2blinkcolor="000000";                                 لون الرابط

     var w2blinkhovercolor="FF0303";         لون التأشير على الرابط

اي استفسار أكتب ردا بذلك

» تابع القراءة

قبل تركيب أي قالب يجب أن نعلم أن هذه العملية قد تدفعنا إلى مسح بعض مربعات القائمة الجانبية widgets لذا يجب الحذر في بعض مراحل التنصيب، و سنذكر طرق تلافي المشكل خلال جرد الطريقة.

» 1 - حمل القالب الذي تود تنصيبه إن كان مضغوطا فكه بأحد برامج الضغط ك Winrar أو 7Zip ، و ستجد فيه أهم ملف و هو ملف xml و قد تحصل فيه كذلك مجلد الصور لاستعمالها و إعادة رفعها في حال موت روابطها. و في بعض الحالات تجد ملفات جافاسكريبت و ينطبق عليها نفس ما ينطبق على الصور ...

» 2 - أدخل إلى لوحة تحكم مدونتك عبر بلوجر و اضغط على قائمة " التخطيط "

» 3 - تأتي الآن أهم خطوة في العملية . فبعد تنصيب أي قالب جديد يتم حذف بعض مربعات القائمة الجانبية ، و تبقى أهم المربعات التي قد تحذف هي تلك التي تضم أكوادا و نصوصا كمربعات Html/Javascript و مربعات النصوص و أدسنس ... أما البقية فهي متاحة من خلال قائمة " أضف أداة " و يمكن استرجاعها بسهولة تامة كمربع التسميات و الأرشيف و التغذية ... و هنا وجب أخذ نسخة احتياطية للمربعات الأولى، و نقوم بذلك عبر الضغط على كلمة " تحرير " الموجودة بجانب كل مربع و ننسخ الكود الموجود بها إلى ملف نصي عبر برنامج Notepad مثلا و نسجله باسم المربع، و ينصح هنا بتخصيص ملف نصي لكل مربع حتى لا تختلط الأكواد، و بعد تنصيب القالب نخصص بعض الدقائق لاسترجاع هذه المربعات عبر إعادة لصق أكوادها.

» 4 - ثم نضغط على " تحرير html " من القائمة العلوية .

» 5 - كذلك قبل رفع القالب الجديد نأخذ نسخة احتياطية ( عبر تحميلها ) للقالب القديم لاستعادته في حال عدم الرضى على الجديد و يتم ذلك عبر الضغط على " تنزيل قالب كامل " .

» 6 - الآن نرفع ملف xml ( الذي تحدثنا عنه في المرحلة الأولى ) الخاص بالقالب الجديد بضغط زر Browse و تحديد مكان الملف على الحاسوب ثم نضغط زر " إيداع " لبدء الرفع .

» 7 - بعد الرفع تظهر رسالة و قد لا تظهر بعض الأحيان تخبرنا أنه يتوجب علينا حذف بعض المربعات للاستمرار في حفظ القالب الجديد ، و هنا لن نخسر مربعاتنا لأننا قمنا بحفظها سابقا في المرحلة 3 و نتابع بضغط زر " تأكيد & حفظ " .

» 8 - القالب صار جاهزا و لم يبق سوى إعادة لصق المربعات المحفوظة في الملفات النصية ... من خلال قائمة " عناصر الصفحة " نضغط " إضافة أداة " و نلصق الأكواد المحفوظة ثم نحفظ التعديلات . و في حال لاحظت أن إحدى صور القالب لا تظهر فاعلم أن رابطها معطوب و يجب إعادة رفعها من مجلد الصور المرفق بالقالب و استبدال رابطها بالرابط الجديد من خلال قائمة " تحرير html " و ضغط زر " حفظ القالب "

» تابع القراءة