شرح طريقة تركيب الهيدر
- ابحث عن الوسم </head> وضع هذه الأكواد فوقها
<style>
/*=====================================
= Follow by nak1ha
=====================================*/
#follow {
background: #fff;
width: 99.5%;
float: left;
margin: 0;
margin-bottom: 20px;
margin: auto ;
border: 4px solid #fff;
border-radius: 3px ;
}
.parallax-407 {
background-image: url(http://www.level-iv-consulting.com/wp-content/uploads/2014/04/Information-Technology-Page.jpg);
background-attachment: fixed;
}
.img_size {
background-size: cover;
background-position: 100% top;
}
.wrap2 {
width: 100%;
max-width: 100%;
position: relative;
margin: 0 auto;
padding-top: 60px;
}
.parallax-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(41, 86, 125, 0.37);
}
.titleblock, .insisi .widget>h2 {
text-align: center;
position: relative;
font-weight: normal;
}
.titleblock h2 {
padding: 0;
margin: 0 0 10px;
font-size: 68px;
color: #fff;
line-height: 50px;
font-weight: normal;
}
.titleblock h5 {
padding: 0;
margin: 0 0 20px;
font-size: 22px;
color: #fff;
line-height: 30px;
font-weight: normal;
display: inline-block;
display: block;
}
.fa-icon-wrap {
text-align: center;
margin: 0 auto 0;
padding: 0 0 40px;
width: 100%;
position: relative;
text-transform: uppercase;
}
.fa-icon-wrap a {
margin: 15px 30px;
color: #fff;
background: trasparent;
padding-bottom: 10px;
font-weight: normal;
display: inline-block;
text-align: center;
position: relative;
}
.fa-icon-wrap a {
margin: 15px 30px;
color: #fff;
background: trasparent;
padding-bottom: 10px;
font-weight: normal;
display: inline-block;
text-align: center;
position: relative;
}
.fa-icon-wrap i.fa {
border: 10px solid 10px solid rgba(254, 0, 1, 0.11) !important;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
background: rgba(247, 64, 71, 0.51);
}
.fa-icon-wrap .fa {
display: inline-block;
font-size: 14px;
margin-bottom: 10px;
cursor: pointer;
width: 100px;
height: 90px;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
text-transform: uppercase;
color: #4d90fe;
border-radius: 20%;
-moz-border-radius: 20%;
-webkit-10px border-radius: solid rgb(225, 62, 62) !important
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
background: rgba(255,255,255,0.15);
}
.fa-icon-wrap .fa:before {
speak: none;
font-size: 50px;
line-height: 80px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.fa-icon-wrap .fa:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
</style>
- ثاني خطوة يمكنكم وضع هذه الاكواد في اي مكان يناسبك بالقالب وأحسن مكان هو أسفل القائمة الرئيسية.
<b:if cond='data:blog.pageType == "item"'>
<div id='follow'>
<div class='img_size clearfix slide-menu parallax-407'>
<div class='wrap2'>
<div class='parallax-overlay'/>
<div class='box10' id='box10'>
<div class='titleblock'><h2 class='wow bounceInLeft animated' data-wow-delay='0.3s' style='visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;'><data:blog.pageName/></h2><br/><br/>
<h5 class=' wow bounceInRight animated' data-wow-delay='0.3s' style='visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;'>تواصل معنا عبر مواقع التواصل الاجتماعية التالية</h5>
</div>
<div class='fa-icon-wrap'>
<a class='wow zoomInRight hvr-bounce-out animated' data-wow-delay='0.2s' href='https://www.facebook.com/nak1ha/' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-facebook'/></a>
<a class='wow zoomInLeft hvr-bounce-out animated' data-wow-delay='0.2s' href='https://twitter.com/nak1ha' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-twitter'/></a>
<a class='wow zoomInRight hvr-bounce-out animated' data-wow-delay='0.3s' href='https://plus.google.com/u/0/117526277138998925869' style='visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;'><i class='fa fa-google-plus'/></a>
<a class='wow zoomInLeft hvr-bounce-out animated' data-wow-delay='0.2s' href='https://www.youtube.com/channel/UCcJtSOYELy8bIHPQAf5gIVw' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-youtube'/></a>
<a class='wow zoomInRight hvr-bounce-out animated' data-wow-delay='0.2s' href='https://www.instagram.com/_ismail_junior_/' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-instagram'/></a>
<a class='wow zoomInRight hvr-bounce-out animated' data-wow-delay='0.2s' href='https://goo.gl/tsXOeX' style='visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;'><i class='fa fa-rss'/></a>
</div>
</div>
<div class='clear'/>
</div>
</div>
</div>
<br/>
</b:if>
- قم بحفظ القالب
- ومبروك عليك الاضافة
الى هنا نكون قد انهينا الدرس اذا عجلتكم الاضافة لا تنسو وضع تعليق لنستمر في تقديم المزيد
NIDALG.STAR@GMAIL.COM
ردحذفتم ارسال الملف :)
حذفgood add
ردحذفشكرا :lv
حذفwalid.hanine.21@gmail.com
ردحذفتم الارسال :lv
حذفWaw I love This add you are exellent
ردحذفthanks My Friend :-d
حذفواصل أخي بالتوفيق :)
ردحذفتم
ردحذفamrmajiver046@gmail.com
لن يتم الارسال لك :p لأنك سارق =( والأن أتيت بإيميل جديد :ng
حذفYASSINE AGROUR
ردحذفagrouryassine@Gmail.com
موضوع جميل يا اخي انت مبدع :-bd
ردحذفmedo_man705@yahoo.com
abderhmandahmh@gmail.com
ردحذفاخى لم ترسل لى الاضافه بعد
ردحذفاعتذر, ضننت اني أرسلت لكم
حذفموضوع جميل يا اخي انت مبدع
ردحذفموضوع رائع انت فعلان
موضوع جميل يا اخي انت مبدع
ردحذفmaxsye685@gmail.com
شكرا لك :lv انت الأجمل
حذفتم الارسال
santayoub@gmail.com
ردحذفتم وضع شرح طريقة التركيب في التدوينة وشكرا
حذفجميل جدا اخى استمر
ردحذفرابط المعاينه صفحه خطاء
ردحذفهدا
.
http://www.nak1ha.com/p/blog-page_23.html
رابط المعاينة كان في القالب القديم ^_^
حذف