للبحـث بداخـل المدونــة . . .

مواضيع قد تهمك أضافة احترافية لقوالب البلوجر

شرح تركيب أضافة مواضيع قد تهمك متحركة





اضافة رائعة جدا بشكل احترافي



مواضيع قد تهمك


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







شرح تركيب الأضافة








تركيب الأضافة



ادخل الى لوحة تحكم بلوجر وابحث عن ]]></b:skin> 
ثم ضع الكود التالي فوقه :




/* 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> وضع الكود التالي فوقه :


<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/>
 ستجد منها اكثر من واحده ، الثالثه هي المطلوبه او التي تكون تحت رابط اقرأ المزيد ،
 ثم ضع الكود التالي تحتها ثم احفظ القالب :





 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:right;margin:0 15px;'>مواضيع قد تهمك</span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#x00D7;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#x2212;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>&#x2b;</a></span>
    </div>
    <div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 2,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/sliderekomendasi.js' type='text/javascript'/>   
</div>
</div>
</b:if>




و شكرا

وفي الختام !

شكراً لكم على قراءة الموضوع مواضيع قد تهمك أضافة احترافية لقوالب البلوجر. إذا واجهتك أي مشكلة في الكود أو لديك أي استفسار، فلا تتردد في وضع سؤالك بداخل تعليق أو قم بـ الاتصال بنا. و لا تنسىَ الأشتراك في مدونة هلا تك

صاحب مدونة هلا تك التي تهتم بكل ما هو جديد على منصة بلوجر من أضافات و قوالب و شروحاتهم

إرسال تعليق

✩ تساعدنا ملاحظاتك في تطوير مدونتنا وتكون من خلال مشاركة أفكارك واقتراحاتك معنا.
رأيك يهمنا، لذا يرجى مشاركته معنا. يمنع إضافة روابط لأي موقع في التعليقات و شكرا لتفهمك .

مواضيع مهمة

ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.
أنضم لمدونة هلا تك