U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

اقدم لكم شكل اقتباس جديد معه ازرار مشاركة


اقدم لكم شكل اقتباس جديد معه ازرار مشاركة



الكثير ممن يمتلكون مدونات بلوجر يحبون إضافة اجمل التحديثات على مواقعهم ، ومن بينها صناديق الاقتباس او كما يسميها إطارات الأكواد ، و هي إضافة جميل تعطيك مكانا لإضافة مختلف الاكواد ، و في درس اليوم سأريكم طريقة تمكنك من جعل الإطار يقبل النسخ حتى لو كنت عامل خاصية منع النسخ على موقعك .
هذا الصندوق عدا انه صندوق مميز للاقتباس يحوي ايضار ازرار التواصل الاجتماعي فيس بوك
و تويتر بشكل متحرك و احترافي 
مع تركيب هذا الصندوق ستتغير مدونتك 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&amp;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>




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

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




و شكرا


الاسمبريد إلكترونيرسالة