أكتب إسم موقع أو شركة ..

الأربعاء، 29 أبريل 2015

6 طرق لاضافة كود اقتباس blockquote بطريقة احترافية لمدونات بلوجر


مع التطور الكبير الذي يشهده عالم الأنترنت من كل الجوانب بما فيه التصميم،تبقى الأدوات الافتراضية في تحرير رسائل بلوجر بسيطة ومملة بعض الشيئ من ناحية جمالية المظهر والاحترافية .


 فكثير منا يقدم على اقتباس فقرة ما أو اضافة كود لاي اضافة فيكون مجبرا على استخدام الأداة الافتراضية  لبلوجر 




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




كيفية إضافة علامة اقتباس فقرة في بلوجر باستخدام CSS:

1- تسجيل الدخول إلى لوحة تحكم بلوجر >>  قالب >>  تحرير HTML





2- قم بالبحث عن الوسم </head>
3- أضف الكود الذي ينسجم مع قالب مدونتك مباشرة قبل الوسم </head>
4- قم بالحفظ.
*النمط الأول :


الكود :

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



*النمط الثاني  :




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



النمط الثالث :



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


النمط الرابع :



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

النمط الخامس : 



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

النمط السادس : 

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


إذا كان لديك أي استفسار حول هذه الأنماط من حيث اضاضافتها أو تخصيصها لا تتردد في الاتصال بنا. نحن دائما فخورون بمساعدتك.
▩ مواضيع مقترحة :
هل إستفدت من هذا الموضوع ؟ من فضلك شاركه على :

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

جميع الحقوق محفوظة لــ: Azzoudz 2017-2013 ©