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

الصفحات

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

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

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

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

  • نذهب الى لوحة التحكم بالمدونة
  • ندخل على المظهر
  •  تعديل 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>
بعد أن تنتهي من إضافة الأكواد هذه ، تضغط على حفظ المظهر وبذلك سيتغير شكل الإقتباس في موقعك الى شكل احترافي وجميل ، ومبروك عليك المظهر الجديد والرائع!.

تعليقات