‏إظهار الرسائل ذات التسميات أدوات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات أدوات بلوجر. إظهار كافة الرسائل
اضافة فهرس لمدونات بلوجر blogger

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

مزايــا اضافــة فهــــرس المدونــــة 

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

طريقــة اضافــة الفهــرس الــى المدونــة 
1- من لوحة تحكم المدونة نقوم بانشاء صفحة او رسالة (مشاركة) جديدة ثم ننتقل الى قسم HTML للرسالة او الصفحة ونقوم بلصق الكود التـــــالــــــــــــــــــــــــــــي :

<div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="text-align: right;" trbidi="on"><div style="text-align: right;"><script src="http://sites.google.com/site/javacodehtml/IndexWithLabels.js"></script></div><div style="text-align: right;"><script src="http://blogger-storm.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script></div><div style="text-align: right;"><script type="text/javascript">var accToc=true;</script></div></div><br /></div>

2- قم بتغيير الرابط الملون باللون اللحمر برابط مدونتك
3- انشر الرسالة او الصفحة لترى الفهرس بشكل منظم ومرتب.
» تابع القراءة

طريقة سهلة جدا لإضافة سلايد شو Slideshow الى مدونات بلوجر

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

كيفية اضافة الأداة ؟
  • من لوحة التحكم للمدونة نختار التخطيط ثم نختار اضافة أداة ثم نختار اداة HtmlJavaScript
  • نقوم بلصق الكود التالي
<style type="text/css">

 /* JavaScript Image Slider By http://mdonti-n.blogspot.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 468px;
 margin: 0 auto;
        border:3px solid #E1E0E2;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 right: -4px;
}

#slider {
 width: 468px;
 height: 260px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_5TuS3fuu2Oow2-oaG9p19UoAzfJQMJ0qxgS0HICpwSDrEgTc-LEQCZSVvmmOJQq3eq_LlvD2qDd6UHWl5mc10TrCqJU1Bj3SR9TF6_iJqrRDPCiKhpOSI-BMYKNj5h1StqflMQsBQ/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px 010007;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 right: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 right: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}


div.mc-caption-bg {
 background-color: #0066CC;
}

div.mc-caption {
 font: bold 25px/21px traditional arabic ;
 color:  #0000;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 right: 190px;
 width: 150px;
 background: none;
 padding-right: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxQSsLvENML9w0Ns56823WtTdshy2RmVDYPMuHXlI_4llcVqv426NyltndjKUttK8wU0DPUFMsJZBZqmX6RWjMqHeHPQuVs2Q8S3b8LTgelgs5DQ-0Ngcn21_wjqsopBL5eL7g0yk6wQ/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;
 float: right;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-left: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp"alt=" ttttt"/></a>
                </div></div>
قبل حفظ الأداة نقوم باضافة المواضيع التي نود ظهورها على السلايد شو كمايلي :

  • نضع مكان الرمز xxxxx رابط الموضوع (الرابط الإلكتروني للموضوع )
  • نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)
  • نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )
  • ثم نقوم بحفظ الإضافة 
تعديل الإضافة بما يتناسب مع مدونتك 
1- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>


اي نقوم بنسخها ولصقها الواحدة تلو الأخرى حسب عدد المواضيع التي نريد عرضها على السلايد شو (Slideshow ).

2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :



#slider {
 width: 468px;
 height: 260px;



لتغيير عرض الأداة width 
لتغيير ارتفاع الأداة height

3- تغيير لون السلايدشو الصغيرة (التي يتم بها عرض عنوان الموضوع ) نبحث عن الكود التالي :



 background-color: #0066CC;


ونقوم بتغيير الرمز 0066cc (للحصول على الألوان بصيغة html انتقل للصفحة التالية )

4- تغيير حجم ولون خط عنوان الموضوع (عناوين  المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي :


 font: bold 25px/21px traditional arabic ;


الرمز traditional arabic لإستبدال نوع الخط 

الرمز   25px حجم الخط .

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

تغيير مؤشر زر الماوس على البلوجر

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



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

أولا :  من لوحة التحكم نختار التخطيط أو تصميم في بعض المدونات ثم نختار تحرير html ونقوم كالمعتاد بحفظ نسخة من القالب ثم نقوم بتوسيع القالب بالضغط على  


<br /> ]]></b:skin>

نقوم مباشرة بلصق الكود التالي قبل الكود السابق :

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}<br /> 


ونقوم بحفظ القالب ومعاينة المدونة لنلاحظ تغير مؤشر زر الماوس بالمدونة التي قمنا باضافة الكود لها فقط.

يمكننا تغيير الأيقونة المتحركة والتي هي عبارة عن صورة من نوع gif من خلال الرابط التالي :

http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif

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


. Totally Free Cursors :

. http://cursors.funutilities.com/ : 

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

» تابع القراءة