-->

أفضل الأشكال الإحترافية لعلامة إقتباس فقرة يمكنك الأن إضافتها الي مدونتك علي البلوجر مجانا



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

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

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

طريقة إضافة علاماة الإقتباس الي مدونة البلوجر

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

الخطوة 1 : قم بالدخول الي منصة البلوجر الخاصة بك عن طريق الجيميل المسجل من خلاله وقم بأخذ نسخة إحتياطية للقالب الموجود قبل التعديل عليه وحفضه علي جهازك وذلك بالذهاب الي "إعدادات/المظهر/نسخ إحتياطي-إستعادة"


الخطوة 2 : الأن ندخل الي خيار "تعديل HTML" من نفس المسار بعد أخذ نسخة إحتياطية للقالب ونفتح محرر الاأكواد الخاص بمنصة البلوجر لإضافة الأكواد المطلوبة لتغيير شكل "علامة إقتباس"

- نضغط علي الأزرار داخل لوحة مفاتيح الحاسوب داخل محرر الأكواد علي الزرين "cmd+F علي الماك" أو الزرين "  علي الويندوز" ليضهر لنا خيار البحث داخل محرر الاكواد علي منصة البلوجر .



- نبحث عن الكود "<b:skin>" وذلك بوضعه في خانة البحث ونضغط الي الزر "enter" من لوحة المفاتيح .
- ننزل الي الأسف حتي نجد الكود الذي يغلق الوسم "]]></b:skin>" .
- الأن كل الأكواد الخاصة بعلامة إقتباس فقرة سوف نضعه فوق الوسم "]]></b:skin>" ، وليس تحته .
الخطوة 3 : بعد إضافة الأكواد الخاصة بعلامة إقتباس فقرة إضغط علي الخيار "حفظ المظهر" ، وشاهد الأضافة من رابط التدوينة التي قمت بإضافة إقتباس فيها .
ملاحظات مهمة جدايمنع منعا باتا إضافة إثنين من الأكواد الي القالب ، لأنه سوف يعطيك تعارض في القالب عند قرائة الأكواد ، إذا أضفت الكود البرمجي الموجود في موقعنا الي قالبك ، وأعطاك خطأ في حفض الأكواد ، فهاذا يعني أن القالب يحتوي علي أسطر الأوامر الخاص بميزة الأقتباس إفتراضيا في القالب ، لذلك يجب عمل تعطيل للأكود القديم وذلك بإضافة هذين الأمرين الي الكود القديم بالشكل التالي ./* كود الإقتباس الإفتراضي */
الأنماط المتوفرة لعلامة إقتباس فقرة ;

يمكنك إستخدام أي من أكواد CSS التالية لتخصيص نمط blockquote الافتراضي لمدونتك الإلكترونية علي مدونة البلوجر، في الواقع ، ستعمل هذه الأنماط أيضًا مع أي صفحات CMS أو HTML أخرى أيضًا ، لذا اختر طريقتك المرغوبة واجعل مدونتك أكثر احترافية وجذب الأنظار .
- شكل علامة إقتباس فقرة رقم 1 :


- كود الإضافة

