مع إضافات جديدة والتي يعد أكوادها قليلة جدا علي الأنترنيت والخاصة بمنصة البلوجر ، والتي تعد من الكماليات والجماليات التي قد تكون مطلوبة جدا لدي بعض صانعي المحتوي علي منصة البلوجر ، أو بعض الأشخاص الذين يرون أن هذه الميزة التي تكون متوفرة أفتراضيا علي قوالب البلوجر لا تعطي الشكل المطلوب اثناء إضافتها داخل المحتوي.
هذه الأضافة تسمي " بإقتباس فقرة " أو مايسمي ب "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 :
- شكل علامة إقتباس فقرة رقم 2 :
- شكل علامة إقتباس فقرة رقم 3 :
- شكل علامة إقتباس فقرة رقم 4 :
- شكل علامة إقتباس فقرة رقم 5 :
- شكل علامة إقتباس فقرة رقم 6 :
ليست هناك تعليقات:+
إرسال تعليق