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

معاينة صندوق التنبيه


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


قم بتغير كلمة "ضع رسالتك هنا" بأي شيء يناسبك
لتغييرخلفية رسالة التنبيه ابحث عن الكود التالي:  #BDE5F8
ويمكنك الاستعانة بجدول الوان مدونتي للحصول على اكواد الالوان 
اخي الكريم اضغط على زر جوجل بلس للتوصية بهدا في جوجل وشكرا لك

السلام عليكم  ورحمة الله تعالى وبركاته ,قد قمنا مند مدة بطرح موضوع صندوق فايسبوك في جانب الصفحة بتقنية الجوكري كما هو الحال في مدونتي  ,واليوم انشاء الله سنتعرف على طريقة اخرى رائعة لاضافة صندوق الاعجاب فايسبوك لمدونات بلوجر لكن بتقنية او بلغة css الرائعة

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

الفرق بين صندوق الاعجاب فايسبوك التقليدي وصندوق فايسبوك بلغة css

صندوق facebook

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

<style type="text/css">

.facebookOuter {

background-color:#F4F4F4;

width:250px;

padding:10px 0 10px 10px;

height:250px;

border:1px solid #CCCCCC;

}

.facebookInner {

height:250px;

overflow:hidden;

}

</style>

<div class="facebookOuter">

<div class="facebookInner">

<div class="fb-like-box"

data-width="245" data-height="290"

data-href=http://www.facebook.com/arabicash2

data-border-color="#F4F4F4" data-show-faces="true"

data-stream="false" data-header="false">

</div>

</div>

</div>

<div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

التعديل على الكود .ــــــــــــــــــــــــــــــــــــــــــــــــ

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

بتغيير اللون التالي #F4F4F4 الى اي لون ,يمكنك الاستعانة بالموقع التالي للحصول على اكواد الالوان

للمزيد من مثل هده الدروس اشترك في قائمتي البريدية اسفل الصفحة




سلايدر شو  مدونة عربي كاش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/AVvXsEhNfh1P96m1GWSxTbb6rgZc7WKYVAmY02IQv5H7dxHJ_hNFmIRhGFyHWAwvDDyU2hwZrHKBTxlVc5FIW6mw8oPoFOZ5Vi_08aijtdQCwtGCv5GRTtvraqo-aH_EM7143wlUwMpRoqGQyKh2/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 لمدونات بلوقرعلى مدونة  عربي كاش 


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

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



ادا لم تكن قد اضافت من قبل احدى ادوات الجوكري بمدونتك فأنصحك بإضافة هدا الرمز وهو عبارة عن 
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/AVvXsEg-heu_XL0ew8bTRv80TzQVx3nhHZhDnfra32j36xhcosjjxMCdnhtc-JkR8TMzGE5q7VCEgOtzsHCH9zO-EZ6OnBEOWFp0D2iW67IXEtwGUJL83QGK9NAsiwDqmWcLVB8AWNigMlG_Ow5W/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://arabicash2.blogspot.com">arabicash2</a> / <a href="http://arabicash2.blogspot.com/2011/09/blog-post_29.html">+أحصل عليها!</a></span></div></div>



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







بسم الله الرحمن الرحيم كيف حالكم اخواني الكرام اليوم انشاء الله سأقدم لك درساً بسيط لكيفية اضافة هاك انبثاق الصورة في مدونة بلوجر وهي اداة من ادوات الجوكري وتسمى 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
اتمنى ان يعجبكم الموضوع في انتظار الجديد والمفيد,


Tags

كن من أصدقائنا!

تابعنا عبر البريد

ابحث في المدونة