حصريا اضافة اقسام الخدمات مميزة بشكل انيق

اضافة من اضافات المدونة الرائعة والتي يمكنك الاطلاع عليها عن طريق الدخول الى قسم "إضافات بلوجر" الاضافة اليوم سوف تكون عبارة عن اضافة اقسام مميزة بشكل انيق وبالتحديد بشكل ويب نايت والبعداني فهي اضافة رائعة تتطيع وضع مثلا اقسام المدونة وهي مكونة من 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-ثم قم بحفظ القالب والذهاب للمعاينة واي استفسار انا جاهز ضعه في تعليق