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