مجموعة أدوات متعددة الوظائف للمدونة - EXE and APK

مجموعة أدوات متعددة الوظائف للمدونة

مجموعة أدوات متعددة الوظائف للمدونة
    سأشارك اليوم مجموعة أدوات بسيطة ولكنها مفيدة حقا ومفيدة لبلوق الخاص بك.
    حسنًا ، لإنشاء مجموعة الأدوات هذه ، قمت بدمج وضم ما يقرب من 3 مكونات إضافية / عناصر واجهة برمجة قمت بنشرها بالفعل في هذه المدونة. أضفت التنقل السريع في الصفحة لتزويد زوارك بطريقة سهلة للتصفح في جميع أنحاء مدونتك. باستخدام القليل من خدعة CSS ، قمت بنسخ التأثير الفوري لنظام google android. أنا أيضا استخدامة 4 jquery/s - لتأثير يتلاشى. للتمرير السلس. لتبديل وظيفة. وبالنسبة لعنوان النشر التالي والسابق. ولكن لا تقلق ، فقد قمت بتصغيره بحيث لا يؤثر على سرعة صفحات مدونتك. لذلك دعونا نواصل الأمر. لتثبيت ، فقط اتبع هذه الخطوات السهلة

    المميزات مجموعة أدوات متعددة الوظائف للمدونة

    خفيفة الوزن المغلق
    تحسين HTML
    نص مصغر
    كبار المسئولين الاقتصاديين ودية
    تصميم شقة
    للتخصيص بالكامل
    متجاوب
    خطوط خارجية
    FontAwesome
    مكتبة Jquery الإصدار v1.9.1 أو أعلى
    عرض حي

    مجموعة أدوات متعددة الوظائف للمدونة HTML

    انتقل إلى Blogger »القالب» قم بنسخ القالب احتياطيًا »وقم بتحرير HTML
    ابحث عن </ body> ثم أضف هذا الكود قبله ؛ ثم

    <div id='top'/>
    <div id='bottom'/>

    ابحث عن <b: includable id = 'post' var = 'post'> وبعد ذلك مباشرة ، أضف الكود التالي

    <ul id='Mba-scrollToTop' style='display:none'><li><a class='toolbutton' href='#top'><i class='fa fa-chevron-up'/></a></li><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='expand-tool' style='display:none;'><li class='prev'>
    <ul><li><b:if cond='data:olderPageUrl'> <a class='toolbutton' expr:href='data:olderPageUrl'><i class='fa fa-chevron-right'/></a>
    <a class='older-link tooltip' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/><b:else/> <a class='toolbutton' expr:href='data:olderPageUrl'><i class='fa fa-chevron-right'/></a><a class='tooltip' rel='previous'><span>You are viewing Last Post</span></a> </b:if> </li></ul></li><li><a class='toolbutton' href='#comments'><i class='fa fa-comments'/></a></li><li class='next'> <ul><li><b:if cond='data:newerPageUrl'> <a class='toolbutton' expr:href='data:newerPageUrl'><i class='fa fa-chevron-left' expr:href='data:newerPageUrl'/></a><a class='newer-link tooltip' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/><b:else/> <a class='toolbutton' expr:href='data:newerPageUrl'><i class='fa fa-chevron-left'/></a><a class='tooltip' rel='next'><span>You are viewing Most Recent Post</span></a></b:if></li></ul> </li><li><a class='toolbutton' href='#bottom'><i class='fa fa-chevron-down'/></a></li></div><li><a class='toolbutton' id='tool-expand' onClick='toggle(&quot;expand-tool&quot;);'><span class='expand-plus2'><i class='fa fa-plus'/></span><span class='expand-minus2'><i class='fa fa-minus'/></span></a></li></b:if><b:if cond='data:blog.pageType != &quot;item&quot;'><li><a class='toolbutton' id='last' href='#bottom'><i class='fa fa-chevron-down'/></a></li></b:if></ul>

    CSS
    ابحث عن ]]></b:skin> ثم أضف كود css هذا قبل ذلك

    #Mba-scrollToTop{background:#fff;padding:0;width:40px;list-style:none;position:fixed;top:30%;right:0;cursor:pointer;z-index:99999}#top{position:absolute;top:0}#Mba-scrollToTop li a.toolbutton{width:40px;display:block;text-align:center;border:1px solid #d4d4d4;border-bottom:0;color:#d4d4d4;height:40px;line-height:40px;position:relative;-webkit-transition:all .4s ease;transition:all .4s ease;font-size:80%}#Mba-scrollToTop li #last{border-bottom:1px solid #d4d4d4}#Mba-scrollToTop li #tool-expand{background:#ed5564;border:1px solid #d14b58;color:#fff}#Mba-scrollToTop li #tool-expand:hover,#Mba-scrollToTop li a.toolbutton{text-decoration:none;text-transform:none}#Mba-scrollToTop li a.toolbutton:focus,#Mba-scrollToTop li a.toolbutton:hover{color:#fff}#Mba-scrollToTop li a.toolbutton:before{position:absolute;content:"";width:15px;height:15px;opacity:.5;top:9px;bottom:11px;left:10px;right:10px;background-color:#fff;border-radius:100%;-webkit-transition:all .4s ease;transition:all .4s ease;z-index:-1}#Mba-scrollToTop li a.toolbutton:focus:before,#Mba-scrollToTop li a.toolbutton:hover:before{width:40px;height:40px;opacity:1;background-color:#d4d4d4;border-radius:0;top:0;left:0;bottom:1px;right:0}#Mba-scrollToTop li,#Mba-scrollToTop li ul{list-style:none;padding:0;}#Mba-scrollToTop li ul li{position:relative}#Mba-scrollToTop li ul li a.tooltip{text-decoration:none;color:#fff;line-height:40px;height:40px;display:inline-block;background:#ed5564;right:60px;top:0;position:absolute;padding:0 10px;-webkit-transition:all .4s ease;transition:all .4s ease;white-space:nowrap;visibility:hidden;opacity:0}#Mba-scrollToTop li:hover ul li a.tooltip{right:45px;visibility:visible;opacity:1}#Mba-scrollToTop li ul li a.tooltip:before{position:absolute;display:block;content:"";border-color:transparent transparent #ed5564 transparent;border-style:solid;border-width:5px;height:0;width:0;top:15px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);right:-9px}.expand-minus2{display:none}

    ل JScript
    ابحث عن </body> ثم أضف الكود التالي قبله

    <script type='text/javascript'>
    //<![CDATA[
    function toggle(t){$("#"+t).animate({height:"toggle"},400)}jQuery(document).ready(function(){var t=150,n=500
    jQuery(window).scroll(function(){jQuery(this).scrollTop()>t?jQuery("#Mba-scrollToTop").fadeIn(n):jQuery("#Mba-scrollToTop").fadeOut(n)})}),$(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},500),!1}})}),$(document).ready(function(){$("#tool-expand").click(function(){$(".expand-plus2").toggle(),$(".expand-minus2").toggle()})}),function(t){var n=t("a.newer-link"),e=t("a.older-link")
    t.get(n.attr("href"),function(e){n.html("<span>"+t(e).find(".post h1.post-title").text()+"</span>")},"html"),t.get(e.attr("href"),function(n){e.html("<span>"+t(n).find(".post h1.post-title").text()+"</span>")},"html")}(jQuery)
    //]]>
    </script>

    الكلمات الأخيرة
    يمكنك بالطبع تغيير ألوانها عن طريق استبدال # ed5564 و #fff بالألوان التي تريدها.
    بأمكانك تحميل الأكواد السابقة كاملة من مركز رفع الملفات
    تحميل عدد التحميلات : 846
    شكرا لقرائتك! هل تجد مجموعة الأدوات هذه مفيدة؟ اترك أفكارك وأفكارك حول كيفية تحسين مجموعة الأدوات هذه في قسم التعليقات أدناه!
    عن الموضوع
    مجموعة أدوات متعددة الوظائف للمدونة
  • جميع الحقوق محفوظة : ( اتفاقية نقل المحتوى )
  • للإبلاغ عن رابط معطوب : اضغط هنا
  • إرسال تعليق

    English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified