السلام عليكم ورحمة الله وبركاته اليوم في هذا الموضوع ساشارك معكم افضل 5 اضافات ومهمة لمستخدمين بلوجر سهلة التركيب بدون الحاجة الي معرفة اي لغة برمجة . افضل 5 اضافات الذي سيتم شرحهم في هذا الموضوع هم اضافة الاعلانات الثابتة في اسفل المدونة ثاني . اضافة هي تركيب زر الصعود والهبوط في مدونة بلوجر وثالث اضافة هي مانع اعلانات adblock . ورابع اضافة هي مثل الاضافة الاولة ولكن هذا سيتم تثبيت الاعلانات في جانب المدونة . الاضافة الأخيرة هي كود البحث في المدونة اولا تابع معي بتركيز
اضافة الاعلانات الثابتة في اسفل المدونة
- اتجه الي لوحة تحكم بلوجر
- ثم تخطيط
- اضف html /javaScript
- انسخ هذا الكود وضيفه في الخانة الفارغة
- وبدل الكود الاخضر بكود الاعلان الخاص بك
<script type='text/javascript'>
$(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').hide(90);});});
</script>
<div id='fixedban' style='max-height:105px;width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById('fixedban').style.display = 'none';' style='cursor:pointer;'><img alt='close' src='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' style='vertical-align:middle;' title='close button'/></a></div>
<div style='text-align:center;display:block;max-width:970px;max-height:90px;overflow:hidden;margin:auto'>
<!-- banner 970 -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' style='display:inline-block;width:970px;height:90px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
اضافة زر الصعود والهبوط في المدونة
- اتجه الي المظهر ثم تعديل Html
- ولكن قبل التعديل احتفظ بنسخة من القالب
- ثانيا ابحث عن ]]></b:skin> واضف هذا الكود فوقه
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99} #scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px} #scrollToTop a:hover{color:rgba(0,0,0,0.5)} #top{position:absolute;top:0}
ابحث عن </body> واضف هذا الكود فوقه :
<ul id='scrollToTop'> <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li> <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li> </ul> <div id='top'/> <div id='bottom'/> <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})}); $(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})}); //]]>
وان لم يعمل معك اضف هذا الكود هكذا :
<script type='text/javascript'>
/*<![CDATA[*/
اضف هنا الكود الي فوق
/*]]>*/
</script>
اضافة مانع الاعلانات اد بلوك adblock
- اتجه الي المظهر ثم تعديل html
- ولاتنسي اخذ نسخة احتياطية
- ابحث عن ]]></b:skin> اضغط ctrl+f للبحث
- الصق هذا الكود فوقه
*/@-webkit-keyframes bounce{0%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}}
@keyframes bounce{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}
.adblockInfo{width:100%;height:100%;position:fixed;top:0;left:0;z-index:900;display:none}
.adblockInfo.is-active{display:block}
.adblockInfo__container{top:calc(50% - 130px);left:calc(50% - 250px);max-width:500px;max-height:90%;font-size:16px;text-align:center;box-shadow:0 6px 5px -5px rgba(0,0,0,.5);-webkit-animation:bounce 1s;animation:bounce 1s}
.adblockInfo__container,.adblockInfo__title{position:relative;z-index:10}
.adblockInfo__title{padding:1em 2em;font-size:1.2em;margin:0}
.adblockInfo__text{padding:2em;font-weight:500;font-size:1em;margin:0}
.adblockInfo__cover{background-repeat:repeat;background-size:cover;background-position:center;height:5em;position:relative}
@-webkit-keyframes rubberBand{100%,24%,from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}4%{-webkit-transform:scale3d(1.25,.8,1);transform:scale3d(1.25,.8,1)}8%{-webkit-transform:scale3d(.75,1.2,1);transform:scale3d(.75,1.2,1)}12%{-webkit-transform:scale3d(1.15,.9,1);transform:scale3d(1.15,.9,1)}16%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}20%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}
@keyframes rubberBand{100%,24%,from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}4%{-webkit-transform:scale3d(1.25,.8,1);transform:scale3d(1.25,.8,1)}8%{-webkit-transform:scale3d(.75,1.2,1);transform:scale3d(.75,1.2,1)}12%{-webkit-transform:scale3d(1.15,.9,1);transform:scale3d(1.15,.9,1)}16%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}20%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}
.adblockInfo__cover__img{position:absolute;left:2em;bottom:-15px;-webkit-animation:rubberBand 3s infinite;animation:rubberBand 3s infinite;-webkit-transform-origin:bottom;transform-origin:bottom}
.adblockInfo__close{background:rgba(0,0,0,.2);border:0;outline:0;font-family:monospace;font-size:1.3em;color:#fff;position:absolute;top:0;right:0;cursor:pointer;padding:0 1em;bottom:0;-webkit-transition:background .3s;transition:background .3s}
.adblockInfo__close:hover{background:rgba(0,0,0,.4)}
@media (max-width:500px){.adblockInfo__container{left:0;right:0;width:100%}}
.adblockInfo{background:rgba(0,0,0,0.95)}
.adblockInfo__title,.adblockInfo__container{background:#fff}
.adblockInfo__cover{background-image:url(https://a.top4top.net/p_8455gzpl1.png);background-color:#1d2129}
.adblockInfo__title{border-bottom:1px solid rgba(0,0,0,0.1);color:rgba(0,0,0,0.75)}
.adblockInfo__text{color:rgba(0,0,0,0.5)}
ثم ابحث عن الوسم <body> والصق الكود التالي اسفله مباشرة :
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class="adblockInfo"><div class="adblockInfo__container">
<div class="adblockInfo__cover">
<img class="adblockInfo__cover__img" src="https://f.top4top.net/p_845xltyt1.png"/></div>
<h3 class="adblockInfo__title">
تم الكشف عن مانع الإعلانات</h3>
<p class="adblockInfo__text"></div>
من فضلك قم بتعطيل أداة مانع الأعلانات أدبلوك AdBlock من المتصفح للدخول للمدونة، أو أستخدم متصفح أخر وشكرا لك :)</p>
</div></b:if>
واخيرا يمكنك التعديل علي الكلام والصورة https://f.top4top.net/p_845xltyt1.png بدله برابط الصورة الخاصة بك كذالك الكلام
اضافة الاعلانات بجانب المدونة
- اتجه الي لوحة تحكم بلوجر
- ثم تخطيط
- اضف html /javaScript
- انسخ هذا الكود وضيفه في الخانة الفارغة
- وبدل الكود الاخضر بكود الاعلان الخاص بك
</script>
<style scoped='' type="text/css"> #iklankirikanan{position:fixed;_position:absolute;top:6px;right:9%;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)} </style> <script type="text/javascript"> function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close1(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("iklankirikanan").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar </script> <br /> <div class="clear"> </div> <div id="iklankirikanan"> <div style="text-align: right;"> <a href="" onclick="close1(); return false"><img src="http://2.bp.blogspot.com/-aRTMaSBhxJg/Vjj4aRYEn6I/AAAAAAAAL6E/RzooTTh7ImE/s1600/close-btn.png" /></a></div> <div onclick='close1()'> <div style="background: #fff;"> <a target="_blank" href="LINK-TUJUAN" title="Iklan"><img style="border: none;" alt="Iklan" src="http://4.bp.blogspot.com/-uYgvBdhOFz0/Vjj4aQG-nII/AAAAAAAAL6A/v034kFtZlBw/s1600/ban-melayang.gif" title="Iklan" width="160" height="600"/></a></div> </div></div> <style scoped='' type="text/css"> #iklankirikanan1{position:fixed;_position:absolute;top:6px;left:9%;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)} </style> <script type="text/javascript"> function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close11(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("iklankirikanan1").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar </script> <br /> <div class="clear"> </div> <div id="iklankirikanan1"> <div style="text-align: left;"> <a href="" onclick="close11(); return false"><img src="http://2.bp.blogspot.com/-aRTMaSBhxJg/Vjj4aRYEn6I/AAAAAAAAL6E/RzooTTh7ImE/s1600/close-btn.png" /></a></div> <div onclick='close11()'> <div style="background: #fff;"> <a target="_blank" href="LINK-TUJUAN" title="Iklan"><img style="border: none;" alt="Iklan" src="http://4.bp.blogspot.com/-uYgvBdhOFz0/Vjj4aQG-nII/AAAAAAAAL6A/v034kFtZlBw/s1600/ban-melayang.gif" title="Iklan" width="160" height="600"/></a></div></div></div>
اضافة كود البحث
- اتجه الي لوحة تحكم بلوجر
- ثم تخطيط
- اضف html /javaScript
- انسخ هذا الكود وضيفه في الخانة الفارغة
<form action='/search' id='searchlox' method='get'>
<input name='q' placeholder='ابحث عن فيلمك' size='15' type='text'/>
<input id='button-suubmit' type='submit' value='بحث'/></form>
ثم
- اتجه الي المظهر ثم تعديل html
- ولاتنسي اخذ نسخة احتياطية
- ابحث عن ]]></b:skin> اضغط ctrl+f للبحث
- الصق هذا الكود فوقه
#searchlox{width: 250px;margin-right: 1388px; margin-top: -51px;}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchlox input{outline:none}#searchlox input[type="text"]{background: url(//2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 9px 10px #fff;border-width: 1px; border-style: solid; border-color: #fff;font: bold 12px Arial,Helvetica,Sans-serif; color: #000000; width: 73%; padding: 8px 15px 8px 30px; border-radius: 6px; font-size: 13px; font-family: 'Almarai'; height: 32%;}
#button-suubmit{ font-family: 'Almarai';border-radius: 6px;background: #c91516;border-width: 0;padding: 9px 0;width: 23%;cursor: pointer;font: bold 12px Arial,Helvetica;color: #fff;text-shadow: 0 1px 0 #555;height: 35px;}
#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
والي هنا انتها شرحنا ل افضل 5 واهم اضافات بلوجر سهلة التركيب 2021 و اعتقد ان الاضافات بسيطة في التركيب واذا وجهتك اي مشكلة في تركيب اضافة يمكنك الاتصال بنا او من خلال كتابة تعليق اسفل الموضوع و الى درس جديد احبتي في الله
تعليقات: 0
إرسال تعليق