صندوق التنبيهات أو للإعلان

هذه المدونة بها محتوى تجريبي ’غير مؤرشفة‘ مخصصة لعرض القالب وتجربته فقط، راجع مدونة عربي كاش2

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

,

سلايدر شو رائع JQuery

8 تعليق2:43 م, مرسلة بواسطة jamaa alhiane




سلايدر شو  مدونة عربي كاش2 بتقنية الجو كري مهدا لكم
السلام عليكم إخواني الكرام
متابعي مدونة عربي كاش2 يسرني آن أقدم لكم سلا يدر شو المستخدم في مدونتي المبرمج بلغة الجو كري الرائعة ,يمكنك معاينته مباشرة في مدونتي على هدا الرابط ,بعد أن قمت بمعاينة السلايدر يكفي أن نقول انه جيدا وبسيط وأنيق ,ادا أعجبك سنذهب الى خطوات إضافته إلى مدونتك تابع معي الشرح؟
بدون الحديث عن السلايدر فهي جيدة بالنسبة للدين لديهم مواضيع مميزة في مدونتهم ويريدون أن يشهروها تلك للزوار ليزيد عدد قرأ تلك المواضيع الجيدة و بهدا تكسب بعض المتابعين,ايضاً يضفي السلايدر شيأ على مدونتك اد انه يسهل الوصول الى بعض المواضيع التي انت مقتنع انها ستعجب الزائر كثيرا حسناً فهمنا؟
خطوات اضافة السلايدر سهلة جدا وليست معقدة وليست الا سوى ثوان وترى السلايدر في صفحات مدونتك.ندهب الى شرح كيفية اضافة السلايدر .
الخطوة الاولى ابحث عن الكود التالي : ]]></b:skin>
ثم قبله اضف الكود التالي

  /*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNHxOUZzRUtblgWAKBIrgwwUYjycTW3rL9ctf7pMQRWtj5Jw_5YUfYdvr5z7FALHBvppOsYATbx3_oQyObI72E77NQPvMeoEeDiMpXMpMhRXJ8ab_nkPuOxMiaFDmaU0tS0EsZGoSNPbKb/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}




الخطوة الثانية ابحث عن الكود التالي:  </head>

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



 

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

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>


الخطوة الثالثة :
قم بأضافة اداة جديدة ثم اضافة اداة جافا سكريبت



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




<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window"> 
<div class="image_reel">



<a href="http://arabicash2.blogspot.com/2011/09/readbud.html
"><img src="http://im13.gulfup.com/2011-11-22/1321982239821.jpg
" alt="" /></a>


<a href="http://arabicash2.blogspot.com/2011/08/blooger.html
"><img src="http://im13.gulfup.com/2011-11-22/1321982239983.jpg
" alt="" /></a>


<a href="http://arabicash2.blogspot.com/2011/09/blog-post_29.html
"><img src="http://im13.gulfup.com/2011-11-22/1321982239392.jpg
" alt="" /></a>


<a href="http://arabicash2.blogspot.com/2011/08/blog-post_1018.html
"><img src=" http://im13.gulfup.com/2011-11-22/1321982239314.jpg
" alt="" /></a>

<a href="http://arabicash2.blogspot.com/2011/09/blogger_09.html
"><img src="http://im11.gulfup.com/2011-11-22/1321987176421.jpg
" alt="" />
</a>


< ="http://arabicash2.blogspot.com/2011/11/blog-post_27.html"><img src="http://im13.gulfup.com/2011-11-29/1322600610541.jpg" alt="" />



</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div> 

</div>






مع تغيير روابط الصور وروابط المواضيع الى ما تختاره انت بحسب رغبتك.
لأسهل عليك الامر .قم بنسخ الكود التالي الى برنامج" مايكروسوفت ورد " لديك على الحاسوب وانسخ الكود التالي اليه وقم بالتعديل على الكود .قم ايضا برفع الصور التي تريده عبر موقع لرفع الصور وحدد المواضيع التي تريد ان تظهر على السلايدر بنسخ روابطه الى برنامج" الورد " .



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

صندوق الفايسبوك بتقنية Jquery

7 تعليق7:19 ص, مرسلة بواسطة jamaa alhiane


السلام عليكم ورحمة تعالى وبركاته كيف حالكم اخواني الاعزاء مرحبا بك في مدونتي المتواضعة ,سوف نعرف اليوم على كيفية اضافة صندوق الفايسبوك

صندوق الفايسبوك بتقنية Jquery لمدونات بلوقرعلى مدونة  عربي كاش 


والمثال في جانب هدا الموضوع عند مرور الماوس على صورة الفايسبوك فإن الصندوق ينزلق بسرعة وخفيفة

لاضافة الصندوق بمدونتك ما عليك سوى اتباع الخطوات السريعة التالية



ادا لم تكن قد اضافت من قبل احدى ادوات الجوكري بمدونتك فأنصحك بإضافة هدا الرمز وهو عبارة عن 
Jquery JavaScript
لكي تدعم مدونتك اضافات مكتبة الجوكري
ادهب الى تصميم + تحرير واجهة عناصر المستخدم 
ثم ابحث عن الرمز التالي <header/>  ثم مباشرة قبله اضف الرمز التالي:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

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


<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaKDKkSB8hxnBehAK8kvtDlptTdrQQRU2EP9t3AY5d2IXfpmrKIhFQhifPFwZR32P-j239qQqUwQgR6GhG_s1vFQFGHd4i7s0HNCBU2waFeJyTPoCxWnVQvYMXft2sMVyqtIrtVT1SoRGn/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%3A%2F%2Ffacebook.com%2Farabicash2&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;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://www.way2blogging.org/">Way2blogging</a> / <a href="http://www.arabicash2.blogsot.com/">+Get This!</a></span>
</div></div>


ماعليك سوى تغيير اسم مدونتي الملون باللون الاخضر على الفايسبوك برابط مدونتك على الفايسبوك






اضافة هاك الصور المنبثقة بتقنية Jquery

أضف تعليق3:19 ص, مرسلة بواسطة jamaa alhiane


بسم الله الرحمن الرحيم كيف حالكم اخواني الكرام اليوم انشاء الله سأقدم لك درساً بسيط لكيفية اضافة هاك انبثاق الصورة في مدونة بلوجر وهي اداة من ادوات الجوكري وتسمى Jquery Lightboxدون الحاجة الى اضافة كود الى رابط الصورة والتعديل على كل رابط سيأخد منا وقتا لهدا انشاء الله سنتعرف على كيفية اضافتها الى مدونتك دون اللجوء الى تغيير القالب  والبحث عن قالب اخر بما يخص هده الاضافة فهي رائعة فهناك بعض المدونين يضعون صورا يشرحون فيها برنامج او أي شيئا,,,, لهدا يجب ان تكون الصور كبيرة,وكما نعلم فإن ادراج صورة كبيرة في مدونات بلوجر ستخرج عن جسم التدوينة مباشرة وقدقمت بنشر درس قمت فيه بشرح كيفية  عدم السماح للصور الكبيرة للخروج عن جسم التدوينة في هده الصفحة بدون ان اطيل عليك فعند الظغط على أي صورة فإن الصورة ستبثق في الصفحة نفسها للمدونة وتكون جوانب الصورة مضللة باللون الاسود الكاشف لتكون الصورة واضحة مئة بالمائة ندهب الى الدرس.


قبل كل شيء قم بحفظ نسخة من قالبك تفاديا لحصول اخطاء
نقوم بالبحث عن الكود التالي </body> باستعمال لوحة اختصار المفاتيح(CTRL+F)   
وقبله مباشرة قم بإضافة الرمز التالي
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightBox();
});
</script>
 
جميع الحقوق محفوظة لمدونة عربي كاش2
اتمنى ان يعجبكم الموضوع في انتظار الجديد والمفيد,