مدونة المهندس العربي

‏إظهار الرسائل ذات التسميات اضافات jQuery. إظهار كافة الرسائل

الثلاثاء، 12 فبراير 2013

اضافة صندوق معجبي الفيس بوك بتقنية jquery

بسم الله الرحمن الرحيـم

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

للصفحة الاجتماعية الفيس بوك دورا كبيرا في المساهمة بنشر مدونتك وجلب زوار لها ...

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

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

فرأيت الشكل الجميل والرائع جدا بواسطة الجيكوري .. سترونه في مدونتي وبمجرد مرور الفأرة عليه سينزلق الصندوق بانسيابية

وبدأت بالبحث عن الكود ولم أجد الكود الصحيح

حتى أنقذتني أختي الغالية أسماء [ أم نضال ] وأعطتني كودا صحيحا 100% نقلته من احدى المنتديات الأجنبية

طريـــقة اضافته سهلة جدا ..

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

</head>

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

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

ثم احفظوا التغيرات على القالب وتوجهوا إلى "عناصر الصفحة" وأضيفوا أداة html في أي مكان لا يهم وألصقوا بها الكود التالي

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(

function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http:/www.facebook.com/ar-engineers&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://ar-engineers.blogspot.com/">Way2blogging</a> / <a href="http://ar-engineers.blogspot.com/2012/11/jquery_23.html">+Get This!</a></span></div></div>

وغيروا اسم ar-engineers في الكود باسم صفحاتكم على الفيسبوك

الإضافة لا تشتغل إلا مع الصفحات pages وليست الصفحات الشخصية التي لا يكون بها معجبين بل أصدقاء ..

اذا كان اديكم أي تساؤلات فاتركوا تعليقاتكم هنا

وان أعجبكم هذا الدرس فاضغطوا على Like ليراه أصدقائكم أيضا

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

الشكر الأول والأخير لأختي أسماء

ولاتنسونا من تعليقاتكم لاثراء الاحور

الأربعاء، 23 يناير 2013

اضافة زر الصعود نحو الأعلى

اضافة زر الصعود السلس نحو الأعلى

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

إن أهم ما في هذه الإضافة أنها تظهر بعد عدة سطور أسفل الصفحة وتختفي في كل مرة يصعد الزائر ويقارب سطح المدونة - إن صح التعبير - وكذلك عند الضغط على الزر للصعود ترتفع الصفحة بسلاسة كأنك تستمل المصعد، إنها حقا جديرة بالإضافة !
إذا اقتنعت بإضافتها بعد هذا العرض المفصل والكلمات المغرية ( رائعة، جميلة، مهمة، جيدة...) فاتبع الخطوات الآتية.

تركيب الإضافة :

لوحة التحكم >عناصر الصفحة > إضافة أداة > 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" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.m5tar.blogspot.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
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="رابط الصورة" />', //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:'إصعد إلى الأعلى !'})
.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>

تخصيص الإضافة :

أقترح عليك اختيار أيقونة من بين الأيقوانات التالية :

وبالطبع فاللون الأصلي هو البرتقالي لكن الألوان الأخرى فهي ناتجة عن تعديل الأيقونة الأصلية. فـبـإمكانك الآن اختيار إحدى الأزرار أعلاه أو البحث عن أزرار أخرى وتعديل رابط الصورة بالأيقونة التي أعحبتك !
كما بإمكانك تغيير العنوان إصعد إلى الأعلى ! كيفما تشاء !
أما 100 فهي تشير إلى عدد الأسطر نحو السطح التي تظهر بعدها الإضافة.

إن اصبت فمن الله وإن أخطأت فمني ومن الشيطان .

ساقترح إضافات أخرى لعرضها في المستقبل

وإلى تدوينة أخرى على مدونة المهندس العربي

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

تعالى وبركاته

بالتوفيق

الجمعة، 4 يناير 2013

كيفية اضافة شريط متحرك باخر المواضيع في مدونات بلوجر Blogger

كيفية اضافة شريط متحرك باخر المواضيع في مدونات بلوجر Blogger

بسم الله الرحمن الرحيم

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

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

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

نبدأ بـ كيفية تركيب هذه الاداه عندك

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

قم بالدخول الي لوحة تحكم مدونتك من هنا
ادخل علي تصميم
اضافة أداة
ثم HTML/JavaScript

ثم قم بنسخ الكود التالي

<script type="text/javascript">
    var w2bWidth="100";
    var w2bScrollAmount="7";
    var w2bScrollDelay="50";
    var w2bDirection="right";
    var w2btargetlink="yes";
    var w2bnumPosts="5";
    var w2bBulletchar =">>>";
    var w2bimagebullet="yes";
    var w2bimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHtP7ZnoC_9gZYKOXVwvymKFqIepA1Pr5-wH4HlKpJEyL1Gs3nBw86mL1CB9ltGe0HMlpakni00JE3aQtxwomPGX1NWkbXoKwqSsP92QjF7LmMJyrhmetvBUCgd0cuQn9uh5pBMyrLOsc/s1600/new.gif";
    var w2bfontsize="13";
    var w2bbgcolor="FFFFFF";
    var w2blinkcolor="000000";
    var w2blinkhovercolor="FF0303";
</script>
<script src="http://egymodern.googlecode.com/files/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ar-engineers.blogspot.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10"></script>

أخيرا قم بالحفظ
لا تنسي تغيير الرابط الازرق برابط مدونتك

ملاحظات للتحكم الكامل بالاضافة

var w2bScrollAmount="7"; سرعة الشريط

var w2bScrollDelay="50"; عدد دورات الشريط

var w2bDirection="right"; اتجاة دوران الشريط

var w2btargetlink="yes"; لأظهار الروابط

var w2bnumPosts="5"; عدد المواضيع التي تريد اظهارها

var w2bimagebullet="yes"; اظهار صورة الفاصل

var w2bimgurl="........ new.gif"; رابط صورة الفاصل

var w2bfontsize="13"; حجم الخط

var w2bbgcolor="FFFFFF"; لون الخلفية

var w2blinkcolor="000000"; لون الرابط

var w2blinkhovercolor="FF0303"; لون التأشير على الرابط

اي استفسار أكتب ردا بذلك

المصدر : ايجي مودرن

الأحد، 9 ديسمبر 2012

اضافة مواضيع ذات صلة بشكل متحركة

سنتعلم كيف إضافة مواضيع ذات صلة بشكل متحرك جذاب, مع مصغرات صور تتحرك لليمين واليسار.
الخطوة الاولى:

( ننصح بأخذ نسخة احتياطية من القالب )

ـ انتقل إلى لوحة التحكم => قالب => تحرير HTML (توسيع القالب).

ـ ابحث عن </head> بالإستعانة بـ (CTRL+F) وضع أسفله مباشرة الكود التالي:

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; width:100% min-height:100%; padding-top:5px; padding-right:5px; } #related-posts h2{ background: #FFF!important; font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://balitraveltips.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en'} </script>

