معهد خبراء بلوجر - اداة ملاحظات هامة من تصميم خربوش للتصميم

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

http://3.bp.blogspot.com/-6-Sk7m32GU...bouche-bar.jpg

لقد قمت باضافة هته الاضافة تحت هيدر المدونة كما هو واضح للعيان و يمكنكم الاطلاع عليها مباشرة في رئيسية المدونة:

http://kharbouche.blogspot.com/

تم تصميم الاضافة بالاعتماد على 3 مكونات فقط و هي:

عنوان h2
فقرة p
زر انتقال botton

و هو الشيء الذي ساهم في كون الاضافة خفيفة جذا و جذابة يمكنك تركيب الاضافة من خلال تخطيط المدونة عن طريق اضافة اداة او يمكنك ان تضيفها في القالب مباشرة و هذا كود الاضافة:

اقتباس:

<div class='kharbouche-bar'>
<h2>ملاحظة هامة من خربوش للتصميم:</h2>
<p>تم توفير عدة وسائل لشراء قالب نبراس المصمم من طرف خربوش للتصميم و ذلك في إطار سياسة تقريب المستهلك من الخدمة التي نسعى الى توسيعها لتشمل مجالات اكبر من هذا</p>
<button><a href='http://kharbouche.blogspot.com/2014/02/blog-post_21.html'>انتقل للموضوع</a></button>
</div>
<style>
@font-face {
font-family: 'GTMR';
src: url('https://dl.dropboxusercontent.com/u/...ont.eot');
src: url('https://dl.dropboxusercontent.com/u/...font.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/...font.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/...bfont.ttf') format('truetype'); }
.kharbouche-bar {
float: left;
width:1123px;
margin: 15px 7px -32px 8px;
padding: 64px 110px 32px 1px;
background-image: url([IMG]http://4.bp.blogspot.com/-OAblh26rtEA/UxnYtc0Wr5I/AAAAAAAAEmo/oy1IjwwFE9Q/s1600/bg-text-bar.png);[/url]
background-repeat: no-repeat;
height: 75px;
}
.kharbouche-bar h2 {
color: #2c875e;
margin: -60px 34px -3px 0px;
}
.kharbouche-bar p {
float:right;
padding-left: 80px;
color:#4f4f4f;
font: 14px 'GTMR';
}
.kharbouche-bar button {
float: left;
padding: 10px 0px;
margin-top: -19px;
margin-left: 92px;
text-align: center;
font: normal 16px GTMR;
text-decoration: none;
border-radius: 5px;
transition:0.5s;
background: #FCB151;
}
.kharbouche-bar button a {
padding: 12px 60px;
margin: 4px;
text-align: center;
font: normal 16px GTMR;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition:0.5s;
}
.kharbouche-bar button a:hover{
background: #ccc;
box-shadow: 0 4px 0 #aaa;
transition:0.5s;
}
</style>

شرح تخصيص الاضافة وتعديلها:

ملاحظة هامة من خربوش للتصميم: غيره بعنوان مناسب لك

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

http://kharbouche.blogspot.com/2014/...-post_21.html: غيره برابط الموضوع الذي تود نشره في الملاحظة

@font-face {....: في حالة اردت اضافة خط احر ازل الكود كاملا واضف كود الخط الخاص بك

width:1123px: غير عرض الاضافة لتتناسب و مدونتك

[url]http://4.bp.blogspot.com/-OAblh26rtEA/UxnYtc0Wr5I/AAAAAAAAEmo/oy1IjwwFE9Q/s1600/bg-text-bar.png[/IMG] : في حال اردت تغيير خلفية الاضافة غيرها برابط خلفية من اختيارك.

و بهذا تكون جل تخصيصات الاضافة قد انتهت و بذلك ينتهي الموضوع لكن في حال وجود مشكل او اقتراح للاضافة المرجو ترك تعليق بذلك و سوف نرد عليه باذن الله.