اجعل مسوده مدونتك اكثر جاذبيه

السلام عليكم ورحمه الله وبركاته
اليوم اريد ان اشارككم اليوم هذا الموضوع الحصرى وممكن ان يكون الاول فى مواضيع المدونات وهو عن كيف تضع مسوده مميزه فى مدونتك بلغه (Css , jQuery) وهذه الخاصيه من الاشياء الذى يغفلها المدونين وهذا يضفى بعض التميز لمدونتك وايضا بعض الاحتراف فى عالم التدوين والتميز فيه أيضا وهذه المسودات من اعمالى الشخصيه وأتمنى ان تنال اعجابكم ان شاء الله تعالى :] .

وهذا مثال للتوضيح وهذه مسوده مدونتى

والان نأتى لتركيب المسودات 

• أولا : نذهب الى المدونه -->  القالب -->  تحرير القالب .
• ثانيا : اكتب CTRL+ F داخل المربع الذى به الاكواد ونبحث عن هذا الكود             post blockquote أو هذا blockquote ثم تقوم بمسح اى كود يتحمل هذان الاسمان ثم تتبع الخطوات التاليه التى سأمليها عليك :] .
• ثالثا تحت كل شكل انت سوف تختاره يوجد كود تأخذه وتضعه فوق هذا الكود ]]></b:skin>

 أمثله عن المسودات 

 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;

الكود

.post blockquote{
overflow:auto;width:503px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://im34.gulfup.com/vlfA0.jpg) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.post blockquote:hover{
background : #000000 url(http://im35.gulfup.com/Zz7RR.jpg) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;

الكود

.post blockquote{
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#7A6417;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://im36.gulfup.com/DIcME.jpg) repeat-y top left;
border : 1px solid #D8C37D;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.post blockquote:hover{
border : 1px solid #D8C37D;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}

 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;

الكود

.post blockquote{

font-family: "Consolas", "Courier New", Courier, mono, serif;

color:#000000;

margin : 15px 35px 15px 15px;

padding : 15px 5px 10px 165px;

clear : both;

list-style-type : none;

background : #ffffff url(http://3.bp.blogspot.com/-3q8oheHzWaA/Tv7a1NqKabI/AAAAAAAACIA/gsSIuJClU3c/s1600/special-offer-01.jpg) repeat-y top left;

border : 1px solid #ffffff;

-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px

}

.post blockquote:hover{

background : #ffffff url(http://im38.gulfup.com/tUFpV.jpg) repeat-y top left;

color:#000000;

border : 1px solid #ffffff;

-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

}

 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;

الكود

.post blockquote{

overflow:auto;width:450px;height:153px;

font-family: "Consolas", "Courier New", Courier, mono, serif;

color:#848176;

margin : 15px 35px 15px 15px;

padding : 10px 10px 10px 35px;

clear : both;

list-style-type : none;

background : #000000  repeat-y top left;

border : 1px  solid #000000;

border-left:20px solid #ccc;

-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px

}

.post blockquote:hover{

overflow:auto;width:450px;height:153px;

background : #000000 url(http://im42.gulfup.com/D5Bdb.jpg) repeat-y top left;

color:#eee;

text-shadow:1px 1px 1px #000;

text-transform: capitalize;

border : 1px solid #000000;

border-left:20px solid #CCC;

-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

}

 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;

الكود

.post blockquote{
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 60px;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left;
border : 1px solid #ccc;
border-right:15px solid rgba(0, 0, 0, .100);
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
.post blockquote:hover{
overflow:auto;width:400px;height:auto;
background : #F5F3F3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left;
border : 1px solid #ccc;
border-right:15px solid rgba(0, 0, 0, .100);
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}

 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;

الكود

.post blockquote{

overflow:auto;width:400px;height:auto;

font-family: "Consolas", "Courier New", Courier, mono, serif;

margin : 15px 35px 15px 15px;

padding : 10px 10px 10px 35px;

clear : both;

color:000:

list-style-type : none;

background :#6D6C6A;

border : 1px solid #EEEEEE;

border-left:20px solid #000;

border-right:20px solid #000;

-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;

-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px;

-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

}

.post blockquote:hover{

background : #000;

color:#fff;

border : 1px solid #EEEEEE;

border-left:20px solid #6D6C6A;

border-right:20px solid #6D6C6A;

-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

}

 width:200px;

 color:#FFF;

 display:block;

 text-decoration:none;

 margin:0 auto;

الكود

.post blockquote{
color:#848176;
overflow:hidden;width:200px;height:300px;
background:black;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
border : 1px solid #000000;
border-left:10px solid #ccc;
border-right:10px solid #ccc;
list-style-type : none;
transition:width 2s;
text-position:fixed;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
box-shadow: 10px 10px 5px #888888;
}
.post blockquote:hover{
width:300px;
color:#fff;
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}

 width:200px;

 color:#FFF;

 display:block;

 text-decoration:none;

 margin:0 auto;

الكود

.post blockquote{
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibMFB8m_W6korsf9yXkDcdYkv_ONO85wCzUEgA2SuIsGsFHmYOPkg2CGWBHpfLl3OWCFyRZNvVQ2-HmAUsuhrE-75Zvni4dvgRZHdw8eJtKcb4R9jyHW5vXAUSe1mxSksNHuhhhSkHNbUO/s1600/code+%2528gj37765.blogspot.com.gif) repeat-y top left;
border-top : 1px solid #AAAAAA;
border-right : 1px solid #AAAAAA;
border-bottom : 1px solid #AAAAAA;
border-left : 1px solid #AAAAAA;
}

 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;

الكود

.post blockquote{
overflow:auto;width:570px;height:310px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 15px 15px 15px;
padding : 20px 10px 0px 35px;
clear : both;
color:#ffffff;
list-style-type : none;
background : #F7F7F7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Q9Yr1TNZmH-4LNfn1y-Wpnz0KL3h-ZpUq2mT86Mplop6MDVSM65BDRA9CJhklbmqXkYv13fZ6JmYUPebxD-gelWK6TlzjmGmFbJB0mdysYVkMRVKWV70sBG1VhgemTbIhJLPTFE3eUAq/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;
border : 1px solid #EEEEEE;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
.post blockquote:hover{
background : #FFFFFF url(http://im32.gulfup.com/smqkb.png) repeat-y top left;
border : 1px solid #EEEEEE;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}

 width:200px;
 color:#FFF;
 displa width:200px;
 color:#FFF;
 display width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
:block;
 text-decoration:none;
 margin:0 auto;
y:block;
 text-decoration:none;
 margin:0 auto;

الكود

.Code1{

margin : 15px 15px 15px 15px;

padding : 2px 15px 15px 15px;

clear : both;

font-family : Courier;

font-size:14px;

line-height: 1.4;

background : #9FCFFF ;

border-radius:5px;

overflow-x: auto;

border:1px solid #c4c4c4;

color : #111;

transition: background-color .777s;

-webkit-transition: background-color .777s;

-moz-transition: background-color .777s;

-o-transition: background-color .777s;

-ms-transition: background-color .777s;

}

.Code1:hover{

background : #0c991a;

color: #fff;

}

.Code1:active{

background-color: #F3BB5B;

color: #000;

}

.Code2 {

margin : 15px 15px 15px 15px;

padding: 10px 15px 10px 15px;

font-family : Courier;

font-size:14px;

line-height: 1.4;

background-color: #9FCFFF;

border-radius:5px;

overflow-x: auto;

border:1px solid #c4c4c4;

color : #111;

transition: background-color .777s;

-webkit-transition: background-color .777s;

-moz-transition: background-color .777s;

-o-transition: background-color .777s;

-ms-transition: background-color .777s;

}

.Code2:hover{

background-color: #0c991a ;

color: #fff;

}

.Code2:active{

background-color: #F3BB5B;

color: #000;

}

.Code3 {

border : 1px solid #c4c4c4;

border-radius: 5px;

overflow: auto;

font-family: "Trebuchet MS",sans-serif;

font-size:14px;

color : #111;

margin : 15px 0 15px 0;

padding : 10px 10px 10px 10px;

background : #9FCFFF;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

-moz-border-radius: 5px;

}

ثم تأخذ هذا الكود وتضعه فى صفحه الـ HTML 

 <div class="Code1">

َضع كودك هنا

</div>

أتمنى ان يكون عجبكم الشرح وشكرااا :] .

شاركه على فيسبوك شاركه على تويتر شاركه على جوجل بلس

عن Unknown