مدونه شروحات ودروس بلوجر

شرح إضافة ترقيم الصفحات لمدونات بلوجر

2012-08-28T12:49:00.000-07:00

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

* لا تنسى أخذ نسخة احتياطية من قالب .
* قم بالدخول الى لوحة التحكم ثم تحرير ال html ثم قم بتوسيع القالب .
* قم بالبحث عن هذا الكود

]]></b:skin>

* ثم أضف قبله هذا الكود

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

يمكنك تخصيص شكل الكود السابق بما يناسب لون مدونتك كما يلي :
أكواد ال CSS

شكل الإضافة على الطبيعة :

* ثم قم بالبحث عن هذا الكود

</body>

* ثم قم بإضافة هذا الكود قبل الكود السابق مباشر

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

ثم اضغط حفظ . ثم قم مشاهدة القالب .
تم بحمد الله ,,

شرح إضافة زر مشاركة التدوينات من موقع Linkedin لمدونات بلوجر

2012-08-28T12:47:00.000-07:00

بسم الله الرحمن الرحيم , والصلاة والسلام على أشرف المرسلين , أحمدك ربي وأستعينك وأستغفرك , وأصلي وأسلم على سيدنا محمد النبي الأمين وعلى من سار على هديه واستن بسنته الى يوم الدين , أما بعد , كما طالعتنا تويتر بزرها الرسمي لمشاركة التدوينات بموقع تويتر , هو هو العملاق LinkedIn يعلنها كما أعلنها تويتر , وطرح أزرار المشاركة الرسمية للتدوينات والمواصيع عبر الموقع , ولمن لا يعرف الموقع , فهو عبارة عن شبكة اجتماعية أشبه بالفيسبوك ولكنه يستخدمه أكثر رجال الأعمال والتجار , بمعنى أن لو مدونتك تحتوي على مقالات تجارية أو تسوقك لمنتج ما , تستطيع جلب الكثير من الزوار والمشتريين عبر هذا الموقع الرائع من خلال مشاركة تدويناتك فيه , اتكلمت كتير .. صح .. لكن معلش .. نيجي لطريقة تركيب الزر ..

شرح إضافة زر مشاركة التدوينات من موقع Linkedin لمدونات بلوجر

القاعدة الذهبية : لا تنسى بأخذ نسخة إحتياطية من القالب .

لقد أصدر الموقع 3 أشكال مختلفة للأزرار كما بالشكل

ثانيا لتركيب الإضافة .. تابع معي

الدخول الى لوحة التحكم .. ثم تحرير ال html ثم قم بتوسيع القالب .
ابحث عن

<div class='post-header-line-1'/>

أضف قبلها الكود الذي يناسبك من الأكواد التالية .

ملحوظة : إن لم تجد الكود السابق قيم بالبحث عن

<data:post.body/>

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

الكود الأول .

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='top' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

وهذا سيكون شكل الإضافة.

الكود الثاني .

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

وهذا سيكون شكل الإضافة

الكود الثالث .

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

وهذا سيكون شكل الإضافة

الآن احفظ القالب ..

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

حمل القالب الأسود معرب مجانا - قالب Solid معرب مجانا - من أفضل ما عربت وطورت لمدونات البلوجر

2012-08-28T12:33:00.000-07:00

كنت قد طرحت القالب مدفوعا , والآن أطرحه مجانا للجميع

مشاهدة القالب :: تحميل القالب

نسألكم الدعاء

قالب Evident معرب

2012-08-28T12:31:00.000-07:00

قالب Evident معرب

قالب أبيض وأزرق, يتكون من عمودين , وذو عمود أيسر

وثلاثة أعمدة سفلية قالب مريح وجميل

مشاهدة :: تحميل

جوجل تلغي أرشفة جميع المواقع التابعة ل co.cc و cz.cc

2012-08-28T12:29:00.002-07:00

في خبر مفجع جاء صدمة لجميع الذين يعملون على دومينات مجانية ومدفوعة حتى تابعة ل co.cc و cz.cc بتوقف أرشفة مواقعه في جوجل وكما نعرف أن أهم مصدر للزوار لأي موقع هو من محرك البحث جوجل

وللتتأكد من الخبر

تأكد هنا ولن تجد أي لينك مؤرشف في جوجل بعد أن كانت ملايين الصفحات مؤرشفة في جوجل

http://www.google.com/search?hl=en&filter=0&lr=&ie=UTF-8&q=site:cc.co
http://www.google.com/search?hl=en&filter=0&lr=&ie=UTF-8&q=site:nic.cz.cc

والسبب هو إستعمال هذه الدومينات بشكل منافي لسياسات جوجل مثل السبام والهكر ..

لذلك دائمة ننصح بعدم اللجؤء إلى مثل هذه المواقع وإنما شراء دومين خاص من الشركات الكبيرة مثل godaddy وName

شرح إضافة الزر 1+ لجوجل على مدونات بلوجر

2012-08-28T12:28:00.000-07:00

أصدر موقع جوجل حديثا الزر 1+ ،حيث يسمح لك بإقتراح أي موقع معين أو أي شيئ أعجبك وذلك عند النقر على الزر 1+ ،فإنك تقوم بإخبار أصدقائك والعالم أن هناك شيئ ما يجب الإطلاع عليه ،وبالتالي فإن مقترحاتك سوف تظهر عندما يقومون بالبحث في جوجل ، فهذه الميزة جديدة حيث تسعى جوجل في تطوير محركها بشكل جديد ، ،لذلك ،إذا رأيت هذا الزر في موقع وتريد من أصدقائك إيجاده بسهولة عند بحثهم فقط إنقر الزر1 +

ولإضافة هذا الزر في تدويناتك وفتح المجال للزائرين بإقتراح مدونتك نقوم بشرح طريقة تركيب الزر +1 على المدونة .
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

</body>

ثم قم بلصق الكود التالي قبله :

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

الآن قم بالبحث عن هذا الكود :

<data:post.body/>

ثم قم بلصق الكود التالي بعده ،ليكون الزر أسفل التدوينة ،أو قبله ليكون الزر تحت عنوان التدوينة .

<b:if cond='data:blog.pageType == "item"'>

<g:plusone expr:href='data:post.url' size='tall'/>

</b:if>

ملاحظة : يتوفر زر1+ على 4 قياسات حيث يمكنك إختيار القياس المناسب لك وذلك بإستبدال الكلمة tall من الكود بأحد القياسات الموجودة في الصورة أسفله .

وإذا أردت إظهار الزر 1+ كذلك على الصفحة الرئيسية ما عليك سوى حذف السطر الأول والأخير من الكود السابق

خصائص ومكونات قالب مدونات البلوجر

2012-08-28T12:24:00.000-07:00

- المكونات الاساسية لقوالب بلوجر :
1 - الجسم الأساسى للقالب “ Body “
وهو عبارة عن الوعاء التى يحتوى بداخله كل المكونات الاخرى للقالب من الهيدر " Header " والفوتر " Footer " والغلاف الداخلى " Content Wrapper " وغيرها أى انه اشبه بوعاء الطبخ الذى تقوم بإضافة كافة المقادير بداخله .

2 - الهيدر الخاص بالمدونة " Header "
وهو عبارة عن الجزء الموجود فى أعلى المدونة والذى يحتوى بدوره على عنوان المدونة " Title " ووصف المدونة "Description " وايضا إعلانات منها " Adsense " وقد يحتوى على كل ما سبق ذكره او الجزء منه فهو المسئول عن تعريف المدونة وسيتم شرحه بالتفصيل لاحقا.

3 - شريط القوائم " Menu bare "
وهو عبارة عن شريط يحتوى على مجموعة من الروابط والاختصارات الهامة التى تحب ان تعرضها على زوراك ومتابعيك وتسهيل الوصول اليها مثل فهرس للمدونة او سجل للزوار او اتصل بنا وغيرها.

4 - الجسم الداخلى " Content Wrapper "
او المنطقة الخاصة بمحتوى المدونة او كما احب ان اسميه الغلاف الداخلى للمدونة
وهو يحتوى بداخله على كل من محتوى الرسائل " Main Wrapper " وأيضا محتوى السايدبار " Side bare " وهو يعتبر الجزء الاهم فى المدونة وسيكون شغلنا الشاغل فى الفترة القادمة بما يحتويه من مكونات وتدوينات ومهارات.

5 - منطقة الرسائل " Main Wrapper "
يقع هذا الجزء فى الجسم الداخلى " Content Wrapper " والمسئول عن نشر المواضيع " Posts " وأيضا نشر التعليقات " Comments " الخاصة بكل موضوع ومكونات اخرى سيتم وضعها فى هذا المكان ليظهر بشكل راقى وجميل.

