اضافة مربع شات المسنجر للمدونة
اضافة مربع شات المسنجر للمدونة
من دون مقدمااااات
اولا ندخل
هالموقع
نحط صح 2
3 نختار انشاء هوتميل على الجنب
ومره وحده اختاار شكل الصفحه
انزلوو تحت اختاارو اللون 4
والحجم
انسخوو الكودد
ولصقووه هناا
HTML/JavaScript
الجمعة، 6 يناير 2012
اضافة مربع شات المسنجر للمدونة
اضافة مربع شات المسنجر للمدونة
من دون مقدمااااات
اولا ندخل
هالموقع
نحط صح 2
3 نختار انشاء هوتميل على الجنب
ومره وحده اختاار شكل الصفحه
انزلوو تحت اختاارو اللون 4
والحجم
انسخوو الكودد
ولصقووه هناا
HTML/JavaScript
إضافة عدد التعليقات بالمدونة وعدد التدوينات !
بسم الله الرحمن الرحيم
اللهم صل على محمد وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته ،،
أما بعد :
اليوم أقدم لكم إضافة عدد المواضيع في المدونة وعدد التعليقات أيضاً :
لرؤية مثال من هنا :http://www.gamraii.com
كود:
<script style="text/javascript">
function numberOfPosts(json) {
document.write('عدد المواضيع في هذا الموقع: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('عدد التعليقات في هذا الموقع: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<ul><li><script src="http://4feeds.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://4feeds.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>
<span style="font-size:75%;"></span>
<div dir="rtl" style="text-align: right;" trbidi="on">
<script>
function numberOfPosts(json) {
document.write('عدد المواضيع في هذا الموقع: <b>' + json.feed.openSearch$totalResults.$t + '</b>
');
}
function numberOfComments(json) {
document.write('عدد التعليقات في هذا الموقع: <b>' + json.feed.openSearch$totalResults.$t + '</b>
');
}
</script></div>تنبيه:
قم بتغيير رابط مدونة ارشفنى برابط مدونتك!
اجعل الزوار يقيمون تدويناتك او مدونتك (جديد)
موضوع حصري وجيد معضمنا يعرف اداه للتقييم (المنتشره بكثره) ولاكنها قديمه وفيها بعض العيوب ..المهم هذا موقع يعطيك إمكانيه لوضع تقييم لتدوينه واحده أو لجميع التدوينات
وهذه هي صورة الإضافه
تشبه الأولى ولاكن أفضل بكثير
أولا إضغط هنا
الخيارات يسار الصفحه:
اول خيار يسمح بظهور التقييم لكل تدوينة على حدة
ثاني خيار خاص بالمدونة ككل
يتم الضغط على get widget ومن ثم نسخ الكود
مع العلم هذا الموقع يدعم بلوقر
وبالتوفيق للجميع
وهذه هي صورة الإضافه
تشبه الأولى ولاكن أفضل بكثير
أولا إضغط هنا
الخيارات يسار الصفحه:
اول خيار يسمح بظهور التقييم لكل تدوينة على حدة
ثاني خيار خاص بالمدونة ككل
يتم الضغط على get widget ومن ثم نسخ الكود
مع العلم هذا الموقع يدعم بلوقر
وبالتوفيق للجميع
اضافة خاصية الترجمة الى اكثر من لغة
اضافة خاصية الترجمة الى اكثر من لغة
تحية و احتراما...اما بعد
و ساشرح كيفية اضافة الترجمة على شكل قائمة منسدلة ليختار الزائر اللغة التي يريد
هذه الاضافة رائعة خصوصا ان كان زوار مدونتك من الاجانب
مثال على مدونتي (اسفل الصفحة)
طريقة التركيب سهلة
لوحة التحكم/التخطيط/اضافة اداة html
و اكتب الكود التالي
كود بلغة HTML:
<div id="google_translate_element"></div><script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'ar' }, 'google_translate_element'); } </script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><br />
ثم حفظ
طريقة إضافة كود قائمة منسدلة لمدونتك على بلوجر
السلام عليكم .
طبعاً كلنا يعرف القائمة المنسدلة حتى أولئك الذين يقرأون اسمها الان لأول مرة هم بالأصل يعرفونها لكن فقط يختلط عليهم اسم محدد لهذه الإضافة ..
قبل البدء في الشرح هذا
طبعاً كلنا يعرف القائمة المنسدلة حتى أولئك الذين يقرأون اسمها الان لأول مرة هم بالأصل يعرفونها لكن فقط يختلط عليهم اسم محدد لهذه الإضافة ..
قبل البدء في الشرح هذا
صورة الإضافة :
مميزات الأضافة :
- احترافية لمدونتك .
- تسهل على الزائر البحث في أقسام مدونتك أو ارشيفها .
- لا تأخذ حجم " طولي " كبير بل انها لا تصل الى 5px طولاً وتحمل في داخلها أي عدد من الأقسام .
- يمكن التعديل عليها وتغيير أحجامها .
- سهلة التركيب .
- يمكن وضعها في أي مكان في المدونة حتى الهيدر أو الفوتر .
طريقة تركيب الإضافة :
من رئيسية مدونتك توجه الى تصميم ثم عناصر الصفحة ثم اضافة أداة html في المكان الذي تريده وقم بإضافة الكود التالي :
<form><select name="menu" onchange="window.open (this.options[this.selectedIndex].value,'_blank')" size="1" style="width:250px"> <option /> -اختر ما تريد من القائمة المنسدلة - <!-- change the links with your own --> <option value="http://www.ar-bl.net/" />بلوجر بالعربي <option value="http://gamraii.com/" />مدونتي <option value="http://www.gamraii.com/2010/10/10_20.html" />من أنا </select></form>طريقة تخصيص الإضافة :
لتغيير عرض الاضافة قم بالتعديل على الحجم فقط .
style="width:250px
لتغيير حجم الاضافة قم بالتعديل على الرقم " اكبر أو أصغر "
size="1"
انتهى .
سكريبت آخر التدوينات المتحرك مع مصغرات الصور
بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
سكريبت آخر المواضيع مهم جدا ليبقى الزائر أطول مدة ممكنة فى موقعك
لأنه يتيح لعرض عدد من آخر المواضيع التى تحددها بطريقة متحركة وجميلة
الإضافة يمكن ملاحظتها بمدونة كن داعيا للخير
الإضافة يمكن ملاحظتها بمدونة كن داعيا للخير
السكريبت بتقنية
j-Query
<script type='text/javascript'>
jQuery.noConflict();
</script>
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://glitter-text.googlecode.com/files/recentpostticker.js" ></script>
<script style='text/javascript' src='http://glitter-text.googlecode.com/files/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 15;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
jQuery(document).ready(function($) {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 7,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'down'
});});
</script>
<div id="sai">
<script src='http://yoursite.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>
<a href="http://conda3ianllkhir.blogspot.com/2011/12/animated-last-posts.html"> Get it here </a>طريقة تركيب الكود بمدونات بلوجر
الدخول على التصميم ثم إضافة أداة >>> Html,Javascript
نسخ الكود السابق ولصقه بالنافذة
وضع رابط موقعك أو مدونتك بدلا من
http://yoursite.blogspot.com/ويمكن التحكم بعدد المواضيع عن طريق التغيير فى القيمة
var numposts = 15;وعدد المواضيع المعروضة عن طريق التغيير فى القيمة
showItems: 7,والتحكم فى سرعة الحركة عن طريق التغيير فى القيم
speed: 500,
pause: 3000,يفضل وضع صورة فى كل موضوع لتظهر بالإضافة
والله المستعان
تحياتى لــ مدونة كن داعيا للخير
نمودج راسلني اكثر اثارة بصيغة ال jquery
نمودج راسلني اكثر اثارة بصيغة ال jquery
هو عبارة عن تلميح مميز
لإجراء شكل من أشكال الاتصال مع صاحب المدونة ،
وذلك باستخدام خدمة مجانية من جوجل مستندات
واسم البرنامج المساعد Fancy Box.
وهنا لقطة للشاشة :
للمشاهدة
+
مشاهدة ثانية
و هنا شرح لهدا الابداع
اولا سجل دخولك الى بلوجر
من تصميم >>> تحرير ال HTML >>> تنزيل القالب ! >>> توسيع القالب
ابحث عن هدا كود
]]></b:skin>و نضع تحته تماما هدا الكود <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="http://blogspacetech.googlecode.com/files/jquery.fancybox-1.3.0.pack.js"></script> <link rel="stylesheet" type="text/css" href="http://blogspacetech.googlecode.com/files/jquery.fancybox-1.3.0.css" media="screen" />
الان سوف نضيف أسفل الكود السابق كود اخر
<script type="text/javascript"> $(document).ready(function() { $("#contact_form").fancybox({ 'width': '75%', 'height': '75%', 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'iframe' }); }); </script>
و قبل اضافته علينا الدهاب الى هدا الموقع
و نضع فيه الكود السابق و نضغط على encode
حسنا سوف يعطيك كود
و نقوم باضافته تماما بعد الخطوة الاولى
الان يستلزمنا حساب في GOOGLE لنسهل التواصل
https://spreadsheets.google.com/viewform?formkey=dEVtYTVGWHFvUVdZMHVzVHdtZWw2ZGc6MQ
المهم
الان سوف نضيف هدا النمودج الى القالب
كيف ؟
سوف نقوم باضافة هدا الكود في أي موضوع تريده عندما نحتاج الى النمودج
<a id="contact_form" href=" https://spreadsheets.google.com/viewform?formkey=dEVtYTVGWHFvUVdZMHVzVHdtZWw2ZGc6MQ">اتصل بنا</a>
لا تنسى تغيير الرابط
و الدي لم يفهم جيدا الدرس فيمكنه ان يسأل.. سيكون هدا مفيد لك !
تحياتي
الموضوع تماما كما ورد في الفضاء التكنولوجي ...
سحابة الكلمات الدلالية لمدونات بلوغر Blogger tag cloud
بعد الصلاة و السلام على خير الأنام محمد الصادق الأمين ، هذه المرة سنتعرف و رفقتكم الطيبة طريقة تركيب هاك الكلمات المفاتيح أو الكلمات الدلالية كما يحلو للكثير نعتها . الإضافة ترتكز بالإساس على تصنيفات المدونة و تعرضها على شكل ركام تختلف فيه أحجام النصوص حسب قوة التداول داخل المدونة ، و تجدر الإشارة إلى أن هذه الإضافة تساهم في رفع تلاؤم المدونة و محركات البحث SEO .تحديث : الآن أصبح بالإمكان إضافتها بطريقة سهلة من خلال أداة التسميات . تابع الشرح من هنــــا .
قبل البدء في في الشرح أشير إلى شيئين أساسيين أولهما حفظ نسخة من القالب قبل التعديل عليه حتى لا ينالك من الأمر إلا ما نال حنين و خفيه :) . ثانيهما ضرورة وجود على الأقل أداة " تصنيفات" واحدة في مدونتك ، إذا لم توجد فركبها كالآتي :
لوح تحكم المدونة » التخطيط » عناصر الصفحة » ثم أضف أداة تصنيفات جديدة .
الآن سنضيف كودا إلى القالب و ننهي العملية :
لوح تحكم المدونة » التخطيط » تحرير Html ثم تبحث عن هذا الكود أو ما يشبهه .
<b:widget id='Label1' locked='false' title='تصنيفات' type='Label'>
الكلمة باللون الأخضر تختلف عادة فهناك من يسميها أقسام و آخر تصنيفات ... لذلك حاول أن تبحث فقط ببعض الكود مثلا widget id='Label1 ثم انظر إن كان يشبه الكود السابق . بعد إيجاده قم بتحديده كاملا أي ابتداء من القوس المعقوف الأول و انتهاء عند الثاني كما في الصورة ثم تلصق مكانه الكود الأخير الذي بعد الصورة و تحفظ القالب و مبروك عليك .
الكود :
<b:widget id='Label1' locked='false' title='كلمات مفتاحية' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/
//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false; // show counts? true for yes, false for no
var minCount = 1; // what is the minimum count for a tag to be shown? 1 for all
//Begin code:
var range = max - min;
//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push("<data:label.name/>");
</b:loop>
//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push("<data:label.url/>");
</b:loop>
//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push("<data:label.count/>");
</b:loop>
//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}
//Make an independant copy of counts for sorting
var sorted = counts.slice();
//Find the largest tag count
var most = sorted.sort(sortNumber)[0];
//Begin HTML output
for (x in labels)
{
if(x != "peek" && x != "forEach" && counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = "(" + counts[x] + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "</a></span> " );
}
}
</script>
</div>
</b:includable>
</b:widget>
بعدها يمكنك إضافة مربع تصنيفات بشكله التقليدي العادي .
طريقة إضافة سلايدر لمدونات بلوجر
بسم الله و الحمد لله و الصلاة و السلام على المصطفى الأمين نبينا محمد العدنان و على الآل و الصحب أجمعين.
السلام عليكم و رحمة الله.
بعد أن ركبت إضافة الصور المنزلقة إي ما يسمى بالسلايدر Slidershow على مدونة ذؤيب استحسنها الكثير من الإخوان الكرام، و نزولا عند طلبهم أقدم بإذن الله في هذا الموضوع طريقة تركيب هذه الإضافة التي حقا تضفي لمسة جميلة على المدونات و تساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان. و قبل متابعة الموضوع وجب أن أشير إلى ضرورة حفظ نسخة احتياطية من القالب قبل أي تعديل، كذلك لاحظت أن كثيرا ممن لا يجدون الأكواد المبحوث عنها ينسون أن يضعو علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
يمكن معاينة السلايدر على رئيسية مدونة ذؤيب أو من خلال هذه الصورة.
إضافة الأكواد إلى قالب المدونة
بعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التصميم ثم تحرير HTML.
الآن ابحث عن <head> و بعده مباشرة ضع الأكواد الآتية :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://javascript-file.googlecode.com/svn/trunk/coin-slider.min.js' type='text/javascript'/>
بعد ذالك ابحث عن ]]></b:skin> و مباشرة فوقها ضع الأكواد الآتية:
/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { text-align:right; width: 590px; padding:10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }■ يشير العدد المكتوب بالأحمر إلى عرض مستطيل عنوان الموضوع و طبعا يحبذ أن يكون نفسه قياس عرض السلايدر الذي سنرى كيفية تحديده في الخطوة الموالية.
بعد إجراء هذه التعديلا الآن اضغط زر حفظ القالب.
إضافة أداة السلايدر إلى تصميم المدونة
بعد أن انهينا تحرير القالب الآن توجه إلى عناصر الصفحة ثم اضغط رابط إضافة أداة في أي مكان تشاء و في النافذة المنبثقة اختر أداة HTML/Javascript ، اترك حقل العنوان فارغا و في حقل المحتوى ضع الكود الآتي مع إجراء التعديلات الضرورية.
طبعا يجب أن تكون مجهزا الصور و المواضيع المختارة.
<div id='coin-slider'> <a href="رابط الموضوع الأول"> <img src="رابط صورة الموضوع الأول" /> <span>عنوان الموضوع الأول</span> </a> <a href="رابط الموضوع الثاني"> <img src="رابط صورة الموضوع الثاني" /> <span>عنوان الموضوع الثاني</span> </a> <a href="رابط الموضوع الثالث"> <img src="رابط صورة الموضوع الثالث" /> <span>عنوان الموضوع الثالث</span> </a> <a href="رابط الموضوع الرابع"> <img src="رابط صورة الموضوع الرابع" /> <span>عنوان الموضوع الرابع</span> </a> </div> <script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: 590, height: 250, navigation: true, delay: 5000 }); }); </script>
■ رابط الموضوع الذي تود أن ينتقل إليه الزائر في حال ضغطه على الصورة.
■ رابط الصورة التي سوف تظهر في السلايدر و يجب أن تكون بنفس قياسات السلايدر (عرض و طول)
■ عنوان الموضوع أو وصف مقتضب له.
■ عرض السلايدر المطلوب يمكن تعديله بما يناسب مدونتك (نفسه سيكون عرض صور المواضيع)
■ ارتفاع السلايدر المطلوب كذلك يمكن تعديله بما يناسب مدونتك (نفسه سيكون ارتفاع صور المواضيع)
يمكن تكرار الأكواد في حال الرغبة في عرض أكثر من أربعة مواضيع.
بعد تعديل المطلوب اضغط زر حفظ الأداة ثم قم بسحبها إلى مكان فوق مستطيل رسائل المدونة كما هو موضح في الصورة أسفله:
بعد ذلك اضغط زر الحفظ البرتقالي الموجود في رأس صفحة عناصر الصفحة و بهذا تكون قد أنهيت تركيب الإضافة و هنيئا لك!
لكن إذا أردت تخصيص الإضافة أكثر يمكنك متابعة الخطوة الموالية و ينصح بها لمن لهم تجربة لا بأس بها في التعامل مع قوالب بلوجر.
جعل إضافة السلايدر تظهر فقط بالصفحة الرئيسية
لو أحببت أن تظهر إضافة السلايدر في صفحة مدونتك الرئيسية دونا عن باقي الصفحات عد إلى إداة السلايدر و اجعل لها عنوانا مثلا "سلايدر" ثم توجه صفحة تحرير القالب و لا تنس وضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم ثم ابحث عن هذا كلمة "سلايدر" التي وضعت في عنوان الأداة ثم أضف الأكواد المكتوبة باللون الأحمر كالآتي:
<b:widget id='HTML2' locked='false' title='سلايدر' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget>
احفظ القالب و عد لعناصر الصفحة و احذف عنوان أداة السلايدر.
