القائمة الرئيسية

الصفحات

طريقة تغيير شكل صندوق الإقتباس في مدونات بلوجر

السلام عليكم متابعينا الأعزّاء وزوّار موقع المحترف تك الكرام ، في هذا الدرس الجديد والشرح الخاص ببلوجر حيث سأشرح لكم طريقة تغيير شكل أو ستايل الإقتباس في مدونة بلوجر . هيّا نبدأ ! 
كلنا نحاول أن نطوّر مواقعنا و مدوناتنا لتكون عصريّة ومواكبة للحداثة. لذلك لابد من التعديل على الموقع من حيث المضمون والشكل ، ولعل الشكل هو أحد أهم العوامل التي تساهم في جعل الزوار يحبون الموقع أو ينفرون منه! . ومنا هنا تأتي أهمية التعديل على الالوان والاشكال ، واليوم سنقوم بالتعديل على شكل الإقتباس الذي يستخدم في المدونات لغرض عرض المعلومات أو حتى السكربتات بشكل جميل ومتناسق.

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

طريقة تركيب هذا الشكل أو الستايل :

  • نذهب الى لوحة التحكم بالمدونة
  • ندخل على المظهر
  •  تعديل HTML
  • نضغط على CTRL + F للبحث
  • نكتب في صندوق البحث </head> أو <head/> ونلصق السكربت التالي فوقه مباشرة:

<style type='text/css'>
/<![CDATA[/
/* صندوق إقتباس من المحترف تك */
.post-body blockquote{width:90%;clear:both;-webkit-print-color-adjust:exact;padding:10px 30px;margin:15px auto;line-height:2;text-indent:15px;color:#ffffff;-webkit-border-radius:5px;border-radius:5px;position:relative;border:none;background:linear-gradient( to bottom right,#26a69a,#a044ff);background-repeat:no-repeat;background-size:1000% 1000%}.post-body blockquote:before{content:"\f10e";top:0;right:-4px}.post-body blockquote:before,blockquote:after{font-family:FontAwesome;font-size:20px;color:#ffffff;position:absolute}.post-body blockquote:after{content:"\f10d";bottom:0;left:15px}.quote-share a{background:#ffffff;text-align:center;display:inline-block;width:25px;height:25px;text-indent:0;-webkit-border-radius:100%;border-radius:100%;border:2px solid #ffffff;font-size:11px;margin:0 1px;color:#fff;background-repeat:no-repeat;background-size:1000% 1000%;background-clip:border-box;background:linear-gradient( to bottom right,#26a69a,#a044ff);background-repeat:no-repeat;background-size:1000% 1000%}.quote-share a:hover{-webkit-animation:quoteHover .5s ease both;-moz-animation:quoteHover .5s ease both;animation:quoteHover .5s ease both}.quote-share{position:absolute;left:50px;bottom:-12px}@-webkit-keyframes quoteHover{to{-webkit-transform:scale(1.5) rotate(360deg)}}@-moz-keyframes quoteHover{to{-moz-transform:scale(1.5) rotate(360deg)}}@keyframes quoteHover{to{transform:scale(1.5) rotate(360deg)}}@-webkit-keyframes quoteHoveroff{from{-webkit-transform:scale(1.5) rotate(360deg)}}@-moz-keyframes quoteHoveroff{from{-moz-transform:scale(1.5) rotate(360deg)}}@keyframes quoteHoveroff{from{transform:scale(1.5) rotate(360deg)}}
/]]>/
</style>
بعد ذلك نقوم بإضافة كود جافا سكربت عن طريق الذهاب الى :
  • نذهب الى لوحة التحكم بالمدونة
  • ندخل على المظهر
  • تعديل HTML
  • نضغط على CTRL + F للبحث
  • نكتب في صندوق البحث </body> أو <body/> ونلصق الكود التالي فوقه مباشرة :

<script type='text/javascript'>/<![CDATA[/ var linkblog=window.location.protocol "//" window.location.host window.location.pathname window.location.search;linkblog=encodeURIComponent(linkblog);var twshare="https://twitter.com/intent/tweet?url=" linkblog,fbshare="https://www.facebook.com/sharer/sharer.php?v=4&u=" linkblog,bq=$("blockquote").text();$("blockquote").append('<div class="quote-share"><a target="_blank" href="' fbshare "&quote=" bq '" class="quote-fb"><i class="fa fa-facebook"></i></a><a target="_blank" href="' twshare "&text=" bq '" ><i class="fa fa-twitter"></i></a></div>'); //]]> </script>
بعد أن تنتهي من إضافة الأكواد هذه ، تضغط على حفظ المظهر وبذلك سيتغير شكل الإقتباس في موقعك الى شكل احترافي وجميل ، ومبروك عليك المظهر الجديد والرائع!.

تعليقات

تعليقان (2)
إرسال تعليق
  1. يا أخي مدونتك ممتازة لكن المشكلة في خاصية منع النسخ.. كيف لنا سننسخ الأكواد التي تضعها؟ أرجو حل هذه المشكلة لأنها تدعو إلى النفور.

    ردحذف
    الردود
    1. شكراً لك لإبلاغي بالأمر ، تم حل المشكلة ، عذراً على ذلك.

      حذف

إرسال تعليق