إنشاء الملاحظات بطريقة جديدة و احترافية

إنشاء ملاحظات و مقدمات احترافية داخل المواضيع في بلوجر بطريقة جديدة و مختلفة

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

معاينة

طريقة التركيب

ادخل إلى لوحة تحكم المدونة
انتقل إلى قالب
ثم انقر على تحرير HTML

ابحث عن الوسم ]]> و اضف الكود التالي فوقه

#mudwnp1 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp1:hover {
background: #00a8ad url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 100% 0px;
color: #fff;
transition: 1s;
}
#mudwnp2 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp2:hover {
background: #ab2e2e url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnp3 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp3:hover {
background: #788081 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnp4 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp4:hover {
background: #f39c12 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnp5 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp5:hover {
background: #27ae60 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnp6 {
margin: 3px -15px 3px 0px;
color: #fff;
font: 15px Droid Arabic Kufi,tahoma;
padding: 8px 67px 0px 0;
height: 28px;
width: 100%;
background: #2c3e50 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 100% 0px;
text-align: right;
transition: 1s;
overflow: hidden;
}
#mudwnp6:hover {
background: #278879 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 100% 0px;
color: #fff;
}
#mudwnpd2 a {
background: #FCB151;
box-shadow: 0 4px 0 #EB911E;
padding: 12px 25px;
margin: 4px;
text-align: center;
font: normal 15px Droid Arabic Kufi;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: 0.5s;
}
#mudwnpd2 a:hover{
background: #ccc;
box-shadow: 0 4px 0 #aaa;
transition:0.5s;
}
#mudwnpd2 {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 12px;
margin-top: 8px;
}
#mudwnpd a {
padding: 12px 25px;
margin: 7px;
text-align: center;
font: normal 15px Droid Arabic Kufi;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: 0.5s;
background: #7EB3EC;
box-shadow: 0 4px 0 #6B97C7;
}
#mudwnpd a:hover{
background: #ccc;
box-shadow: 0 4px 0 #aaa;
transition:0.5s;
}
#mudwnpd {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 12px;
margin-top: 8px;
}

طريقة استخدام الملاحظات

عند كتابة موضوع انتقل إلى وضع HTML و ضع احد هذه الاكواد على حسب الشكل الذي تريده

هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة

اي سؤال او استفسار لا تترد بوضعه في تعليق بالتوفيق

Unknown

اضف تعليق

اضافات بلوجر, دروس بلوجر

الاثنين، 5 يناير 2015

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

إنشاء الملاحظات بطريقة جديدة و احترافية

طريقة التركيب

طريقة استخدام الملاحظات

عن الكاتب مدون محترف

مقالات قد تهمك