اضافة اقسام مميزة بشكل انيق

الكاتب بتاريخ عدد التعليقات : 9
مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب في درس جديد على المدونة وهو اضافة من اضافات المدونة الرائعة والتي يمكنك الاطلاع عليها عن طريق الدخول الى قسم "إضافات بلوجر" الاضافة اليوم سوف تكون عبارة عن اضافة اقسام مميزة بشكل انيق وبالتحديد بشكل ويب نايت والبعداني فهي اضافة رائعة تتطيع وضع مثلا اقسام المدونة وهي مكونة من 4 اقسام وتستطيع وضع عنوان للقسم وتستطيع وضع شرح لهذا القسم ايضا ورابط له :) الان ندخل الى شرح التركيب لن اطيل عليكم ^_^
طريقة التركيب
1-ندخل القالب ثم تحرير html
2-ونضع الكود التالي فوق ]]></b:skin>
.container {
margin-left: auto;
margin-right: auto;
}
.container {
width: 1170px;
}
.grid_3 {
width: 270px;
}
.more_btn:hover {
background: none repeat scroll 0% 0% #000 !important;
color: #FFF;
}
.container:before, .container:after {
display: table;
content: "";
line-height: 0;
}
.txt_cntr {
text-align: center;
}
.row {
  margin-right: -30px;
}
.row:before, .row:after {
display: table;
content: "";
line-height: 0;
}
.g-icon {
font-size: 56px;
width: 120px;
height: 120px;
border-radius: 50%;
margin-top: -36px;
position: relative;
z-index: 999999;
text-align: center;
margin-left: auto;
margin-right: auto;
background: none repeat scroll 0% 0% rgb(248, 247, 242);
}
.g-icon i{
margin-top: 30px;
}
.line1 {
position: absolute;
display: inline-block;
width: 100%;
height: 13px;
right: 0px;
top: -13px;
background: #F97E76;
}
h2 {
color: #767676;
margin-top: 17px !important;
font-size: 23px;
font-weight: 700;
font-family: droidkufi-bold, tahoma;
}
.txt1 {
  font-family: droidkufi-bold, tahoma;
color: #939393;
margin-top: 27px;
}
.bg2 {
background: none repeat scroll 0% 0% #66CDBB !important;
}
.bg3 {
background: #8FBC8F !important;
}
.bg4 {
background: none repeat scroll 0% 0% #DDBD30 !important;
}
.txt2 {
font: normal 14px Electrolize,ge_ss_threeregular;
color: #787878;
margin-top: 35px;
padding: 0 12px;
direction: rtl;
}
.txt_cntr {
text-align: center;
}
.more_btn {
display: inline-block;
margin-top: 40px;
padding: 11px 23px;
background: #F97E76;
color: #FFF;
text-decoration: none;
font-size: 16px;
border-radius: 3px;
}
.pos_rel {
position: relative;
}
.pos_rel {
position: relative;
background: #F8F7F2;
padding: 0px 0px 25px;
}
[class*="grid_"] {
float: right;
min-height: 1px;margin-right: 30px;
}
3-ثم نقوم بوضع كود Html هذا في المكان الذي نريد وضع الاداة فيه مثلا فوق الفوتر او تحت المواضيع او اي شئ كهذا واذا لم تعرف ضع رابط مدونتك في تعليق ومكان الذي تريد وضعه فيه وانا سوف اعطيك الكواد المناسب
<div class='container'>
<div class='row txt_cntr'>
<div class='grid_3 pos_rel wow flipInX animated' data-wow-delay='0.8s' style='visibility: visible;-webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s;'>
<div class='g-icon'>
<i class='fa fa-user' style='color: #F97E76;'/>
</div>
<div class='line1'/>
<h2>تصميم باحترافيه</h2>
<p class='txt1'>تمتع باناقة المظهر</p>
<p class='txt2'>نتميز بالافكار الجديدة والمتنوعة باستخدام أحدث البرمجيات وبتقنيات مواكبه للعصر الحديث التي ستبهر زوار موقعك حيث يكون له طابع خاص بلمسات وفنون احترافيه
</p>
<a class='more_btn' href='/'>تقدم بطلبك</a>
</div>
<div class='grid_3 pos_rel jalal wow bounceInRight animated' data-wow-delay='0.6s' style='visibility: visible;-webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;'>
<div class='g-icon'>
<i class='fa fa-tags' style='color: #66CDBB;'/>
</div>
<div class='line1 bg2'/>
<h2>قوالب متجاوبه</h2>
<p class='txt1'>تصميمك متجاوب مع كل الاجهزه</p>
<p class='txt2'>التصميم المتجاوب يجعل من موقعك اكثر انسيابيه ووضوح كما انه يجعله متناسق مع جميع انواع مقاسات شاشات الاجهزه الذكيه (موبايل , تابلت , ايباد )</p>
<a class='more_btn bg2' href='/'>تقدم بطلبك</a>
</div>
<div class='grid_3 pos_rel jalal wow bounceInLeft animated' data-wow-delay='0.6s' style='visibility: visible;-webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;'>
<div class='g-icon'>
<i class='fa fa-bullhorn' style='color:#8FBC8F;'/>
</div><div class='line1 bg3'/>
<h2>دعم فني متواصل</h2>
<p class='txt1'>الدعم الفني الخاص بمدونات بلوجر</p>
<p class='txt2'>
نعمل على تقديم خدمات مميزه من خلال حل جميع المشاكل والعوائق التي تصادف مواقع عملاءنا الكرام والعمل على تقديم المشورة وحل كافة المشاكل ان شاء الله.
</p>
<a class='more_btn bg3' href='/'>تقدم بطلبك</a>
</div>
<div class='grid_3 pos_rel jalal wow bounceInLeft animated' style='visibility: visible;-webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s;'>
<div class='g-icon'>
<i class='fa fa-cogs' style='color: #DDBD30;'/>
</div>
<div class='line1 bg4'/>
<h2>سهولة تخصيص القوالب</h2>
<p class='txt1'>البساطه في التعامل مع القالب</p>
<p class='txt2'>
نهتم بالبساطه والسهوله بالنسبه لتعديل وتخصيص القالب بحيث انه بامكان اي شخص التعديل على القالب وتنسيقه حتى ولو لم تكن له خبره مسبقه في بلوجر</p>
<a class='more_btn bg4' href='/'>تقدم بطلبك</a>
</div>
<div class='clear'/>
<div class='indent1'/>
</div>
</div>
4-ثم قم بحفظ القالب والذهاب للمعاينة واي استفسار انا جاهز ضعه في تعليق

