الفريد اوتشوب
هواياتك : كمبيوتر تاريخ التسجيل : 26/02/2011 العمر : 36 الموقع : قسم الكمبيوتر
بطاقة الشخصية الفريد اوتشوب: 5
| موضوع: شرح إضافة مربع الفيسبوك بشكل عائم و منزلق بجانب مدونة بلوجر الإثنين 29 أكتوبر 2012, 4:35 pm | |
| شرح إضافة مربع الفيسبوك بشكل عائم و منزلق بجانب مدونة بلوجر 1- توجه إلى لوحة تحكم المدونة 2- تصميم ثم تحرير 3- إبحث عن الوسم التالي - الكود:
-
</head>
4- ثم ضع فوقه مباشرة الكود التالي - الكود:
-
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery.noConflict(); jQuery(function (){ jQuery(".slide_likebox").hover(function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium"); },function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium"); },500); return false; }); </script>
5- ثم نبحث عن هذا الكود - الكود:
-
]]></b:skin>
6- و ألصق هذا الكود فوقه مباشرة - الكود:
-
.slide_likebox { float:right; width:288px; height:345px; background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}
7- قم بحفظ القالب الأن 8- بعد وضع هذه الأكواد توجه إلى تصميم عناصر الصفحة و قم بإضافة أذاة Html/JavaScript و ضع بها الكود التالي - الكود:
-
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/3almalthkafa&width=238&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>
ثم نحفظ وبذلك تم شرح الموضوع على منتدى الفريد اوتشوب | |
|