JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

اكتب ما تود البحت عنه و اضغط Enter
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>




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

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




و شكرا


author-img

maher

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