+ + + + +
Share/Save/Bookmark

2009-08-31

شريط اخبارى خاص بمدونتك





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

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

الخطوات :

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

اختر نوع هتمل/جافا سكريبت HTML/JavaScript

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


<script style="text/javascript" src="http://dreamydonkey.googlepages.com/scrolling_blogger_posts.js"> </script><script style="text/javascript"> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>

استبدل كلمة YOURBLOG باللون الاحمر , باسم مدونتك

فى النهاية احفظ , وشاهد النتيجة


ومتنساش تشترك فى المواضيع عشان يوصلك احدث الدروس من هنا



الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

2009-08-25

تأثير : اداة الاشارة tooltip للروابط





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

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

2- ابحث عن

]]></b:skin>

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


#easyTooltip{
padding:5px 10px;
border:1px solid #EF6D21;
background: #181C18;
color:#E0EFE0;
}




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


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

<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->



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


4- الان عندما تضيف رابط "لينك" فى البوست ( يجب ان تنتقل الى وضع تحرير عتمل وليس وضع انشاء اثناء كتابة البوست ) يجب ان يكون الرابط بهذا الشكل


<a class='tooltip' title='Your Link Title' href="Your URL">Link Name</a>







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




الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

تأثيرات الـ JQuery المذهلة





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

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

2- ابحث عن

]]></b:skin>

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


ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEo1TKrc_3ownrhSiuztIXehU4K2-Dw99lCmY3pHQQ2hi6z86ASRndlt8SlEYPYeFYpH3RA-pMv2whPVw4DrfZ6bdZ2Tx70pRHnGX5Wo64CJovouwS8uWJ4341AJyRHVmhHjqvIU9-dEuI/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}




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


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);

} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});

//Swap Image on Click
$("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});

});
</script>



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

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

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


<ul class="thumb">
<li><a href="#"><img src="picture1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture4 Link" alt="" /></a></li>
<li><a href="#"><img src="picture5 Link" alt="" /></a></li>
</ul>



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




الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا





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

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>


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

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




الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

2009-08-23

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




ما رايك لو مع كل ضغطة 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- بعد لصق الكود فى القطعة , احفظ وجرب :)





الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

2009-08-19

Wibiya شريط أدوات



شريط أدوات جميل جدا من موقع www.wibiya.com بالظبط كالذى تراه هنا بالاسفل

1- ادخل الموقع www.wibiya.com
2- اضغط على get it now

اضغط على الصورة للتكبير

اضغط على الصورة للتكبير
3- ضع اسمك وايميلك ورابط المدونة او الموقع , وانتظر حتى يرسلوا لك رسالة التفعيل , ربما تاخذ الموافقة وقتا .

اضغط على الصورة للتكبير

اضغط على الصورة للتكبير

4- بعد ارسال رسالة التفعيل اليك , ادخل الموقع عن طريق رابط التفعيل واتبع الاتى :

اضغط على الصورة للتكبير

اضغط على الصورة للتكبير

5- اختر لون التوولبار ( شريط الادوات )

اضغط على الصورة للتكبير

اضغط على الصورة للتكبير

6-اختر الادوات التى تريد ان تظهر فى شريط الأدوات , لاحظ ان بعض الادوات ستحتاج الى تخصيصات معينة فى الصفحة التالية :

اضغط على الصورة للتكبير

اضغط على الصورة للتكبير

7- خصائص كل اداة على حدة , يجب عليك ملأها

اضغط على الصورة للتكبير

اضغط على الصورة للتكبير

بعد الانتهاء اضغط على next

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





الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

2009-08-15

منع الكليكة اليمين





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

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



<script language='JavaScript'>
<!--

var message="No Right-Click!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>





بعد اللصق , احفظ وجرب بنفسك :)



اعتقد ان الإختراع القادم هايكون صاقع كهربائى , لان صعب جدا نمنع الكليكة الشمال , مش كده ولا ايه



الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

2009-08-12

حول من الووردبريس وتعالى للبلوجر



