اضافة ايموشنز الى التعليقات

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

الطريقة تعتمد على تحويل رموز الايموشنز الشهيرة مثل :( :) وغيرها الى صور تعبر عن تلك التاثيرات , هذه الصور قد تم ضم روابطها الى اكواد المدونة بالفعل , كيف يتم ضم تلك الرابط الى المدونة ؟ اليكم الطريقة :

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


1- ادخل الى صندوق الاكواد متبعا المسار الاتى :
dashboard--> layout- -> Edit HTML لوحة التحكم - التخطيط - تحرير هتمل

2- اضغط على الصندوق الصغير Expand Widget Templates

3- ابحث باستخدام ctrl + f عن

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

3- ضع القطعة التالية بين السطرين السابقين :

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; direction:ltr; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

4- ابحث عن

</head>

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

<script language='javascript' src='http://lu2a.artist.googlepages.com/smiley.js'/>

ملحوظة : الملف مرفوع على الاسبيس google space الخاصة بى والتى من المحتمل ان تحذف قريبا , فى حالة حذف الملف يمكنك تحميله من هنا ورفعه على سيرفر خاص بك

5- احفظ القالب

الان , عند اضافة تعليق سيظهر صندوق التعليقات بهذا الشكل



كل ما عليك - او الزائر - هو اضافة رمز الايموشن ليظهر فى التعليق الصورة المعبره عنه

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

اكتب ايميلك هنا

اليكم الطريقة :

1 : صندوق الاكواد , اتبع المسار الاتى
لوحة التحكم - التخطيط - تحرير هتمل
dashboard > layout > template > edit html

2- ابحث عن

]]></b:skin>

ومباشرة فوق هذا السطر الصق الاكواد الاتية

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

وتحت الكود السابق الصق القطعة الاتية

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

3- احفظ القالب

4- انشأ اداة جديده من نوع هتمل جافاسكريبت HTML/Javascript من صفحة عناصر المدونة , عن طريق الضغط على كلمة : اضافة اداة جديده add a page element

5- الصق فيها الكود الآتى :

<!-- Slideshow HTML -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>Free Domain Name</h2>
<p><a href="http://tinyurl.com/nlqnby"><img alt="Free Domain Name" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJEBAo7jm92_XNs0jYk3UWX9p7urVK-cK-pMtXEZsIg3sCyq4wzSOxJNv6OOzztlG_mGp-HNAIINdJgRVk8IxKe0lzBBFZpvFTcLIo0ad7BOBPi8wYmEk_tNCjoOzbAnGt9c8YBRL8c98/" height="145"/></a>CO.CC has become the world's #1 choice for free domains by providing innovative, competitively-priced products, delivering the highest quality customer service, and by always appreciating and listening to its customers!</p>
</div>

<div class="slide">
<h2>Free Web Hosting</h2>
<p><a href="http://www.000webhost.com/173265.html"><img alt="Free Web Hosting" width="215" src="http://www.000webhost.com/images/banners/120x120/banner1.gif" height="145"/></a>000webhost.com ($0.00 webhost), is an industry leader in providing top class free web hosting services without advertising! There are no hidden costs, no adverts, and no restrictive terms. Lighting fast speeds, maximum reliability and fanatical user support are just a few of the features you'll receive with our service.</p>
</div>

<div class="slide">
<h2>Make Money on Twitter</h2>
<p><a href="http://revtwt.com/index.php?id=18676"><img alt="Make Money on Twitter" width="215" src="http://revtwt.com/images/TwtAd_referral02.jpg" height="145"/></a>You enjoy tweeting with your friends, but wouldn't it be great to make a little extra cash on the side while you post on Twitter? RevTwt has the solution: we give you links to post on your Twitter account, and you earn money each time someone clicks on your link!</p>
</div>

<div class="slide">
<h2>Monitize Your Blog</h2>
<p><a href="http://www.bidvertiser.com/bdv/bidvertiser/bdv_ref.dbm?Ref_Option=pub&Ref_PID=232687"><img alt="Monitize Your Blog" width="215" src="http://www.bidvertiser.com/BidVertiser/images/Referral/p/ref_125x125_yellow_pbl.gif" height="145"/></a>
Pay per click advertising - online advertising directly on sites of your choice, internet marketing solution for online advertisers.</p>
</div>

<div class="slide">
<h2>Upload And Earn</h2>
<p><a href="http://www.ziddu.com/register.php?referralid=%28y%5DtNG;Z%7EQ%7C"><img alt="Upload And Earn" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6H6ivT0ZzGtHOVaPruyfvxoHjnGFrCEO4w9Rp1fxfKx4OzTLkJg0b-4iQFnTTayjMQzsqnYtW2g03cTkdkJLXPi-7iohP_Wx5t0AW5NCJzGIEEQDwAjnQ_hqzJTClhQs9hLSDi2VXH8/" height="145"/></a>Ziddu is a complete Free file hosting system which offers services like Free Web Hosting, Image hosting & Free Web Space. Ziddu users can play,watch,share ...
</p>
</div>

</div>
</div></div>
<!-- Slideshow HTML -->

اخيرا : احفظ , وتاكد من النتيجة

اكتب ايميلك هنا

قطعة عرض شرائح

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

بعد الانتهاء من تركيب القطعه ستصبح بهذا الشكل



اليكم الطريقة :

1 : صندوق الاكواد , اتبع المسار الاتى
لوحة التحكم - التخطيط - تحرير هتمل
dashboard > layout > template > edit html

2- ابحث عن

]]></b:skin>

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

/* slideshow */
.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}
#box2{
position:absolute;
}
#box2 span{
display:block;
float:left;
}
.buttons{text-align:center;padding:5px;}
.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}

.mask2{
position:relative;
width:240px;
height:180px;
overflow:hidden;
}

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

<script type='text/javascript'>
//<![CDATA[
var noobSlide=new Class({initialize:function(a){this.items=a.items;this.mode=a.mode||'horizontal';this.modes={horizontal:['left','width'],vertical:['top','height']};this.size=a.size||240;this.box=a.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');this.button_event=a.button_event||'click';this.handle_event=a.handle_event||'click';this.onWalk=a.onWalk||null;this.currentIndex=null;this.previousIndex=null;this.nextIndex=null;this.interval=a.interval||5000;this.autoPlay=a.autoPlay||false;this._play=null;this.handles=a.handles||null;if(this.handles){this.addHandleButtons(this.handles)}this.buttons={previous:[],next:[],play:[],playback:[],stop:[]};if(a.addButtons){for(var b in a.addButtons){this.addActionButtons(b,$type(a.addButtons[b])=='array'?a.addButtons[b]:[a.addButtons[b]])}}this.fx=new Fx.Tween(this.box,$extend((a.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));this.walk((a.startItem||0),true,true)},addHandleButtons:function(a){for(var i=0;i<a.length;i++){a[i].addEvent(this.handle_event,this.walk.bind(this,[i,true]))}},addActionButtons:function(a,b){for(var i=0;i<b.length;i++){switch(a){case'previous':b[i].addEvent(this.button_event,this.previous.bind(this,[true]));break;case'next':b[i].addEvent(this.button_event,this.next.bind(this,[true]));break;case'play':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'next',false]));break;case'playback':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false]));break;case'stop':b[i].addEvent(this.button_event,this.stop.bind(this));break}this.buttons[a].push(b[i])}},previous:function(a){this.walk((this.currentIndex>0?this.currentIndex-1:this.items.length-1),a)},next:function(a){this.walk((this.currentIndex<this.items.length-1?this.currentIndex+1:0),a)},play:function(a,b,c){this.stop();if(!c){this[b](false)}this._play=this[b].periodical(a,this,[false])},stop:function(){$clear(this._play)},walk:function(a,b,c){if(a!=this.currentIndex){this.currentIndex=a;this.previousIndex=this.currentIndex+(this.currentIndex>0?-1:this.items.length-1);this.nextIndex=this.currentIndex+(this.currentIndex<this.items.length-1?1:1-this.items.length);if(b){this.stop()}if(c){this.fx.cancel().set((this.size*-this.currentIndex)+'px')}else{this.fx.start(this.size*-this.currentIndex)}if(b&&this.autoPlay){this.play(this.interval,'next',true)}if(this.onWalk){this.onWalk((this.items[this.currentIndex]||null),(this.handles&&this.handles[this.currentIndex]?this.handles[this.currentIndex]:null))}}}});

//]]>
</script>
<script type='text/javascript'>
window.addEvent('domready',function(){


//SAMPLE 2 (transition: Bounce.easeOut)
var nS2 = new noobSlide({
box: $('box2'),
items: [0,1,2,3,4,5,6.7],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $('prev1'),
next: $('next1')
}
});


});
</script>

3- احفظ القالب

4- انشأ اداة جديده من نوع هتمل جافاسكريبت HTML/Javascript من صفحة عناصر المدونة , عن طريق الضغط على كلمة : اضافة اداة جديده add a page element

5- الصق فيها الكود الآتى :

<h2>SlideShow</h2>
<div class="sample">
<div class="mask2">
<div id="box2">
<span><img alt="Photo" src="الرابط الاول"/></span>
<span><img alt="Photo" src="الرابط الثانى"/></span>
<span><img alt="Photo" src="الرابط الثالث"/></span>
<span><img alt="Photo" src="الرابط الرابع"/></span>
<span><img alt="Photo" src="الرابط الخامس"/></span>
<span><img alt="Photo" src="الرابط السادس"/></span>
<span><img alt="Photo" src="الرابط السابع"/></span>
<span><img alt="Photo" src="الرابط الثامن"/></span>
</div>
</div>
<p class="buttons">
<span id="prev1"><< Previous</span>
<span id="next1">Next >></span>
</p>
</div>

استبدل الكلمات المكتوبة باللغة العربية بين علامتى التنصيص بروابط الصور التى تم رفعها من قبل .

اخيرا : احفظ , وتاكد من النتيجة

اكتب ايميلك هنا

خلفيات متغيرة

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

فى هذا الموضوع ستتعلم كيفية وضع خلفيات متعددة " صور " للمدونة , ومع كل "تحديث refresh " للصفحة تتغير تلك الصورة بصورة اخرى , لذلك يجب عليك انشاء تلك الصور ثم رفعها على موقع رفع صور مثلا imageshack مثلا , وبعد الانتهاء من كل هذا , نفذ الخطوات التالية :

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

1- انشاء قطعة جديدة من نوع هتمل جافا سكريب html/java script من صفحة العناصر
ثم الصق بها هذا الكود :

<script type="text/javascript">
var banner= new Array()
banner[0]="الرابط الاول"
banner[1]="الرابط الثانى"
banner[2]="الرابط الثالث"
banner[3]="الرابط الرابع"
banner[4]="الرابط الخامس"
banner[5]="الرابط السادس"
banner[6]="الرابط السابع"
banner[7]="الرابط الثامن"
banner[8]="الرابط التاسع"
banner[9]="الرابط العاشر"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

هذا الجافا سكريبت يعمل على تغيير الـ background للـ body بشكل تلقائى , اتبع الخطوات الاتية :

- ضع روابط الصور مكان الجمل باللغة العربية بين علامات التنصيص بالتريب , لا تحذف علامات التنصيص

- لاحظ الكلمات الملونة لها اهمية فقط فى تموضع الصورة داخل منطقة الراس , وليس لها علاقة بمسالة تغيير الصورة :
- no-repeat معناها ان الصورة لن تتكرر افقيا او راسيا , ليس للامر علاقة بالتكرار بين الصور وبعضها .
- top تعنى ان الصورة ستتموضع فى الجانب العلوى من منطقة الراس
- left تعنى ان الصورة ستتموضع فى الجانب الايسر من منطقة الراس

يمكنك تعديل تلك القيم اذا كانت هناك ضرورة , مثلا ممكن ان تضع center center بدلا من top left اذا كنت تريد للصورة ان تتموضع فى وسط المدونة , ويمنك ايضا ان تجعلها repeat-x او repeat-y بدلا من no-repeat كى تتكرر الصورة افقيا x او راسيا y , اما لو اردتها ان تكرر افقيا وراسيا معا فيجب حذف no-repeat وعدم وضع شئ مكانها , والمتصفح سيكررها بشكل افتراضى .

- الرقم 10 باللون البنفسجى يدل على عدد الصور , اذا كان لديك عدد صور اقل او اكثر , احذف الروابط بالاعلى او كررها , ثم غير الرقم 10 بالرقم المناسب


2- بعد لصق الكود فى القطعة , احفظ وجرب :)

اكتب ايميلك هنا

صورة مربوطة بلينك

مثال علطول فى العضل عشان مرغيش كتير

<a href="ضع هنا الرابط المستهدف بين علامتى التنصيص" target="_blank"><img src=" ضع هنا رابط الصورة بين علامتى التنصيص" border="0" width="150" height="250" alt="ضع وصف الصورة هنا"></a>

الشرح

- ضع لينك الصفحة المطلوب الوصول اليها بين علامتى التنصيص بعد كلمة href=
- ضع لينك الصورة بين علامتى التنصيص بعد كلمة src التى هى اختصار لكلمة source
- يمكنك ان تصنع برواز للصورة عن طريق تغيير القيمة صفر
- يمكن تغيير مقاسات الصورة ( الطول والعرض ) عن طريق تغيير القيمتين 150 و 250 وهما هنا كمثال مش اكتر
- لو مش عايز تزعج نفسك بالمقاس شيل الاكواد المعبره عن المقاس وريح الجمجمة ولو عايز تعرف مقاس اى صورة بشكل سريع اضغط عليها كليكه يمين ودوس properties هايظهرلك مقاسها ضمن الـ informations
- ضع وصف الصورة الذى سيظهر عند المرور عليها بالؤشر , وهى مهمة لضم الصورة لمحكات البحث عن الصور .
- يمكنك بهذه الطريقة ان تصنع صورة تعبر عن مدونتك وتربطها بلينك المدونة وتضعها فى الاطار الجانبى عن طريق وضعها كاداة ( element ) فى صفحة الادوات (Page Elements) الخاصة بمدونتك , او ممكن تحطها فى اى تدوينة كرابط لاى صفحة , ليها استخدامات كتير فى الحقيقة .

---------------------

مثال عملى :

عند وضع هذا الكود كمثال :

<a href="http://www.blogger-lu2a.blogspot.com/" target="_blank"><img height="32" alt="مدونة وائل" src="http://dr.wael4health.googlepages.com/blog-icon.gif" width="200" border="2" /></a>

سيكون الناتج بهذا الشكل :

انتهى .

اكتب ايميلك هنا