قائمة أفقية ثابتة لمدونات بلوجر

قائمة أفقية ثابتة لمدونات بلوجر

السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة ويحتاجها الكثيرة منا ونرى انها مستعملة  في أشهر المواقع الإجتماعية ، إنها قائمة افقية ثابتة اي تتبعك وانت تتصفح المدونة اذا نزلت تنزل معك واذا صَعِدْتَ صَعَدَتْ معك، أقدم لكم صورة الأداة بعد ان قمت بتعريبها و تطويرها:

- كما نلاحظ ان القائمة تحتوي على سهم يقوم بإصعادنا الى الاعلى واخر اتجاهه الى الأسفل يقوم بإنزالنا وبعدها نرى 5 ازرار يمككنا وضع روابطنا فيها ويمكننا زيادة العدد او العكس، ايضا نرى مربع بحث في الاضافة الأصل الغير المعربة مربع البحث لا يعمل وانا جعلته يعمل وبشكل جيد كما ينبغي,عندما ننزل القائمة تصبح شفافة نوعا ما وعندما نضع المؤشر عليها تصبح عادية كما كانت في السابق


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

الخطوات: 

أولا سنقوم بأخذ بعض الإحتياطات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F ونبحث عن :

</head>

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

link href='https://abuiyad.googlecode.com/svn/Ayoub-Etmaiti-menu-fixed-abu-i.css' rel='stylesheet'/>

<script src='http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js' type='text/javascript'/>

 <script type='text/javascript'>

            $(function() {

                $(window).scroll(function(){

                    var scrollTop = $(window).scrollTop();

                    if(scrollTop != 0)

                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);

                    else   

                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);

                });

               

                $(&#39;#nav&#39;).hover(

                    function (e) {

                        var scrollTop = $(window).scrollTop();

                        if(scrollTop != 0){

                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);

                        }

                    },

                    function (e) {

                        var scrollTop = $(window).scrollTop();

                        if(scrollTop != 0){

                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);

                        }

                    }

                );

            });

        </script>

وبعد هذا سنقوم بالبحث عن هذا الكود :

</body>

 ثم قم بلصق الكود التالي قبله، مع تعديل ما يناسب مدونتك :

<div id='nav'>

<ul>

<li><a class='top' href='#'><span/></a></li>

<li><a class='bottom' href='#bottom'><span/></a></li>

<li><a href='الرابط-1'><span>عنوان الرابط 1</span></a></li>

<li><a href='الرابط-2'><span>عنوان الرابط 2</span></a></li>

<li><a href='الرابط-3'><span>عنوان الرابط 3</span></a></li>

<li><a href='الرابط-4'><span>عنوان الرابط 4</span></a></li>

<li><a href='الرابط-5'><span>عنوان الرابط 5</span></a></li>

<li class='search1'>

<form action='/search' id='search1' method='get'>

        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;ابحث في المدونة...&quot;;}' onfocus='if (this.value == &quot;ابحث في المدونة...&quot;) {this.value = &quot;&quot;}' type='text' value='ابحث في المدونة...'/>

        <input id='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizs_kXNuOUKHCLSjZI-EKFeKMyivEdIadQ2VKTQHpId370mAd7_eAu3WI_etnmQaJddMik4JVnNAe7b8jE5Fv5MoJ49UCZlvwkO1yJPkVqInyzwWybuxdiMmTk8xfZXWQENMjOl4IE3iGn/s1600/search-ico-Blogger-Idafat.png' type='image'/>

    </form>

   

</li>

</ul>

</div> 

<div id='top'/>

<div class='desc'/>

<div id='bottom'/>

<div class='scroll'/>

نقوم بتغير الكلمات :
الرابط-1 ، 2 ، 3 ، 4  و  5   بروابطنا التي نريد ان يتم التوجيه اليها بعد الظغط على الزر ، ونغير العناوين : عنوان الرابط 1
، 2 ، 3 ، 4 و 5  بالكلمة التي ستظهر على زر

وأخيرا قم بحفظ القالب ،أتمنى أن تنال هذه الإضافة إعجابكم.

أزرار التنقل عائمة لصفحات بلوجر

أزرار التنقل عائمة لصفحات بلوجر

السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة تحتوي على الازرار التالية : زر مشاركات اقدم ، زر مشركات احدث ، زر مقالة عشوائية {يقوم باختيار مقالة من عنده} ، زر العودة الى الرئيسية واخيرا زر الصعود الى الأعلى..

صورة لهذه الإضافة على مدونتي التجريبية:

- كما نلاحظ أن هذه الإضافة لا تأخذ مكان كبيرة في المدونة وهي ذات شكل جميل ومفيدة ايضا.


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

الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :

</head>