blockquote {font: 16px/24px Arial, sans-serif;text-align:left;color: #666;margin: 15px 10px;padding: 15px 10px;}
blockquote:before {background: #ddd;text-align: center;height: 25px;content: open-quote;float: left;line-height: 42px;border-radius: 25px;font-size: 24pt;color: #fff;vertical-align: -0.5em;position: relative;margin-right: 0.5em;display: block;width: 25px;}
blockquote:after {display: block;text-align: center;color: #fff;float: right;border-radius: 25px;vertical-align: -0.5em;content: close-quote;font-size: 24pt;line-height: 42px;background: #ddd;position: relative;margin-right: 1em;width: 25px;height: 25px;}
blockquote:hover:after, blockquote:hover:before {transition: all 350ms;background-color: #555;-moz-transition: all 350ms;-o-transition: all 350ms;-webkit-transition: all 350ms;}
- شكل علامة إقتباس فقرة رقم 2 :


- كود الإضافة

blockquote {
background:url(https://4.bp.blogspot.com/-ZUe4vndy1Og/WYQF-1CpfFI/AAAAAAAAAHQ/RDg_SfSN7twv7wbrKT-zjnBsh1tZwlEYQCLcBGAs/s1600/bo-blockquote.png) no-repeat;
font-size:15px;text-align:left;color: #555;
border: dashed 1px #eee;margin: 25px 35px;padding: 20px 30px 30px 40px;}
- شكل علامة إقتباس فقرة رقم 3 :


- كود الإضافة

blockquote{border-left: 15px solid #c76c0c;font-family: Georgia, serif;font-size:15px;text-align: justify;background: #fff;line-height: 1.2;
display:block;margin: 0 0 20px;padding: 15px 20px 15px 45px;position: relative; font-size: 16px;color: #666;
border-right: 2px solid #c76c0c;box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;-moz-box-shadow: 2px 2px 15px #ccc;}
blockquote::before{font-size: 50px;position: absolute;color: #999;left: 10px;top:5px;font-weight: bold;content: "1C";}
blockquote a{cursor: pointer;color: #c76c0c;text-decoration: none;background: #eee;padding: 0 3px;}
blockquote a:hover{color: #555;}
- شكل علامة إقتباس فقرة رقم 4 :


- كود الإضافة

blockquote:before, blockquote:after{content: "";}
blockquote{margin: 0 2em;font-size:16px;line-height:22px;text-align:left;quotes: "" "";border-left:3px solid #737e7e;padding-left:10px;}
- شكل علامة إقتباس فقرة رقم 5 :


- كود الإضافة

blockquote {
background: #f9f9f9;margin: 10px 20px;text-align:left;font-size:16px;
border: 1px solid #d2d2d2;
color: #555;padding: 24px;font-style: italic;}
- شكل علامة إقتباس فقرة رقم 6 :


- كود الإضافة

blockquote {font-family: "Merriweather", Georgia, serif;font-style: italic;
padding-left: 35px;padding: 17px 58px 20px 55px;font-size: 16px;text-align:left;font-weight: 300;color: #333;background: #F2E4A0;margin: 21px 30px;}
blockquote:before {content: "#";margin-left: -35px;line-height: 1.33;float: left;font-weight: 700;font-style: normal;font-size: 25px;color: #111;}
- شكل علامة إقتباس فقرة رقم 7 :


- كود الإضافة

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{padding:15px;margin-left:0;border:1px solid #d8d8be;
background:lightyellow;font-style:italic;text-align:left;font-family:Georgia;}
blockquote:after{font-family:FontAwesome;content:'\f10e';display:inline-block;font-weight:500;
font-style:normal;line-height:1;-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;color:#999985;margin-left:10px;}
blockquote:before{content:'\f10d';font-style:normal;display:inline-block;font-family:FontAwesome;
line-height:1;-webkit-font-smoothing:antialiased;margin-right:10px;font-weight:500;
color:#999985;-moz-osx-font-smoothing:grayscale;}
- شكل علامة إقتباس فقرة رقم 8 :


- كود الإضافة

blockquote {
color: #0000fe;text-align:right;border-left:5px solid #ff0000;
padding: 21px;line-height: 20px;
margin: 30px 40px;float: left;}
- شكل علامة إقتباس فقرة رقم 9 :


- كود الإضافة

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{ font-size: 16px; text-align:right; height: auto; margin: 0px; font-family: 'Roboto Slab', serif;
padding: 20px; font-style:italic; background: #F8F8F8; overflow: hidden;}
blockquote:before {content: "\f10d"; color: #00bf8f; margin-right: 6px; font-family: fontawesome;}
blockquote:after {font-family: fontawesome; content: "\f10e"; margin-left: 6px; color: #00bf8f;}
- شكل علامة إقتباس فقرة رقم 10 :


- كود الإضافة

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#f4fefe;padding:25px;border:1px solid #eee;text-align:justify;position:relative;
font-weight:500;clear:both;font-style:italic;}
blockquote:before{color:#0202fe;position:absolute;line-height:1;font-size:25px;z-index:0;
transition:.2s ease-in;font-family:FontAwesome;left:-18px;top:-21px;font-style:normal;padding:7px;content:"\f10d";border:1px solid #ddd}
blockquote:after{content:"\f10e";border:1px solid #ddd;position:absolute;font-size:25px;color:#0202fe;z-index:0;
font-family:FontAwesome;line-height:1;bottom:-21px;right:-18px;font-style:normal;transition:.2s ease-in;padding:7px;}
- شكل علامة إقتباس فقرة رقم 11 :


- كود الإضافة

blockquote{margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:'';position:absolute;top:0;bottom:0;left:20px;border:4px solid rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}
- شكل علامة إقتباس فقرة رقم 12 :


- كود الإضافة

blockquote {
border-left:2px dashed #fe0200;color:#171467;font-size:14px;
line-height:18px;font-style:italic;
text-align:justify;margin:15px 30px;padding-left:20px;
font-family:Georgia,"Times New Roman",Times,serif;}
- شكل علامة إقتباس فقرة رقم 13 :


- كود الإضافة

blockquote{quotes:none;margin:1.5em 0;text-align:right;font-size:16px;}
blockquote a{color:#34495f;}
blockquote{display:block;border-left:6px solid rgba(2,2,2,0.4);border-radius:3px;position:relative;
color:#5c5544;background-color:#f2dca8;padding:20px 15px 20px 25px;margin:.75em 0;}
- شكل علامة إقتباس فقرة رقم 14 :


- كود الإضافة

blockquote {
font-family: Georgia, serif;font-style: italic;background-color:#f5f5f5;
background: url(https://4.bp.blogspot.com/-apuX-9ARUao/WYTQg7l4jVI/AAAAAAAAAHg/soRgkjsn0XEm_EKv3Phqepp4k-w8ppIFACLcBGAs/s1600/quote-icon.png) 0 0 no-repeat;
padding-left:40px;padding-top:10px;margin:1em 0;}
- شكل علامة إقتباس فقرة رقم 15 :


- كود الإضافة

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote { margin: 20px 0; color: #666; border: 1px solid #e1e1e1; padding: 20px; background: #f6f6f6; }
blockquote:before {text-align:left;margin-right: 3px; font-family: fontawesome; content: "\f10d"; color: #FF5353; }
blockquote:after { content: "\f10e"; font-family: fontawesome; margin-left: 5px; color: #FF5353; }
- شكل علامة إقتباس فقرة رقم 16 :


- كود الإضافة

blockquote{text-align:right;position:relative;display:block;background-color:#FCE5AE;color:#555555;
border-radius:4px;padding:10px 15px;margin:.75em 0;}blockquote a{color:#34495e;}
blockquote:before{height:0;content:"";width:0;position:absolute;left:15px;bottom:100%;
border:7px solid transparent;border-color:transparent transparent #FCE5AE}
- شكل علامة إقتباس فقرة رقم 17 :


- كود الإضافة

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{margin-left:0;font-style:italic;font-weight:500;font-size:14px;padding:0px;
padding-left:60px;margin:40px 0px;position:relative;}
blockquote:before {content:"\f10d";font-family:FontAwesome;text-align:left;font-size:19px;
line-height:20px;position:absolute;color:#fff;background:#eee;padding:10px;
left:0;top:0;}blockquote:hover:before {color: blue;}
- شكل علامة إقتباس فقرة رقم 18 :


- كود الإضافة

blockquote {position: relative;
display: block;border-left: 5px solid #21610B;
padding: 1.5em 1.5em 1.5em 3.5em;border-right: 2px dashed #21610B;margin: 0 0 1.5em;}
blockquote::before {position: absolute;font-size: 62px;font-weight: bold;
content: ">";line-height: 1;top: 10px;left: 10px;}
- شكل علامة إقتباس فقرة رقم 19 :


- كود الإضافة

blockquote{border-right:5px solid #fe9696;background:#FFD4A1;
text-align:right;
margin:20px 30px;padding:20px;}
- شكل علامة إقتباس فقرة رقم 20 :


- كود الإضافة

blockquote {font-family: Georgia, serif;border-left:5px solid #FF7F01;line-height: 1.45;margin: 0.25em 2em;font-size: 14px;
font-style: italic;padding: 1.25em 40px;position: relative;background:#4b8baf;color: #ffffff;}
إضافات أخري مدفوعة 1$ الدفع (paypal / bitcoin)

- شكل علامة إقتباس فقرة رقم 1 :

- شكل علامة إقتباس فقرة رقم 2 :


- شكل علامة إقتباس فقرة رقم 3 :


- شكل علامة إقتباس فقرة رقم 4 :


- شكل علامة إقتباس فقرة رقم 5 :


- شكل علامة إقتباس فقرة رقم 6 :

ليست هناك تعليقات