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

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

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

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

معاينة

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

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>

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

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

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