6 - منطقة السايدبار " Sidebare "
يقع هذا الجزء فى الجسم الداخلى " Content Wrapper " وهو الجزء المخصص لوضع الادوات والاضافات الخاصة بك والتى تخص مدونتك من ( التسميات " Labels " , الأرشيف " Archives" ، التعليقات " Comments" ، اعلانات ادسنس " Adsense " ، أو اى موجوز تحت تضيفه " RSS " ) ويختلف هذا الجزء من قالب إلى أخر .

7 - الفوتر الخاص بالمدونة " Footer "
وهو عبارة عن الجزء الموجود فى أسفل المدونة وهو مثل السايدبار " Side bare " تقريبا وهو مخصص لوضع الادوات والاضافات الخاصة بك والتى تخص مدونتك من ( التسميات " Labels " , الأرشيف " Archives" ، التعليقات " Comments" ، اعلانات ادسنس " Adsense " ، أو اى موجوز تحت تضيفه " RSS " ) ولكن له بعض المميزات الخاصة سيتم شرحها بالتفصيل لاحقا.

مثال لما سبق , صورة مدونة ملتقى الدروس

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

- text-align وتعني محاذاة النصوص , فإذا كان القالب إنجليزيا فستكون محاذاة النصوص على اليسار وستكون العبارة-إن صحت التسمية- هكذا ;text-align:left بينما لو كان القالب معربا ستكون هكذا ;text-align:right .

- float وتعني محاذاة التنسيق , وشأنها كشأن العبارة التي قبلها فعندما نريد عنصرا ما موجودا في المدونة أن يكون تنسيقه في اليمين تكون العبارة هكذا ;float:right بينما لو كنا نريد تنسيقه نحو اليسار هكذا ;float:left .

- padding وتعني الهوامش الداخلية فإذا كانت في القالب الإنجليزي موجودةً هكذا padding-left:3px; فإنه يلزمنا تغيير left إلى right لتصبح العبارة هكذا padding-right:3px; .

- margin وهي مضاد padding وتعني الهوامش الخارجية وهي لا تختلف عن padding , فإذا كانت في القالب الإنجليزي موجودةً هكذا margin -left:3px فإنه يلزمنا تغيير left إلى right لتصبح العبارة هكذا ;margin -right:3px .

- direction ونستطيع من خلالها تحديد اتجاه القالب كامل , بحيث نضيفها بهذا الشكل direction:rtl مثلا تحت Body هنالك سيتحول اتجاه القالب كاملا في بعض القوالب , وفي القوالب الأخرى سيبقى اتجاه بعض العناصر مثل ما هو مع بعض التغيير . وفي بعض القوالب تكون هكذا direction:ltr; فعلينا بتغييرها direction:rtl; .

توضيح : rtl تعني right-to-left أي من اليمين إلى اليسار , و ltr تعني rleft -to-rightمن اليسار إلى اليمين .

- Font-family , وتعني الخط , فإذا كان الخط هكذا ;font-family:arialونريد أن نغيره إلى خط آخر مثلا التاهوما سنغير arial فقط . ;font-family:tahoma .

هذا إيجاز لبعض الخواص [ css ] التي عادة ما أستخدمها عندما أعرب قالباً ما , ولن تفهموها بشكل جيد الآن , ولكن بعد التطبيق ستسهل لكم وستحبونها كثيرا .

أما بالنسبة لتعديل Html فإني لم أعد أستخدمها كثيرا عندما أعرب أحد القوالب , وذلك لأن أكثر التعديل يكون على css والتنسيق من خلالها من اليمين إلى اليسار , أو العكس .
فعادة ما نبحث في القالب في تحرير Html في البلوقر عن dir , ونضع بجانبها rtl لتكون بهذا الشكل dir="rtl" .

ملاحظة مهمة : الاتش تي ام ال تحتوي على السي اس اس , أي أنها تكون مع بعض , ولتتعرفو أكثر على الفروقات أنصحكم مرة أخرى بزيارة هذا الموقع http://ar.html.net

وانتظروا الدرس القادم , مع شرح تطبيق التعريب على قالب للبلوجر .

طرق تعريب قالب لمدونات بلوجر ...... الجزء الأول