لتركيب الإضافة على الجهة اليسرى :

<link href=' https://abuiyad.googlecode.com/svn/navigation-Ayoub-Etmaiti.css ' rel='stylesheet'/>

لتركيب الإضافة على الجهة اليمنى :

<link href='https://abuiyad.googlecode.com/svn/navigation-right-Ayoub-Etmaiti.css' rel='stylesheet'/>

وبعد هذا سنقوم بالبحث عن هذا الكود :

<b:includable id='main' var='top'>

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

<div id='float-menu'>
<ul>
<li id='menu-right'>
<b:if cond='data:olderPageUrl'>
<b:if cond='data:olderPageUrl != data:blog.url'>
<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-left'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:newerPageUrl != data:blog.url'>
<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-random'>
<script type='text/javaScript'>//<![CDATA[
var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
//]]></script>
<script type='text/javaScript'>//<![CDATA[
function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="مقالة عشوائية" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
//]]></script>
</li>
<li id='menu-home'>
<a expr:href='data:blog.homepageUrl' title='الرئيسية'/>
</li>
<li id='menu-top'>
<a href='#' title='إلى الأعلى' rel="nofollow"/>
</li>
</ul>
</div>

وأخيرا قم بحفظ القالب ،أتمنى أن تنال هذه الإضافة إعجابكم.

قائمة مسندلة لوضع الفيديوهات على بلوجر

قائمة مسندلة لوضع الفيديوهات على بلوجر

مرحبا اليوم سأقدم لكم  إضافة جميلة جدا لم تستعمل من قبل في المدونات العربية وهي إضافة الفديوها في قائمة مسندلة بحيث لا تحجز حيز من مساحة الموضوع أو المقالة فيمكنك عرض 50 فيديو أو أكثر في قائمة مسندلة واحدة  لا يتجاوز إرتفاعها 10 px وعند الضغط عليها تظهر لك عناوين الفيديوهات فبضغطك على أي عنوان سيظهر الفيديو المقصود ، الأدات هذه لا تعمل بشكل أتوماتيكي يجب عليك وضع العناوين و الروابط بنفسك والأداة مصممة بإستخدام الجافا سكريبت ;) والجميل أنني قمت بتحسين الأداة لتستطيع وضعها على جوانب المدونة أيضا بحيث أن حجمه يتناسب بشكل تلقائي بالمكان الذي تضعها فيه.

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

<!--by-Blogger Idafat- slide bar youtube -->   
<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == "")
{
contenedor.innerHTML = "";
}
else
{
var dimensiones = "width='420' height='315' frameborder='0'";
var url = "http://www.youtube.com/embed/" + idYouTube;
contenedor.innerHTML = "<iframe " + dimensiones + " src='"+ url +"'></iframe>";
}
}
</script>
<div style="margin:20px 0px;">
<select id="sVideos" onchange="MostrarVideo(this.value);">
<option value="" selected="selected">[إختر الفيديو المراد عرضه...]</option>
<option value="BlggrIdaft6579">عنوان الفيديو</option>
<option value="BlggrIdaft6579">-عنوان الفيديو-</option>
</select>
</div>
<div id="divInnerVideo"></div>
<!--by-Blogger Idafat- slide bar youtube -->

1-قم بتغيير عنوان الفيديو الذي سيظهر به في القائمة المنسدلة وذلك بتغيير العبارة "عنوان الفيديو"
2-قم بتغيير القيمة  BlggrIdaft6579 في الكود بالقيمة التي سوف تجدها برابط الفيديو ،مثلا لو كان رابط الفيديو على هذا الشكل :
http://www.youtube.com/watch?v=BlggrIdaft6579  ,سوف تستبدلها بالقيمة الموجودة في آخر الرابط ،اي ما لون باللون البرتقالي
3-الجملة " إختر الفيديو المراد عرضه" هي عنوان القائمة المنسدلة ويمكنك تغييره بأي جملة أخرى تريد

وأخيرا قم بحفظ القالب، أتمنى أن تنال هذه الإضافة إعجابكم.

أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة

أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة

السلام عليكم ورحمة الله ، أخوكم أيوب من جديد اليوم أقدم لكم إضافة جميلة وهي أزرار تابعني على يوتوب ، فيسبوك،تويتر والخلاصة والإضافة تتميز بأزرار أو ايقونات أنيقة وواضحة بحدود دائرية جميلة وعند الإتجاه اليها بمؤشر الفأرة تصبح الحدود مربعة شاهد الصورة :

- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.



الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :

]]></b:skin>

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

