كن مهووس: اضافة صفحة التبادل الاعلانى v1

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
اضافة صفحة التبادل الاعلانى v1
كتب بواسطة
عدد التعليقات
1 التعليقات

اهلا بكم احبائى الكرام. بعد غياب طويل عن عالم بلوجر والانترنت ياتى درس العودة وهو عن اضافة صفحة التبادل الاعلانى المجانى التى لاقت اهتمام واعجاب الكثير من متابعى المدونة واشكرهم طبعا على اعجابهم بها واعدكم ان اقدم المفيد والمهم وايضا كل الابداع من اجلكم. ناتى للميزات الصفحة طبعا هى صفحة بسيطة تضاف الى الصفحات عادى مثل اى صفحة وايضا بتاثيرات احترافية وكل صورة او اطار يمتاز بتاثير خاص به. ناتى لطريقة التركيب

avatar شرح الطريقة
الخطوة الاولى

  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://3.bp.blogspot.com/-wPsisRU9e_c/V6ZkX7ZDyFI/AAAAAAAAAGs/DJewN4sfOB8nty_GpfclJio6Vk0GQYVUgCLcB/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='http://4.bp.blogspot.com/-GPnYExlzMh0/VN9KljjxncI/AAAAAAAAHK0/b-GBOCuVriY/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='http://4.bp.blogspot.com/-GPnYExlzMh0/VN9KljjxncI/AAAAAAAAHK0/b-GBOCuVriY/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='http://4.bp.blogspot.com/-GPnYExlzMh0/VN9KljjxncI/AAAAAAAAHK0/b-GBOCuVriY/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='http://4.bp.blogspot.com/-GPnYExlzMh0/VN9KljjxncI/AAAAAAAAHK0/b-GBOCuVriY/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='http://4.bp.blogspot.com/-GPnYExlzMh0/VN9KljjxncI/AAAAAAAAHK0/b-GBOCuVriY/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='http://4.bp.blogspot.com/-GPnYExlzMh0/VN9KljjxncI/AAAAAAAAHK0/b-GBOCuVriY/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='http://4.bp.blogspot.com/-GPnYExlzMh0/VN9KljjxncI/AAAAAAAAHK0/b-GBOCuVriY/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='http://4.bp.blogspot.com/-GPnYExlzMh0/VN9KljjxncI/AAAAAAAAHK0/b-GBOCuVriY/s1600/soon.png'/>
            <div class='overlay5'>
                <h2>اعلن هنا</h2>
    <p> 
     <a href='#'>ادخل للموقع</a>
    </p> 
            </div>
    </div>
</div>
  </div>

  </div>
  </center>
  1. احفظ الصفحة

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1-أن يكون التعليق خاص بمحتوى التدوينة
2-أن لا تضع أي روابط خارجية
3-لاضافة كود حوله اولا بمحول الاكواد
4-أي سؤال خارج محتوى التدوينة يرجى التواصل معنا عبر صفحتنا


محول الاكواد الابتسامات





اخبار الهواتف الذكيه
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير