عند وضع او اقتباس كود فى التدوينه يظهر بشكل خاطىء , كيف تحل هذه المشكله !

ما قبل تعديل الكود


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

لاصلاح هذا ندخل الى تحرير الموضوع
و نقوم بحذف الكود المحاط بدائره حمراء فى الصوره 




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



ملحوظه : ان لم ينجح الحل الاول .. يمكنك تحويل لوحه التحكم بلوجر اللى اللغه الانجليزيه ثم تدخل الموضوع و تلغى التنسيق ثم تعيد تنسيقه من جديد كما تريد و ترسله لتجد الكود موجود بالطريقه الصحيحه

سلايد شو Nivo Slider تصلح كبانر متحرك



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


ضع كود الـ css اعلى كلمه ]]></b:skin>
#slider-bg {
margin: 0;
width : 960px;
background:#fff;
}
#slider-wrapper {
height: 324px;
margin: 0;
padding: 0;
position : relative;
width : 960px;
z-index: 1;
}
#slider {
position :relative;
width : 960px;
height:324px;
background:url(http://1.bp.blogspot.com/-QK5oawQYmgw/TnKXKsfCJhI/AAAAAAAAAwo/ERwg8G28PkM/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position :absolute;
top:0px;
right:0px;
display :none;
}
#slider a {
border:0;
display :block;
}
.nivo-controlNav {
position :absolute;
right:260px;
bottom:-42px;
display :none;
}
.nivo-controlNav a {
display :block;
width : 22px;
height:22px;
background:url(http://1.bp.blogspot.com/-C1WG2UmXhro/TnKXR2k5p9I/AAAAAAAAAww/byTpwmACcuw/s1600/l-slider-bullet-normal.png) no-repeat;
text-indent:-9999px;
border:0;
margin-left:3px;
float :right;
}
.nivo-controlNav a.active {
background-position :0 -22px;
}
.nivo-directionNav a {
display :block;
width : 50px;
height:61px;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
left:-18px;
background:url('http://4.bp.blogspot.com/-WsXTx93UHVg/TnKXmbB6HUI/AAAAAAAAAxA/v7SrBe9gb1s/s1600/l-slidernav-right.png') no-repeat;
}
a.nivo-nextNav:hover{
background-position :0 -61px;
}
a.nivo-prevNav {
right:-18px;
background:url('http://3.bp.blogspot.com/-b_9PHTHIkxo/TnKXYq7sfQI/AAAAAAAAAw4/D5NUGheZIYo/s1600/l-slidernav-left.png') no-repeat;
}
a.nivo-prevNav:hover{
background-position :0 -61px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
#sliderContent {
margin:50px 50px 0 0;
position : absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#openCloseWrap a {
display : block;
font-size: 13px;
font-weight: bold;
height: 22px;
margin: 0;
position : absolute;
left: 22px;
text-indent: -10000px;
top: 59px;
width : 26px;
}
.nivoSlider {
position :relative;
}
.nivoSlider img {
position :absolute;
top:0px;
right:0px;
}
.nivoSlider a.nivo-imageLink {
position :absolute;
top:0px;
right:0px;
width : 100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display :none;
}
.nivo-slice {
display :block;
position :absolute;
z-index:5;
height:100%;
}
.nivo-box {
display :block;
position :absolute;
z-index:5;
}
.nivo-caption {
position :absolute;
right:0px;
bottom:0px;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width : 100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
text-align:center;
font:italic 29px/32px Georgia;
color:#fff;
font-weight:bold;
}
.nivo-caption p h3{
font-size:22px;
font-style:italic;
color:#f23a66;
font-weight:bold;
line-height:30px;
}
.nivo-caption a {
display :inline !important;
}
.nivo-html-caption {
display :none;
}
.nivo-directionNav a {
position :absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
right:0px;
}
.nivo-nextNav {
left:0px;
}
.nivo-controlNav a {
position :relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}


كود الجافا سكربت اسفل <body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://jquerywallbase.googlecode.com/files/jquery.tools.min-liquid.js'/>
<script src='http://jquerywallbase.googlecode.com/files/jquery.nivo.slider.pack-Liquid.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'boxRandom,boxRain,boxRainGrow', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: false, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
//]]>
</script>

ضع هذا الكود فى اضافه Html الموجوده فى الهيدر ان اردت لتكون بانر متحرك , او يمكنك اضافتها مباشره من تحرير القالب بعد كلاس الهيدر
تضع الكود هنا <div class="header"><div>
<div id='slider-bg'>
<div id='slider-wrapper'>
<div class='nivoSlider' id='slider'>
<a href='#Link'>
<img height='324' src='http://www.dresshealthytoday.com/wp-content/uploads/2010/11/2-960x360.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='http://4.bp.blogspot.com/-iftcgf3YAQ4/TnMCMLK-QEI/AAAAAAAAAxY/OmNJERF8h6k/s1600/nivo-960-340-2.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='http://www.whartonmedia.com/images/960x360_rocksunset.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='http://www.shdwi.com/wp-content/uploads/Greens-1155-21-960x360.jpg' width='960'/>
</a>
</div>
</div>
</div>

اضافه سلايد شو Orangebox فى بلوجر




فى تدوينه اليوم سنشرح اضافه لايت بوكس Lightbox اسمه Orangebox لبلوجر يتميز بانه قادر على احتواء الصور و الفلاش و اليوتيوب و الفرامات و مشغلات الفيديو و الجاليرى .. و الافضل من هذا هو حجمه الصغير 16kb و يحتوى على اضافه لعمل شير للمحتوى اللى المواقع الاجتماعيه المختلفه

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

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/orangebox/css/orangebox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/orangebox/js/orangebox.js"></script>


و اضف مكتبه الجى كويرى ان لم تكن تمتلكها
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

كل هذا طبعا تضيفه فى البودى بعد الـ <body>
او فى الهيدر قبل الـ </head>

الان اذا اردت تفعيل هذه الاضافه يدويا

تعدل الكود الموجود بالاسفل

<a href="large3.jpg"><img src="small3.jpg" /></a>

و تجعله هكذا

<a data-ob_caption="الوصف" data-ob_linkText="العنوان" rel="lightbox" href="small.jpg"><img src="small.jpg" /></a>

اى انك تضيف Rel="lightbox"  لتفعيل الاضافه على اى صوره تريدها

و يمكن ان تضيف data-ob_caption="وصف الصوره"  
               data-ob_linkText="عنوان الصوره"


و اذا اردت تطبيق اى اضافه lightbox اوتوماتيك على صور المدونه , ليس عليك الا قرائه هذا الموضوع ..

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



السلام عليكم و رحمه الله و بركاته , فى تدويــنه اليــوم حنوضح مشكله رغم بساطتها الا انها مزعجه جداا مدونتك شكل الخط فيها وحش عشان فى مسافه بين الحروف خصوصا عند تعريب القوالب الاجنبيه , وجدت المشكله و مش عارف تعمل ايه , جربت Letter spacing عشان تقلل المسافه بين الحروف و برضه المشكله متحلتش , رانديفو حتقوللكم سبب المشكله و حلها البسيط جدا باذن الله 
تدخل تحرير html و تدور على الكود ده
text-align:center;
بعد ما تلاقى الكود ده تحذفه خالص 
و حتلاقيها غالبا فى كلاس الـ post-body

اخفاء اكواد جافا سكربت js و css عن صفحات و عرضها فى اخرى لتسريع تحميل بلوجر





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

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

مثلا ان اردنا عرض كود جافا فى الصفحه الرئيسيه فقط
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script>
</b:if>
او هكذا لعرض محتوى الملف نفسه
<b:if cond='data:blog.url == data:blog.homepageUrl'><script type='text/javascript'>
//<![CDATA[
JSON.extend({
parse: function(string) {
return JSON.decode(string);
},
stringify: function(obj) {
return JSON.encode(obj);
}
});
//]]></script></b:if>
و ان اردنا عرض كود css فى الصفحه الرئيسيه فقط
<b:if cond='data:blog.url == data:blog.homepageUrl'><script src='http://randevo.blogspot.com/style.css' type='text/javascript'></script></b:if>
او هكذا لعرض محتوى الملف
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>#header-wrapper{width:963px;margin:0 auto 0;height:100px;padding-top:15px;overflow:hidden;}</style>
</b:if>
و هكذا دواليك مع باقى الاكواد ..

فان اردنا اخفاء الكود عن الصفحه الرئيسيه فقط و عرضه فى باقى الصفحات
<b:if cond='data:blog.pageType == "item"'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script>
</b:if>
و ان اردنا عرض الكود فى صفحات ثابته فقط
<b:if cond='data:blog.pageType == "static_page"'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script>
</b:if>
و لاخفاء الكود عن الصفحات الثابته فقط
<b:if cond='data:blog.pageType != "static_page"'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script>
</b:if>
لعرض الكود فى رابط معين فقط

<b:if cond='data:blog.url == "URL OF Selected Post"'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script>
</b:if>

لاخفاء الكود عن رابط معين فقط
<b:if cond='data:blog.url != "URL OF Selected Post"'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script>
</b:if>
لعرض الكود فى صفحات الاقسام labels فقط .. يمكنك تحديد اسم التسميه او ازاله السطر الموجود فيه كلمه التسميه ان ردت عرض الكود فى كل صفحات التسميات labels


<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;التسمية&quot;'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script>
</b:if>


لعرض الكود او الجافا سكربت فى صفحات المواضيع فقط


<b:if cond='data:blog.pageType == "item"'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script>
</b:if>

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

<b:if cond='data:post.author == &quot;إسم الكاتب &quot;'>
<script src='http://randevo.blogspot.com/script.js' type='text/javascript'></script></b:if>

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


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


مميزات الإضافة:
  • عبر هذه الإضافة سيكون لكل موضوع او تدوينة  تعليقاتها الخاصة.
  • إمكانية الرد على تعليقات الآخرين و الإعجاب بها.
  • إدارة التعليقات و التحكم فيها عبر تصفيتها، محوها أو حظر كاتبيها.
  • إمكانية التعليق بحسابات عدة منها فيسبوك و ياهو و هوتميل...
  • يمكن إضافة مشرفين لمراجعة التعليقات و هذه ميزة جيدة للمدونات الجماعية.
  • إعدادات الإضافة تضم خصائص عدة منها إخفاء أو إظهار صندوق التعليق، التدقيق الإملائي و غيرها...
  • و أهم ميزة في اعتقادي هي أن كل من علق فإن تعليقه يظهر على صفحته على فيسبوك مرفقا برابط للموضوع و صويرة في حال أبقى على الإشارة في خانة "نشر في فيسبوك" "Post to Facebook". الشيء الذي سيساعد في إشهار المدونة و نشر مواضيعها...
  • و طبعا ميزات عدة نترك لكم فرصة اكتشافها...
صور إضافة تعليقات فيسبوك:
كذلك يمكنك معاينة الإضافة من خلال مدونتي هذه فقط توجه أسفل هذه التدوينة و ستعاينها عن كتب. 


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



الخطوة الأولى: إنشاء تطبيق خاص على الفيسبوك

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


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


الخطوة الثانية: إضافة الأكواد اللازمة إلى قالب المدونة

من لوح تحكم مدونتك توجه إلى صفحة "التصميم"  ثم "تحرير HTML" و قبل أي تعديل رجاء احفظ نسخة احتياطية من قالب مدونتك على جهازك ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
ابحث عن <html ثم بعده مباشرة أضف الكود الآتي :

xmlns:fb='http://www.facebook.com/2008/fbml' 

و سيصبح إذن الكود بهذا الشكل :

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

الآن ابحث عن <body> و بعده مباشرة ألصق الكود الآتي بعد استبدال معرف التطبيق بالأرقام التي نسختها سابقا في الخطوة الأولى:

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
    FB.init({xfbml: true, appId: معرف التطبيق });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ar_AR/all.js'
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

بعد ذلك ابحث عن </head> ثم قبله مباشرة ألصق الكود الآتي:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='عنوان المدونة' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='معرف التطبيق ID'   property='fb:app_id'/>
<meta content='معرف حسابك على فيسبوك ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

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


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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>

ملاحظة: لمن يملكون قوالب داكنة أو سوداء اللون يمكنه استعمال صندوق تعليقات فيسبوك باللون الأسود و لفعل ذلك نضيف colorscheme='dark' مباشرة بعد <fb:comments في الكود السابق.

و أخيرا اضغط زر الحفظ و هنيئا لك 

اظهار الوصف و الصوره عند عمل شير لاى موضوع على الفيس بوك



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

نحط الكود ده بعد <data:post.body/>

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>
الان كيف نجعل الشير يضع وصف اوتوماتيك للموضوع و يجلب ايضا الصوره المناسبه له
نعمل سيرش ctrl+f و ندور على كلمه
<data:post.body/> .. و نضع الكود التالى قبلها و بذلك يتم وضعه قبل التدوينه .. حتى يمر عليه الفيسبوك و ياخذ منها الوصف و الصوره ..

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:if cond='data:post.snippet'>
   <meta expr:content='data:post.snippet' name='description'/>
   <meta expr:content='data:post.snippet' name='og:description'/>
   </b:if>
 </b:if>

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
blogger