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




لقد قمت باضافة هته الاضافة تحت هيدر المدونة كما هو واضح للعيان و يمكنكم الاطلاع عليها مباشرة في رئيسية المدونة:
http://kharbouche.blogspot.com/

تم تصميم الاضافة بالاعتماد على 3 مكونات فقط و هي:
  1. عنوان h2
  2. فقرة p
  3. زر انتقال 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><!--/ .kharbouche-bar -->
<style>
@font-face {
font-family: 'GTMR';
src: url('https://dl.dropboxuser*******.com/u/...ont.eot');
src: url('https://dl.dropboxuser*******.com/u/...font.eot?') format('embedded-opentype'),
url('https://dl.dropboxuser*******.com/u/...font.woff') format('woff'),
url('https://dl.dropboxuser*******.com/u/...*font.ttf') format('truetype'); }
.kharbouche-bar {
float: left;
*****:1123px;
margin: 15px 7px -32px 8px;
padding: 64px 110px 32px 1px;
background-image: url(http://4.bp.blogspot.com/-OAblh26rtE...****-bar.png);
background-repeat: no-repeat;
******: 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;
****-align: center;
font: normal 16px GTMR;
****-decoration: none;
border-radius: 5px;
transition:0.5s;
background: #FCB151;
}
.kharbouche-bar button a {
padding: 12px 60px;
margin: 4px;
****-align: center;
font: normal 16px GTMR;
color: #fff;
****-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 {....: في حالة اردت اضافة خط احر ازل الكود كاملا واضف كود الخط الخاص بك

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

http://4.bp.blogspot.com/-OAblh26rtE...g-****-bar.png : في حال اردت تغيير خلفية الاضافة غيرها برابط خلفية من اختيارك.

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

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top