إضافة قائمة أفقية بتأثيرات لامعة لمدونات بلوجر

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

 

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

</head>

ثم ضع الكود التالي فوقه :

<link href='http://sites.google.com/site/mohamedabuiyad/horizontal-bar/abu-iyad.css' rel='stylesheet' type='text/css'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

قم بحفظ القالب ثم توجه إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<ul class="abu-iyad">
<li class="current"><a href="http://abu-iyad.blogspot.com/"><b>الرئيسية</b></a></li>
<li><a href="http://abu-iyad.blogspot.com/2010/05/abu-iyad.html"><b>فهرس المدونة</b></a></li>
<li><a href="http://abu-iyad.blogspot.com/2010/05/blog-post_3377.html"><b>بلوجر</b></a></li>
<li><a href="http://abu-iyad.blogspot.com/search/label/SEO?&max-results=6"><b>SEO </b></a></li>
<li><a href="http://abu-iyad.blogspot.com/2010/04/blog-post.html"><b>إتصل بنا</b></a></li>
</ul>

و لإضافة تسميات أخرى على القائمة الأفقية ما عليك سوى إضافة مثل هذا الكود

<li><a href="رابط التسمية "><b>التسمية</b></a></li> 

 فوق السمة :

</ul>

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

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

كما ذكرت سابقا لدينا الآن 5 نماذج من القوائم الأفقية ويمكنك إختيار أي واحدة حسب ألوان مدونتك ،عليك سوى تبديل الكلمة ذات اللون الأزرق " abu-iyad" بأحد هذه الكلمات :

1. abu-iyad
2. abu-iyad bleu
3. abu-iyad vert
4. abu-iyad orange
5. abu-iyad violet

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

إضافة زر "أعجبني" من فيسبوك الى تدوينة بلوجر

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

<data:post.body/>

ملاحظة :يظهر الزر باللغة العربية أو الإنجليزية حسب اللغة التي يستخدمها الزائر في حسابه على فايسبوك، فإن كانت صفحته الشخصية بالعربية ظهر الزرعلى شكل أعجبني

و إن كان بالإنجليزية ظهر الزرعلى شكل Like
ولإضافة الزر في آخر التدوينة ألصق الكود التالي بعدها و ليظهرفي أول التدوينة ألصقه قبلها.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>

tahoma : نوع الخط
light : يعني خفيف ، ويمكن تغييرها الى dark
450px العرض الذي ستأخذه الاضافة ويمكن تغييره حسب قالب مدونتك

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

أيها الأحبة: إن الله سبحانه وتعالى مدح نبياً كريماً بالصدق في الوعد، والالتزام به، فقال-سبحانه-:{وَاذْكُرْ فِي الْكِتَابِ إِسْمَاعِيلَ إِنَّهُ كَانَ صَادِقَ الْوَعْدِ وَكَانَ رَسُولاً نَبِيّاً} مريم:54،
قال الإمام القرطبي- رحمه الله- عند هذه الآية: "صدق الوعد من خلق النبيين.
لذالك لابد أن تكون دائما عند كلمتك التي وعدت بيها اى ان كانت الظروف التى تمر بيها
اخوانى الكرام فى هذا الدرس سنتعلم كيف اضافة مواضيع ذات صلة بشكل متحركة جذاب, يتحرك لليمين واليسار

لم اطيل عليكم فى الكلام اكثر من ذالك تعالوا معى الان لكى نتعلم كيف تطبيق تلك الطريقة الرائعه فى خطوتين فقط

الخطوة الاولى:انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم. ,ولا تنسى ان تاخذ نسخة احتياطية من القالب تجنبا لحدوث اى اخطاء لقدر الله
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

كود بلغة HTML:

]]></b:skin>

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

كود بلغة HTML:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
width:100%
min-height:100%;
padding-top:5px;
padding-right:5px;
}
#related-posts h2{
background: #FFF!important;
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://balitraveltips.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en'}
</script>