الخطوة الثانيه: ابحث عن <data:post.body/>

وضع أسفله مباشرة الكود التالي:

<br/><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:if></b:loop> <h3 style='border-bottom: 3px #5D7D91 solid;padding-bottom:10px!important'><b>ربما تفيد من هذه المواضيع كذلك :</b></h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=10; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div> </b:if>

احفظ القالب ( بعد معاينة سلامة المدونة ) ... هنيئا لك :)

الأربعاء، 21 نوفمبر 2012

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

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

مميزات هذه الاضافة

* التحرك علي جانب المدونة مع متصفح المدونة

* عدم التسبب بإزعاج المتصفح اذ تظهر برغبة الزائر

والان ساترككم مع صورة للمعاينة

شرح الإضافة :

من لوحة تحكم المدونة أذهب إلي قالب ثم تحرير html :

أبحث عن الوسم التالي:

</head>

ألصق فوقه مباشرة الكود التالي :

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

<script src='http://apis.google.com/js/plusone.js' type='text/javascript' >{lang: 'en-US'} </script>

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

و الآن أذهب إلي التخطيط و أختر إضافة أداة html/javascript

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

</script>
<script type="text/javascript">
(function () {
var s = document.createElement('SCRIPT'),
s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

<script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script>
<div class='floatbutton' id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like>
</div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone>
</div>
<div class='floatbutton' id='stumbleupon'>
<script 
src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='floatbutton' id='digg'>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical">Tweet</a>
</div>
<div class="addbuttons">
<a href="http://esrare.blogspot.com/2012/09/jQuery-SHARE.html" 
title="أضغط هنا لتحصل علي الإضافة!"><span 
class="getfloat">إضافة المشاركة الإجتماعية</span></a>
</div>
</div>
</div>
</div>