دروس بلوجر

الثلاثاء، 3 يونيو 2014

تعليقات

Peter Hany

+اقرأ المزيد
حصريا كود الحصانة الكاملة لمواضيع وتصميم مدونتك

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

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

( سرقة المجهود ) وقد رأيت ذلك بنفسى فى مواضيعى التى نسبها الآخرين لأنفسهم فقلت لهم احفظوا الحقوق يحفظم اللــه فلم أجد ردًا منهم

على العموم لا داعى لذلك فهيا بنا لشرح خدعة اليوم من مدونة ابداعاتى

فى مجال البلوجر

شرح التركيب

اذهب لقالب مدونتك >> ابحث عن <body>

واستبدله بالكود التالى

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

تفصيل الكود

(1) oncontextmenu >> لالغاء الكليك الأيمن

(2) onkeydown >> لالغاء استخدام لوحة المفاتيح

(3) onmousedown >> الغاء التحديد فى المدونة

ملحوظة >> اذا اردت تشغيل اى جزء من السابق فى مدونتك

استبدل القيمة False بــ True

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

الأحد، 25 مايو 2014

تعليقات

Peter Hany

+اقرأ المزيد
التعامل مع النصوص المتحركة فى بلوجر

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

فى البداية سنعرض استخدامات النصوص المتحركة

(1) عرض الاشعارات و الأخبار لزوار ومتابعى مدونتك

(2) الاستخدام داخل المواضيع لعمل ملاحظات تلفت نظر الزوار

والآن هيا بنا لشرح الأكواد والتعامل معها

(1)

♫ نص يتحرك من اليمين إلى اليسار ♫

مدونة ابداعاتى >> مبدعون ولسنا مقلدون

الكـــــــــــــــود

<marquee direction="left"> <font size=4 color="#FF00AA">مدونة ابداعاتى >> مبدعون ولسنا مقلدون</font> </marquee>

(2)

♫ نص يتحرك من اليسار إلى اليمين ♫

مدونة ابداعاتى >> مبدعون ولسنا مقلدون

الكــــــــود

<marquee direction="right"> <font size=4 color="#FF00AA">مدونة ابداعاتى >> مبدعون ولسنا مقلدون</font> </marquee>

(3)

♫ نص يتحرك من أعلى إلى أسفل ♫

مدونة ابداعاتى >> مبدعون ولسنا مقلدون

الكــــــــــود

<marquee direction="down"> <font size=4 color="#FF00AA">مدونة ابداعاتى >> مبدعون ولسنا مقلدون</font> </marquee>

(4)
♫ نص يتحرك من أسفل إلى أعلى ♫

مدونة ابداعاتى >> مبدعون ولسنا مقلدون

الكــــــــــــــود

<marquee direction="up"> <span style="color: #ff00aa; font-size: medium;">مدونة ابداعاتى >> مبدعون ولسنا مقلدون</span> </marquee>

ملاحظات على الأكواد السابقة

♦ direction="down" >> هذا هو الجزء الخاص بالاتجاه
♦ color: #ff00aa >> الجزء الخاص بلون الكلام المتحرك
♦ font size=4 >> الجزء الخاص بحجم الخط المتحرك يمكنك تغييره

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

تم الموضوع بحمد اللـــــه
دمتم فى رعايــــة اللـــــه متابعى ابداعاتى الكرام

الثلاثاء، 22 أبريل 2014

تعليقات

Peter Hany

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

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

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

شرح التركيب

اذهب للوحة التحكم >> القالب

الخطوة الأولى

ابحث عن وسم ]]></b:skin>
ضع فوقه هذا الكود وقم بالحفظ