2012-08-28T12:19:00.000-07:00

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النبي الأمين وعلى من سار الى هديه واستن بسنته الى يوم الدين أما بعد , السلام عليكم ورحمة الله وبركاته , كنت قد أعلنت سابقاً عن البدأ في افتتاح دروة لتعريب قوالب مدونات البلوجر , وبإذن الله اليوم سنبدأ ثالث دروسنا في دروة التعريب وسيكون عبارة عن تطبيق التعريب على قالب مدونات بلوجر , ولكي تتمكن من متابعة الدروة يتوجب عليك مشاهدة الدرس الأول من الدورة وكان بعنوان [ 1 ] شرح تنصيب الأدوات التي سنسخدمها في دروسنا مع بعض النصائح والتوجيهات .والدرس الثاني وكان تحت عنوان [ 2 ] شرح مكونات قالب مدونات البلوجر وخصائصه . , وبإذن الله اليوم سنقوم بشرح التعريب على قالب يسمى Poligon , قالب من تصميم Klodian صاحب مدونة Deluxetemplates.net والآن هذا لينك لتحميل القالب من هنـــا , ثم قم بإنشاء مدونة تجريبية نقوم بها بتجريب والتطبيق لدرس التعريب على هذه المدونة , قم برفع القالب الى المدونة التجريبية التي قمت بإنشائها سابقاً , وتابع معي الشرح

ادخل الى لوحة التحكم الخاصة بالمدونة التجريبية التي أنشأناها , وسنقوم بتطبيق درس التعريب عليها .
ادخل الى التصميم ثم تحرير html الخاص بالقالب . ثم قم بتوسيع القالب .

الآن أمامك أكواد قالبك الخاص الغير معرب , وهيا بنا لنبدأ أول خطوة في تعريب القالب ,
أولا لابد أن تعلم انا تعريب قوالب البلوجر هو تعديل في أكواد CSS فقط .

1. ابحث عن هذا الكود

<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">

طبعاً لو نظرت الى الكود بالأعلى والكود الذي فوقه مباشرة , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

2. قم بالبحث عن هذا الكود

#header-inner {

ستجده على الشكل

#header-inner {
    background-position: center center;
    margin-left: auto;
    margin-right: auto;
height: 89px;
}
#header {
    color: #FFFFFF;
    text-align: left;
}

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

#header-inner {
    background-position: center center;
    margin-right: auto;
    margin-left: auto;
height: 89px;
}
#header {
    color: #FFFFFF;
    text-align: right;
}

وأنت قم بملاحظة الاختلافات وما تغير , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

3. قم بالبحث عن هذا الكود

#outer-wrapper {

ستجده على هذه الهيئة

#outer-wrapper {
    font: 110% Arial,Serif;
    margin: 0 auto;
    text-align: left;
    width: 960px;
}

قم بتغييره الى هذا الكود

#outer-wrapper {
    font: 110% Arial,Serif;
    margin: 0 auto;
    text-align: right;
    width: 960px;
}

4. قم بالبحث عن هذا الكود

#main-wrapper {

ستجده على هذه الهيئة

#main-wrapper {
    float: left;
    margin-left: 0;
    margin-top: 5px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 610px;
    word-wrap: break-word;
}

قم بتغييره الى هذا الكود

#main-wrapper {
    float: left;
    margin-left: 0;
    margin-top: 5px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 610px;
    word-wrap: break-word;
}

5. قم بالبحث عن هذا الكود

#sidebar-wrapper {

ستجده على هذه الهيئة

#sidebar-wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KaBz2zuUxcwRjHuv03MPm1mWQMMnIx64wjvMHwlzqB_GU76oIQns0if9x4mGVDdQgWQV24lr7wwmF8BU_f2jclMwo-98SdYR_MRc8e-kZEDBFF-0geSNjmG9KaGs5dt_lx2RGrMiuNI/s1600/content-top.png") repeat-x scroll right top transparent;
    float: right;
    margin-right: -10px;
    margin-top: -10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 329px;
    word-wrap: break-word;
border: 1px solid #D0D7E2;
}

قم بتغييره الى هذا الكود

#sidebar-wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KaBz2zuUxcwRjHuv03MPm1mWQMMnIx64wjvMHwlzqB_GU76oIQns0if9x4mGVDdQgWQV24lr7wwmF8BU_f2jclMwo-98SdYR_MRc8e-kZEDBFF-0geSNjmG9KaGs5dt_lx2RGrMiuNI/s1600/content-top.png") repeat-x scroll right top transparent;
    float: left;
    margin-left: -10px;
    margin-top: -10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 329px;
    word-wrap: break-word;
border: 1px solid #D0D7E2;
}

وأنت قم بملاحظة الاختلافات وما تغير , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

والآن تم الانتهاء من الجزء الأول من الدرس الثالث من دورة تعريب القوالب .
انتظروا قريباً الجزء الثاني بإذن الله .

القالب المتميز قالب لمدونات بلوجر ProGames blogger

2012-05-25T04:33:00.003-07:00

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

ProGames blogger

تحميل

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

2012-05-25T04:24:00.003-07:00

قالب Cellar لمدونات بلوجر

تحميل

شرح اضافه ازرار المفضلات الاجتماعيه بشكل جميل جدا .... 2020

2012-05-24T10:43:00.001-07:00

إليكم الأداة المثلى لأزرار المفضلات الإجتماعية ، إنه صندوق الأزرار الإجتماعية

من إنتاجي .

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

هكذا يبدو الصندوق في المواضيع ( بالحجم الحقيقي )

مع هذه الأداة لست بحاجة لإدراج الأزرار في مواضيعك كل مرة ، و هي متوافقة مع جميع المتصفحات .

طريقة التركيب

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

من لوح تحكم مدونتك توجه إلى صفحة تحرير Html. قم باضافه علامة صح علي خانة توسيع عناصر القالب و إبحث عن الكود : <data:post.body/>

ثم ضع بعده مباشرة الكود التالي :

<b:if cond='data:blog.pageType == "item"'>
<center>
    <div class="addthis_toolbox addthis_default_style " style="width:440px; height:64px; padding:4px; margin:20px 0 0 0; border:1px solid #ccc; border-radius:5px">
    <div style="width:53px; height:100px; float:left; margin: 0 5px 0 0;"><a class="addthis_button_google_plusone" g:plusone:size='tall'></a></div>
    <div style="width:60px; height:100px; float:left; margin: 0 5px 0 0;"><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></div>
    <div style="width:64px; height:100px; float:left; margin: 0 5px 0 0;"><a class="addthis_button_tweet" tw:count="vertical"></a></div>
    <div style="width:48px; height:100px; float:left; margin: 0 5px 0 0;"><a><script src="http://thabbet.com/stframe/"></script></a></div>
    <div style="width:60px; height:100px; float:left; margin: -10px 10px 0 0;"><a><script type="text/javascript" src="http://ajb.ms/button/init?type=large"></script></a></div>
    <div style="width:55px; height:100px; float:left; margin: 0 10px 0 0;"><a class="addthis_counter"></a></div>
    <div style="width:55px; height:100px; float:left; margin: 0 5px 0 0;"><img src="http://img102.herosh.com/2011/06/28/551240818.png" /></div>
    <div style="clear:both"></div></div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">url = document.location.href</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4df3ad593893f85e"></script>
</center>
</b:if>

يمثل الرمز ccc رمز لون الإطار ، يمكنك تغييره إلى أي لون تريد .

اضافه ترقيم الصفحات لمدونات بلوجر blogger

2012-05-20T17:13:00.000-07:00

ترقيم الصفحات من الإضافات التي لا غني عنها للمدونة , حتي تسهل علي الزائر الإنتقال إلي الصفحات الأقدم , في هذا الموضوع سنتحدث عن أفضل وأسهل طريقة لإضافة الترقيم لصفحات مدونة بلوجر .

- من لوحة تحكم بلوجر إختر " التخطيط " .

- إضغط " إضافة أداة " .

- اختر " HTML / Java Script "

- انسخ هذا الكود وضعه في المربع الفارغ .

ملحوظة / اترك مكان العنوان فارغ , تابع الصورة .

- ثم إضغط " حفظ " .

- قم بنقلها أسفل " رسائل المدونة الإلكترونية " .

- إضغط " حفظ الترتيب " .

شرح عمل او اضافه صندوق دردشه لبلوجر

2012-05-20T06:50:00.003-07:00

موضوع اليوم حول كيفية اضافة صندوف الشات أو الدردشة المقدم من طرف الشركة المشهورة عالميا msn.

هذا الصندوق له العديد من المميزات منها :

امكانية التعديل على شكله من حيث الطول و العرض و اللون .

يتيح للزائر امكاتيتين يمكنانه من الدردشة معك.