9 تعليقات على موضوع " اضافة اقسام مميزة بشكل انيق "

شكرا لك اخي على تميزك وابداعك

ممكن اخي طلب قالب يناسب مدونتي وهي في الاغلب تعليمية خاصة بالتعليم وتكون بها قوائم منسدلة وبارك الله فيك

شكرااا جزيلا الله يوفقك :)

اهلا بك اخي هناك الكثير من القوالب وانا لا اعلم بقوالب"تعلمية" ولكن انت تريد قالب به قوائم منسدلة اظن ان قالب الهام التدوين يفي بالغرض فهو قالب احترافي وكنت اضعه قبل هذا القالب على مدونتي وهو مكون من 5 الوان يستطيع الزائر تغيير الوانه يمكنك تحميله من مصممه وهو حسام بها صاحب عرب ويب فقط ابحث عن"قالب الهام التدوين|عرب ويب"وحمله من موقع عرب ويب لان النسخة الاصلية من هناك

اخي الاضافة فيها خطأ لا تعمل المرجو منك تجربتها
واصلاح المشاكل

اهلا بك اخي الاضافة تعمل ويمكنك رؤيتها بإني نقلتها من القالب الخاص بويب نايت الى هذا القالب وهي تعمل بدون اخطاء قم بتجربتها بقالب اخر وإن لم تعمل قل لي http://aldawra.blogspot.com/

شكرااا اخي السبب هو القالب و الاضافة تعمل 100%

اهلا بك اخي سررت بمرورك

ما شاء الله انت شخص متميز الله يوفقك

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء