الحلقة 32: مربعات لكتابة تنبية او ملاحظة او تحذير لمدونات بلوجر

العودة للصفحة الرئيسية » بلوجر » الحلقة 32: مربعات لكتابة تنبية او ملاحظة او تحذير لمدونات بلوجر

الحلقة 32: مربعات لكتابة تنبية او ملاحظة او تحذير لمدونات بلوجر

شاهد:

السلام عليكم ورحمة الله وبركاته

اولا : اذهب الى لوحة التحكم - القالب - تحرير Html

ابحث عن ]]></b:skin>

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

<style type="text/css"><br /><br />/* Shortcode - AA9.SA */<br />/* ملاحظة */<br />.note {<br />    padding: 5px;<br />    color: #666;<br />    border: 1px solid #e6c555;<br />    direction: rtl;<br />    -moz-border-radius-bottomright: 5px;<br />    -moz-border-radius-bottomleft: 5px;<br />    -moz-border-radius-topleft: 5px;<br />    -moz-border-radius-topright: 5px;<br />    -webkit-border-bottom-right-radius: 5px;<br />    -webkit-border-bottom-left-radius: 5px;<br />    -webkit-border-top-left-radius: 5px;<br />    -webkit-border-top-right-radius: 5px;<br />    border-top-left-radius: 5px;<br />    border-top-right-radius: 5px;<br />    border-bottom-right-radius: 5px;<br />    border-bottom-left-radius: 5px;<br />    width: 60%;<br />    margin-right: auto;<br />    margin-left: auto;<br />    margin-top: 10px;<br />    margin-bottom: 10px;<br />    background: #ffffcc url('http://static.tumblr.com/zjltkmo/aHomducon/note.png') no-repeat 99% center;<br />}<br />.note p {<br />    padding-right: 50px;<br />    padding-top: 8px;<br />    text-shadow:1px 1px 0px #ffffde;<br />    color: #cdaf4b;<br />}<br /><br /><br />/* تحذير */<br />.warning {<br />    padding: 5px;<br />    color: #c31b00;<br />    border: 1px solid #ff9999;<br />    direction: rtl;<br />    -moz-border-radius-bottomright: 5px;<br />    -moz-border-radius-bottomleft: 5px;<br />    -moz-border-radius-topleft: 5px;<br />    -moz-border-radius-topright: 5px;<br />    -webkit-border-bottom-right-radius: 5px;<br />    -webkit-border-bottom-left-radius: 5px;<br />    -webkit-border-top-left-radius: 5px;<br />    -webkit-border-top-right-radius: 5px;<br />    border-top-left-radius: 5px;<br />    border-top-right-radius: 5px;<br />    border-bottom-right-radius: 5px;<br />    border-bottom-left-radius: 5px;<br />    width: 60%;<br />    margin-right: auto;<br />    margin-left: auto;<br />    margin-top: 10px;<br />    margin-bottom: 10px;<br />    background: #ffcccc url('http://static.tumblr.com/zjltkmo/blvmdud1n/warning.png') no-repeat 99% center;<br />}<br />.warning p {<br />    padding-right: 50px;<br />    padding-top: 10px;<br />    color: #a26060;<br />    text-shadow:1px 1px 0px #ffdddd;<br />}<br /><br /><br />/* معلومات */<br />.info {<br />    padding: 5px;<br />    color: #00aeff;<br />    border: 1px solid #68a2cf;<br />    direction: rtl;<br />    -moz-border-radius-bottomright: 5px;<br />    -moz-border-radius-bottomleft: 5px;<br />    -moz-border-radius-topleft: 5px;<br />    -moz-border-radius-topright: 5px;<br />    -webkit-border-bottom-right-radius: 5px;<br />    -webkit-border-bottom-left-radius: 5px;<br />    -webkit-border-top-left-radius: 5px;<br />    -webkit-border-top-right-radius: 5px;<br />    border-top-left-radius: 5px;<br />    border-top-right-radius: 5px;<br />    border-bottom-right-radius: 5px;<br />    border-bottom-left-radius: 5px;<br />    width: 60%;<br />    margin-right: auto;<br />    margin-left: auto;<br />    margin-top: 10px;<br />    margin-bottom: 10px;<br />    background: #bfe4f9 url('http://static.tumblr.com/zjltkmo/oQamdud2b/info.png') no-repeat 99% center;<br />}<br />.info p {<br />    padding-right: 50px;<br />    color: #5487a4;<br />    padding-top: 8px;<br />    text-shadow:1px 1px 0px #d8f0fe;<br />}<br /><br /><br /><br />/* جديد */<br />.new {<br />    padding: 5px;<br />    color: #00aeff;<br />    border: 1px solid #dadada;<br />    direction: rtl;<br />    -moz-border-radius-bottomright: 5px;<br />    -moz-border-radius-bottomleft: 5px;<br />    -moz-border-radius-topleft: 5px;<br />    -moz-border-radius-topright: 5px;<br />    -webkit-border-bottom-right-radius: 5px;<br />    -webkit-border-bottom-left-radius: 5px;<br />    -webkit-border-top-left-radius: 5px;<br />    -webkit-border-top-right-radius: 5px;<br />    border-top-left-radius: 5px;<br />    border-top-right-radius: 5px;<br />    border-bottom-right-radius: 5px;<br />    border-bottom-left-radius: 5px;<br />    width: 60%;<br />    margin-right: auto;<br />    margin-left: auto;<br />    margin-top: 10px;<br />    margin-bottom: 10px;<br />    background: #f7f7f7 url('http://static.tumblr.com/zjltkmo/yrAmdud2z/new.png') no-repeat 99% center;<br />}<br />.new p {<br />    padding-right: 50px;<br />    color: #5487a4;<br />    padding-top: 8px;<br />    text-shadow:1px 1px 0px #d8f0fe;<br />}<br /><br /><br /><br /><br />/* تحميل */<br />.download {<br />    padding: 5px;<br />    color: #666;<br />    border: 1px solid #c2d7a1;<br />    direction: rtl;<br />    -moz-border-radius-bottomright: 5px;<br />    -moz-border-radius-bottomleft: 5px;<br />    -moz-border-radius-topleft: 5px;<br />    -moz-border-radius-topright: 5px;<br />    -webkit-border-bottom-right-radius: 5px;<br />    -webkit-border-bottom-left-radius: 5px;<br />    -webkit-border-top-left-radius: 5px;<br />    -webkit-border-top-right-radius: 5px;<br />    border-top-left-radius: 5px;<br />    border-top-right-radius: 5px;<br />    border-bottom-right-radius: 5px;<br />    border-bottom-left-radius: 5px;<br />    width: 60%;<br />    margin-right: auto;<br />    margin-left: auto;<br />    margin-top: 10px;<br />    margin-bottom: 10px;<br />    background: #e6f6cc url('http://static.tumblr.com/zjltkmo/7Lpmdud3k/download.png') no-repeat 99% center;<br />}<br />.download p {<br />    padding-right: 50px;<br />    color: #4a60b7;<br />    text-shadow:1px 1px 0px white;<br />    padding-top: 5px;<br />}<br />.download p a {<br />    color: #70983f;<br />    text-shadow:1px 1px 0px #efffdc;<br />    text-decoration: none;<br />}<br />.download p a:hover {<br />    color: #486623;<br />    text-shadow:1px 1px 0px #efffdc;<br />}  <br /><br /></style>

لوضع مربع الملاحظة

عند كتابة مقال ضع الكود التالي

<div class="note"><p> ضع الكلام هنا </p></div>

لوضع مربع المعلومة

عند كتابة المقال ضع الكود التالي

<div class="info"><p>ضع الكلام هنا</p></div>

لوضع مربع التحذير

عند كتابة المقال ضع الكود التالي

<div class="warning"><p> ضع الكلام هنا </p></div>

لوضع مربع التحميل

عند كتابة المقال ضع الكود التالي

<div class="download"><p>ضع الكلام هنا</p></div>

0 التعليقات:

إرسال تعليق