أعلى الصندوق تظهر حالة صاحب الموقع أو المدونة هل هو أونلاين أم لا.

و العديد من المميزات سأترككم تكتشفونها بأنفسكم .

هذه هي صورة الاضافة

طريقة تركيب هذه الاضافة سهلى للغاية

توجه الى الموقع التالي أنقر هنا

سجل دخولك بحسابك على hotmail

بعد ذلك ستظهر لك الصفحة التالية

علم على Allow anyone on the web to see my presence and send me messages ثم أنقر على save

بعد ذلك و في الجهة اليمنى من الصفحة أنقر على create html

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

بعد نسخه توجه الى مدونتك ثم ركبه .

طريقة التركيب :

سأشرح الطريقة على واجهتي بلوجر القديمة و الحديثة

واجهة بلوجر القديمة

من قائمة التحكم الرئيسية أنقر على تصميم ثم عناصر الصفحة ثم اضافة اداة و اختر اداة html/java script و الصق الكود

واجهة بلوجر الحديثة

من قائمة التحكم الرئيسية المحدثة من طرف بلوجر انقر على تخطيط ثم اضافة اداة اختر أداة html/java script ثم الصق الكود

شرح ظهور عنوان التدوينه فقط في الرئيسيه لبلوجر

2012-05-20T06:48:00.004-07:00

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

طريقة التركيب :
من قائمة التحكم الرئيسية المحدثة من طرف بلوجرأنقر على على قالب ثم تحرير html ثم متابعة علم على توسيع القالب ثم ابحث عن الكود التالي

</head>
بعد ايجاده ألصق قبله مباشرة الكود التالي

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>

تخصيص الكود
الجملة بالأحمر للتعديل على لون العناوين لمعرفة أكواد الألوان أنقر هنا
اللون بالأخضر يعبر عن حجم الخط غيره لما تريد.

شرح اضافه صوره بجانب عنوان التدوينه للبلوجر

2012-05-20T06:44:00.002-07:00

موضوع اليوم يحمل معه اضافة جميلة تعطي رونقا و جمالية لمدونتك .
هذه الاضافة هي عبارة عن صورة مصغرة بجانب عنوان التدوينة.

طريقة تركيب الاضافة
من قائمة التحكم الرئيسية المحدثة من طرف بلوجر أنقر على قالب
ثم تحرير html
ثم متابعة
علم على توسيع القالب
ثم ctrl+f
الان ابحث عن الكود التالي

<a expr:href='data:post.url'><data:post.title/></a>

بعد ايجادك للكود اسنبدله بالكود التالي

<a expr:href='data:post.url'><img src="ضع هنا رابط الصورة"/><data:post.title/></a>

لا تنسى عزيزي الزائر أن تغير "ضع هنا رابط الصورة" برابط الصورة التي تود تركيبها.

وأخيرا احفظ القالب .

الصورة التي يجب عليك تركيبها يجب أن تكون صغيرة الحجم .

للحصول على العديد من الصور على شكل أيقونة زر محرك البحث التالي

www.iconfinder.com

هذا المحرك يعطيك العديد من الصور صغيرة الحجم ملائمة للاضافة.

شرح اضافه اداه المشاركات الشائعه علي شكل صور لبلوجر

2012-05-20T06:38:00.002-07:00

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

اختر عنوان للأداة و لا تعلم على مقتطف ثم انقر على حفظ .

الان أذهب الى قالب ثم تحرير html ثم معاينة علم على توسيع القالب ثم ctrl+f "المرجو أخد نسخة احتياطية من القالب لتفادي الأخطاء".
ابحث عن الكود التالي
]]></b:skin>
بعد ايجادك للكود ألصق تحته مباشرة الكود التالي

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

شرح تغيير ايميل بلوجر بايميل جي ميل

2012-05-20T06:33:00.000-07:00

موضوع اليوم فريد من نوعه حيث سنتطرق من خلاله لكيفية تغيير ايميل مدونة بلوجر.
فالعديد من المدونين يودون تغيير الايميل الذي يخول لهم الدخول الى المدونة و لكنهم لا يعرفون الطريقة.

شرح الطريقة
انشئ حساب gmail جديد "طريقة انشاء حساب لن اتطرق اليها لأنها سهلة للغاية"
الان أدخل الى مدونتك بحسابك الاصلي .
"من واجهة بلوجر الحديثة " انقر على الانتقال الى قائمة المشاركات

