أضافة نافذة جانبيه منبثقة لمواضيع ذات صلة لمدونة بلوجر
أحبائى فى الله معنا اليوم موضوع جديد يهم كل شخص لديه مدونة ولا تقل أهميه
عن السلايد شو او شريط الاخبار الاضافه مميزه وتعطى طابع ومظهر يجذب أنتباه
الزائر للمواضيع ويجعله يتنقل من موضوع الى أخر وبالطبع
 |
| أضافة نافذة جانبيه منبثقة لمواضيع ذات صلة لمدونة بلوجر |
هذا يفيدك لوجوه بأطول وقت بالمدونه ويتنقل من مكان لأخر فهذا يرفع ترتيبك فى انستا
وجوجل أدسنس تحب المواقع التى يبقى بها الزائر لاطول فتره وينتقل من مكان لأخر بالمدونه
والاضافه خفيفه وذو مظهر جذاب وتعمل على جميع القوالب ومتوافقه مع جميع الشاشات
اولا" معاينة الاضافه
انتقل لصفحة المعاينه وانزل للاسفل وسترى النافزه تظهر من اليسار
طريقة تركيب الاضافه للمدونه
اولا" لا تنسى تحتفظ بنسخه أحتياطيه من القالب للرجوع اليها اذا أخطأت فى شئ
اذهب الى المظهر ثم تعديل HTML واضغط ctrl + f
وابحث عن الوسم ]]></b:skin> ثم ضع الكود التالي فوقه ctrl + v
/* Widget Rekomendasi */
#chslidingbox{background:#fff;width:100%;max-width:355px;height:230px;position:fixed;overflow:hidden;border:none;left:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
.chslidingbox-title{background:#CD2122;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:left;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-left:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
.show{bottom:84px}
.hide{bottom:-145px}
.related-post{font-size:70%}
.related-post h4{font-size:150%;margin:0 0 .5em}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}
.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title{color:#000;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
http://alnaje7oon.blogspot.com/ثم ابحث عن الوسم </body> وضع الكود التالي فوقه ctrl + v
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{left:"0px"}:{left:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({left:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>
واخيرا ابحث عن <data:post.body/> ستجد منها اكثر من واحده الثالثه هي المطلوبه
او التي تكون تحت رابط اقرأ المزيد ثم ضع الكود التالي تحتها ثم احفظ القالب
حمل الكود من هنا
يمكنك التحكم في عدد المواضيع المعروضة من خلال البحث عن numPosts: 2
وتغيير الرقم 2 الى الرقم الذي تريد ان يظهر بالنافذه
وتغيير الرقم 2 الى الرقم الذي تريد ان يظهر بالنافذه
تعليقات
إرسال تعليق