الكثير ممن يمتلكون مدونات بلوجر يحبون إضافة اجمل التحديثات على مواقعهم ، ومن بينها صناديق الاقتباس او كما يسميها إطارات الأكواد ، و هي إضافة جميل تعطيك مكانا لإضافة مختلف الاكواد ، و في درس اليوم سأريكم طريقة تمكنك من جعل الإطار يقبل النسخ حتى لو كنت عامل خاصية منع النسخ على موقعك .
هذا الصندوق عدا انه صندوق مميز للاقتباس يحوي ايضار ازرار التواصل الاجتماعي فيس بوك
و تويتر بشكل متحرك و احترافي
مع تركيب هذا الصندوق ستتغير مدونتك 360 درجة للافضل
هذا الصندوق عدا انه صندوق مميز للاقتباس يحوي ايضار ازرار التواصل الاجتماعي فيس بوك
و تويتر بشكل متحرك و احترافي
مع تركيب هذا الصندوق ستتغير مدونتك 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);vartwshare="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+""e="+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>
قم بتغير معرف الفيس بوك و معرف التويتر
المصدر // مدونة عبدو تكنولوجي
و شكرا
شكرًا لوقتكم واهتمامكم بقراءة موضوع اقدم لكم شكل اقتباس جديد معه ازرار مشاركة. إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل كل ما هو جديد.