ثم اعدادات , و توجه الى السماحات ثم اضغط على اضافة مؤلفين سيمدونك بخانة أكتب عليها الايميل الجديد.
الان سجل خروجك من بلوجر و أيضا من gmail قم بالدخول لحسابك الجديد "الذي أنشأته" على gmail.
و ستجد رسالة تخبرك بأن صاحب المدونة x قد قام بدعوتك للتأليف معه في مدونتك .

في هذه الرسالة ستجد رابط التفعيل أنقر عليه و سيطلبون منك ادخال تعريفاتك على gmail ادخلها و هكذا أنت قبلت الدعوة. الان و كما قمنا في الاول سجل خروجك من gmail و من blogger قم بالدخول الى بلوجر عبر حسابك القديم ثم قم بالذهاب الى السماحات مرة أخرى و ستجد أن المؤلف قد تمت اضافته.
الان المؤلف ليست حقوق التعديل على المدونة لذلك يجب أن تمده اياها .
بجانب البريد الالكتروني للمؤلف الجديد ستجد خيارين و هما "مؤلف - مشرف" اختر مشرف ثم غادر حسابك.
قم بالدخول عبر حسابك الجديد لبوجر ثم اذهب الى السماحات و أزل الحساب القديم .
هكذا لم يعد للحساب القديم وجود و تم تغيير ايميل حسابك بنجاح.

شرح اضافه كود تبادل الاعلاني لمونات بلوجر

2012-05-20T06:17:00.002-07:00

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

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

سأشرح الطريقة على واجهتي بلوجر القديمة و الحديثة

واجهة بلوجر القديمة

من قائمة التحكم الرئيسية أنقر على تصميم ثم عناصر الصفحة ثم اضافة اداة و اختر اداة html/java script و الصق الكود

واجهة بلوجر الحديثة

من قائمة التحكم الرئيسية المحدثة من طرف بلوجر انقر على تخطيط ثم اضافة اداة اختر أداة html/java script ثم الصق الكود

الان مع الكود
الكود

<marquee onmouseover=this.stop()
style="font-family:Tahoma; font-size:11; font-weight:bold; color:#6D67FD"
onmouseout=this.start() scrollamount=2 direction=up width=211
height=105><center> تبادل إعلاني
<center><a href="رابط مدونتك" target=_blank><img src="صورة1" border="0" /></a> <center><a href="رابط مدونتك" target=_blank><img src="صورة2" border="0" /></a> <center><a href="رابط مدونتك" target=_blank><img src="صورة3" border="0" /></a> <center><a href="رابط مدونتك" target=_blank><img src="صورة4" border="0" /></a> <center><a href="رابط مدونتك" target=_blank><img src="صورة5" border="0" /></a> <center><a href="رابط مدونتك" target=_blank><img src="صورة6" border="0" /></a> <p align="center"><br /><td style="PADDING-LEFT: 5px" valign=top><br /> </td></p></center></center></center></center></center></center></center></marquee>

الان تخصيص الكود
في الكود عوض رابط مدونتك برابط المدونة المراد الاعلان معها.
في الكود هناك امكانية اضافة 6 مدونات مع صورها للتقليل منها ما عليك سوى حذف الغير المرغوب فيها و ذالك بحذف العبارة

<center><a href="رابط مدونتك" target=_blank><img src="صورة6" border="0" /></a>

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

شرح اختصار قوائمك في الصفحة لمدونات بلوجر

2012-05-20T05:48:00.000-07:00

إضافة فريدة تعطي مدوناتكم السرعة والاختصار ولن تجدوها بمكان آخر

وهي عبارة عن قائمة جانبية بتقنية الـ Jquery تستطيع من خلالها إضافة أي شيء

طريقة التركيب

هناك ثلاثة خطوات لإضافتها في مدونتك :

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

أو أكمل متابعة الخطوات هنا

1 )ـ ------------------------------------------------------------------------------------------------------------

ملاحظة : إذا كنت قد ركبت كود الـ Jquery من قبل فانتقل للخطوة الثانية

اذهب لتصميم >> عناصر الصفحة >> تحرير HTML

ابحث عن </head> وألصق الكود التالي بعده

كود:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

2 )ـ ------------------------------------------------------------------------------------------------------------

اذهب لتصميم >> عناصر الصفحة >> تحرير HTML

