-->
U3F1ZWV6ZTMwMDc3NzE0MDA4X0FjdGl2YXRpb24zNDA3MzkwMDIyMDA=
recent
أخبار ساخنة

شرح كيفية إضافة إقتباس إحترافي

يعاني أصحاب مدونات بلوجر Blogger  من شكل أو إضافات قوالبهم القديمة او الكلاسيكية وذلك من حيث الواجهة الأمامية أو تصميم Css/Html حيث يتوفرون على أشكال للإقتباس غير جذّابة و قديمة وليست إحترافية ، سوف نرى في هذه التدوينة نقلاً عن موقع بلوجرسل
 أفضل 9 نماذج للإقتباس ”“ لتخصيص فقرة ما او كود لشرح المواضع التقنية على موقعك أو مدونتك.
حيث ســـتظهر بشكل إحترافي و جذّاب 


شرح كيفية إضافة إقتباس إحترافي




شرح كيفية إضافة إقتباس إحترافي



نبدأ بسم الله الرحمان الرحيم :
 أولاً :
أدخل على مدونتك واختر قالب ثم تحرير HTML


شرح كيفية إضافة إقتباس إحترافي

ثم اضغط على CTRL + R

بعد ظهور مربع البحث : اكتب هذا الوسم : </head>

جــيّد ;)

الآن قم بنسخ الكـود الذي يعجبك ضمن  المجموعة التالية من أكواد الإقتباس  الموجودين في الأسفل ، وقم بلــصقه مباشرة فوق وسم  </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(http://1.bp.blogspot.com/-JwOqUtOkIMo/VPBYi-16YdI/AAAAAAAAB1U/nBD6A0Y2cEA/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" 


اقتباس رقم 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"

اقتباس رقم 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"

اقتباس رقم 4
الكود :

 <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>


شكل الإقتباس الخامس "5"

اقتباس رقم 5
الكود :

<style>
.post blockquote {
background: #484B52 url(http://1.bp.blogspot.com/–pqu2SmmZEk/US-20cRpbtI/AAAAAAAAYx0/KabThwRB9LQ/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>


شكل الإقتباس السادس "6"

اقتباس رقم 6
الكود :

 <style>
.post blockquote {
margin : 0 10px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
color : #484848;
border: 5px dotted #fff;
}
</style>



شكل الإقتباس السابع "7"

اقتباس رقم 7
الكود :

 <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>


شكل الإقتباس الثامن "8"

اقتباس رقم 8
الكود :

<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>


شكل الإقتباس التاسع "9"

اقتباس رقم 9
الكـود :

<style>
.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 10px dotted white;
background-color: #f6ebc1;
}
</style>




ثم احفظ النـــموذج و مبروك عليك الإقتباس الإحتــرافي

***


و إن لم يتضح لك هذا الشرح أرجوك شاهد هذا الفيديو وشكراً






جميع الحقوق محفوظة للأهراس
مدونة الأهراس
تعديل المشاركة
author-img

HDZ.Co

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