الكثير منا "عالق" بمدونته ولا يستطيع أن يتحرر منها بسهولة وينشئ مدونة جديده وعالما جديدا فى أى مكان اخر , قديما لم يكن الامر بالسهولة الكافية لكى تهجر احدى مواقع الخدمات التدوينية كـ " الووربريس " مثلا وتستقر فى عالم البلوجر او العكس , فقد اعتدت على نظام التحكم فى المدونة واعتدت ايضا على تصميمها وشكلها واصبحت تعرف كل ركن من اركانها , فضلا عن أن عمليه نقل رابط المدونة الذى يعرفه جميع زائريك الى رابط جديد هى عملية شاقة أشبه باشتبدال شريحة الموبايل من فودافون لاتصالات مثلا .
على أى حال وللتسهيل من تلك العملية , ولمن كان منكم تواقا للسفر والرحلات وأراد الهجرة من الووردبريس الينا , الى عالم البلوجر , هناك اداة تستطيع من خلالها تحويل تدويناتك من المواقع التدوينية الخدمية الشهيرة الى بلوجر , ولان مستخدمى مدونات الووردبريس العرب كثيرين جدا احببت ان أغريهم بتلك الخدمة حتى يستطيع من يعانى منهم من صعوبة نظام التحكم فى الووردبريس او مل من استخدامه ويريد تجربة البلوجر . ولكن بدون اى دواعى للفتنة التدوينية , حسنا ؟
اولا احب ان اتحدث عن اهم الخصائص التتى تميز بها البلوجر عن الووردبريس :
1- تستطيع ان تغير التصميم بكل سهولة من الالف الى الياء , بعكس الوردبريس المجانى , اما المدفوع فيمكنك التعديل على التصميم .

2- يمكنك فى البلوجر ضم الـ third party tracker scripts لا اعلم ما ترجمتها العربية , لكنها صيحة كبيرة يمكنك من خلالها الوصول الى تصميم احترافى .

- مقارنة بين القطع widgets المتاحة فى بلوجرر ووردبريس :

البلوجر :

Add a Gadget | Followers | Blog List | Subscription Links feed readers. | Slideshow | Newsreel | Video Bar | List | Link List | Picture | Text | HTML/JavaScript | AdSense | Feed | Labels [categories] | Logo | Profile | Page Header | Blog Archive | Poll

الووردبريس :

Akismet | Archives | Blog Stats | Box.net file sharing | Calendar | Categories | del.icio.us | Flickr | Links | Meebo | Meta | Pages | Platial MapKit | Recent Comments | Recent Posts | RSS | Search | Sonific Songspot | Tag Cloud | Text | Top Clicks | Top Posts | Vod:Pod Videos | Twitter | Gravatar

- حجم تخزين الصور والفيديو فى البلوجر 1 جيجا , بينما حجم تخزين الصور ( لا اعلم هل فيه امكانية فيديو ولا لا فى الخدمة المجانية ) 3 جيجا .

- ميزة جيدة فى ووردبريس ان التعديل على اسماء روابط التدوينات متاح , بالاضافة الى ما يعرف بـ Static pages وهو غير متاح فى البلوجر .


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


خطوات التحويل :

هاتدخل الووردبريس وتتبع الاتى :



الخطوة التالية :



ثم :



بعد حفظ الملف على الجهاز , اذهب للصفحة الاتية تستطيع من خلالها التحويل من هيئة الووردبريس الى هيئة البلوجر



ثم تقفز الى البلوجر , وتنشئ مدونة جديده , وتتبع الاتى :

setting > import blog
الاعدادات > استيراد مدونة



أخيرا وفى الصفحة التالية :



هكذا وبدون أى خسائر سوى تغيير الرابط , أهلا بيك فى البلوجر :)




الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

2009-08-11

اجمل قوالب 2008








عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل






عرض | تحميل




عرض | تحميل




تحميل





عرض | تحميل





عرض | تحميل





عرض | تحميل





تحميل





عرض | تحميل





تحميل


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


بداية لابد منها الجزء 4

مدونة القوالب





الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا