اجعل اكواد Html وcss داخل نودباد في بلوجر

اليوم تقدم احترافي للشروحات طريقة جديدة لتغير شكل اطار الاكواد عكس تغير شكل الاقتباس الى اشكال مملة قديمة اليوم سوف اقدم طريقة جديدة لتغير محيط الاكواد وهو مشابه للنودباد مثل الكمبيوتر ولكن بخاصية الcss ذات شكل انيق ومنسق للاكواد وسهل التركيب تابع معي 

التركيب

1. قم بأخذ نسخة احتياطية واستخدم هذه الخاصية دائما للحافظ على مدونتك (انا دائما استخدمها فى تعديل اى شئ بالمدونة)


2. لوحة التحكم مدونتك 


3. اختر قالب 


4. تحرير HTML

ابحث عن

 ]]></b:skin>

ثم اضف هذا الكود قبله مباشراً

body {    font: 12px/20px 'Lucida Grande', Verdana, sans-serif;}.notepad, .notepad:before, .notepad:after {    background-color: white;    background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#e8e8e8 1px, transparent 1px);    background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#e8e8e8 1px, transparent 1px);    background-image: -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#e8e8e81px, transparent 1px);    background-image: linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#e8e8e8 1px,transparent 1px);    background-size: 1px 1px, 1px 1px, 23px 23px;    background-repeat: repeat-y, repeat-y, repeat;    background-position: 22px 0, 24px 0, 0 50px;    border-radius: 2px;    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);}.notepad {    position: relative;    margin: 5px auto;    padding: 0 23px 14px 35px;    width: 300px;    line-height: 23px;    font-size: 11px;    color: #666;}.notepad p, .notepad blockquote {    margin-bottom: 23px;}.notepad :last-child {    margin-bottom: 0;}.notepad:before, .notepad:after {    content: '';    position: absolute;    z-index: -1;    top: 100%;    left: 3px;    right: 3px;    margin-top: -2px;    height: 4px;    background-size: 1px 1px, 1px 1px, 0 0;}.notepad:before {    z-index: -2;    left: 6px;    right: 6px;    height: 6px;    background-color: #eee;}.notepad-heading {    position: relative;    margin: 0 -23px 14px -35px;    height: 38px;    background: #14466a;    border-radius: 2px 2px 0 0;    background-image: -webkit-linear-gradient(top, #226797, #0c3452);    background-image: -moz-linear-gradient(top, #226797, #0c3452);    background-image: -o-linear-gradient(top, #226797, #0c3452);    background-image: linear-gradient(to bottom, #226797, #0c3452);    -webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;    box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;}.notepad-heading > h2 {    line-height: 36px;    font-size: 14px;    color: white;    text-align: center;    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);}.notepad-heading:before, .notepad-heading:after {    content: '';    position: absolute;    bottom: 2px;    left: 1px;    right: 1px;    height: 0;    border-top: 1px dashed #617c90;    border-color: rgba(255, 255, 255, 0.35);}.notepad-heading:after {    bottom: 3px;    border-color: #071c2c;    border-color: rgba(0, 0, 0, 0.5);}

ثم عند اضافة مشاركة جديدة قم بوضع هذا الكواد بها 

<div class="notepad"><div class="notepad-heading"><h2>LABSTRIKE - Technology Blog</h2></div><blockquote>Your Text Here</blockquote>

مع تغير ما يلزم

منشورة في: اضافات بلوجر, بلوجر