مجموعة كبيرة من اكواد اقتباس blockquote بطريقة احترافية
السلام عليكم ورحمة الله وبركاته
اليوم احببت ان اقدم لكم مجموعة من الطرق البسيطة لتغير شكل الاقتباس لمدونات بلوجر والذي الكثير من المدونين المبتدئين لايستخدموها والتي تقوم بتميز اكواد او ملاحضة او نص طبعأ الاشكال الذي سوف اقدمه لكم اشكال احترافية وبسيطة وانيقة وسوف تلائم جميع المدونات انشاء الله مع امكانية اختيارالوان الذي يناسب مدونتك
♦ طريقة التركيب ♦
1- ابحث عن الكود التالي .post blockquote او blockquote وقم بحذفة جميعاً
2- ابحث عن الكود التالي ]]></b:skin> واضف قبله مباشرة كود شكل الاقتباس الذي تريد مع ازالة كلمة style> و </style ان وجدة في الكود لك الاختيار او بوضع الكود فوق </head> في كل الحالات الاضافة ستعمل
راسلني ان وجدت اي مشكلة اجيبك ان شاء الله . لكي لا اطيل اترككم مع الاشكال...
راسلني ان وجدت اي مشكلة اجيبك ان شاء الله . لكي لا اطيل اترككم مع الاشكال...
♦ الشكل 1 ♦
<style> .post blockquote { overflow:auto;width:400px;height:auto; font-family: "Consolas", "Courier New", Courier, mono, serif; margin : 15px 35px 15px 15px; padding : 2px 10px 5px 60px; line-height:1.7em; clear : both; color:#000; list-style-type : none; background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaIRIqbQQvKEFyZ6tdu6jMD6IFPGTTaazgjDor-kOoNRMpdZSkTmlyt2QyhHTUoF4jwvbWSkxYrCSLUxvFB_3_tMdqUH2ECiCa6dMkwoep1_7oauUwqDFAhNwoo2CK7nJDZ8fA2SxA_qOM/s1600/notepad1.gif) repeat-y top left; border : 1px solid #ccc; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); } </style>
♦ الشكل 2 ♦
<style> .post blockquote { background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #FC8E42; border-radius: 240px 240px 240px 240px; color: #333333; margin: 1em 140px 80px; padding: 70px 70px; position: relative; text-align: center; font: 1.5em/1.4 Cambria,Georgia,sans-serif; font-weight: bold; } .post blockquote:before { background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #FFBD54; border-radius: 50px 50px 50px 50px; bottom: -40px; content: ""; display: block; height: 50px; position: absolute; right: 100px; width: 50px; z-index: 10; } .post blockquote:after { background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #5A8F00; border-radius: 25px 25px 25px 25px; bottom: -60px; content: ""; display: block; height: 25px; position: absolute; right: 50px; width: 25px; z-index: 10; } </style>
♦ الشكل 3 ♦
<style> .post blockquote { padding:10px 15px; margin: 5px 15px; border: 1px solid #E1E1E1; background-color: #F6F6F6; font-size: 15px; font-family: Times; } .post blockquote:before { content: "\201C"; color: #F13937; font-family: Times; font-size:50px; font-weight: bold; line-height:0px; vertical-align:middle; } .post blockquote:after { content: "\201D"; color: #F13937; font-family: Times; font-size:50px; font-weight: bold; line-height:0px; vertical-align:middle; padding:15px 0px 0px 5px; } </style>
♦ الشكل 4 ♦
♦ الشكل 5 ♦
<style> .post blockquote { display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; font-family: Georgia, serif; font-size: 14px; line-height: 1.5; color: #446578; text-align: justify; border-left: 15px solid #EBF2F8; border-right: 1px dotted #EBF2F8; -moz-box-shadow: -1px 2px 5px #ccc; -webkit-box-shadow: -1px 2px 5px #ccc; box-shadow: -1px 2px 5px #ccc; } .post blockquote:before{ content: "\201C"; font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #8DACC0; position: absolute; left: 10px; top:5px; } .post blockquote:after{ content: ""; } .post blockquote a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; } .post blockquote a:hover{ color: #666; } </style>
♦ الشكل 6 ♦
<style> .post blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lUKUIHh11rsVdr9mBABGZTG72c7qNCC9WaQDe3BM7SVz9YDX0Xq-FpDPhO_-_0GHjnx35HEbYyWby_fmyC_RgczJl1O_DzXx1-6pPd-ObWFGOXjw89hMNM0iDWXB3PQ5LoJ1CjrpAck/s1600/green-black-side.gif) ; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 1.3em Helvetica, verdana, serif, Georgia, "Times New Roman"; } </style>
♦ الشكل 7 ♦
<style> .post blockquote { margin : 0 10px; padding: 10px 20px 25px 20px; background : #9FCFFF; color : #484848; border: 5px dotted #fff; } </style>
♦ الشكل 8 ♦
<style> .post blockquote { border: 2px solid rgb(255, 204, 0); padding: 8px 10px; font-size: 120%; color: black; font-weight: bold; background-color: rgb(255, 255, 153); border-radius:20px 20px 0 20px; } </style>
♦ الشكل 9 ♦
<style> .post blockquote { background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1.2em; margin-left: 5%; margin-right: 5%; } </style>
♦ الشكل 10 ♦
<style> .post blockquote { margin: 0 20px; padding: 10px 20px 25px 20px; border-left: 10px dotted white; background-color: #f6ebc1; } </style>
♦ الشكل 11 ♦
blockquote{margin:5px 17px;padding:7px;color:#fff;background:rgba(47, 70, 107, 1)} ul,ol,dl{list-style-position:inside;font-weight:normal;list-style:none} .post blockquote { padding: 23px 33px 15px 33px; overflow: auto; max-height: 250px; background: rgb(243, 243, 247) !important; border-radius: 4px !important; border: 1px solid rgb(222, 222, 227) !important; border-radius: 4px; color: #2c3e50 !important; margin: 10px; text-align: left !important; direction: ltr; font-size: 14px; line-height: 1.7em; } .post blockquote a {color: #F8D300;} .post blockquote:before { text-align: center; position: relative; content: 'يمكنك تحديد كل ما هو موجود في الإطار التالي من أكواد'; background: rgba(255,255,255,1); left: 3px; right: 3px; top: -13px; font-size:18px; padding: 5px 20px; display: block; font-weight: 700; border-radius: 3px 3px 0 0; color: #2c3e50 !important; }
♦ الشكل 12 ♦
.post blockquote {padding: .5em 1em;border-left: 6px solid #FFAD00;border-right: 6px solid #FFAD00;background-color: #E1E1E1;text-align: center;direction: ltr;max-height: 408px;overflow: auto;border-radius:5px;}.post blockquote:hover {border-left: 6px solid #FF00F5;border-right: 6px solid #FF00F5;background-color: #DADADA;transition:.3s;}
♦ الشكل 13 ♦
.post blockquote {padding:5px;border:1px dashed;background-color:#DDDDDD;direction: ltr;text-align: left;height:200px;overflow-y:scroll;}.post blockquote p {margin: 0;padding: 0 0 15px;}.blockquote p {margin: 0;padding-top:10px;}
♦ الشكل 14 ♦
blockquote { border-bottom-left-radius: 6px; -webkit-bottom-left-radius: 6px; -moz-bottom-left-radius: 6px; -o-bottom-left-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-bottom-right-radius: 6px; -o-border-bottom-right-radius: 6px; margin: 0 0 20px; border-left: 30px solid #FC4F08; background-color: #302C2B; color: #B8B4AA; border-radius: 10px 20px 20px 10px; -webkit-border-radius: 10px 20px 20px 10px; -moz-border-radius: 10px 20px 20px 10px; -o-border-radius: 10px 20px 20px 10px; padding: 4% 2% 4% 3%; font-family: 'Voces', cursive; font-size: medium; text-align: left !important; direction: ltr !important; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } Pseudo ::after element
♦ الشكل 15 ♦
.post blockquote { margin: 15px 35px 15px 15px; padding: 10px; clear: both; list-style-type: none; background: #FFFBC6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLUST00u-xwG3hiH1ejz9K8R7QTIN-n3Sx60jxdAQTd3vL4nOTHNwgC_TQCkVDIvVgZ9SEEdnG-oeZvqTzUucPC1Ml83bdrJaajwOFANqEidt9ptS07tmOUY1tlwf1nOpXNoPEIUXikY5E/s320/cv-1.png) no-repeat right bottom; border-top: 1px solid #4977FF; border-right: 1px solid #5686FF; border-bottom: 1px solid #475FFF; border-left: 1px solid #5686FF; border-radius: 10px; box-shadow: 2px 3px 3px 1px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(255, 255, 255, 0.5) inset; height: 380px; overflow: scroll; overflow-x: hidden; direction: ltr; }
♦ الشكل 16 ♦
<style> .post blockquote { text-align:left; font: 16px/24px Arial, sans-serif; color: #555; padding: 0.5em 10px; margin: 1.5em 10px; } .post blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; border-radius: 25px; margin-right: 0.5em; vertical-align: -0.4em; display: block; height: 25px; width: 25px; } .post blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: right; position: relative; border-radius: 25px; margin-right: 1em; vertical-align: -0.5em; display: block; height: 25px; width: 25px; } .post blockquote:hover:after, blockquote:hover:before { background-color: #555; transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms; } </style>
♦ الشكل 17 ♦
<style> .post blockquote{ font-family: Georgia, Times, "Times New Roman", serif; font-size: 16px; border-top: solid 2px #dddddd; border-left: solid 2px #dddddd; border-right: solid 2px #dddddd; border-bottom: solid 2px #dddddd; margin: 1em 0px; padding: 1em 1em; font-family: Georgia, Times, "Times New Roman", serif; font-style: italic; font-size: 1em; min-height: 60px; } .post blockquote:before { display: block; float: left; content: "\201C"; font-size: 100px; margin-right: 10px; color: #fff; background-color: #03C9A9; padding: 15px 12px 5px 8px; width: 50px; height: 50px; line-height: 90px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .post blockquote cite { position: relative; display: block; text-align: right; margin-top: 5px; color: #999; } </style>
♦ الشكل 18 ♦
<style> .post blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify; border-left: 15px solid #c76c0c; border-right: 2px solid #c76c0c; -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; } .post blockquote::before{ content: "\201C"; /*Unicode for Left Double Quotes*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; position: absolute; left: 10px; top:5px; } .post blockquote::after{ content: ""; } .post blockquote a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; } .post blockquote a:hover{ color: #666; } .post blockquote em{ font-style: italic; } </style>
♦ قريبا اشكال اخرى ساعمل عليها ان شاء الله ♦
√ اتمنى من كل من مر على هذا الموضوع ان يترك كلمة شكر فى تعليق √
لا تعمل عندي اى واحدة
ردحذفالاضافات جربتها على قالبي كلها تعمل بدون مشكل
ردحذفيمكن المشكل في القالب للدي تستعمله قم بحدف الااكواد القديمة الخاصة بالصناديق وجرب تواصل معي على الصفحة ساساعدك
بالتوفيق
نرجو منك شرح فيديو درتها أكتر من مره لم تنجح ولم يتغير شيء
ردحذف