- fahad
- 3:35 ص
- أضافات ودروس بلوجر
- لاتوجد تعليقات
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
أضافة العائمه لإشهر المواقع الأجتماعية لمدونة البلوجر وذلك عن طريق إنزلاق القطعه بحيث أذا قام بنزول إلى أسفل المدونه تنزلق القطعه
مباشرة إلى الاسفل أو أذا صعد ألى أعلى المدونه تنزلق ألى الأعلى وهذه القطعة أو الأضافة تعمل على CSS و HTML ومتوافق تماما مع جميع المتصفحات الرئيسية.
صورة الأضافة بجانب مواضيع المدونة البلوجر
طريقة تركيب الأضافة
أتجه للوحة التحكم الخاصه بمدونتك>> تصميم>>أضافة أداة>>أختارjava/html
وألصق الكود التالي في الصندوق المخصص لذلك
<style>
/*-------z00o Floating Sharing Widget------------*/
#floatdiv {
position:fixed;
bottom:15%;
margin-right:-70px;
z-index:10;
float:right;
padding-bottom:2px;
}
#mbtsidebar {
background:#fff;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://z00o.blogspot.com/">Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>
أذا أردت تغيير لون الخلفية أبحث عن الكود التالي والذي مشار أليه بالون الأزرق background:#fff
وهذه صفحة تحتوي على عدة ألوان مع الاكواد يمكنك الأختيار منها ما شئت
موقع ألوان أون لاين أضغط هنا
أما أذا كنت ترغب في عرض مصغر فقط على صفحات أخرى وليس في الصفحة الرئيسية اتبع هذه الخطوات.
لاتنسى أن تعطي عنوانا للقطعه مؤقتا
انتقل إلى> تصميم>> تحرير HTMLوأعمل توسيع للقالب
لاتنسى أن تعطي عنوانا للقطعه مؤقتا
انتقل إلى> تصميم>> تحرير HTMLوأعمل توسيع للقالب
بعد ذلك
<b:widget id='HTML8' locked='false' title='القائمه العائمه' type='HTML'><b:includable id='main'>bla bla bla bla</b:includable> </b:widget>
فمثلا أنا وضعت أسم موقتا للقطعه بإسم (القائمه العائمه)
أبحث عن الاسم الذي وضعته وسوف تجد كود مثل الشكل السابق
لان نضيف كود صغير
شاهد مثال للطريقة أضافة الكود
<b:widget id='HTML8' locked='false' title='القائمه العائمه' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType == "item"'>bla bla bla bla</b:if></b:includable> </b:widget>
فقط ماعليك ألا أضافة الكوديين الأخضرين إلى الكود الذي وجدته
وأخير حفظ القالب
وسلام خير ختام
ليست هناك تعليقات :
إرسال تعليق