جدول المحتويات

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

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

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

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

  • نذهب الى لوحة التحكم بالمدونة
  • ندخل على المظهر
  •  تعديل 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. شكراً لك لإبلاغي بالأمر ، تم حل المشكلة ، عذراً على ذلك.