تركيب اضافة اظهار الروابط الإحترافية 2018

السلام عليكم احبتنا الكرام اليوم و كما وعدناكم سابقا موعدنا مع طريقة حصرية لتركيب اضافة اظهار الروابط المنبثقة الإحترافية , طباع الإضافة مدفوعة اليوم نضعها بين ايديكم مجانا بدون اطالة نمر لطريقة التركيب

صور الإضافة :

معاينة الإضافة : من هنا

تركيب الإضافة :

1- اضافة اكواد css : ادخل للمظهر ثم تحرير html اضغط ctrl+f و ابحث عن هذا الوسم </b:skin> وضع الكود التالي فوقه مباشرة


/*
NEW SYSTEM OF DOWNLOADING BUTTONS
*/
#outer_page_btn {
    background-color: #562d98;
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    font-size: 20px;
    cursor: pointer;
 box-shadow: inset 0px 0px 0px 0px #562d98;
    -webkit-box-shadow: inset 0px 0px 0px 0px #562d98;
    -moz-box-shadow: inset 0px 0px 0px 0px #562d98;
    -o-box-shadow: inset 0px 0px 0px 0px #562d98;
    -ms-box-shadow: inset 0px 0px 0px 0px #562d98;
 transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    margin: 30px 0;
}
#outer_page_btn:before {
    font-family: "FontAwesome";
    content: "\f0c1";
    padding: 0 0 0 20px;
}
#outer_page_btn:hover {
    box-shadow: inset 0px -50px 0px 0px #ef69e4;
    -webkit-box-shadow: inset 0px -50px 0px 0px #ef69e4;
    -moz-box-shadow: inset 0px -50px 0px 0px #ef69e4;
    -o-box-shadow: inset 0px -50px 0px 0px #ef69e4;
    -ms-box-shadow: inset 0px -50px 0px 0px #ef69e4;
}
#outer_page_cont {
    background: linear-gradient(to right,#c31284, #ff6ce6,#a9196f);
    background: -webkit-linear-gradient(to right,#c31284, #ff6ce6,#a9196f);
    background: -moz-linear-gradient(to right,#c31284, #ff6ce6,#a9196f);
    background: -o-linear-gradient(to right,#c31284, #ff6ce6,#a9196f);
    background: -ms-linear-gradient(to right,#c31284, #ff6ce6,#a9196f);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99999999;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
 overflow-y: auto;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
}
.outer_page_cont {
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
}
#outer_top {
    width: 100%;
    height: 90px;
    padding: 20px;
    margin: 0 0 50px 0;
    position: relative;
    top: 0;
    box-sizing: border-box;
    background: #5f0404;
    border-bottom: 5px solid #562d98;
}
.outer_page_control {
    color: #ffffff;
    background: #562d98;
    padding: 5px 20px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    -ms-border-radius: 25px;
    cursor: pointer;
    float: right;
}
#outer_top .share a {
    width: 43px;
    height: 43px;
    display: block;
    float: right;
    margin: 0 10px 0 0;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
    color: #ffffff;
    font-size: 25px;
    text-align: center;
    background: #562d98;
}
#outer_top .share a:hover {
    color: #ffffff;
    background: #da48b3;
}
#outer_top .share a i {
    line-height: 43px;
}
.outer_page_control:hover {
    color: #5f0404;
    background: #ffffff;
}
.outer_page_control:before {
    font-family: "FontAwesome";
    content: "\f0e2";
    margin: 0 0 0 15px;
    display: inline-block;
    transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
}
.outer_page_control:hover:before {
    transform: rotate(-80deg);
    -webkit-transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    -ms-transform: rotate(-80deg);
}
#outer_page_cont .widget-content {
    margin: 20px;
    color: #fff;
}
#outer_page_table {
    border-collapse: collapse;
 color:#fff;
 font-size: 15px;
 width:80%;
 display:none;
    margin: 0 0 50px 0; 
}


.t_off{
 display:none;
  }

#outer_page_table td {
    border: 1px solid #dddddd;
    text-align: center;
    margin:0 -1px 0 0;
    padding: 5px;
}
#outer_page_table th {
    border: 1px solid #ddd;
    background: #562d98;
}
#t_timer {
    font-size: 20px;
    text-align: center;
    color: #fff;
    border: 2px solid #fff;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    margin: 30px auto;
}

.t_title{
min-width:300px;
}
.t_version{
min-width:100px;
max-width:150px;
}
.t_size{
min-width:100px;
max-width:150px;
}
.t_download h2, .t_download h3, .t_download h4 {
    font-weight: 100;
    margin: 0;
    padding: 0;
    line-height: 15px;
 text-align: center;
}
.t_download h2 a {
    color: #fff;
    background-color: #018ad2;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #026cba;
    border-radius: 4px;
}
.t_download h2 a:hover {
    color: #fff;
    background-color: #0272bf;
    border-color: #0355a8;
}

.t_download h3 a {
    color: #fff;
    background-color: #30bbf1;
    display: inline-block;
    padding: 6px 12px;
    margin: 5px 2px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 2px solid #227770;
    border-radius: 25px;
}
.t_download h3 a:hover {
    color: #fff;
    background-color: #2e95bd;
    border-color: #134061;
}
.t_download h3 a:before, .t_download h4 a:before {
    font-family: "FontAwesome";
    content: "\f019";
    float: right;
    padding: 0 0 0 10px;
}
.t_download h2 a:before {
    font-family: "FontAwesome";
    content: "\f06e";
    padding: 0 10px 0 0;
    font-size: 15px;
}


.t_download h4 a {
    color: #fff;
    background-color: #d000ef;
    display: inline-block;
    padding: 6px 12px;
    margin: 5px 2px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 2px solid #7f4180;
    border-radius: 25px;
}
.t_download h4 a:hover {
    color: #fff;
    background-color: #bb20e2;
    border-color: #491e54;
}
.outer_page_cont .PopularPosts h2 {
    width: 200px;
    box-sizing: border-box;
    margin: 0 auto;
    background-color: #ce448e;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 100;
    padding: 10px 5px;
    border-radius: 20px;
 -webkit-border-radius: 20px;
}
.outer_page_cont .PopularPosts .popular-posts ul li {
    width: 47%;
    float: right;
    margin: 0 0 25px 2.5%;
    padding: 10px 0;
    background-color: rgba(249, 60, 126, 0.38);
    border-radius: 40px;
 -webkit-border-radius: 40px;
 transition: all .5s ease;
 -webkit-transition: all .5s ease;
 box-shadow: 0px 0px 0px 0px rgba(66, 18, 76, 0.5);  
 -webkit-box-shadow: 0px 0px 0px 0px rgba(66, 18, 76, 0.5);  
    border: 1px solid #8e2660;
}
.outer_page_cont .PopularPosts .popular-posts ul li:hover {
    box-shadow: 0px 0px 45px 10px rgba(66, 18, 76, 0.5);  
 -webkit-box-shadow: 0px 0px 45px 10px rgba(66, 18, 76, 0.5);  
}
.outer_page_cont .PopularPosts .popular-posts ul li a {
    color: #fff;
}
.outer_page_cont .PopularPosts .popular-posts ul .item-thumbnail {
    float: right;
    margin: 0 0 0 15px;
}

#outer_page_table h3 img, #outer_page_table h4 img {
    display: none;
}

/*popular posts*/
.outer_page_cont .popular-posts ul {
list-style: none;
}
.outer_page_cont .popular-posts li img {
border-radius:100%;
}

2- اضافة اكواد HTML ابحث بداخل القالب عن هذا الوسم <body> و الصق الكود تالي اسفله مباشرة


<!--NEW SYSTEM OF DOWNLOADING BUTTONS-->
<div id='outer_page_cont'>
<div id='outer_top'>
<div class='outer_page_control' onclick='close_outer_page()'>الرجوع للموضوع</div>
<div class='share'>
<a href='رابط ايقونة الفيس بوك' target='_blank'><i class='fa fa-facebook'/></a>
<a href='رابط ايقونة تويتر' target='_blank'><i class='fa fa-twitter'/></a>
<a href='رابط ايقونة اليوتيوب' target='_blank'><i aria-hidden='true' class='fa fa-youtube-play'/></a>
<a href='رابط ايقونة جوجل بلس' target='_blank'><i class='fa fa-google-plus'/></a>
<a href='http://www.tumblr.com/share/link?url=' target='_blank'><i class='fa fa-tumblr'/></a>
<a href='http://pinterest.com/pin/create/button/?source_url=' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-pinterest'/></a>
</div>
</div>
<div class='section' id='top_outer_ad'>
</div>
<div id='outer_replace_part'/>
<b:section id='bottom_outer_ad' showaddelement='yes'>
  <b:widget id='PopularPosts4' locked='false' title='قد يهمك أيضا' type='PopularPosts'>
    <b:widget-settings>
      <b:widget-setting name='numItemsToShow'>6</b:widget-setting>
      <b:widget-setting name='showThumbnails'>true</b:widget-setting>
      <b:widget-setting name='showSnippets'>false</b:widget-setting>
      <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>
</b:section>
  </div>

3- اضافة اكواد javascript ابحث بداخل القالب عن هذا الوسم </body> و الصق الكود تالي فوقه مباشرة


<script type='text/javascript'>
/*<![CDATA[*/
var outer_quote = document.getElementsByClassName('post-body')[0].getElementsByTagName('blockquote');
for(i = 0 ; i < outer_quote.length ; i++){
 if(outer_quote[i].innerHTML.search('#صف') != -1){
   outer_quote[i].setAttribute('id' , 'outer_page');
       };
};

if(document.getElementById('outer_page') != undefined){
var outer_page_element = document.getElementById('outer_page_cont');
var outer_page = document.getElementById('outer_page');
$('#outer_page').replaceWith("<center><br/><div id='outer_page_btn' onclick='open_outer_page()'>&#11015; عرض روابط التحميل &#11015;</div><br/></center>");
$('#outer_replace_part').replaceWith("<div id='outer_table'><div id='t_timer'>فضلا&#1611; أنتظر ...</div><div class='t_off'>" + outer_page.innerHTML + "</div></div>");
};



