يكسر أخبار

الاثنين، 6 مايو 2013

إضافة صندوق اعجابات الفيس بوك بطريقة عرض رائعة لمدونات بلوجر





المصدر   هنا

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

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

بطريقة عرض مميزة ورائعة وشكل جذاب 

حيث يكون الصندوق مخفي على الجانب الايمن من الشاشة ولا يظهر سوى بمرور المؤشر عليه (للمشاهدة)

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

الان اذهب الى لوحة تحكم المدونة ثم اختر تصميم ثم تحرير HTML
ثم قم اضغط من لوحة التحكم على (Ctrl+F)وابحث عن هذا الكود 

</head>

ثم انسخ كود الJQuery والصقه فوقه مباشرة وقم بحفظ القالب.

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

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


 الان اضف هذا الكود في المربع

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLV5TMIWHgIl88jr0CZwYbdqW0lDcY2CFjz-TGrtNTP5oY4U5GLyT2JccipIu6YVfNw_b-983G7B5PKEt1xYc0Hw0-m6pMOfyIHXVaqvf8bdcw0I80fbnA2pPcuS-ljMlcmO20bcbDK04/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FIslamkidz&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.taqnya09.blogspot.com/">Taqnya09</a></span>
     </div>
 </div>

اخر خطوة قم بتغير الكلمة التي بالون الاحمر الى اسم المستخدم الخاص بصفحتك على الفيس بوك ويمكنك الحصول على اسم المستخدم من هذا الرابط https://www.facebook.com/username/.