شرح انشاء صفحه توجية روابط خارجية احترافية بعد X ثانية

السلام عليكم اعضاء وزوار ترايد نت



اليوم شرح مهم وكان طلبه احد الاعضاء الكرام من قبل يومين ولم يجد الشرح ..

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

[COLOR="rgb(148, 148, 148)"]انظر للصورة التالية

[/COLOR]

الفائدة من التحويل ربما يكون مهم لبعض الناس حيث يكون بشكل احترافي

وايضا يجبر الزائر على مشاهدة اعلاناتك لمدة معينة تقوم بتحديدها انت .. ملحوظة - لا انصح بها للمبدئين

يمكنك معاينه تحويل الروابط على مدونتي من خلال الضغط على اي رابط خارجي داخل المواضيع من هنا "مدونة عرب تك | أتعلم تقنية

الان سوف نقوم بالشرح ...

سوف نقوم بالدخول الى لوحة تحكم مدونتك بلوجر من هنا.

ومن ثم الضغط على الصفحات من القائمة الجانية .



ومن ثم الضغط على انشاء صفحة جديدة



سوف نقوم بكتابه عنوان الصفحه direct او اي اسم يعجبك .

ومن ثم حذف اي اكواد html داخل مربع الصفحة بحيث يصبح فارغ نهائيأ



ومن ثم سوف تقوم بوضع الكود التالي

رمز Code:

<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="ltr" style="text-align: center;" trbidi="on">
<style type="text/css">
a#reload {display: none;}
#arabes1 {background: #a4f9ed;padding: 14px;font-size: 35px; font-family: cursive;}
</style>