var x_timer = 5;
  function begin_timer(){
var t_interval = setInterval(function(){
if(x_timer < 1){
  clearInterval(t_interval);
var outer_table = document.getElementById('outer_table');
var outer_table_cont = outer_table.innerHTML;
var outer_table_cont_array = outer_table_cont.split('*');
var no_of_lines = outer_table_cont_array.length / 5;
var t_txt = '';
for(i = 0 ; i < no_of_lines ; i++){
var t_x = outer_table_cont.split('#صف')[i + 1];
var t_y = t_x.split('*');
 t_txt += "<tr><td class='t_title'>" + t_y[1] + "</td><td class='t_version'>" + t_y[3] + "</td><td class='t_size'>" + t_y[2] + "</td><td class='t_download'>" + t_y[4] + "</td></tr>";
};
document.getElementById('outer_table').innerHTML = "<center><table id='outer_page_table'><tr><th>اسم الملف</th><th>الإصدار</th><th>حجم الملف</th><th>روابط التحميل</th></tr>" + t_txt + "</table></center>";
document.getElementById('outer_page_table').style.display = 'inline-table';
$('#outer_page_table br').replaceWith('');
  };
document.getElementById('t_timer').innerHTML = x_timer;
x_timer--;
    } , 1000);
  };

function close_outer_page(){
outer_page_element.classList.remove('outer_page_cont');   
};
function open_outer_page(){
outer_page_element.setAttribute('class','outer_page_cont');
begin_timer();
};
/*]]>*/
</script>

4-اخيرا : اضافة اكواد الاضافة و ورابط التحميل بداخل التدوينة قم بنسخ الكود التالي ووضعه في اي تدوينة تريد ان تظهر بها الإضافة طباع بعد تغيير الروابط و الووصف بما يناسب الكود التالي تستعمله لكل رابط تريد اضافته


<div style="text-align: center;">
            <div style="background-color: white; box-sizing: border-box;">
                <blockquote class="tr_bq">
                    <div style="text-align: center;">
                        <blockquote class="tr_bq">
                            <div style="text-align: center;">
                                <blockquote>
                                    <div style="text-align: center;"><b><span style="font-family: inherit;">#صف</span></b></div><b></b><br />
                                    <div style="text-align: center;"><b><b><span style="font-family: inherit;">*</span></b></b>
                                    </div><b></b><b></b><br />
                                    <div style="text-align: center;"><b><b><span style="font-family: inherit;">wejdane_Transition_Presets_v2.rar</span></b></b>
                                    </div><b></b><b></b><br />
                                    <div style="text-align: center;"><b><b><span style="font-family: inherit;">*</span></b></b>
                                    </div><b></b><b></b><br />
                                    <div style="text-align: center;"><b><b><span style="font-family: inherit;">23.50KB</span></b></b>
                                    </div><b></b><b></b><br />
                                    <div style="text-align: center;"><b><b><span style="font-family: inherit;">*</span></b></b>
                                    </div><b></b><b></b><br />
                                    <div style="text-align: center;"><b><b><span style="font-family: inherit;">2018-03-20 18:05:11</span></b></b>
                                    </div><b></b><b></b><br />
                                    <div style="text-align: center;"><b><b><span style="font-family: inherit;">*</span></b></b>
                                    </div><b></b><br />
                                    <h3 style="text-align: center;"><b><span style="font-family: inherit;"><a href="https://www.file4.net/f-srF">File4Net</a></span></b></h3>
                                    <h4 style="text-align: center;"><b><span style="font-family: inherit;"><a href="http://speed4up.com/f805f0c9c479ff3a">Speed4Up</a></span></b></h4>
                                    <h3 style="text-align: center;"><b><span style="font-family: inherit;"><a href="https://www.file-upload.com/wmyox4x9axo6">File-Upload</a></span></b></h3>
                                </blockquote>
                            </div>
                        </blockquote>
                    </div>
                </blockquote>
            </div>
        </div>

4 تعليقات

إرسال تعليق

Admin10/09/2018 02:27:00 م
اخي عماد شكرا على الشرح الرائع
لكن لم اجد وسم < body > في قالبي قالب المعدل من طرفك (قالب سكودة)
إرسال تعليقحذف التعليق
جيك برو | Geek Pro 11/28/2018 01:32:00 م
لم اجد ال body الان مذا افعل
إرسال تعليقحذف التعليق
ترافل فلاش11/29/2018 12:57:00 ص
أزال المؤلف هذا التعليق.
إرسال تعليقحذف التعليق
MaXX3/04/2019 04:13:00 ص
ملقتش ال body خالص
إرسال تعليقحذف التعليق

إدعمنا بتعليقك ومشاركتك للموضوع . وشكرا

وجدان للمعلوميات

تركيب اضافة اظهار الروابط الإحترافية 2018

صور الإضافة :

معاينة الإضافة : من هنا

تركيب الإضافة :

Default

تطبيق تزوير محادثات و المنشورات للاندرويد فيسبوك ، واتساب ، تويتر 2019