تغيير خلفية كل موضوع من موضوعات مدونات بلوجر بلون أو صورة معينة


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

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



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


لتحميل ملف الأكواد اضغط على اسم المدونة (مدونة أبو إياد)


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

www.monte-escalier-prix.org www.monte-escalier-prix.org

وضع صورة مخصصة لكل عنوان من عناويين موضوعات مدونات بلوجر



أعلنا منذ قليل عن طريقة وضع صورة جانب عنوان الموضوع لمدونات بلوجر وقد يتساءل البعض عن كيفية تغيير تلك الصورة بتغيير طبيعة الموضوعات أو بوضع صورة تناسب قسم معين أو نوع معين من الموضوعات. مثلا ان كان موضوع يخص أخبار تقنية يضع صورة معينة تناسب الموضوع وكذلك ان كان موضوعا يخص كرة القدم يضع صورة تناسبه وهكذا, أو يمكنه استخدام صورة تحمل اسم (جديد أو حصرى أو مجانى وغيرها ) على حسب الموضوع ورؤية الكاتب نفسه. هنا سنضع طريقة فى غاية السهولة لتخصيص أيقونة بجانب كل عنوان من عناويين موضوعات بلوجر مع إضافة ملف به مئات الصور المصغرة التى يمكنك استخدامها بجانب عناويين موضوعات مدونتك على بلوجر.

الشرح والمعاينة فى الفيديو التالى,  ثم تابع الشرح بالخطوات :)


الخطوات كما بلى:

عند إنشاء موضوع أو تدوينة جديدة قم باستخدام الكود التالى بنفس الطريقة الموضحة بالفيديو السابق
 <img src="image link" style="border-width: 0px;" />
قم بوضع رابط الصورة التى تريد وضعها بجانب العنوان  بدلا من image link ويجب أن يكون رابط مباشر ينتهى بامتداد الصورة (jpg أو png أو gif) ويمكنك الاستعانة فى رفع الصورة من سطح مكتبك الى رابط مباشر خلال موقع tinypic. وسنضع لكم ملفا يحتوى على مئات الأيقونات صغيرة الحجم بالإضافة الى الأيقونات العربية مثل (حصرى و جديد و مجانى ..) قم بتحميل الملف من هنا (أيقونات أبو إياد). شكر خاص لمدونة blogbulk لتوفير الكود. 

www.monte-escalier-prix.org www.monte-escalier-prix.org

وضع صورة جانب عنوان الموضوع لمدونات بلوجر


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



بعد الانتهاء من الفيديو هذه الخطوات مكتوبه:
الخطوة الأولى: اذهب الى القالب ثم تحرير HTML وابحث عن الكود التالى
<b:includable id='post' var='post'>
الخطوة الثانية: قم بتظليل الكود السابق والأسطر بأسفله حتى تصل الى أعلى ذلك الكود
 <div class='post-header'>
الخطوة الثالثة: قم باستبدال ما قمت بتظليله بالكود التالى
<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <table><tr>
        <td class='posttitle'>
           <img src='IMAGE-URL'/></td>
        <td><h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
        </td>
        </tr></table>
   
      <style>
        h3.post-title {
          margin: 0px !important;
        }
      </style>
 
    </b:if>  
  ولاحظ كلمة IMAGE-URL استبدلها برابط صورة مباشر بامتداد gif او png أو jpg ويمكنك الاستعانة فى الحصول على رابط مباشر لصورتك الخاصة من موقع tinypic.com. بعدها قم بحفظ القالب وعاين بنفسك. شكرا خاص لمدونة helplogger

www.monte-escalier-prix.org www.monte-escalier-prix.org

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

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


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

<!-- Facebook Popup Widget START --><!-- Brought to you by www.abu-iyad.com - www.abu-iyad.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#MorganAndMen {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='MorganAndMen'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/abuiyad007&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span id="linkit">Powered by <a href="http://abu-iyad.com">Blog</a> - <a href="http://www.abu-iyad.com">Abu iyad Blog</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END. Brought to you by www.abu-iyad.com - www.abu-iyad.com -->
1- يمكنك التغيير فى إعدادات الكود التالى للتحكم فى وقت ظهور الصندوق للزوار. الـ 20000 تعادل 20 ثانية فاذا أحببت ظهوره بعد 1 ثانية عليك تغيير 20000 الى 1000 أو مثلا 3 ثوانى تغيره الى 3000 وهكذا.
.delay(20000)
2- يمكنك إظهار الصندوق للزائر عند زيارته لمدونتك فى كل مرة يدخل الى موضوع جديد حتى ولو قام بالإعجاب بها! وأنا اعتبرها طريقة تزعج الزائر منك ولا أنصح بها ولكن الخيار بيدك أنت. لتقوم بإلغاء ظهور الصندوق مع كل تحديث للزائر داخل صفحات مدونتك لا تحذف الكود التالى واذا أردت ظهوره مع كل تحميل لصفحات مدونتك قم بحذفه
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
3- يمكنك أيضا تغيير عرض وطول الصندوق من خلال width و height.
4- يجب عليك تغيير abuiyad007 الى اسم صفحة مدونتك على الفيسبوك.

هناك البعض سيريد إظهار صندوق الإعجاب عند زيارة الصفحة الرئيسية فقط فكيف ذلك؟ تابع الخطوة التالية لتعرف :)
<b:if cond='data:page.type == "index"'>
ضع هنا كود الإضافة بعد تعديله
</b:if>
بعد إضافة كود الإضافة قم بنسخة والذهاب الى تحرير HTML وابحث عن الوسم التالى وضع الكود فوقه أو قبله.
 </body>
تنبية: تظهر مشكلة وهو مع الوقت لا يظهر الصندوق لك وستلاحظ ذلك والحل لهذه المشكلة هو حذف الكوكيز من متصفحك ولتفعل ذلك يجب عليك الاطلاع على هذا الرابط بعنوان (كيفية حذف الكوكيز من مختلف المتصفحات)

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

www.monte-escalier-prix.org www.monte-escalier-prix.org

ظهور زر ترجمة النص لعدة لغات فى لوحة التحكم لمدونات بلوجر

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

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

www.monte-escalier-prix.org www.monte-escalier-prix.org

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



بسم الله والصلاة والسلام على رسول الله، زوار ومتابعي ابو اياد يومكم سعيد.

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

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

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



الأوسمة التي سنستخدمها:

 ]]></b:skin> 
</head>

شاهد الشرح بالفيديو:

www.monte-escalier-prix.org www.monte-escalier-prix.org

إنطلاق تطبيق مدونة أبو إياد لتعليم بلوجر للهواتف الذكية بنظام أندرويد


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

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

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

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


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

www.monte-escalier-prix.org www.monte-escalier-prix.org
 

أطعم السمك

المتابعون

مدونة أبو إياد

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

تدعمه Blogger.