انشاء خريطة مدونةعام

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

0
(0)
سأشارك اليوم مجموعة أدوات بسيطة ولكنها مفيدة حقا ومفيدة لبلوق الخاص بك.
أدوات متعددة الوظائف للمدونة
حسنًا ، لإنشاء مجموعة الأدوات أدوات متعددة الوظائف للمدونة ، قمت بدمج وضم ما يقرب من 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


شكرا لقرائتك! هل تجد مجموعة الأدوات هذه مفيدة؟ اترك أفكارك وأفكارك حول كيفية تحسين مجموعة الأدوات لإنشاء مجموعة الأدوات أدوات متعددة الوظائف للمدونة في قسم التعليقات أدناه!

هل كانت هذه المقالة مفيدة ؟

اضغط على عدد النجوم للتقييم

متوسط التقييم 0 / 5. عدد الاصوات : 0

لا يوجد مصوتين كن انت الاول

Sory Mohajer

Sory Mohajer مدير موقع EXE and APK التدوين هوايتي أنضممت لعالم التقنية منذ عام 2014 أحاول تأمين أكبر عدد للتراخيص وأجدد المقالات بشكل دوري حتى وصلت عددها الى اكثر من 4000 مقالة متنوعة تحتوي برامج وتطبيقات مع شروحات سيو لتحسين الموقع وكل هذا بمجهود شخصي .

مقالات ذات صلة

اترك ردك على هذا المقال

زر الذهاب إلى الأعلى