الخطوة الثانيه: بلاستعانة (CTRL+F) قم بالبحث عن الكود التالي

كود بلغة HTML:

<data:post.body/>

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

كود بلغة HTML:

<br/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop>
<h3 style='border-bottom: 3px #5D7D91 solid;padding-bottom:10px!important'><b>ربما تفيد من هذه المواضيع كذلك :</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div>
</b:if>
</b:if>

اخيرا قوم بحفظ القالب
دومتم فى رعايت الله وامنه

قالب Vermillionpress-AR

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

مصمم بلون جميل وبالأحمر الناصع Vermillion، قالب Vermillionpress-AR هو نسخة أخرى من قالب Basicpress-AR  المحول من طرف فريق Theme Craft.

أرجو أن ينال إعجابكم .

ميزاته :
 عمودان ، شريط جانبي أيسر، أنيق،إحترافي، أحمر،نسائي،قائمة للصفحات،والدعم متوافر .

للمعانية :

للتحميل :

قالب Accordion

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

     وبعد :

هذا قالب مميز قمت بتعريبه وتطويره وهو من تصميم فريق الأخ الفاضل أبو فرحان .

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

من ميزاته :

• خاصية الـ Accordion في مستوى منطقة المواضيع والشريط الجانبي .
• ترقيم الصفحات باستعمال سكريبت Paginator 3000 : قمت بتعديله لكي يوافق تنسيق كتابة اللغة العربية RTL .
• تحديثات بلوغر الأخيرة (قائمة الصفحات،إقرأ المزيد،صور المعلقين).
• إمكانية التعديل على الخط والألوان بواسطة مصمم نمادج بلوغر الجديد .

للمعانية :

للتحميل :

قالب تويتر Twitter

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

تحديث: 
1-تم إصلاح مشكل عدم ظهور ترقيم الصفحات باستبدال رابط السكريبت المحذوف برابط آخر.
2-تم تحديث رابط صورة الخلفية برابط  يعمل .

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

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

للمعانية :

للتحميل :

قالب Basicpress-AR

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

قالب Basicpress-AR ذو التصميم الأنيق ما يجعله مطلبا للباحثين عن الإحتراف .
أرجو أن ينال إعجابكم .

ميزاته :
 عمودان ، شريط جانبي أيسر، أنيق،إحترافي، أبيض،قائمة للصفحات،والدعم متوافر .

للمعانية :

للتحميل :

قالب Design Disease "معرب"

الحمد لله، أنهيت تعريب وتطوير قالب موقع التصميم الشهير Design Disease الذي تم إهدائه من قبل Elena صاحبة الموقع و مصممة هذا القالب وكثير من قوالب ووردبرس المميزة فالمتابع لأعمالها يجدها حقا مميزة وراقية وإحترافية.

قالب Design Disease-AR هو نسخة محولة من قالب ووردبرس Design Disease  المحول من طرف فريق Blog and Web .

ميزاته :
3 أعمدة، أنيق، إحترافي، أزرق،بحري،قائمة للصفحات*، تعديل الألوان من لوحة العلومات.

للمعانية :

للتحميل :

قالب Emeraldpress-AR

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

مصمم بلون جميل وبالأخضر الزمردي الجذاب، قالب Emeraldpress-AR هو النسخة الثالثة من قالب Basicpress  المحول من طرف فريقنا Theme Craft.
أرجو أن ينال إعجابكم .

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

للمعانية :

للتحميل :

إضافة تابعني بالبريد الإلكتروني لمدونات بلوجر

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

1 - طريقة تركيب إضافة المتابعة بالبريد الإلكتروني.

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

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

2 - طريقة تخصيص إضافة المتابعة بالبريد الإلكتروني.

• استبدال عبارة Submit بأخرى مناسبة.

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

<input class='follow-by-email-submit' type='submit' value='Submit'/>

• و وضع صورة مكان الزر الافتراضي

ما عليك سوى استعمال الكود الآتي بدل الأول مع تعديل رابط صورة الزر.

<input class='follow-by-email-submit' src='رابط صورة الزر' type='image' />