© مدونة عرب تك | أتعلم تقنية
<style>
.about_blog { padding: 0; overflow: hidden;background: #fff; }
.about-techgold-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-techgold-img{position:relative;max-height:140px;overflow:hidden}
.about-techgold-img img {max-width:100%;width:100%;transition:all .6s;}
.about-techgold-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-techgold-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}
.about-techgold-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}
.about-techgold-float{text-align:center;display:table;width:100%;height:100%}
.about-techgold-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; font-size: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; border: 2px solid #FFFFFF; font-weight: bold; background: rgba(0,0,0,0.5); text-shadow: 0 2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(19, 18, 18, 0.38), 0 3px 13px -1px rgba(0, 0, 0, 0.08); border-radius: 2px;}
.about-techgold-float:hover a{background:#fff; color: #444!important;}
.about-techgold-float a i{font-weight:normal;margin-left:5px}
.about-techgold-wrpicon{display:block;margin:0 auto;position:relative;}
.extender{text-align:center;font-size:16px;    margin: 15px!important;}
.extender .about-techgold-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}
.extender .about-techgold-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; border-radius: 3px; font-size: 12px; width: 100%; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0, 0, 0, 0.27); text-shadow: 0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0, 0, 0, 0), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0, 0, 0, 0.08);}
.extender .about-techgold-icon i{font-family:fontawesome;margin:0 3px 0 0}
.about-techgold-icon.fbl a{background:#3b5998}
.about-techgold-icon.twitt a{background:#19bfe5}
.about-techgold-icon.crcl a{background:#d64136}
.about-techgold-icon.fbl a:hover,.about-techgold-icon.twitt a:hover,.about-techgold-icon.crcl a:hover{background:#313B42}
.extender .about-techgold-icon:hover a,.extender .about-techgold-icon a:hover{color:#fff;}
.about-techgold-info{margin:10px 0 0 0;font-size:13px;text-align:center;}

 
.about-techgold-info p{margin:5px 0;font: 12px Droid Arabic Naskh;    color: #444;}
.about-techgold-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.about-techgold-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-techgold-info h4:before,.about-techgold-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}
.about-techgold-info h4:before {margin-right:-50%;text-align:left;}
</style>
<div class="about_blog">
<div class="inner_wrapper">
<div class="about-techgold-img">
<img alt="alwan may" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAMNC1G8FWVn0nSMs_W583paOG_ySecimV3NlkcpdcnHG0-IEAleEv76eGxfCrzPaTi3afViAilp3BuCDJuh1eFkkugFSBdFmIP7D4sBvbECD0rsqAb5UV8uik-9qhHFiN70Rua2JZe4/s1600/www.tech-gold.net.jpg" width="300" />
<div class="aboutfloat-img">
<span class="about-techgold-float"><a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=8695520429222509323" rel="nofollow" target="_blank"><i class="fa fa-user"></i> إنضم للمدونه</a></span></div>
</div>
</div>
<div class="about-techgold-info">
<h4>
تابع جديد المدونه</h4>
عرب تك - أتعلم أكتر</div>
<div class="about-techgold-wrpicon">
<ul class="extender">
<li class="about-techgold-icon fbl"><a href="https://www.facebook.com/3rabtech.org/" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> فيسبوك</a></li>
<li class="about-techgold-icon twitt"><a href="https://twitter.com/3rabtech9" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تويتر</a></li>
<li class="about-techgold-icon crcl"><a href="https://www.youtube.com/channel/UCKw-aZnMo8_1v9Ri6jrvyHA" rel="nofollow" target="_blank"><i class="fa fa-youtube-square"></i> يوتيوب</a></li>
</ul>
</div>
</div>
<br />
© مدونة عرب تك | أتعلم تقنية
<div id="arabes1">
سيتم تحويلك الى الرابط بعد <span id="countdown"> 10 </span> ثوان 
<i class="fa fa-spinner fa-spin" style="font-size: 45px;"></i>
<a href="#" id="reload"></a>
 </div>
<br />
© مدونة عرب تك | أتعلم تقنية
</div>
<script type="text/javascript">//<![CDATA[
//add Font Awesome
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
//]]></script> 

<script type="text/javascript">
  var seconds;
  var temp;
function removem1() {
    var xkl = getQueryVariable("url");
    var nkl=xkl.replace("&m=1", "");
document.getElementById("reload").innerHTML=nkl;
}
removem1();
document.getElementById('reload').href=window.location.href;
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("?&&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=_");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

  function countdown() {
    seconds = document.getElementById('countdown').innerHTML;
    seconds = parseInt(seconds, 10);

    if (seconds == 0) {
      temp = document.getElementById('countdown');
      parent.location.replace(document.getElementById("reload").innerHTML)
           return;
    }
    seconds--;
    temp = document.getElementById('countdown');
    temp.innerHTML = seconds;
    timeoutMyOswego = setTimeout(countdown, 1500);
  } 
setTimeout(function(){ countdown(); }, 5000);
</script>
</div>

سوف تقوم بتغيير اللون الازرق بمعرف المدونة الخاص بك

وسوف تقوم بتغيير الالوان الحمراء بمعرفات حساباتك على يوتيوب وتويتر وفيسبوك

ومن ثم نقوم بالضغط على حفظ الصفحه



الان سوف نتوجه الى المظهر



ومن ثم الضغط على تحرير Html



ثم نقوم بالضغط فى لوحه المفاتيح على ctrl+F ونقوم بالحث عن الكود </body>



وفوقه كود </body> مباشرة سوف نقوم بوضع الكود التالي

اقتباس

<script type='text/javascript'>

//<![CDATA[

var allahref=document.getElementsByTagName("a");

for(var c=0;c<allahref.length;c++)

{

if(allahref[c].hostname!="www.3rabtech.org" && allahref[c].hostname!="")

if(allahref[c].hostname!="www.facebook.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="www.youtube.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="plus.google.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="www.instagram.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="twitter.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="1.bp.blogspot.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="2.bp.blogspot.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="3.bp.blogspot.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="4.bp.blogspot.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="www.blogger.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="www.linkedin.com" && allahref[c].hostname!="")

if(allahref[c].hostname!="play.google.com" && allahref[c].hostname!="")

{

allahref[c].href="https://www.3rabtech.org/p/redirect.html??&&url=_"+allahref[c].href;

}

}

//]]>

</script>

ما سوف نقوم بتغييرة فى الكود هو الروابط ذات اللون الاحمر تستبدلها بعنوان مدونتك فقط .

يمكنك كتابه اي نص لكي يظهر للزوار اثناء انتظار العداد مكان العلامات الخضراء هذة © مدونة عرب تك | أتعلم تقنية

او يمكنك ايضا اسفلها ان تضع الشفرة الخاصة باعلاناتك

ومن ثم نضغط حفظ القالب ومبروك عليك .. شكرا علي المتابعة.