ابحث عن </head> وألصق الكود التالي بعده

كود:

<script src="http://bloggerblogwidgets.googlecode.com/files/jquery.slidePanel.min.js" type="text/javascript"></script>

3 )ـ ------------------------------------------------------------------------------------------------------------

في الجدول التالي اختر خصائص الإضافة ثم

اذهب لتصميم >> عناصر الصفحة >> تحرير HTML

ابحث عن </body> وألصق الكود الناتج بعده

>> اذهب لهذه الصفحة لمعرفة أكواد الألوان <<

يتوجب عليك زيارة هذه الصفحة لعدم إستطاعتي وضع كود الجدول هنا

شرح الجدول : -----------------------------------------------------------------------------------

Advanced CSS Styling

Trigger CSS >> خصائص الزناد ( الزر )

< لونها ( العادي - تحت المؤشر - عند التنشيط ) لون وحجم الخط - البعد عن رأس الصفحة >

Panel Content CSS >> خصائص لوحة المحتوى

< لون الخلفية ( اتركها فارغة إن أردتها بدون ) والخط - حجم الصندوق -

بعده عن رأس الصفحة - هل تريدها متحركة مع تمرير الصفحة أم ثابته >

Settings

ماذا تريد داخل المحتوى

مع الأخذ بعين الاعتبار أنه HTML أي بإمكانك وضع أي شيء ( نص أو إضافة )

والصح ( المربع ) الأخير | يخيرك إن كنت تريد وضع رابط لمدونة صاحب الإضافة

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

2012-05-20T05:44:00.000-07:00

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

طريقة التركيب :
1- سجل دخولك لحساب مدونتك، وخذ نسخة احتياطية لقالب مدونتك
2- ادخل على " تخطيط" ثم "عناصر الصفحة" ثم اختر "اضافة كود html او java script"
3- اضف الكود التالي :

كود بلغة HTML:

<script src="http://www.gmodules.com/ig/ifr?url=http://ig.internetplus.biz/prayertimes/ksa.xml&amp;up_country=ksa&amp;up_city=riyadh&amp;synd=open&amp;w=272&amp;h=168&amp;title=%D9%85%D9%88%D8%A7%D9%82%D9%8A%D8%AA+%D8%A7%D9%84%D8%B5%D9%84%D8%A7%D8%A9+%D9%81%D9%8A+%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

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

2012-05-20T05:42:00.000-07:00

اضافة ساعة أنيقة لمدونتك مع التاريخ
لإضافة ساعة أنيقة مع التاريخ لمدونتك كما هو واضح في الصورة التالية :

طريقة التركيب :
1- سجل دخولك لحساب مدونتك، وخذ نسخة احتياطية لقالب مدونتك
2- ادخل على " تخطيط" ثم "عناصر الصفحة" ثم اختر "اضافة كود html او java script"
3- اضف الكود التالي :

كود بلغة HTML:

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/datetime/datetime.xml&amp;up_color=yellow&amp;up_firstDay=0&amp;synd=open&amp;w=250&amp;h=136&amp;title=%D8%A7%D9%84%D9%88%D9%82%D8%AA+%D9%88%D8%A7%D9%84%D8%AA%D8%A7%D8%B1%D9%8A%D8%AE&amp;lang=ar&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

لمن أراد تعديل الألوان والحجم فيستطيع ذلك من هنا

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

2012-05-20T05:40:00.000-07:00

إضافة ساعة انيقة في مدونتك :
مظهر الساعة كما هو واضضح في الصورة التالية :

كود بلغة HTML:

<script src="http://www.gmodules.com/ig/ifr?url=http://gadgetsplanet.ru/clock/clock105.xml&amp;synd=open&amp;w=320&amp;h=160&amp;title=%D8%A7%D9%84%D8%B3%D8%A7%D8%B9%D8%A9+%D8%A7%D9%84%D8%A2%D9%86&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

لمن أراد تعديل الحدود والحجم فيستطيع ذلك من هنا

شرح اضافه الترجمه لمدونات بلوجر

2012-05-20T05:37:00.000-07:00

أداة ترجمة مدونتك إلى 34 لغة :
لإضافة أداة ترجمة مدونتك إلى 34 لغة أخرى كما هو واضح في الصورة التالية :

كود بلغة HTML:

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=ar&w=160&h=60&title=&border=&output=js"></script>