.popular-posts li {
list-style:none;
margin:-12px -5px -6px -10px;
text-align: right;
}
.PopularPosts .item-thumbnail {
background:#D40147;
border-radius: 0 8px 8px 0;
float: right;
margin: 0 0 0 8px;
padding: 8px 8px 0;
}
.item-thumbnail img {
background:#F1F1F1;
border: 2px solid #777;
border-radius: 50%;
height: 58px;
padding: 0;
transition: all 1.5s ease 0s;
width: 60px;
}
.item-thumbnail img:hover {transform: rotate(2880deg);
-webkit-transform: rotate(2880deg);
-moz-transform: rotate(2880deg);
-o-transform: rotate(2880deg);
-ms-transform: rotate(2880deg);
}
.PopularPosts .item-title {
background:#ddd;
border-radius: 8px 0 0 8px;
height: 73px;
margin: 0 5px;
padding: 7px 6px 5px 5px;
}
.popular-posts .item-title a {color:#3300FF;}
.popular-posts .item-title a:hover {color: #D40147;}

الخطوة الثانية

اضف أداة المشاركات الشائعة من مدونتك
ثم اضبط اعداداتها كما بالصورة

بهاتين الخطوتين سوف تحصل على شكل مميز وحصرى للمشاركات الشائعة

دمتم فى رعاية الله متتبعيى مدونة ابداعاتى الكرام

♫ ملحوظة هامة ♫

الاضافة من تصميم مدونة كن مدون

ويمكنك الحصول عليها أيضًا من هنا

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

السبت، 19 أبريل 2014

تعليقات

Peter Hany

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

اليوم وفى موضوع جديد من مدونة ابداعاتى أقدم لكم درس بسيط جدا عن كيفية جعل أى اضافة فى مدونتك عند التمرير لأسفل فى المدوة وهى ما تسمى بـ (sticky widget) وهذه الطريقة بسيطة جدا ويوجد كود بديل عنها فى لغة السى اس اس وهو وسم الـ (position) فهذا الوسم له عدة قيم أحدهم تجعل الاضافة معلقة عند التمرير وهى (Fixed) ولكن هذه الطريقة ليست هى الأفضل لكن مع الطريقة التالية ستكون النتيجة مضية للغاية ولكى لا أطيل عليكم متتبعى مدونة ابداعاتى الكرام هيا بنا أولا للمعاينة ثم الشرح التفصيلى للموضوع

فوائد جعل بعض الأدوات معلقة

(1) ربما تحتاج للفت انتباه الزائر المستمر لاضافة معينة مثل اداة المتابعين فى بلوجر مثلا

(2) ربما تكون فى حاجة اى تثبيت اعلانات عن التمرير لزيادة الأرباح مثل اعلانات ادسنس

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

معاينــة الاضافــة

لاحظ أداة اطلب خدمتى على خمسات عند التمرير

والان جاء وقت شرح التركيب على مدونتك

شرح التركيب

اذهب للوحة التحكم >> القالب

>> ابحث عن وسم الــ </body>

ضع قبلـــــــــــــــــه هذا الكود

<script>
//<![CDATA[
myebd3at_makeSticky("WIDGET ID");
function myebd3at_makeSticky(elem) {
var myebd3at_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
myebd3at_sticky.parentNode.insertBefore(scrollee, myebd3at_sticky);
var width = myebd3at_sticky.offsetWidth;
var iniClass = myebd3at_sticky.className + ' myebd3at_sticky';
window.addEventListener('scroll', myebd3at_sticking, false);
function myebd3at_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
myebd3at_sticky.className = iniClass + ' myebd3at_sticking';
myebd3at_sticky.style.width = width + "px";
} else {
myebd3at_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.myebd3at_sticking {position:fixed !important; top:0; z-index:9999; margin-top: 0; position:relative\9 !important;}
.widget.myebd3at_sticky {width:100%;}</style>

ثم استبدل WIDGET ID بأى دى الاضافة التى تريد التنفيذ عليها

يومكنك الحصول عليه بعد الانتقال لقالب مدونتك كما بالصورة

ثم قم بالحفظ

ملحوظة بخصوص الجزء المحدد باللون الأزرق فى الكود
هو خاص بالاضافة بعد التمرير وهو يعنى ان حجمها سيطل 100% ويمكنك اضافة العديد من الخواص لها على سبيل المثال بامكانه تحد يد مكانها من الصفحة باحد هاتين الخاصيتين margin أو padding

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

الثلاثاء، 8 أبريل 2014

تعليقات

Peter Hany

+اقرأ المزيد
دمج تعليقات الفيس بوك مع تعليقات بلوجر 2014

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

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

وفى هذا الموضوع شرح لطريقة دمج التعليقات

شرح التركيــب

اذهب للوحة التحكم >> القالب >> تحرير HTML

الخطـــــوة الأولى

ابحث عن

<div class='comments' id='comments'>

ربما تجد هذا الجزء مكرر أكثر من مرة فى مدونتك

فأسفل كل جزء ضع هذا الكـــــــود

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='أضف تعليقك عن طريق الفيسبوك'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> تعليقات</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='أضف تعليقك عن طريق بلوجر'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> تعليقات</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='600'/>
</b:if>
</div>

كلمة تعليقات الزرقاء استبدلها باسم تعليقات الفيس بوك اذا أحببت
كلـــــــــــــمة تعليقات الصفراء استبدلها بتعليقات بلوجر اذا أحببت
استبدل القيمة 600 بعرض صندوق تعليقات الفيس بوك الذى تريده
هذا الجزء num_posts='10' خاص بتعليقات الفيس بوك التى ستظهر

الخطــوة الثانيــة

ابحث عن وسم </head>

ضع قبله هذا الكود

<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='معرف الحساب' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

مع استبدال معرف الحساب بمعرف حسابك على الفيس بوك

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

◄ باتمام الخطوات السابقة نكون قد نجحنا فى دمج التعليقات ►

وستظهر بهذا الشكل

لذلك فنحن نحتاج لبعض أكواد الــ CSS لتنسيقها فقم بالتالى

الخطـــــــــوة الثالثــــة

ابحث عن وسم

]]></b:skin>
ضع قبله مباشرة هذا الكود

/* fd and blogger Comments */
.comments-page {
background-color:white;
border: 2px solid rgb(0, 122, 255);
border-radius: 8px;
}
#blogger-comments-page {
display: none;
padding: 0px 0px;
}
.comment-form {
margin: 10px;
}
.comments-tab {
color: #ffffff;
float: right;
padding: 5px;
margin-right: 7px;
cursor: pointer;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
.comments-tab img { height: 14px; width: auto; margin: 0px 3px;}
#blogger-comments,
#blogger-comments.inactive-select-tab:hover {
background-color: #dd7700;
background-image: linear-gradient(#E80, #C60);
background-image: -moz-linear-gradient(#E80, #C60);
background-image: -webkit-linear-gradient(#E80, #C60);
}
#blogger-comments.inactive-select-tab {
background-color: #cc6600;
background-image: linear-gradient(#cc6600, #aa4400);
background-image: -moz-linear-gradient(#cc6600, #aa4400);
background-image: -webkit-linear-gradient(#cc6600, #aa4400);
}
#fb-comments,
#fb-comments.inactive-select-tab:hover {
background-color: #3B5998;
background-image: linear-gradient(#6B89D8, #3B5998);
background-image: -moz-linear-gradient(#6B89D8, #3B5998);
background-image: -webkit-linear-gradient(#6B89D8, #3B5998);
}
#fb-comments.inactive-select-tab {
background-color: #1B3968;
background-image: linear-gradient(#3B5998, #1B3968);
background-image: -moz-linear-gradient(#3B5998, #1B3968);
background-image: -webkit-linear-gradient(#3B5998, #1B3968);
}
.inactive-select-tab {
background-color: #e2e2e2;
background-image: linear-gradient(#F4F4F4,#DDD);
background-image: -moz-linear-gradient(#F4F4F4,#DDD);
background-image: -webkit-linear-gradient(#F4F4F4,#DDD);
}

وستكون النتيجة النهائية للشرح هكذا

ثم قم بحفظ القالب
ومبروك عليك
اتركك لتعاين تعليقاتك بنفسك

كلمة تعلق فى ذهنى

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

◄ اتمنى من كل من مر على هذا الموضوع ان يترك كلمة شكر فى تعليق ►

تعليقات

Peter Hany

+اقرأ المزيد
تركيب تعليقات الفيس بوك على مدونات بلوجر على نظام 2014

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

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

(1) تسهم بشكــــــــــــــــل كبير فى اشهار مدونتـــــــــــك على الفيس بوك

(2) ربما يكون محتوى مدونتك يناسب أشخاص بعيدون عن مجال البلوجر

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

(3) تتيح لك استقبال اشعارات سريعة لأى تعليق فى مدونتك والتعامل السريع معه

(4) سهلة التركيب وسترى ذلك بنفسك من خلال هذا الشرح المبسط فهيا بنا للشرح

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

الخطوة الأولى

انشاء تطبيق على الفيس بوك

انتقل لهذا الرابط واضغط على Create New App

انشاء تطبيق جديد

كما بالصورة

ستظهر لك نافذة كهذه .. قم بعمل التالى

بعد الضغط على زر ( انشاء تطبيق )

ستظهر لك هذه النافذة قم بكتابة كلمة التحقق

بعد كتابة كلمة التحقق والضغط على تقديم

طالما لم تظهر لك رسالة بأن كلمة التحقق خطأ فأنت على صواب

ويكون بالفعل تم إنشاء التطبيق بنجاح

بعد ذلك انتقل الى صفحة ادارة تطبيقاتك

من هنــا

ثم اضغط على التطبيق الذى أنشأته

ثم انسخ الرقم التعريفى للتطبيق APP ID الموضح بالصورة السابقة

واحتفظ به فى برنامج المفكرة لأننا سنحتاجه أكثر من مرة

ويمكنك أيضًا يمكنك الحصول عليه بهذه الطريقة

وذلك بعد الضغط على التطبيق فى صفحة ادارة تطبيقاتك

بعد الانتقال للوحة تحكم التطبيق قم بعمل التالى

(1) اضغط على الاعدادات

(2) بعدها اكمل البيانات التى ستظهر لك

كما بالصورة التالية

♫ ومن يمتلك دومين مدفوع يمكنه وضعه فى خانة App Domains

♫ مثال myebd3at.com أو myebd3at.net أو أى دومين آخر

(3) بعد اتمام البيانات اضغط على + Add Platform

ستظهر لك هذه النافذة اختر موقع الكترونى

(4) بعدها سيظهر لك جزء بيانات جديد أكمله كما بالصورة التالية

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

لننتقل للخطوة الثانية

الخطــوة الثانيــــــة

تركيب التعليقات للمدونــــــة

(1) ابحث فى القالب عن <html

ثم نستبدله بهذا

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

(2) نبحث عن وسم </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>

◄ استبدل كلمة معرف التطبيق بالرقم التعريفى للتطبيق الذى أشرنا اليه فى الخطوة الأولى

AppId

(3) نبـحـــــــــــــــــــــث عـــــــــــــن

أو

أو

<data:post.body/>

ونضع تحت أحدهم هذا الكــــــــود

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

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

◄ استبدل width='600' بالقيمة المرادة للتحكم فى عرض صندوق التعليقات بما يناسب مدونتك

♦ الخطوات التالية خاصة بالحصول على اشعارات التعليقات فهى فى غاية الأهمية ♦

(4) نبحث عن الوسم <head> ونضع بعده مباشرة هذا الكود

<meta property="fb:app_id" content="{معرف التطبيق}"/>
<meta property="fb:admins" content="{معرف الحساب}"/>

◄ استبـــــــــــــــدل معرف التطبيق بالرقم الخاص بتطبيقك .

◄ استبدل معرف الحساب بمعرف حسابك على الفيس بوك .

يمكنك الحصول عليه بهذه الطريقة البسيطة

استبدل YourProfile باسم عضويتك على الفيس بوك فى هذا الرابط

https://graph.facebook.com/YourProfile

◄ويمكنك الحصول عليه من اعدادات حسابك على الفيس بوك

من هنا

وستجد معرف حسابك موجود بعد كلمة ID بهذا الشكل

♦ ملحوظة هامة ربما تفيــــــــــــدك ♦

اذا كانت مدونتك جماعية أى لأكثر من مالك أو مشرف وتريد مراسلة جميع مشرفين المدونة بالاشعارات

ضع فاصلة ( , ) بجوار معرف الحساب الأول ثم , ومعرف الحساب الثانى ثم , ومعرف الحساب الثالث وهكذا

(5) انتقل لهذه الصفحة لاضافة المشرفين على تطبيقك

للتوصل بجديد الاشعارات بدون مشاكل

من هنـــا

ثم اضغط على اعدادات وأكمل كما بالصورة

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

◄ بالنسبة لطريقة دمج تعليقات الفيس بوك مع تعليقات بلوجر الذى طلبها متتبعى المدونة الكرام ►

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

♦ نسعى دائمًا لتقديم أفضل محتوى وبشكل جذاب ومنسق لنكسب ثقتكم وتفاعلكم الايجابى ♦

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

الجمعة، 4 أبريل 2014

تعليقات

Peter Hany

+اقرأ المزيد
اضافة تأثير lightbox على كل صور مدونتك

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

أولا وقبل كل شيء لابد أن تذهب للمعاينة من هنا
♦ اضغط على الصورة بعد الانتقال لرابط المعاينة ♦

معاينـــة

شرح التركيب

اذهب للوحة التحكم >> القالب >> تحرير HTML

ابحث عن وسم الــ </head>

ضع فوقه مباشرة هذا الكود

<link href='http://alblogger-gen.googlecode.com/svn/trunk/lightbox/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script src='http://alblogger-gen.googlecode.com/svn/trunk/lightbox/lightbox.js' type='text/javascript'/>

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

الخميس، 27 مارس 2014

تعليقات

Peter Hany

+اقرأ المزيد
اضافة زر اطفاء النور أثناء مشاهدة الفيديو على مدونتك

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

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

من هنا

شرح التركيب

اذهب للوحة التحكم >> القالب >> تحرير HTMl

الخطوة الأولى

ابحث عن </head> وضع قبله هذا الكود

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#wglightoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#wglightoff").toggle();
if ($("#wglightoff").is(":hidden"))
$(this).html("اطفاء النور").removeClass("turnedOff");
else
$(this).html("تشغيل النور").addClass("turnedOff");
});
});
//]]>
</script>

الخطوة الثانية

ابحث عن </body> ضع قبله هذا الكود

الخطوة الثالثة

ابحث عن ]]></b:skin> ضع قبله هذا الكود

/*----- myebd3at.blogspot.com ----- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
position:relative;
height:36px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjpuZtf-MTaUxuN2ERnfzkYrEcDzjA17pfND6LiCXrLzOXtwkGo1jtM9qyIR_iN8ratVRUu3pfL0hfMxoWb-FJoxaTF5AwndPrhTi6hsjCzaUfG3Hqg0fWVqvxwLtBpv6LN47ZAKjvHo5/s1600/wglightn.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
font-size: 18px;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
font-size: 18px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tO63cDDxLtvMb3paqikH-JJBLpMEFQGMY2uARmu3tLRMBX_nhhPqE4-ieeJVDFdW4P7iexuT21JUlgFfqpCZt0RzhJ0aTI3yE2-FlqMzCBlUQMI13aqgezaZbD4zqCy2PsbPbS_0iltv/s1600/wglightnf.png);
}
#wglightoff {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

الخطوة الأخيرة

عند كتابتك للمشاركة انتقل الى تبويب HTML

ضع هذا الكود فى نهاية الصفحة

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
ضع كود الفيديو هنا
</div>
</center>

كود الفيديو يكون بهذا الشكل

<iframe width="560" height="315" src="//www.youtube.com/embed/FsPB61UHQ88" frameborder="0" allowfullscreen></iframe>

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

◄ فى انتظار تعليقاتكم المشجعة على تقديم المزيد لخدمتكم ►

الأربعاء، 19 مارس 2014

تعليقات

Peter Hany

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

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

شرح التركيب

اذهب للوحة التحكم >> القالب >> تحرير HTML >> ابحث عن

<b:includable id='mobile-index-post' var='post'>

ثم اضف اسفله هذا الكود

<b:includable id='page-navi'><div class='pagenavi'><script type='text/javascript'>var pageNaviConf = {perPage: 7,numPages: 5,firstText: "الأولى",lastText: "الأخيرة",nextText: "»",prevText: "«"}</script><script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/><div class='clear'/></div></b:includable>

ملاحظات
perPage: 7 >> عدد المواضيع التى ستظهر فى كل صفحة
numPages: 5 >> عدد الصفحات التى ستظهر
ثم ابحث عن

<b:include name='nextprev'/>

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

<b:if cond='data:blog.pageType == "index"'><b:include name='page-navi'/><b:else/><b:if cond='data:blog.pageType == "archive"'><b:include name='page-navi'/></b:if><b:else/><b:if cond='data:blog.pageType == "item"'><b:include name='nextprev'/></b:if></b:if>

ثم ابحث عن وسم ]]></b:skin>

وضع قبلـــــــــــــــه كود الترقيم الذى سينال اعجابك

الشكل الأول >> معاينة الترقيم

الكـــــــــــــــــــــــــود

#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {background-color: #3BB3E0;padding: 5px 10px;position: relative;margin: 2px;font-size: 12px;text-decoration: none;color: white;border: solid 1px #186F8F;background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}#blog-pager a:hover, .pagenavi a:hover {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}

الشكل الثانى >> معاينة الترقيم

الكــــــــــــــــــــــود

#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 15px;}.pagenavi .pages {display: none;}#blog-pager a, .pagenavi span, .pagenavi a {padding: 5px 10px;text-decoration: none;font-family: arial;color: white;margin: 2px;background: black;background-position: bottom;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;border-radius: 30px;font-size: 20px;}#blog-pager a:hover, .pagenavi a:hover {background: orange;}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {background: orange;}

الشكل الثالث >> معاينة الترقيم

الكـــــــــــــــــــــود

#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {text-decoration: none;color: #333;text-shadow: 0 1px 0 rgba(255, 255, 255, .5);background-color: #F8F8F8;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);padding: 5px 10px;border: 1px solid lightGrey;font-weight: bold;font-size: 12px;vertical-align: middle;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;margin: 2px 2px;-webkit-transition: .0s ease-in!important;-moz-transition: .0s ease-in!important;-ms-transition: .0s ease-in!important;-o-transition: .0s ease-in!important;transition: .0s ease-in!important;}#blog-pager a:hover, .pagenavi a:hover {border-color: #C6C6C6;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {border-color: #C6C6C6;background-color: #E9E9E9;background-image: none;-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);}.pagenavi a:active {border-color: #C6C6C6;background-color: #E9E9E9;background-image: none;-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);}

ثم قم بحفظ القالب ومبروك عليك ترقيم صفحات مميز
لايوجد مجال لشرح كل كود على حدة فلاحظ الجزء المحدد بكل كود وغيره بما يناسبك
ولأى استفسار عن أى جزء فى الأكواد اترك تعليقك

بعد اتمام هذه الخطوات قد تواجه مشكلة فى الأقسام أو التسميات

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

والحل كالتالى
ابحث عن

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

واستبدله بهذا الكود
(ربما تجد الكود مكرر فيجب استبداله جميع الاكود )

<script type='text/javascript'>
var lblname = "<data:label.name/>";
lblname2 = encodeURIComponent(lblname);
var feedlink = '/search/label/' + lblname2+'?&max-results=5';
document.write('<a href="' + feedlink + '">'+lblname+'</a>');
</script>

مع ملاحظة ان max-results=5 عدد المواضيع التى ستظهر فى التسميات
ويجب ان يكون مطابق للعد الذى حددته فى البداية ليكون الترقيم منتظم

ولتحديد عد الموضوعات فى التسميات التى تظهر داخل المواضيع

ابحث عن

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

واستبدلها ايضا بالكود السابق

واليك الحل اليدوى البسيط حتى لا أكون قصرت فى شرحى

الحل >>
اضف هذا الجزء بعد رابط القسم فى القالب
?max-results=5
ليكون الرابط بهذا الشكل

http://myebd3at.blogspot.com/search/label/اضافات بلوجر ?max-results=9

وفى نهاية موضوع اتمنى أن يكون قد أفادكم أخوانى فى الله
◄ كلمة شكر على المجهود المبذول تكفى لجعلنا قادرين على تقديم المزيد لخدمتكم ►

الاثنين، 3 مارس 2014

تعليقات

Peter Hany

+اقرأ المزيد
جميع اختصارات واجهة تحرير قوالب بلوجر الجديدة

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

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

◄ أدعوك لتكون أحد أعضاء المدونة >> من هنا للتوصل بالجديد والحصرى ►

♦ اختصارات واجهة تحرير قوالب بلوجر الجديدة ♦

أولا : البحث عن أجزاء محددة فى القالب

الطريقة

اضغط من لوحة المفاتيح على CTRL + F

سيظهر لك مستطيل ضع فيه الجزء المراد البحث عنه

ثم قم بالضغط على Enter

ثانيا : البحث عن الأجزاء واستبدالها

وذلك بالضغط على CTRL + SHIFT + F

سيظهر لك مستطيل اكتب به الجزء المراد البحث عنه واستبداله

ثم اضغط على Enter

سيظهر مستطيل آخر اكتب به الجزء المراد وضعه كبديل للجزء الذى بحثت عنه

ثم اضغط Enter لاكمال الاستبدال

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

ثالثا : حل مشكلة صعوبة تحديد بعض الكلمات باللغة العربية فى القالب بالماوس

الأمر بسيط جدا

فقط قم بالضغط فى بداية أو ناية الكلمة ثم استمر فى الضغط على مفتاح SHIFT

والتحرك بالمفتاح الأيمن → أو الأيسر ← من لوحة المفاتيح

وستلاحظ تحديد حرف من الكلمة مع كل ضغطه على الاتجاه الأيمن أو الأيسر

رابعا : اختصارات شائعة ومعروفة للأغلبية

تحديد الكـــــل >> الضغط على CTRL + A

نســـخ الجزء المحدد >> الضغط على CTRL + C

قص الجـــزء المحدد >> الضغط على CTRL + X

التراجع عن تعديل >> الضغط على CTRL + Z

اعادة تعديل معين >> الضغط على CTRL + Y

♦ مواضيع مميزة فى مدونة ابداعاتى ♦

(1) اضافة نسبـــــــــة مئوية بجانب شريط التمرير

(2) اضافة أداة المواضيــــــــــــــع العشوائية الأنيقة

(3) اضــــافة زر الاعجـــاب لتعليقات بـــــــــلوجر

(4) تمييز الأكواد والعناوين الرئيسية فى المواضيع

أستودعكم اللـه الذى لا تضيع ودائعـــــه متتبعينا الكرام

السبت، 15 فبراير 2014

تعليقات

Peter Hany

+اقرأ المزيد
تنسيق شكل سحابة التسميات فى مدونتك

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

♦ المعاينـــــة ♦

شرح تنسيق شكل سحابة التسميات

اذهب للوحة التحكم >> القالب >> تحرير HTML
ملحوظة
لابد أن تكون أداة التسميات مضافة بالفعل ومضبوطة بهذا الشكل

ابحث عن ]]></b:skin>

ضع قبله مباشرة كود الـ CSS التالى

.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:right;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:right;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555
transparent transparent;}

√ غير الأجزاء المحدده فى الكود السابق بما يناسب زوقك

√ أتمنى كلمة شكر على المجهود المبذول فلا تكن أبخل الناس بها

الخميس، 13 فبراير 2014

تعليقات

Peter Hany

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

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

◄ خطوات انشـــــــــاء المدونـــــة ►

(1) الدخول إلى منصة بلوجر لانشاء المدونة
من هنا

(2) الحصول على القالب المناسب لمحتوى المدونة

ويمكن الحصول على هذه القوالب من هنا مجانا
شراء قالب إحترافى لألعاب الفلاش من هنا

(3) الحصول على الكود الذى نستخدمه فى عرض الألعاب فى المدونة

<object height="الطول" width="العرض"> <
param value="لينك الفلاش" name="movie"/>
<embed width="العرض"
src="لينك الفلاش" height="الطول">
</embed>
</object>

(4) الحصول على رابط الملف الفلاشى المنتهى بـ SWF لوضعه فى الكود السابق
سوف نوفر لكم العديد من هذه الروابط

لأفضل الالعاب الموجوده على الانترنت

- ومن الممكن الحصول على بعضها من قسم

الالعاب الاون لاين بنفس الطريقه

المشروحه بالاسفل من هنا

روابط ألعاب فلاش مميزة

1- لعبة mad arrow

من هنا
2- لعبة super mario
من هنا
3- لعبة chronicles
من هنا

بعد الضغط على الرابط انتظر 5 ث ثم اضغط skip AD وبعد ذلك سوف تعٌرض لك اللعبه

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

اضغط هنا لرؤية الصوره بالحجم الطبيعى

√ فى انتظار تعليقاتكم المشجعة على موضوعى √

الأربعاء، 12 فبراير 2014

تعليقات

Peter Hany

+اقرأ المزيد
حول المشاركات الشائعة فى مدونتك إلى سلايدر شو تلقائى

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

المعاينـــــة الحيـــــة

شرح التركيب

فى البدايــــة قم باضافة أداة المشاركات الشائعـــة واضبط اعداداتها كما بالصورة

اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> Html/Javascript

ضع بها هذا الكـــــــــــــود

<style type="text/css">
.cube { width: 260px; height: 170px;
}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://sites.google.com/site/javacodehtml/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').abupopularcube();
});
</script>
<script type="text/javascript" src="http://sites.google.com/site/javacodehtml/popularcube.js"></script>

ثم قم بالحفــــــــــــــــظ

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

لا تبخل بكلمة شكر تساعدنى على الابداع

My Ebd3at Services

تطوير شكل الموقع وجعله ذو مظهر جذاب

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

تصميم شعارات و ايقونات احترافيه

feedbacks

SIGNUP

حصريات

تعليقات

Peter Hany

+اقرأ المزيد
حصريا كود الحصانة الكاملة لمواضيع وتصميم مدونتك

تعليقات

Peter Hany

+اقرأ المزيد
التعامل مع النصوص المتحركة فى بلوجر

تعليقات

Peter Hany

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

تعليقات

Peter Hany

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

فوائد جعل بعض الأدوات معلقة

تعليقات

Peter Hany

+اقرأ المزيد
دمج تعليقات الفيس بوك مع تعليقات بلوجر 2014

تعليقات

Peter Hany

+اقرأ المزيد
تركيب تعليقات الفيس بوك على مدونات بلوجر على نظام 2014

تعليقات

Peter Hany

+اقرأ المزيد
اضافة تأثير lightbox على كل صور مدونتك

تعليقات

Peter Hany

+اقرأ المزيد
اضافة زر اطفاء النور أثناء مشاهدة الفيديو على مدونتك

تعليقات

Peter Hany

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

تعليقات

Peter Hany

+اقرأ المزيد
جميع اختصارات واجهة تحرير قوالب بلوجر الجديدة

تعليقات

Peter Hany

+اقرأ المزيد
تنسيق شكل سحابة التسميات فى مدونتك

تعليقات

Peter Hany

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

تعليقات

Peter Hany

+اقرأ المزيد
حول المشاركات الشائعة فى مدونتك إلى سلايدر شو تلقائى

My Ebd3at Services

تطوير شكل الموقع وجعله ذو مظهر جذاب

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

تصميم شعارات و ايقونات احترافيه

feedbacks

تعليقات Peter Hany +اقرأ المزيد حصريا كود الحصانة الكاملة لمواضيع وتصميم مدونتك

تعليقات Peter Hany +اقرأ المزيد التعامل مع النصوص المتحركة فى بلوجر

تعليقات Peter Hany +اقرأ المزيد المشاركات الشائعة بشكل مميز وحصرى

تعليقات Peter Hany +اقرأ المزيد كيف تجعل أى اضافة معلقة عند التمرير لأسفل فى بلوجر

فوائد جعل بعض الأدوات معلقة

تعليقات Peter Hany +اقرأ المزيد دمج تعليقات الفيس بوك مع تعليقات بلوجر 2014

تعليقات Peter Hany +اقرأ المزيد تركيب تعليقات الفيس بوك على مدونات بلوجر على نظام 2014

تعليقات Peter Hany +اقرأ المزيد اضافة تأثير lightbox على كل صور مدونتك

تعليقات Peter Hany +اقرأ المزيد اضافة زر اطفاء النور أثناء مشاهدة الفيديو على مدونتك

تعليقات Peter Hany +اقرأ المزيد أفضل ترقيم لصفحات بلوجر وبأكثر من شكل احترافى فعال

تعليقات Peter Hany +اقرأ المزيد جميع اختصارات واجهة تحرير قوالب بلوجر الجديدة

تعليقات Peter Hany +اقرأ المزيد تنسيق شكل سحابة التسميات فى مدونتك

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

تعليقات Peter Hany +اقرأ المزيد حول المشاركات الشائعة فى مدونتك إلى سلايدر شو تلقائى

تعليقات

Peter Hany

+اقرأ المزيد
حصريا كود الحصانة الكاملة لمواضيع وتصميم مدونتك

تعليقات

Peter Hany

+اقرأ المزيد
التعامل مع النصوص المتحركة فى بلوجر

تعليقات

Peter Hany

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

تعليقات

Peter Hany

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

تعليقات

Peter Hany

+اقرأ المزيد
دمج تعليقات الفيس بوك مع تعليقات بلوجر 2014

تعليقات

Peter Hany

+اقرأ المزيد
تركيب تعليقات الفيس بوك على مدونات بلوجر على نظام 2014

تعليقات

Peter Hany

+اقرأ المزيد
اضافة تأثير lightbox على كل صور مدونتك

تعليقات

Peter Hany

+اقرأ المزيد
اضافة زر اطفاء النور أثناء مشاهدة الفيديو على مدونتك

تعليقات

Peter Hany

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

تعليقات

Peter Hany

+اقرأ المزيد
جميع اختصارات واجهة تحرير قوالب بلوجر الجديدة

تعليقات

Peter Hany

+اقرأ المزيد
تنسيق شكل سحابة التسميات فى مدونتك

تعليقات

Peter Hany

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

تعليقات

Peter Hany

+اقرأ المزيد
حول المشاركات الشائعة فى مدونتك إلى سلايدر شو تلقائى