• تغيير عبارة Email adress ... 

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

<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>

• تخصيصات CSS إضافية

و لمزيد من التخصيص يمكن استعمال أكواد CSS الآتية و تخصيصها كما في هذا المثال.
تحياتي!

.FollowByEmail .follow-by-email-inner .follow-by-email-address {
         border:1px solid black;
         background-color:#A6BEDE;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
         border:1px solid black;
         background-color:#A6BEDE;
}

حصريا: ضف إلى مدونتك عداد (counter) القراء والمشاهدين لمواضيعك

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

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

لإضافة عداد قراء مواضيعك ما عليك إلا بإاتباع الآتي :


أولا : التسجيل والحصول على استضافة مجانية من المواقع الدعمة مثل : http://zymic.com/ - http://www.000webhost.com/ أو أي موقع يدعم الاستضافة المجانية .
1- توجه إلى لوحة التحكم Cpanel ثم MySQL : أنشئ قاعدة البيانات ( اسم المستخدم،كلمة المرور،،،)
2- عد إلى لوحة التحكم والآن سنتعامل مع   phpMyAdmin :
- إفتح محرر نص كـ Notepad أوWordPad قم بنسخ هذا الكود على المحرر واحفظه بإمتداد TXT :

CREATE TABLE `YOUR-COUNTER-DATABASE`.`YOUR-COUNTER-TABLE` (
`SN` BIGINT NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 1000 ) NOT NULL ,
`hit` BIGINT NOT NULL DEFAULT '1',
PRIMARY KEY ( `SN` )
) ENGINE = MYISAM 

بحيث :
YOUR-COUNTER-DATABASE : قاعدة البيانات التي أنشأتها .
YOUR-COUNTER-TABLE : اختر اي اسم لجدول العداد .




أنقر فوق Import أي جلب(استيراد) لهذا الملف TXT الذي أنشأته > لا تنس اختيار SQL ثم انقر فوق GO.


2- قم بتحميل هذا الملف بعد فك ضغطه عليك بتعبئته بالبيانات التي قمت بإدخالها عند إنشائك لقاعدة البيانات مع اسم الجدول للعداد ولاتنس أن تحفظه بامتداد PHP حيث:

            $username = "اسم الدخول"; // Enter Your Username and Password Here
            $password = 'كمة السر'; // Enter Your Username and Password Here
            $database = 'اسم قاعدة البيانات التي أنشأتها';  //Enter Your Database Name Here
            $table = "اسم الجدول الذي أنشأته"; //Enter Your Counter Table Name Here

بعد ذلك توجه إلى مركز الملفات  File manager  ثم قم برفعه .


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

document.write('1');

هذا يدل على أن العداد يعمل بشكل صحيح .

ثانيا : كيفية استعماله في Blogger :

1.أدخل على حسابك في بلوجر وتوجه الى التبويب : التخطيط|تحرير HTML واختر توسيع قوالب عناصر واجهة المستخدم.
ابحث عن :

<p><data:post.body/></p>

لمن لم يعثر على هذا الكود فليبحث عن

<data:post.body/>

2. انسخ هذا الكود فوق السطر الذي بحثنا عنه .

<b:if cond='data:blog.pageType == "item"'>
<div id='hit-counter'>
<p><font color='#666666'><script src='رابط الملف المرفوع counter' type='text/javascript'/> قراءة للموضوع </font></p></div></b:if>

قم بمعاينة القالب للتأكذ من خلو اي خطأ ومن ثم احفظ جميع التغييرات .

لكم الحرية في نقل الدرس/الشرح لمن أراد شريطة ذكر المصدر وبارك الله فيكم.

تنبيه: مدونة نزار القاضي 'بلوغر ويب' اقتبس فيها الدرس مع دروس أخرى من المدونة لكنه خالف قواعد الأمانة في النشر ولم يشر إلى أي مصدر حتى لصاحب الكود.

 بالتوفيق

دعاؤكم لي بظهر الغيب