مدونة هلا تك

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

لتركيب الاقتباس على المدونة بشكل صحيح

نقوم بنسخ الكود التالي و نلصقه فوق /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>

ننسخ الكود التالي و نلصقه فوق /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>

قم بتغير معرف الفيس بوك و معرف التويتر

المصدر // مدونة عبدو تكنولوجي

و شكرا

وفي الختام !

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