اضافة صفحة التبادل الاعلانى v1

شرح الطريقة

الخطوة الاولى

×

1. توجه الى لوحة تحكم المدونة ثم صفحات ثم اضف صفحة جديدة
2. ثم اضغط على html بجانب تاليف وضغ هذا الكود بها
3. وعدل عليه كما تريد

<style>
#comments,.comments{display:none}
/*====================================
= CSS Scroll bar
====================================*/
.hovereffect1 {width: 100%;height: 100%;float: left;overflow: hidden;position: relative;text-align: center;cursor: default;}
.hovereffect1 .overlay1 {width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);background-color: rgba(0,0,0,0.5);-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);}
.hovereffect1 img {display: block;position: relative;-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);}
.hovereffect1 h2 {text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;background: rgba(0,0,0,0.6);-webkit-transform: translatey(-100px);-ms-transform: translatey(-100px);transform: translatey(-100px);-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);padding: 10px;}
.hovereffect1 a.info1 {text-decoration: none;display: inline-block;text-transform: uppercase;color: #fff;border: 1px solid #fff;background-color: transparent;filter: alpha(opacity=0);-webkit-transition: all 0.4s ease;transition: all 0.4s ease;margin: 50px 0 0;padding: 7px 14px;}
.hovereffect1 a.info1:hover {box-shadow: 0 0 5px #fff;}
.hovereffect1:hover img {-ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);}
.hovereffect1:hover .overlay1 {opacity: 1;filter: alpha(opacity=100);}
.hovereffect1:hover h2,.hovereffect:hover a.info {opacity: 1;filter: alpha(opacity=100);-ms-transform: translatey(0);-webkit-transform: translatey(0);transform: translatey(0);}
.hovereffect1:hover a.info1 {-webkit-transition-delay: .2s;transition-delay: .2s;}
/* التانى */
.hovereffect {  width: 100%;  height: 100%;  float: left;  overflow: hidden;  position: relative;  text-align: center;  cursor: default;}
.hovereffect .overlay {  width: 100%;  height: 100%;  position: absolute;  overflow: hidden;  top: 0;  left: 0;  background-color: rgba(0,0,0,0.6);  opacity: 0;  filter: alpha(opacity=0);  -webkit-transform: translate(460px, -100px) rotate(180deg);  -ms-transform: translate(460px, -100px) rotate(180deg);  transform: translate(460px, -100px) rotate(180deg);  -webkit-transition: all 0.2s 0.4s ease-in-out;  transition: all 0.2s 0.4s ease-in-out;}
.hovereffect img {  display: block;  position: relative;  -webkit-transition: all 0.2s ease-in;  transition: all 0.2s ease-in;}
.hovereffect h2 {  text-transform: uppercase;  color: #fff;  text-align: center;  position: relative;  font-size: 17px;  padding: 10px;  background: rgba(0, 0, 0, 0.6);}
.hovereffect a.info {  display: inline-block;  text-decoration: none;  padding: 7px 14px;  text-transform: uppercase;  color: #fff;  border: 1px solid #fff;  margin: 50px 0 0 0;  background-color: transparent;  -webkit-transform: translateY(-200px);  -ms-transform: translateY(-200px);  transform: translateY(-200px);  -webkit-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out;}
.hovereffect a.info:hover {  box-shadow: 0 0 5px #fff;}
.hovereffect:hover .overlay {  opacity: 1;  filter: alpha(opacity=100);  -webkit-transition-delay: 0s;  transition-delay: 0s;  -webkit-transform: translate(0px, 0px);  -ms-transform: translate(0px, 0px);  transform: translate(0px, 0px);}
.hovereffect:hover h2 {  -webkit-transform: translateY(0px);  -ms-transform: translateY(0px);  transform: translateY(0px);  -webkit-transition-delay: 0.5s;  transition-delay: 0.5s;}
.hovereffect:hover a.info {  -webkit-transform: translateY(0px);  -ms-transform: translateY(0px);  transform: translateY(0px);  -webkit-transition-delay: 0.3s;  transition-delay: 0.3s;}
/* الثالث */
.hovereffect2 {  width: 100%;  height: 100%;  float: left;  overflow: hidden;  position: relative;  text-align: center;  cursor: default;}
.hovereffect2 .overlay2 {  width: 100%;  height: 100%;  position: absolute;  overflow: hidden;  left: 0;  background-color: rgba(255, 255, 255, 0.7);  top: -200px; opacity: 0;  filter: alpha(opacity=0);  -webkit-transition: all 0.1s ease-out 0.5s;  transition: all 0.1s ease-out 0.5s;}
.hovereffect2:hover .overlay2 {  opacity: 1;  filter: alpha(opacity=100);  top: 0px;  -webkit-transition-delay: 0s;  transition-delay: 0s;}
.hovereffect2 img {  display: block;  position: relative;}
.hovereffect2 h2 {  text-transform: uppercase;  color: #fff;  text-align: center;  position: relative;  font-size: 17px;  padding: 10px;  background: rgba(0, 0, 0, 0.6);  -webkit-transform: translateY(-200px);  -ms-transform: translateY(-200px);  transform: translateY(-200px);  -webkit-transition: all ease-in-out 0.1s;  transition: all ease-in-out 0.1s;  -webkit-transition-delay: 0.3s;  transition-delay: 0.3s;}
.hovereffect2:hover h2 {  -webkit-transform: translateY(0px);-ms-transform: translateY(0px);  transform: translateY(0px);  -webkit-transition-delay: 0.3s;  transition-delay: 0.3s;}
.hovereffect2 a.info2 {  display: inline-block;  text-decoration: none;  padding: 7px 14px;  text-transform: uppercase;  margin: 50px 0 0 0;  background-color: transparent;  -webkit-transform: translateY(-200px);  -ms-transform: translateY(-200px);  transform: translateY(-200px);  color: #000;  border: 1px solid #000;  -webkit-transition: all ease-in-out 0.3s;  transition: all ease-in-out 0.3s;}
.hovereffect2 a.info2:hover {  box-shadow: 0 0 5px #fff;}
.hovereffect2:hover a.info2 { -webkit-transform: translateY(0px);  -ms-transform: translateY(0px);  transform: translateY(0px);  box-shadow: 0 0 5px #000;  color: #000;  border: 1px solid #000;  -webkit-transition-delay: 0.3s;  transition-delay: 0.3s;}
/* الرابع */
.hovereffect3 {  width: 100%;  height: 100%;  float: left;  overflow: hidden;  position: relative;  text-align: center;  cursor: default;  background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);  background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);}
.hovereffect3 .overlay3 {  width: 100%;  height: 100%;  position: absolute;  overflow: hidden;  top: 0;  left: 0;  padding: 3em;  text-align: left;}
.hovereffect3 img {  display: block;  position: relative;  max-width: none;  width: calc(100% + 60px);  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;  transition: opacity 0.35s, transform 0.45s;}
.hovereffect3 h2 {  text-transform: uppercase;  color: #fff;  position: relative;  font-size: 17px;  background-color: transparent;  padding: 15% 0 10px 0;  text-align: left;}
.hovereffect3 .overlay3:before {  position: absolute;  top: 20px;  right: 20px;  bottom: 20px;  left: 20px;  border: 1px solid #fff;  content: &#39;&#39;;  opacity: 0;  filter: alpha(opacity=0);  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;  transition: opacity 0.35s, transform 0.45s;  -webkit-transform: translate3d(-20px,0,0);  transform: translate3d(-20px,0,0);}
.hovereffect3 a, .hovereffect3 p {  color: #FFF;  opacity: 0;  filter: alpha(opacity=0);  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;  transition: opacity 0.35s, transform 0.45s;  -webkit-transform: translate3d(-10px,0,0);  transform: translate3d(-10px,0,0);}
.hovereffect3:hover img {  opacity: 0.6;  filter: alpha(opacity=60);  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);}
.hovereffect3:hover .overlay3:before,.hovereffect3:hover a, .hovereffect3:hover p {  opacity: 1;  filter: alpha(opacity=100);  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);}
/* الخامس */
.hovereffect4 {  width: 100%;  height: 100%;  float: left;  overflow: hidden;  position: relative;  text-align: center;  cursor: default;  background: #42b078;}
.hovereffect4 .overlay4 {  width: 100%;  height: 100%;  position: absolute;  overflow: hidden;  top: 0;  left: 0;  padding: 50px 20px;}
.hovereffect4 img {  display: block;  position: relative;  max-width: none;  width: calc(100% + 20px);  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;}
.hovereffect4:hover img {  opacity: 0.4;  filter: alpha(opacity=40);  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);}
.hovereffect4 h2 {  text-transform: uppercase;  color: #fff;  text-align: center;  position: relative;  font-size: 17px;  overflow: hidden;  padding: 0.5em 0;  background-color: transparent;}
.hovereffect4 h2:after {  position: absolute;  bottom: 0;  left: 0;width: 100%;  height: 2px;  background: #fff;  content: &#39;&#39;;  -webkit-transition: -webkit-transform 0.35s;  transition: transform 0.35s;  -webkit-transform: translate3d(-100%,0,0);  transform: translate3d(-100%,0,0);}
.hovereffec4t:hover h2:after {  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);}
.hovereffect4 a, .hovereffect4 p {  color: #FFF;  opacity: 0;  filter: alpha(opacity=0);  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;  -webkit-transform: translate3d(100%,0,0);  transform: translate3d(100%,0,0);}
.hovereffect4:hover a, .hovereffect4:hover p {  opacity: 1;  filter: alpha(opacity=100);  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);}
/* السادس */
.hovereffect5 {  width: 100%;  height: 100%;  float: left;  overflow: hidden;  position: relative;  text-align: center;  cursor: default;}
.hovereffect5 .overlay5 {  position: absolute;  overflow: hidden;  width: 80%;  height: 80%;  left: 10%;  top: 10%;  border-bottom: 1px solid #FFF;  border-top: 1px solid #FFF;  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;  -webkit-transform: scale(0,1);  -ms-transform: scale(0,1);  transform: scale(0,1);}
.hovereffect5:hover .overlay5 {  opacity: 1;  filter: alpha(opacity=100);  -webkit-transform: scale(1);  -ms-transform: scale(1);  transform: scale(1);}
.hovereffect5 img { display: block;  position: relative;  -webkit-transition: all 0.35s;  transition: all 0.35s;}
.hovereffect5:hover img {  filter: url(&#39;data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filter'><feComponentTransfer color-interpolation-filters='sRGB'><feFuncR slope='0.6' type='linear'/><feFuncG slope='0.6' type='linear'/><feFuncB slope='0.6' type='linear'/></feComponentTransfer></filter></svg>#filter&#39;);  filter: brightness(0.6);  -webkit-filter: brightness(0.6);}
.hovereffect5 h2 {  text-transform: uppercase;  text-align: center;  position: relative;  font-size: 17px;  background-color: transparent;  color: #FFF;  padding: 1em 0;  opacity: 0;  filter: alpha(opacity=0);  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;  -webkit-transform: translate3d(0,-100%,0);  transform: translate3d(0,-100%,0);}
.hovereffect5 a, .hovereffect5 p {  color: #FFF;  padding: 1em 0;  opacity: 0;  filter: alpha(opacity=0);  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;  -webkit-transform: translate3d(0,100%,0);  transform: translate3d(0,100%,0);}
.hovereffect5:hover a, .hovereffect5:hover p, .hovereffect5:hover h2 {  opacity: 1;  filter: alpha(opacity=100);  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);}
.col-md-4 {width: 24.333333%;max-height: 193px;margin-bottom: 10px;}
.col-md-4 img{width:100%;height:193px}
</style>
<center style='margin: 0px auto;background: rgba(0, 0, 0, 0.06);position: relative;display: -webkit-box;'>
<div style='padding: 2%;'>
<div style='width: 50%;margin: auto;text-align: -webkit-center;background: rgba(0,0,0,.3);padding: 1px;margin-bottom: 17px;'>
<a style='font-size: 30px;'>
اهلا بكم فى خدمة التبادل الاعلانى 
  </a>
  </div>
<div style='margin-right:3%;'>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect1'>
        <img alt='' class='img-responsive' src='http://image.noelshack.com/fichiers/2016/37/1473940592-yhj.png'/>
        <div class='overlay1'>
           <h2> عالم المحترف </h2>
           <a class='info1' href='https://allampro16.blogspot.com/'>ادخل للموقع</a>
        </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxAtKpWhNXVDsB2dRZQNr52JbwwZshw6xT82pMFf1t_9Meh7rq3ezkqbZ4RO_YTHpY1NJVa2_LoJTPxPt4h6CRFAY5Cd8BZLqApZbnOdENnT040YanTLsvQLYRBZTPAt5FnXUqlhqCDE/s1600/300x250.png'/>
        <div class='overlay'>
            <h2>عرب ثيم</h2>
            <a class='info' href='http://www.myartheme.com/'> ادخل للموقع</a>
        </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect2'>
        <img alt='' class='img-responsive' src='https://upload.wikimedia.org/wikipedia/commons/e/e6/Rowadweb.png'/>
        <div class='overlay2'>
           <h2>رواد الويب</h2>
           <a class='info2' href='http://www.rowadweb.com/'>ادخل للموقع</a>
        </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect3'>
        <img alt='' class='img-responsive' src='http://f.top4top.net/p_258t8u91.png'/>
            <div class='overlay3'>
                <h2>مدونة المعلوماتى</h2>
    <p> 
     <a href='http://ma3loumtie.blogspot.com/'>ادخل للموقع</a>
    </p> 
            </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect4'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNia1so2WIpoBgBMsv9FkKyyCHJ7wp6r_zya0HJNc8f6OTpeeydnE74FQKRyzEJFKSDhsHZ7DbP1XJtCBgLed1Yk14Bnj4z2Wd4HQrLStMHM8pe5UwwgIzAtly4ju9D5QrXvTmO6xt_T0/s1600/soon.png'/>
            <div class='overlay4'>
                <h2>اعلن هنا</h2>
    <p> 
     <a href='#'>ادخل للموقع</a>
    </p> 
            </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect5'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNia1so2WIpoBgBMsv9FkKyyCHJ7wp6r_zya0HJNc8f6OTpeeydnE74FQKRyzEJFKSDhsHZ7DbP1XJtCBgLed1Yk14Bnj4z2Wd4HQrLStMHM8pe5UwwgIzAtly4ju9D5QrXvTmO6xt_T0/s1600/soon.png'/>
            <div class='overlay5'>
                <h2>اعلن هنا</h2>
    <p> 
     <a href='#'>ادخل للموقع</a>
    </p> 
            </div>
    </div>
</div>

<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect1'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNia1so2WIpoBgBMsv9FkKyyCHJ7wp6r_zya0HJNc8f6OTpeeydnE74FQKRyzEJFKSDhsHZ7DbP1XJtCBgLed1Yk14Bnj4z2Wd4HQrLStMHM8pe5UwwgIzAtly4ju9D5QrXvTmO6xt_T0/s1600/soon.png'/>
        <div class='overlay1'>
           <h2> اعلن هنا </h2>
           <a class='info1' href='#'>ادخل للموقع</a>
        </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNia1so2WIpoBgBMsv9FkKyyCHJ7wp6r_zya0HJNc8f6OTpeeydnE74FQKRyzEJFKSDhsHZ7DbP1XJtCBgLed1Yk14Bnj4z2Wd4HQrLStMHM8pe5UwwgIzAtly4ju9D5QrXvTmO6xt_T0/s1600/soon.png'/>
        <div class='overlay'>
            <h2>اعلن هنا</h2>
            <a class='info' href='#'> ادخل للمدونة</a>
        </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect2'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNia1so2WIpoBgBMsv9FkKyyCHJ7wp6r_zya0HJNc8f6OTpeeydnE74FQKRyzEJFKSDhsHZ7DbP1XJtCBgLed1Yk14Bnj4z2Wd4HQrLStMHM8pe5UwwgIzAtly4ju9D5QrXvTmO6xt_T0/s1600/soon.png'/>
        <div class='overlay2'>
           <h2>اعلن هنا</h2>
           <a class='info2' href='#'>ادخل للموقع</a>
        </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect3'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNia1so2WIpoBgBMsv9FkKyyCHJ7wp6r_zya0HJNc8f6OTpeeydnE74FQKRyzEJFKSDhsHZ7DbP1XJtCBgLed1Yk14Bnj4z2Wd4HQrLStMHM8pe5UwwgIzAtly4ju9D5QrXvTmO6xt_T0/s1600/soon.png'/>
            <div class='overlay3'>
                <h2>اعلن هنا</h2>
    <p> 
     <a href='#'>ادخل للموقع</a>
    </p> 
            </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect4'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNia1so2WIpoBgBMsv9FkKyyCHJ7wp6r_zya0HJNc8f6OTpeeydnE74FQKRyzEJFKSDhsHZ7DbP1XJtCBgLed1Yk14Bnj4z2Wd4HQrLStMHM8pe5UwwgIzAtly4ju9D5QrXvTmO6xt_T0/s1600/soon.png'/>
            <div class='overlay4'>
                <h2>اعلن هنا</h2>
    <p> 
     <a href='#'>ادخل للموقع</a>
    </p> 
            </div>
    </div>
</div>
<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
    <div class='hovereffect5'>
        <img alt='' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNia1so2WIpoBgBMsv9FkKyyCHJ7wp6r_zya0HJNc8f6OTpeeydnE74FQKRyzEJFKSDhsHZ7DbP1XJtCBgLed1Yk14Bnj4z2Wd4HQrLStMHM8pe5UwwgIzAtly4ju9D5QrXvTmO6xt_T0/s1600/soon.png'/>
            <div class='overlay5'>
                <h2>اعلن هنا</h2>
    <p> 
     <a href='#'>ادخل للموقع</a>
    </p> 
            </div>
    </div>
</div>
  </div>

  </div>
  </center>

1. احفظ الصفحة