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

يعاني أصحاب مدونات بلوجر 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"

الكود :

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

الكود :

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

الكود :

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

الكود :

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

شكل الإقتباس السابع "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"

الكود :

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