/*sus code by Blogger Idafat */
 .Azrar-Blogger-Idafat {
border-radius: 50%; /* الحدود الدائرية  */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.Blogger-Idafat:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.Blogger-Idafat-center {
        text-align: center /*لتوسيط الأزرار  */
}
 /*sus code by Blogger Idafat */

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


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<div class="Blogger-Idafat-center">
<a href="رابط الفيسبوك هنا" target="_blank" title="¡فيسبوك!"><img class="Azrar-Blogger-Idafat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBTB9oXvnqZLTRNBGZ18by7-jt38icPtS4SvonYCt5_SijnQ_j5b8SmOOULsQf84xdX_c7tIitlEMz2_yw7BlMDfEwVawYft_iqUNmyURuxgJmHjGIzNqWxx06hLriX_vH2yaEPwWVkxr/s1600/sus-Blogger-Idafat-facebook.png" /></a>
<a href="رابط تويتر هنا" target="_blank" title="¡تويتر!"><img class="Azrar-Blogger-Idafat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzp05_bgOQAorW_-zqOCedcC_9wj4pyxMG0EchJxcaZMO0qn-rMN8_NFxwrEh2rWzIdlBx716ojYswQ0428zoU9mPJv5Moqy1WhoWX-1o3lJfpwQ6ffXa7pUM2zRp5DPIfqy-Nd6zC3b54/s1600/sus-Blogger-Idafat-twitter.png" /></a>
<a href="رابط يوتوب هنا" target="_blank" title="¡يوتوب!"><img class="Azrar-Blogger-Idafat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFkvMUVAEkZ3jVYdqTnBZxse6_UtYd0rKpe0y14xdo0uII7FLNyE6A4d5bHDq5rCyOVmuOjqqATbVxIRpCFRoE5Ne0JFto5rJwyGWqhW4rxqAuPUZro07RQJoK1yUgl8MGSXmD9nc2ibd/s1600/sus-Blogger-Idafat-youtube.png" /></a>
<a href="رابط الخلاصة هنا" target="_blank" title="¡الخلاصة!"><img class="Azrar-Blogger-Idafat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfoFjILkPeqsPCB5HVDUTwTG_-e-6VXdYYy3L3X6A6qzYJJee9Y9kdiul13QXWaIOzMzvWet9SDfrTVJSvtikYJK2Su0VU5co8hMbzgYwDt9eGGd8p8FbkDt5oGZOUUQAUBOeNfKQPAQId/s1600/sus-Blogger-Idafat-rss.png" /></a>
</div>

وأخيرا قم بحفظ الأداة ،أتمنى أن تنال هذه الإضافة إعجابكم.

روابط الخلاصات RSS لمدونات بلوجر وجميع المواقع

روابط الخلاصات RSS لمدونات بلوجر وجميع المواقع

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

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

http://idafat.blogspot.com/feeds/posts/default
  http://idafat.blogspot.com/feeds/posts/default?alt=rss

 حيث يمثل الرابط الأول خلاصات Atom والرابط الثاني خلاصات RSS
ولعرض المواضيع على شكل تدوينات مختصرة ،ماعليك سوى إضافة المتغير Summary حيث يصبح الرابط على هذا الشكل.

http://idafat.blogspot.com/feeds/posts/summary

ولعرض التدوينات كاملة ،نستعمل المتغير Full ليصبح على هذا الشكل .

http://idafat.blogspot.com/feeds/posts/Full

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

http://idafat.blogspot.com/feeds/posts/default/-/name widget
  http://idafat.blogspot.com/feeds/posts/default?alt=rss/-/name widget

 مع تغيير ما لون بالأحمر بإسم القسم أو التسمية ومالون باللون الأزرق برابط مدونتك,

خلاصات التعليقات :

هذه الروابط مسؤولة عن إظهار آخر التعليقات المدونة وهي تكون على هذا الشكل.

http://idafat.blogspot.com/feeds/comments/default
http://idafat.blogspot.com/feeds/comments/default?alt=rss

 مع تغييرمالون بالأحمر برابط مدونتك.

خلاصات التعليقات لموضوع محدد.

http://idafat.blogspot.com/feeds/postID/comments/default
  http://idafat.blogspot.com/feeds/postID/comments/default?alt=rss

 

مع تغيير ما لون بالأحمربرابط مدونتك ومالون باللون الأزرق برقم تعريف التدوينة.
 تستعمل هذه الروابط لعرض التعليقات تخص موضوع معين من المدونة وذلك بتحديد رقم تعريف التدوينة ،وللحصول على هذا الرقم نتوجه إلى تحرير الرسائل ثم نختار أحد التدوينات وذلك بالضغط على تحرير،ثم نقوم بنسخ رقم التعريف من رابط المتصفح والذي يكون على هذا الشكل . postID=2396888762601458875


وأخيرا أتمنى أن تنال هذه الإضافة إعجابكم.