عرب ويب

اضافة ملف تعريف احترفي على بلوجر

2021-05-04T14:54:00.004-07:00

مرحبًا يا رفاق اتمنى ان تكونوا بتمام الصحة والعافية. نلتقي مجددا في تدوينة من اضافات بلوجر التي اصبحنا نشهد فيها تطورا جد كبير! سنتحدث عن كيفية إضافة عنصر ملف تعريفي احترافي بالشريط الجانبي للقالب او السيدبار قابلة للتعديل.

هناك الكثير من الفوائد التي تحصل عليها من هذه الأداة. وهي كالآتي: عرض الملف الشخصي للبلوجر عرض ملخص للسيرة الذاتية ازرار وسائل التواصل الاجتماعي زر الرسائل والاشتراك الإعجابات والمشاركات المضافة

معاينة

شرح طريقة التركيب 1. مباشرة من التنسيق اضف اداة HTML/JavaScript وضع بها الكود التالي:

<div class="ar1web-about">
    <div class="img-area">
      <div class="inner-area">
        <img src="https://cdn.dribbble.com/users/5352839/screenshots/11892562/character.png" alt="" />
      </div>
    </div>
    <div class="name">عرب ويب</div>
    <div class="about">مصمم ومطور</div>
    <div class="social-icons">
      <a href="https://www.facebook.com" class="fb"><svg class="icons-ar1web" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewbox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path style="fill:#528DDE;" d="M139.764,272.026h53.887v221.846c0,4.38,3.549,7.929,7.929,7.929h91.369  c4.38,0,7.929-3.549,7.929-7.929V273.071h61.948c4.028,0,7.417-3.023,7.877-7.023l9.409-81.672c0.258-2.247-0.454-4.498-1.957-6.183  c-1.505-1.687-3.658-2.653-5.919-2.653H300.88v-51.196c0-15.433,8.309-23.259,24.7-23.259c2.336,0,46.654,0,46.654,0  c4.38,0,7.929-3.55,7.929-7.929V18.187c0-4.38-3.549-7.929-7.929-7.929h-64.297c-0.452-0.022-1.458-0.059-2.943-0.059  c-11.156,0-49.934,2.19-80.566,30.37c-33.94,31.228-29.222,68.618-28.095,75.101v59.867h-56.571c-4.38,0-7.929,3.549-7.929,7.929  v80.629C131.835,268.476,135.384,272.026,139.764,272.026z"/> <g> <path style="fill:#3B6197;" d="M292.949,512h-91.368c-9.996,0-18.128-8.133-18.128-18.128V282.225h-43.688   c-9.996,0-18.128-8.133-18.128-18.13v-80.629c0-9.996,8.133-18.128,18.128-18.128h46.371v-48.84   c-1.532-9.878-5.015-49.941,31.386-83.435C250.871,2.385,292.906,0,304.994,0c1.495,0,2.562,0.033,3.176,0.059h64.065   c9.996,0,18.128,8.132,18.128,18.128v74.967c0,9.996-8.133,18.128-18.128,18.128h-46.654c-12.191,0-14.502,4.59-14.502,13.06   v40.997h61.156c5.162,0,10.093,2.21,13.53,6.063c3.437,3.855,5.068,9.009,4.477,14.14l-9.409,81.672   c-1.053,9.153-8.795,16.056-18.009,16.056h-51.749v210.601C311.077,503.867,302.944,512,292.949,512z M203.85,491.602h86.828   v-218.53c0-5.633,4.567-10.199,10.199-10.199h59.924l8.886-77.133h-68.807c-5.632,0-10.199-4.566-10.199-10.199v-51.196   c0-20.95,13.047-33.458,34.901-33.458h44.385V20.458h-62.026c-0.168,0-0.336-0.004-0.504-0.012   c-0.156-0.008-1.009-0.046-2.442-0.046c-10.222,0-45.745,1.996-73.661,27.677c-29.868,27.482-26.025,59.672-24.95,65.847   c0.1,0.577,0.15,1.162,0.15,1.747v59.867c0,5.633-4.567,10.199-10.199,10.199h-54.301v76.09h51.617   c5.632,0,10.199,4.566,10.199,10.199L203.85,491.602L203.85,491.602z"/> <path style="fill:#3B6197;" d="M224.381,369.211c-5.632,0-10.199-4.566-10.199-10.199v-5.1c0-5.633,4.567-10.199,10.199-10.199   s10.199,4.566,10.199,10.199v5.1C234.581,364.645,230.013,369.211,224.381,369.211z"/> <path style="fill:#3B6197;" d="M224.381,479.363c-5.632,0-10.199-4.566-10.199-10.199v-77.514c0-5.633,4.567-10.199,10.199-10.199   s10.199,4.566,10.199,10.199v77.514C234.581,474.796,230.013,479.363,224.381,479.363z"/> </path></path></path></g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </path></svg></a>
      <a href="http://twitter.com/" class="twitter"><svg class="icons-ar1web" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewbox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve"> <path style="fill:#5DC4FB;" d="M490.679,101.206c-7.723,3.425-15.663,6.316-23.777,8.663c9.606-10.863,16.929-23.645,21.399-37.631  c1.003-3.135-0.037-6.567-2.613-8.617c-2.573-2.052-6.15-2.298-8.984-0.618c-17.23,10.219-35.819,17.563-55.31,21.857  c-19.634-19.185-46.301-30.103-73.87-30.103c-58.192,0-105.535,47.341-105.535,105.532c0,4.583,0.291,9.141,0.864,13.634  c-72.21-6.34-139.343-41.833-185.443-98.382c-1.643-2.015-4.174-3.102-6.765-2.895c-2.593,0.203-4.922,1.666-6.232,3.912  c-9.35,16.044-14.293,34.393-14.293,53.063c0,25.429,9.078,49.555,25.116,68.408c-4.876-1.689-9.609-3.799-14.125-6.307  c-2.424-1.349-5.384-1.329-7.792,0.052c-2.41,1.381-3.922,3.922-3.985,6.699c-0.011,0.468-0.011,0.935-0.011,1.41  c0,37.957,20.428,72.13,51.662,90.756c-2.683-0.268-5.365-0.657-8.029-1.166c-2.747-0.525-5.571,0.438-7.423,2.533  c-1.855,2.093-2.469,5.011-1.615,7.675c11.561,36.093,41.325,62.641,77.308,70.735c-29.843,18.692-63.972,28.483-99.799,28.483  c-7.475,0-14.994-0.44-22.352-1.31c-3.655-0.434-7.151,1.724-8.395,5.2c-1.245,3.478,0.074,7.355,3.184,9.349  c46.025,29.511,99.245,45.109,153.9,45.109c107.446,0,174.661-50.667,212.127-93.172c46.718-53,73.513-123.152,73.513-192.466  c0-2.896-0.045-5.82-0.134-8.735c18.432-13.887,34.301-30.694,47.215-50.01c1.961-2.933,1.749-6.811-0.523-9.512  C497.69,100.65,493.908,99.776,490.679,101.206z"/> <g> <path style="fill:#3B87E3;" d="M167.762,467.447c-56.611,0-111.733-16.156-159.404-46.722c-7.151-4.584-10.145-13.372-7.282-21.373   c2.866-8.005,10.763-12.894,19.202-11.89c6.944,0.822,14.062,1.238,21.147,1.238c25.955,0,51.321-5.547,74.481-16.183   c-29.035-13.461-51.755-38.673-61.702-69.726c-1.866-5.819-0.635-12.253,3.206-16.976c-24.019-21.766-38.287-53.056-38.287-85.933   c0-0.558,0.001-1.109,0.014-1.659c0.144-6.292,3.634-12.161,9.111-15.299c1.216-0.698,2.498-1.241,3.818-1.634   c-7.927-15.929-12.145-33.616-12.145-51.67c0-20.472,5.422-40.596,15.68-58.199c2.997-5.137,8.322-8.481,14.248-8.945   c5.914-0.481,11.703,1.999,15.467,6.617c41.543,50.96,101.692,84.539,166.494,93.332c-0.013-0.714-0.019-1.428-0.019-2.142   c0-63.814,51.919-115.731,115.735-115.731c28.106,0,55.785,10.553,76.82,29.128c16.558-4.168,32.398-10.702,47.157-19.455   c6.442-3.817,14.695-3.246,20.544,1.416c5.846,4.653,8.248,12.572,5.97,19.699c-1.661,5.2-3.671,10.236-6.016,15.091   c5.867-0.6,11.85,1.689,15.769,6.358c5.157,6.128,5.65,15.071,1.191,21.739c-12.558,18.785-27.809,35.337-45.386,49.265   c0.016,1.275,0.024,2.547,0.024,3.811c0,71.766-27.723,144.376-76.06,199.211C348.686,414.9,279.017,467.447,167.762,467.447z    M27.591,408.624c42.441,25.166,90.696,38.423,140.171,38.423c103.641,0,168.4-48.788,204.475-89.716   c45.099-51.162,70.965-118.856,70.965-185.723c0-2.792-0.043-5.626-0.129-8.425c-0.101-3.31,1.413-6.463,4.057-8.456   c15.449-11.639,29.02-25.459,40.426-41.153c-5.834,2.311-11.802,4.352-17.819,6.092c-4.356,1.263-9.026-0.509-11.453-4.344   c-2.426-3.835-2.028-8.811,0.978-12.211c7.451-8.425,13.254-17.915,17.303-28.281c-16.635,9.186-34.427,15.9-52.975,19.987   c-3.359,0.743-6.863-0.262-9.323-2.665c-17.69-17.285-42.016-27.199-66.741-27.199c-52.568,0-95.336,42.766-95.336,95.332   c0,4.126,0.263,8.279,0.782,12.344c0.391,3.061-0.625,6.135-2.764,8.36c-2.139,2.225-5.168,3.359-8.244,3.091   c-73.662-6.467-142.842-42.687-190.337-99.529c-7.406,13.789-11.306,29.301-11.306,45.069c0,22.655,8.056,44.602,22.685,61.799   c2.98,3.503,3.247,8.567,0.651,12.365c-2.595,3.798-7.411,5.387-11.758,3.882c-4.22-1.463-8.356-3.215-12.341-5.228   c0.887,32.443,18.59,62.705,46.651,79.439c4.104,2.448,5.959,7.417,4.462,11.956c-1.497,4.538-5.949,7.42-10.699,6.954   c-1.703-0.17-3.414-0.386-5.115-0.644c11.055,30.272,37.027,53.218,68.608,60.322c4.033,0.908,7.119,4.159,7.816,8.234   c0.696,4.075-1.137,8.167-4.64,10.361C115.266,398.713,78.884,409.1,41.428,409.1C36.813,409.1,32.187,408.941,27.591,408.624z"/> <path style="fill:#3B87E3;" d="M83.843,164.21c-2.121,0-4.259-0.659-6.091-2.025c-2.32-1.731-4.634-3.513-6.874-5.294   c-4.409-3.507-5.141-9.922-1.636-14.331c3.506-4.41,9.922-5.141,14.331-1.636c2.079,1.652,4.224,3.305,6.377,4.91   c4.515,3.369,5.444,9.759,2.077,14.274C90.025,162.792,86.953,164.21,83.843,164.21z"/> <path style="fill:#3B87E3;" d="M221.447,216.76c-0.299,0-0.6-0.013-0.904-0.04c-39.613-3.478-78.909-15.749-113.639-35.487   c-4.898-2.783-6.611-9.009-3.828-13.907c2.783-4.898,9.009-6.611,13.907-3.828c32.201,18.3,68.629,29.677,105.344,32.9   c5.612,0.493,9.761,5.441,9.268,11.052C231.13,212.76,226.677,216.76,221.447,216.76z"/> </path></path></path></g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </path></svg></a>
      <a href="https://www.instagram.com/" class="insta"><svg class="icons-ar1web" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewbox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <g> <path style="fill:#FB8028;" d="M359.312,501.801H152.689c-78.216,0-141.849-63.634-141.849-141.849V152.049   c0-78.217,63.633-141.85,141.849-141.85h206.623c78.216,0,141.849,63.633,141.849,141.85v207.903   C501.161,438.167,437.527,501.801,359.312,501.801z M152.689,68.492c-46.074,0-83.557,37.483-83.557,83.557v207.903   c0,46.074,37.483,83.557,83.557,83.557h206.623c46.074,0,83.557-37.483,83.557-83.557V152.049   c0-46.074-37.483-83.557-83.557-83.557C359.312,68.492,152.689,68.492,152.689,68.492z"/> <path style="fill:#FB8028;" d="M256,377.621c-67.063,0-121.622-54.56-121.622-121.621c0-67.063,54.56-121.622,121.622-121.622   c67.062,0,121.621,54.56,121.621,121.622C377.622,323.062,323.063,377.621,256,377.621z M256,191.24   c-35.708,0-64.76,29.051-64.76,64.76s29.051,64.76,64.76,64.76s64.76-29.051,64.76-64.76S291.708,191.24,256,191.24z"/> <path style="fill:#FB8028;" d="M380.485,152.988c-11.84,0-21.473-9.632-21.473-21.472c0-11.84,9.633-21.472,21.472-21.472   c11.84,0,21.472,9.632,21.472,21.472S392.325,152.988,380.485,152.988z"/> </path></path></path></g> <g> <path style="fill:#C63F00;" d="M359.312,512H152.689C68.849,512,0.641,443.792,0.641,359.951V152.049   C0.641,68.208,68.849,0,152.689,0h206.623c83.839,0,152.048,68.208,152.048,152.049v207.904   C511.359,443.792,443.151,512,359.312,512z M152.689,20.398c-72.593,0-131.65,59.057-131.65,131.65v207.904   c0,72.592,59.057,131.649,131.65,131.649h206.623c72.592,0,131.649-59.057,131.649-131.65V152.049   c0-72.593-59.057-131.65-131.649-131.65H152.689z M359.312,453.707H152.689c-51.698,0-93.756-42.058-93.756-93.755V152.049   c0-51.698,42.058-93.755,93.756-93.755h206.623c51.697,0,93.755,42.058,93.755,93.755v207.904   C453.067,411.649,411.009,453.707,359.312,453.707z M152.689,78.691c-40.45,0-73.358,32.908-73.358,73.357v207.904   c0,40.449,32.908,73.357,73.358,73.357h206.623c40.449,0,73.357-32.908,73.357-73.357V152.049   c0-40.449-32.908-73.357-73.357-73.357H152.689V78.691z"/> <path style="fill:#C63F00;" d="M256,387.821c-72.687,0-131.821-59.134-131.821-131.821S183.314,124.178,256,124.178   S387.821,183.313,387.821,256S328.687,387.821,256,387.821z M256,144.577c-61.438,0-111.422,49.984-111.422,111.423   c0,61.438,49.984,111.422,111.422,111.422S367.422,317.438,367.422,256C367.422,194.561,317.439,144.577,256,144.577z M256,330.959   c-41.332,0-74.959-33.627-74.959-74.959s33.627-74.959,74.959-74.959s74.959,33.627,74.959,74.959S297.333,330.959,256,330.959z    M256,201.439c-30.085,0-54.561,24.476-54.561,54.561s24.476,54.561,54.561,54.561s54.561-24.476,54.561-54.561   C310.561,225.914,286.085,201.439,256,201.439z"/> <path style="fill:#C63F00;" d="M380.485,163.187c-17.464,0-31.673-14.207-31.673-31.672s14.209-31.673,31.673-31.673   c17.463,0,31.672,14.209,31.672,31.673S397.948,163.187,380.485,163.187z M380.485,120.241c-6.216,0-11.274,5.057-11.274,11.274   c0,6.216,5.058,11.273,11.274,11.273c6.216,0,11.273-5.057,11.273-11.273C391.759,125.299,386.702,120.241,380.485,120.241z"/> <path style="fill:#C63F00;" d="M239.681,483.442h-95.873c-5.633,0-10.199-4.566-10.199-10.199s4.566-10.199,10.199-10.199h95.873   c5.633,0,10.199,4.566,10.199,10.199S245.314,483.442,239.681,483.442z"/> <path style="fill:#C63F00;" d="M278.438,483.442h-6.12c-5.632,0-10.199-4.566-10.199-10.199s4.567-10.199,10.199-10.199h6.12   c5.632,0,10.199,4.566,10.199,10.199S284.071,483.442,278.438,483.442z"/> </path></path></path></path></path></g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></a>
      <a href="https://youtube.com/" class="yt"><svg class="icons-ar1web" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewbox="0 0 236.777 236.777" style="enable-background:new 0 0 236.777 236.777;" xml:space="preserve"> <g> <path style="fill:#FF1D25;" d="M205.664,39.868c36.805,11.184,31.443,45.56,29.976,80.073c-0.779,18.334,1.971,46.889-6.05,63.939   c-5.133,10.863-15.446,11.275-26.034,11.734c-52.022,2.429-104.916,4.584-156.892,2.2c-29.426-1.375-49.272-10.221-45.651-39.051   c-2.338-27.776-0.275-57.156,2.613-84.427c1.513-14.209,4.583-28.463,19.801-33.138c10.725-3.346,24.476,0.092,35.659-0.367   c14.438-0.55,28.738-2.567,43.222-2.75c33.276-0.458,66.552,0.229,99.828,0.413C203.693,38.493,204.793,39.089,205.664,39.868z    M155.063,111.966c-12.925-7.104-25.942-14.071-39.143-20.626c-8.434-4.217-16.913-8.388-25.53-12.329   c-0.367-0.183-1.742-0.642-3.254-1.192c3.713,24.796,0.458,52.114-0.596,77.506C110.053,141.85,132.695,127.183,155.063,111.966z"/> </path></g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></a>
    </div>
    <div class="ar1web-buttons">
      <button><a href="#">راسلنا</a></button>
      <button><a href="#">اشتراك</a></button>
    </div>
    <div class="social-share">
      <div class="donutheme-row">
        <i class="fa fa-heart"></i>
        <span>20.6k</span>
      </div>
      <div class="donutheme-row">
        <i class="fa fa-comment"></i>
        <span>12.3k</span>
      </div>
      <div class="donutheme-row">
        <i class="fa fa-share"></i>
        <span>10.7k</span>
      </div>
    </div>
  </div>
<style>
/* About Me */
.icons-ar1web { height: 25px; width: 30px; }
.ar1web-about{background: #fafafa;border: 1px solid #eee; margin: 0 4px; border-radius: .3em!important; position: relative; padding: 20px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .ar1web-about .icon{ font-size: 17px; color: #31344b; position: absolute; cursor: pointer; opacity: 0.7; top: 15px; height: 35px; width: 35px; text-align: center; line-height: 35px; border-radius: 50%; font-size: 16px; } .ar1web-about .icon i{ position: relative; z-index: 9; } .ar1web-about .icon.ardonutheme-row{ left: 15px; } .ar1web-about .icon.dots{ right: 15px; } .ar1web-about .img-area{border: none; height: 150px; width: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .img-area .inner-area{ height: calc(100% - 25px); width: calc(100% - 25px); border-radius: 50%; } .inner-area img{ height: 100%; width: 100%; border-radius: 50%; object-fit: cover; } .ar1web-about .name{ font-size: 23px; font-weight: 500; color: #31344b; margin: 10px 0 5px 0; } .ar1web-about .about{margin: 15px 0 0px; color: #44476a; font-weight: 400; font-size: 16px; } .ar1web-about .social-icons{display: flex; margin: 15px 0 15px 0; } .social-icons a{ position: relative; height: 40px; width: 40px; margin: 0 5px; display: inline-flex; text-decoration: none; border-radius: 50%; } .social-icons a:hover::before, .ar1web-about .icon:hover::before, .ar1web-buttons button:hover:before{ content: &quot;&quot;; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; background: #ecf0f3; box-shadow: inset -3px -3px 7px #ffffff, inset 3px 3px 5px #ceced1; } .ar1web-buttons button:hover:before{ z-index: -1; border-radius: 5px; } .social-icons a i{ position: relative; z-index: 3; text-align: center; width: 100%; height: 100%; line-height: 40px; } .social-icons a.fb i{ color: #4267B2; } .social-icons a.twitter i{ color: #1DA1F2; } .social-icons a.insta i{ color: #E1306C; } .social-icons a.yt i{ color: #ff0000; } .ar1web-about .ar1web-buttons{ display: flex; width: 100%; justify-content: space-between; } .ar1web-buttons button{ position: relative; width: 100%; border: none; outline: none; padding: 12px 0; color: #31344b; font-size: 17px; font-weight: 400; border-radius: 5px; cursor: pointer; z-index: 4; } .ar1web-buttons button:first-child{ margin-left: 10px; } .ar1web-buttons button:last-child{ margin-left: 10px; } .ar1web-about .social-share{ display: flex; width: 100%; margin-top: 30px; padding: 0 5px; justify-content: space-between; } .social-share .donutheme-row{ color: #31344b; font-size: 17px; cursor: default; position: relative; } .social-share .donutheme-row::before{ position: absolute; content: &quot;&quot;; height: 100%; width: 2px; background: #e0e6eb; margin-left: -25px; } .donutheme-row:first-child::before{ background: none; } .social-share .donutheme-row i.icon-2{ position: absolute; left: 0; top: 50%; color: #31344b; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .donutheme-row:nth-child(1):hover i.fa-heart, .donutheme-row:nth-child(2):hover i.fa-comment{ opacity: 1; pointer-events: auto; } .ar1web-buttons button a { color: #31344b; }  

</style>

2. الآن ببساطة قم بتغيير الأشياء المحددة في هذا الرمز وفقًا لملف التعريف الخاص بك:

هذه مقالة صغيرة حول كيفية إضافة ملف حول مدير الموقع على بلوجر. إذا واجهت أي مشكلة، فلا تتردد في إخبارنا في التعليقات.

ازيد من 400 خط عربي جاهز للإستعمال

2020-10-18T06:41:00.003-07:00

اعزائي المتابعين اهلا بكم من جديد في اجدد تدوينة للخطوط العربية التي ستحتاجها في تصاميمك، هنا ستجد 488 خط عربي اصيل بمختلف الأنواع والأنماط مجمع بملف واحد.

قالب صفحة

2020-09-08T06:43:00.002-07:00

قالب صفحة نرحب - بكم من جديد بأحد أعمالنا المطورة وهو قالب صفحة إسم على مسمى بحيث يوجد به صفحة واحدة مناسب جدا لوضع سيرة ذاتية أو كتابة مقالات أو قصص ذات محتوى بسيط وسهل الوصول إليه.
القالب سهل التعديل والتحكم عن طريق التخطيط قمنا بمراعات أدوات السيو وتحسينها وبصورة خاصة تحسين جودة تحميل الصفحات كذلك يدعم تغيير الإتجاه LTR مع خاصية الترجمة لجميع اللغات حسب الإعدادات

قالب Median Ui

2020-06-23T08:07:00.002-07:00

قالب Median Ui هذا القالب له رونقه الخاص وكأنك تستخدم تطبيق ويب يجعل مدونتك تبدو مختلفة عن المدونات الأخرى. وهو قالب بثلاثة اعمدة حيث يتم تخصيص العمود الأول للقوائم، والعمودين المتبقيين للمواضيع والسيدبار فإذ لاحظتم فالمواقع الكبيرة تستخدم هذه الواجهة كـ جوجل درايڨ وجوجل ادسنس الى غير ذلك ليس ذلك فقط بل تم تحسين النسخة للأجهزة الصغيرة لجعله يبدو أكثر حداثه من خلال نقل قائمة التنقل لتطفو أسفل الشاشة وهذا التحسين يجعل القالب يبدو وكأنه تطبيق جوال، وذلك حتى يتمكن المستخدمون من التركيز أكثر على قراءة المحتوى على المدونة.

تم تحديث القالب لآخر نسخة 1.4

حسنا، لأن القالب خاص وهو للإستعمال الشخصي فلم نضع روابط للتحميل بل سنقدم القالب كعربون وفاء ومحبة لمتابعينا الكرام كل من يريد نسخة من القالب عليك فقط بإضافة تعليق مرفق بالبريد الإلكتروني وسيتم إرساله إليك.

يمكنك أن تكون من أصدقاء المدونة عبر المتابعة من هذا الرابط
ايضا سنشارك كل ما هو قادم وجديد على حسابنا في أنستغرام فتأكد من متابعتنا هناك العديد من الأمور ستحصلون عليها.

تغيير شكل Scrollbar ببلوجر

2020-06-19T03:34:00.000-07:00

تغيير شكل شريط التمرير ببلوجر في هذه التدوينة سوف أساعدك على تحسين مظهر شريط التمرير Scrollbar، في الوقت الحالي تعمل فقط في متصفحات الويب مثل Opera و Chrome و Safari، لسوء الحظ لاتعمل على متصفح firefox and IE. لأن اضافتنا كليا تعتمد على Css كما يمكنك التعديل عليها بسهولة مثل الألوان، العرض، الطول

معاينة

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الشكل فوقه

شريط التمرير الأبيض

body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}

شريط التمرير النحيل

body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}

شريط التمرير الأسود

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

شريط التمرير البرتقالي

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #e78632;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

شريط تمرير مجرة

body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #00aeff, #a68eff);
  border-radius: 10px;
  -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}

شريط التمرير الأخضر

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #aab74d;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

اضغط على زر التطبيق لحفظ التغييرات وسيكون لديك سكرولبار بأسلوب جديد. تذكر أنك إذا كنت تستخدم متصفح فايرفوكس أو انترنت اكسبلورر فلن تنجح الطريقة.

التفسير

العناصر المتوفرة لتخصيص شريط التمرير في متصفحات الويب هي التالية:

 
:: - webkit-scrollbar {} / * شريط التمرير * / 
:: - webkit-scrollbar-button {} / * السهام * / 
:: - webkit-scrollbar-thumb {} / * مؤشر التمرير * / 
:: - webkit-scrollbar-track {} / * حاوية شريط التمرير * / 
:: - webkit-scrollbar-track-piece {} / * شريط التمرير * / 
:: - webkit-scrollbar-corner {} / * الزاوية السفلية من أشرطة التمرير * / 
:: - webkit-resizer {} / * شريط السحب لتغيير الحجم * /

عليك فقط استخدام تلك التي تحتاجها للتعديلات وليس من الضروري استخدام جميع القواعد ومع ذلك، إذا كنت تريد معرفة المزيد عنها ، أوصي بمقالة scroll bars حول أشرطة التمرير

إن كانت لديك أي تساؤلات فالمرجو ترك تعليق، ارد على جميع التعليقات ولا تنسى مشاركة الموضوع.

اضافة اداة الدردشة Whatsapp لبلوجر

2020-06-09T15:00:00.000-07:00

اضافة اداة Whatsapp للبلوجر هذه الأداة توفرها بعض المواقع ذات طرف ثالث (Third Party) لكن كما الحال دائما إضافتنا مختلفة تماما عن البقية سريعة، تصميم ذات واجهة مبسطة لا تحتوي على أي من أكواد Java Script هي تبقى أداة اختيارية يمكنك إضافتها أو لا، قد يختار بعض المدونين الحفاظ على خصوصياتهم لكن ليس بالضرورة يمكن استعمال تطبيق ثانوي للواتساب خاص بالموقع

لذلك قمنا بعمل هذه التدوينة فلربما تحتاجها.
واحدة من مزايا هذه الأداة أنه من السهل تخصيصها، ويمكنك تغيير اللون وعرض الأداة بسهولة لرؤية الإضافة اذهب للمعاينة أدناه:

معاينة

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه

.sticky-button{position:fixed;background-color:#4dc247;bottom:20px;right:20px;width:55px;height:55px;border-radius:50px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1);z-index:20;overflow:hidden;}
.sticky-button a, .sticky-button label{color: #fff;display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
.sticky-button a svg, .sticky-button label svg{margin:auto;fill:var(--warna-icon)}
.sticky-button label svg.svg-2{display:none}
.sticky-chat{position:fixed;bottom:70px;right:20px;width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}
.sticky-chat .chat-content{direction: rtl;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#4dc247;overflow:hidden}
.sticky-chat .chat-header:after{content: &#39;&#39;; display: block; position: absolute; bottom: 0; left: 0; width: 70px; height: 65px; background: rgba(0,0,0,.040); border-radius: 0 70px 5px 0;}
.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:#fff}
.sticky-chat .chat-header .title{padding-right:15px;font-size:14px;font-weight:600;color:#fff}
.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--warna-text)}
.sticky-chat .chat-text span{height: 40px;display: inline-block;padding: 10px 10px 10px 20px; background:#f0f5fb; border-radius: 0 15px 0; margin-left: 10px;}
.sticky-chat .chat-text span:after{content:&#39;الآن&#39;;display:inline-block;margin-right:15px;font-size:9px;color:var(--warna-text-alt)}
.sticky-chat .chat-text span.typing{height: 30px;margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:3px 15px 15px 15px}
.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}
.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}
.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text);    direction: rtl;}
.sticky-chat .chat-button svg{width: 20px; height: 20px; fill: var(--warna-text-alt); margin-right: auto; transform: rotate(220deg); -webkit-transform: rotate(220deg);}
.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
.chat-menu:checked + .sticky-button label svg.svg-1{display:none}
.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
.chat-menu:checked + .sticky-button + .sticky-chat{bottom:90px;opacity:1;visibility:visible}

4.اضف هذا الكود فوق </body>

<input class='chat-menu hidden' id='offchat-menu' type='checkbox'/>
<div class='sticky-button' id='sticky-button'>
  <label for='offchat-menu'>
   <svg class='svg-1' style='width:30px;height:30px' viewBox='0 0 24 24'>
<path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='currentColor'/>
</svg>
    <svg class='svg-2' style='width:30px;height:30px' viewBox='0 0 24 24'>
<path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z' fill='currentColor'/>
</svg>
  </label>
</div>
<div class='sticky-chat'>
  <div class='chat-content'>
    <div class='chat-header'>
      <svg viewbox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/></svg>
      <div class='title'>الدردشة مع فريقنا <span>سوف يرد المشرف في غضون بضع دقائق</span></div>
    </div>
    <div class='chat-text'>
      <span>مرحبا&#1548; هل نستطيع مساعدتك&#1567;</span>
      <span class='typing'><svg viewbox='0 0 512 512'><circle cx='256' cy='256' r='48'/><circle cx='416' cy='256' r='48'/><circle cx='96' cy='256' r='48'/></svg></span>
    </div>
  </div>
  <a class='chat-button' href='https://api.whatsapp.com/send?phone=+212670312294&amp;text=السلام عليكم ، أريد أن أسأل' rel='nofollow noreferrer' target='_blank'>
    <span>ابدأ الدردشة ...</span>
    <svg viewBox='0 0 32 32'><path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'/></svg>    
  </a>
</div>

5. ضع رقم هاتفك بدل المحدد بالبرتقالي
* لك الحرية في تغيير الرسائل المكتوبة

اتمنى ان تكون الإضافة مفيدة 😊 تحياتي

قالب شروحات بابكورن

2020-06-08T05:21:00.000-07:00

قالب شروحات بابكورن، تصميم أنيق يمكن استخدامه لإنشاء مدونات تتعلق بمقاطع الفيديو. يوفر هذا القالب النظام الأساسي لنشر المنشورات المتعلقة بالشروحات أو التدوين بشكل عام، سواء كانت مراجعتك أو ترويجك لشيء ما. مناسب أيضًا لأخبار التكنولوجيا، مجلة ، طعام . مستجيب للغاية ولديه تخطيط محسن لمحركات البحث لجميع الأجهزة.

التعديلات المطلوبة

1. من التخطيط حرر اداة: Hot Posts
2. ستجد خيار random أي عشوائي
3. يمكنك إظهار المواضيع حسب ما تريد : random أو recent أو وضع تسمية
4.لإضافة قائمة منسدلة في اداة Main Menu ضع :
* اسم الموقع الجديد : اسم القسم
‏* عنوان URL للموقع الجديد : #
اضغط ارتباط بعدها اعد نفس الخطوات مع اضافة _ في اسم الموقع الجديد مثال: _شروحات وفي عنوان URL للموقع الجديد ضع الرابط

الواجهة كاملة

قالب افلام نيوز لمدونات الانيمي والافلام

2020-06-07T08:11:00.001-07:00

قالب افلام نيوز متجاوب، لم يسبق لي وأن شاركتكم قالب يتعلق بعرض الأفلام أو الأنمي. هذه السنة هي سنة مختلفة سأحاول قدر الإمكان أن أنوع في طرح القوالب وكذلك قررت أن لا أضيف أي حقوق للقالب بدون سكربتات مشفرة سيكون العمل بشكل احترافي، فقط حقوق داخلية في القالب. وذلك يشمل القوالب التي ستطرح في المستقبل

الآن مع قالبنا لليوم هو قالب مميز تمامًا ومصمم بأناقة، تم إنشاؤه خصيصًا لمدونات الأفلام والمسلسلات عبر الإنترنت بشكل مثالي، متجاوب يمكنه ضبط شكله وحجمه وفقًا لحجم الشاشة. يساعد على نشر مقاطع الفيديو من يوتيوب ومنصات أخرى بمساعدة Iframe. يمكن استخدامه أيضًا لدروس فيديو، دورات عبر الإنترنت، أخبار تقنية، مدونة مجلة، انيمي، طعام، ألعاب، رياضة.

التعديلات المطلوبة

1. من التخطيط حرر الأدوات التالية : Hot Posts، افلام حصرية، مسلسلات حصرية
2. ستجد خيار random أي عشوائي
3. يمكنك إظهار المواضيع حسب ما تريد : random أو recent أو وضع تسمية

منع النسخ ببلوجر عند النقر بتحذير منبثق

2020-06-06T14:54:00.002-07:00

مرحبا بكم مجددا، تكلمة في السابق عن هذه الإضافة طريقة حماية قالبك من Inspect element

في هذه النسخة سأوجهك لإنشاء نافذة نصية تحذيرية عندما ينقر المستخدمون بزر الماوس الأيمن على الصفحة. حيلة رائعة اليس كذلك؟ للحصول على صورة أفضل، شاهد بالمعاينة العرض التوضيحي!

معاينة

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه

ul.contextMenu {
 background: #fff;
 text-align: center;
 margin: 0;
 padding: 10px 20px;
 border-radius: 100px;
 color: #ff6460;
 box-shadow: 0 0 70px rgba(0, 0, 0, .25);
 font-family: "Roboto Condensed", sans-serif;
 font-weight: 700;
 font-size: 24px;
 z-index: 999999;
 position: fixed;
 top: 50%!important;
 left: 50%!important;
 transform: translate(-50%, -50%);
 pointer-events: none
}

4.اضف هذا الكود فوق </body>

<ul class='contextMenu' hidden='1'>STOP 💣</ul>
<script type='text/javascript'>
// Right click AR1WEB
$(document).bind(&quot;contextmenu&quot;, function(event) {
event.preventDefault();
$(&quot;ul.contextMenu&quot;)
.show(); 
});
$(document).click(function() {
isHovered = $(&quot;ul.contextMenu&quot;).is(&quot;:hover&quot;);
if (isHovered == false){
$(&quot;ul.contextMenu&quot;).fadeOut(100);
}
});
</script>

* يمكنك اضافة اي رسالة بدل STOP 💣

ملف مفتوح لأجهزة Pixel 4 و Pixelbook Go

2020-06-05T03:41:00.002-07:00

نقدم لكم مجموعة مجانية من نماذج أجهزة Google النموذجية للإستعمال بواجهة مستخدم أو لموقع ويب خاص بك، والتي تشمل:

Pixel 4 phone mockup
Pixelbook Go laptop mockup

يتوفر الملحق على مشهد عالي الدقة (6000 × 4500 بكسل) في 3 تنسيقات مختلفة للملفات (Sketch و Figma و Photoshop).
* رابط التحميل على الجانب الأيسر

اضافة صفحة الأرشيف لمدونات بلوجر

2020-06-04T04:12:00.001-07:00

اضافة فهرس المواضيع لمدونات بلوجر بشكل احترافي. حان وقت تحديث هذه الإضافة فآخر تدوينة لهذه الآداة كانت سنة 2015 يمكنك متابعتها هنا.
إن لم تكن لديك صفحة أرشيف فسارع بإضافتها لأن لديها دور مهم في كل من تحسين ترتيب التدوينات في جوجل ومحركات البحث الآخرى كما لها وظيفة في طلب الاشتراك في ادسنس فهي من الضروريات.
وسيستفيد منها الزوار بشكل كبير سيصلون للمواضيع بشكل اسرع يمكنك تجربة الإضافة مباشرة على مدونتنا.

معاينة

شرح طريقة التركيب

1. من خلال الصفحات انشئ صفحة جديدة
2. ضع الكود الآتي في تبويب HTML
3. ضع اسم للصفحة sitemap (بعد نشر الصفحة يمكنك تغيير اسم الصفحة)
* قم بتعطيل التعليقات من خلال اعدادات الصفحة ان اردت

<style type='text/css' scoped="">
.post-body table tr:nth-of-type(even):hover td, .post-body table tr:nth-of-type(odd):hover td { background-color: transparent!important;}
.post-body table tr:nth-of-type(odd) td { background-color: transparent!important; } .post-body table td, .post-body table caption { padding: 0 10px!important;}
#table-outer table{width:100%;margin:0 auto;    box-shadow: none;}#table-outer form{font:inherit}#table-outer label{text-align:left}#table-outer select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#table-outer input,#table-outer select{font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px}#table-outer select option{min-height:1.4em!important}#table-outer input#feed-q{padding:5px 10px!important}#feed-container{overflow:hidden;position:relative;border-top:none;display:block;clear:both;margin:10px;padding:0;list-style:none;}#feed-container li{list-style:none;margin:0 0 10px;padding:0 10px 0 0;color:#555;width:33%;text-align:center;float:right;display:inline;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#feed-container li .inner{position: relative; overflow: hidden; word-wrap: break-word; border-radius: .3em; background: #fff; color: #555; margin: 0; padding: 50px; height: 200px; line-height: 1.2em; box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);}#feed-container li a{color:#333;font-weight:500}#feed-container li a.toc-read{text-decoration:none;color:#fff;margin-top:30px}#feed-container li .inner:hover a.toc-read{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}#feed-container li .news-text{font-size:14px;margin-top:10px}#feed-container li .news-text div{display:none!important}#feed-container li img{margin:0;padding:0;width:100%!important;height:100%!important;position:absolute;top:0;left:0}#feed-container li .inner:hover img{transition:all 1s ease-in-out;-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;left:-500px;animation-fill-mode:both}
@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}#result-desc{margin:0;padding:0;text-align: center;margin-top: -40px;}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav span{cursor:wait}@media screen and (max-width:1024px){#main-wrapper{padding:0 30px!important}#feed-container{display:block;clear:both;margin:0 -30px 0 0}#feed-container li{list-style:none;margin:0 0 30px;padding:0 30px 0 0}#feed-container li .inner{padding:20px}}@media screen and (max-width:960px){#main-wrapper{padding:0 20px!important}#feed-container{display:block;clear:both;margin:0 -20px 0 0}#feed-container li{list-style:none;margin:0 0 20px;padding:0 20px 0 0}#feed-container li .inner{padding:20px}}@media screen and (max-width:800px){#feed-container li{width:50%}}@media screen and (max-width:640px){#feed-container li .inner{height:150px}}@media screen and (max-width:414px){#table-outer table,#feed-container li{width:100%}#table-outer table,#table-outer label{text-align:center}#table-outer table td{display:block;margin:0 auto 5px;clear:both;float:none}#table-outer label{margin:0}#table-outer{padding:0}}@media (max-width:414px){#table-outer table td{text-align:center;display:block}#table-outer label{text-align:center;display:block;margin:0;padding:4px 0 0}#table-outer input,#table-outer select{margin:0 0 10px}}a.btn-default{color:#333}#feed-nav a{color:#fff}#feed-nav a{background-image:none}#feed-nav a{font-weight:400}#feed-nav a{border-radius:4px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;cursor:pointer;user-select:none;display:inline-block;padding:6px 12px}
#feed-nav { text-align: center; font-weight: 500; margin: 0 auto; }
#feed-nav a:focus,#feed-nav a:hover,#feed-nav a:hover{text-decoration:none;color:#eee;outline:0;background: #322d2b;}.btn-default{background:#fff;color:#333;border-color:#ccc}.btn-default:focus{background:#e6e6e6;color:#333;border-color:#8c8c8c}.btn-default:active,.btn-default:hover{background:#e6e6e6;color:#333;border-color:#adadad}#feed-nav a{background:#FF5722;color:#fff;}.btn-success{background:#5cb85c;color:#fff;border-color:#4cae4c}.btn-success:focus{background:#449d44;color:#fff;border-color:#255625}

a.btn.btn-primary.btn-sm.toc-read { background: #F44336; }
#feed-nav a{font-size:18px;padding:10px 16px;border-radius:6px;line-height:1.3333333}.parser,.btn-sm,.btn-xs{border-radius:3px;font-size:12px;line-height:1.5}.btn-sm{padding:5px 10px}.comments .paging-control-container .paging-control,.parser,.btn-xs{padding:1px 5px}#feed-nav a{display:block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:100%;box-sizing:border-box}.btn-block+.btn-block{margin-top:5px}.comment_form>a+a{border-color:#fff;padding:0;margin-bottom:0;background:#fff}

</style>
<div id="table-outer">
<table><tbody>
<tr> <td>
<label for="feed-order"> تصنيف المنشورات : </label>
</td> <td>
<select id="feed-order">
<option selected="" value="published">المشاركات الأخيرة</option>
<option value="updated">التدوينات التي تم تحديثها مؤخرا</option>
</select>
</td> </tr>
<tr> <td>
<label for="label-sorter">تصنيف الأقسام : </label>
</td> <td>
<select disabled="" id="label-sorter">
<option selected="">الأقسام...</option>
</select>
</td> </tr>
<tr> <td>
<label for="feed-q">البحث عن التدوينات بحسب الكلمة الرئيسية : </label>
</td> <td>
<form id="post-searcher">
<input id="feed-q" placeholder="ابحث هنا..." type="text" />
</form>
</td> </tr>
</tbody> </table>
</div>


<header id="result-desc"></header>


<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src='//raw.githack.com/iHussam/ar1web/master/sit.js'></script>

قالب فكرة مين متعدد الإستعمال

2020-05-29T14:52:00.000-07:00

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

التعديلات المطلوبة

1. من التخطيط حرر الأدوات : الأكثر مشاهدة، قوالب بلوجر، خطوط عربية، خطوط أجنبية، دروس وشروحات، ملحقات فوتوشوب، اضافات بلوجر، خلفيات
2. ستجد خيار random أي مواضيع عشوائية يمكنك تغييرها بوضع اخر المواضيع : recent أو بوضع تسمية

إضافة تأثير التموج على بلوجر Ripple Effect

2020-05-26T15:16:00.000-07:00

إنشاء تأثير تموج عند النقر بالنسبة إلى قوالب بلوجر الافتراضية في الإصدار الجديد، هناك تأثير تموج النقرات الرائع جدًا هو Ripple effect، والمعروف أيضًا بـmaterial click.
قد يعرفه الكثير منكم خصوصا من يستخدم قوالب بلوجر الإفتراضية، الفرق هنا عند استعمال Ripple المدمج من بلوجر هو كبر مكتبة JS وهناك أشياء زائدة عن الحاجة عند عدم استخدامها، مما يجعل المدونة أثقل في تحميل الصفحة.

يمكنك استعمال التأثير على اي عنصر في المدونة من أزرار، صور، عناوين إلى غير ذلك... قم بالتجربة بالضغط على الزر أو عاين التأثير هنا

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه

.flat-icon-button {
 background: transparent;
 border: 0;
 outline: none;
 padding: 8px;
 cursor: pointer;
 box-sizing: content-box;
 display: inline-block;
 line-height: 0
}
.flat-icon-button,
.flat-icon-button .splash-wrapper {
 border-radius: 50%
}
.flat-icon-button .splash.animate {
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s
}
.flat-button {
 cursor: pointer;
 border-radius: 2px;
 padding: 8px
}
.ripple {
 position: relative
}
.ripple>* {
 z-index: 1
}
.splash-wrapper {
 bottom: 0;
 left: 0;
 overflow: hidden;
 pointer-events: none;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 0
}
.splash {
 background: rgba(0, 0, 0, .3);
 border-radius: 100%;
 display: block;
 opacity: .9;
 position: absolute;
 -webkit-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0)
}
.splash.animate {
 -webkit-animation: ripple-effect .5s linear;
 animation: ripple-effect .5s linear
}
@-webkit-keyframes ripple-effect {
 100% {
  opacity: 0;
  -webkit-transform: scale(2.5);
  transform: scale(2.5)
 }
}
@keyframes ripple-effect {
 100% {
  opacity: 0;
  -webkit-transform: scale(2.5);
  transform: scale(2.5)
 }
}

4.اضف هذا الكود فوق </body>

<script src='//cdn.jsdelivr.net/gh/dangtiensi/siben@3e73bd4e2ea1575aa5145b43f3993dd22fac01f7/ripple.js'></script>
<style>

الإستعمال

تأثير مربع: أضف التموج إلى أي عنصر ضمن الوسم "class="ripple

تأثير دائري: أضف التموج إلى أي عنصر ضمن الوسم "class="ripple flat-icon-button
مثال : <div class="ripple Test"> </div>

إضافة الوضع الليلي السريع إلى قالبك

2020-05-24T05:57:00.001-07:00

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

المهم لنتكلم عن اضافتنا والتي هي من افضل الإضافات الليلية لحد الآن مشابهة للوضع الليلي باليوتوب حيث لن تلاحظ اي توهج ابيض عند تحميل الموقع او الدخول للمواضيع.
يمكنك تجربة الإضافة على مدونتنا مباشرة... تعمل على اي قالب بدون مشاكل

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن <body> ثم ضع الكود التالي اسفله

 <script>
//<![CDATA[
function auto(){document.body.classList.add('auto');if(new Date().getHours()>19||new Date().getHours()<6){document.body.classList.add('dark');localStorage.setItem('641234dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('641234dark','false')}}function dark(){localStorage.getItem('641234dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('641234auto')=='true'){auto()}else{localStorage.getItem('641234dark')==null?auto():dark()}function toggle(){localStorage.setItem('641234auto',localStorage.getItem('641234auto')=='true'?'false':'true');localStorage.getItem('641234auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('641234auto');localStorage.setItem('641234dark',localStorage.getItem('641234dark')=='true'?'false':'true');dark()}
//]]>
</script>

4. الكود التالي هو زر الوضع الليلي ضعه بالمكان المناسب

<div class='dark-mode'><button class='toggle' onclick='toggle()' style='display:none' type='button'/><button class='mode' onclick='mode()' type='button'/></div>

5. ابحث عن ]]></b:skin> ثم ضع الكود فوقه

/* Button Mode */
.dark-mode{float: left; position: absolute; left: 90px; top: 25px; z-index: 98;}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:&#39;&#39;}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
.u-p-medium h3:after { content: &quot;&quot;; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: 100%; } .u-p-medium h3:before { content: &quot;&quot;; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: auto; right: 100%; } .u-p-medium h3 { font-size: 20px; margin: 0 auto; text-align: center; display: table; position: relative; padding: 0 10px; }
  
/* Body Edit */
body.dark{background: #1c1c1c ;color:#ccc;}

6. احفظ العمل واذهب للمعاينة
* إن لاحظت فالوضع الليلي اشتغل على الخلفية هنا علينا تطبيق .dark على كل وسم مثلا الشريط الجانبي #sidebar ليصبح هكذا .dark #sidebar {هنا Css} وكل قالب يختلف عن آخر وسيتطلب بعض الوقت للتطبيق على كل وسم

كيفية معرفة الوسوم بالمدونة؟
هناك طريقة سهلة لمعرفة سمات عنصر المدونة، استخدم ميزة فحص العنصر (Inspect Element) الموجودة في متصفحك. افتح موقع الويب الخاص بك ، وانقر بزر الماوس الأيمن في المساحة المراد التطبيق عليها وحدد خيار فحص العنصر

لذا كالعادة اوجه كلامي للمبتدئين التعليقات مرحب بها للمساعدة.

تركيب اضافة مانع الإعلانات بشكل جديد

2020-05-18T22:58:00.000-07:00

بالنسبة لناشري adsense، يمثل مانع الإعلانات تحديًا. فهو يؤدي إلى انخفاض الدخل بشكل كبير وهو أمر محزن للغاية ولكن هذه حقيقة يمكننا التعايش معها الآن.

يمكن لعمالقة المدونات الشهيرة مثل Huffington Post أن يجنيوا حوالي 2.330.000 دولار شهريًا من دخلهم الإعلاني، ويكسب TechCrunch حوالي 800000 دولار من إعلانات البانر. حتى الناشرين مثل Abduzeedo يحققون أرباحًا رائعة من عائداتهم الإعلانية والتي تقدر بنحو 12000 دولار شهريًا.

وظيفة مانع الإعلانات
Anti AdBlock هي سلسلة من البرامج النصية التي تجبر مظهر الموقع على عرض إشعارات معينة إذا قام مستخدم المتصفح بتنشيط AdBlock. عادة ما يغطي برنامج مكافحة adblock محتوى الموقع بالكامل (overlay)، والذي يحتوي على إشعار لمستخدمي المتصفح لتعطيل مانع الإعلانات الذي يستخدمونه. الغرض من إنشاء مانع الإعلانات هو أن تستمر الإعلانات في الظهور، من أجل دعم بقاء واستمرار موقع يعتمد على إيرادات الإعلانات

واليوم معنا الجزء الثالث من الإضافة بشكل جذاب سلس ومتجاوب كما وسبقت ان شاركتكم نفس عمل الأداة ويمكنك متابعتها من خلال هذه التدوينة : تثبيت اضافة كاشف الإعلانات على موقعك

لترى الإضافة فعّل مانع الإعلانات

معاينة

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الكود فوقه

/*!
 * Anti-adblock v2.1.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 * Blogger Version By Ar1web.net
 */
@font-face {
  font-family: &quot;wgd&quot;;
  src: url(https://cdn.jsdelivr.net/gh/da2l/host@1/dist/fonts/wgd.woff) format(&quot;woff&quot;);
  font-weight: normal;
  font-style: normal;
}
[class^=&quot;wgd-&quot;]:before,
[class*=&quot; wgd-&quot;]:before {
  font-family: &quot;wgd&quot; !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wgd-usd:before {
  content: &quot;\61&quot;;
}
.wgd-eur:before {
  content: &quot;\62&quot;;
}
.wgd-btc:before {
  content: &quot;\63&quot;;
}
.wgd-times:before {
  content: &quot;\64&quot;;
}
@keyframes square {
  0% {
    transform: translateY(0) scale(1.5) rotate(0);
    opacity: 1
  }
  100% {
    transform: translateY(-600px) scale(1) rotate(-200deg);
    opacity: 0
  }
}
.WgD-particles i {
  font-size: 4em;
  font-weight: 400;
  position: absolute;
  bottom: -100px;
  animation: square 10s infinite;
}
.WgD-particles i:nth-child(6),
.WgD-particles i:nth-child(4),
.WgD-particles i:nth-child(11),
.WgD-particles i:nth-child(8) {
  font-size: 3em;
}
.WgD-particles i:nth-child(2),
.WgD-particles i:nth-child(3),
.WgD-particles i:nth-child(10) {
  font-size: 2em;
}
.WgD-particles i {
  animation-duration: 16s;
}
.WgD-particles i:nth-child(1) {
  left: 15%;
}
.WgD-particles i:nth-child(2) {
  left: 24%;
  animation-duration: 8s
}
.WgD-particles i:nth-child(3) {
  left: 50%;
  animation-delay: 5s
}
.WgD-particles i:nth-child(4) {
  left: 40%;
  animation-delay: 7s;
  animation-duration: 15s
}
.WgD-particles i:nth-child(5) {
  left: 36%;
  animation-delay: 6s
}
.WgD-particles i:nth-child(6) {
  left: 44%;
  animation-delay: 10s;
  animation-duration: 20s
}
.WgD-particles i:nth-child(7) {
  left: 58%;
  animation-delay: 2s;
  animation-duration: 18s
}
.WgD-particles i:nth-child(8) {
  left: 45%;
  animation-duration: 14s
}
.WgD-particles i:nth-child(9) {
  left: 66%;
  animation-delay: 3s;
  animation-duration: 12s
}
.WgD-particles i:nth-child(10) {
  left: 74%;
  animation-duration: 25s
}
.WgD-particles i:nth-child(11) {
  left: 80%;
  animation-delay: 4s
}
body.ab-is-detected {
  overflow: hidden !important;
}
[id=WgD] {
  display: none;
}
[id=WgD].is-detected {
  display: block;
}
@keyframes wgdfade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#WgD {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 14px;
  animation: wgdfade .3s;
  z-index: 99999;
}
.WgD-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;
}
.WgD-title {
  margin: 0;
  margin-bottom: .5em;
  font-size: 1.6em; 
  font-weight: 800; 
  font-family: &#39;bein-normal&#39;, sans-serif;
   color: #333;
}
.WgD-text {
  margin: 0;
  font-weight: 400;
  font-family: &#39;bein-normal&#39;, sans-serif;
  color:#6d707a;
}
.WgD-reload {
  text-decoration: none;
  display: inline-block;
  margin-top: 2em;
  font-weight: 500;
  transition: transform .3s;
  font-family: &#39;bein-normal&#39;, sans-serif;
}
.WgD-reload:hover {
  transform: scale(1.05);
}
.WgD-close {
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none;
  font-size: 20px;
  color: #999;
  padding: 1rem;
  line-height: 1;
  display: block;
}
.WgD-container img {
  max-width: 100%;
  margin-bottom: 1em;
  object-fit: cover;
}


/* Base
-----------------------------------------*/
[id=WgD] {
  font-family: &#39;Roboto&#39;, sans-serif; /*fuente*/
  background: #FF416C; /*fondo por defecto */
  background: linear-gradient(to right, #FF4B2B, #FF416C);
}
.WgD-particles i {
  color: rgba(0, 0, 0, 0.2); /*color particulas*/
}
/* Animacion (daneden.github.io/animate.css/)
-----------------------------------------*/
.WgD-container {
  animation: bounceIn 1s; /*nombre y duracion*/
}
/* Cuerpo
-----------------------------------------*/
.WgD-container {
  padding: 3.2em; /*naruto(relleno)*/
  max-width: 450px; /*ancho maximo*/
  background-color: #fff; /*color*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1); 
  text-align: center; 
  line-height: 1.5; 
  border-radius: 10px; 
  color: #37474F;
}
.WgD-title {
  font-size: 1.6em;
}
.WgD-text {
  font-size: 1.2em; 
}
/* Boton Recargar
-----------------------------------------*/
a.WgD-reload {
color: #fff !important;
}
.WgD-reload {
  box-shadow: rgba(0, 0, 0, .12) 0 3px 13px 1px;
  color: #fff;
  padding: 1em 1.5em; 
  background: #F44336; /*color*/
  border-radius: 3px; 
}
.WgD-reload:hover {
    color: #fff;
}
.WgD-close:hover {
    color: #464646;
}
/* Imagen
-----------------------------------------*/
.WgD-container img {
  max-height: 200px; 
}

4. ابحث عن </body> ثم ضع الكود التالي فوقه

<div id='WgD'>
  <div class='WgD-position'>
    <div class='WgD-container'>
      <h3 class='WgD-title'>تم الكشف عن مانع الإعلانات!</h3>
      <p class='WgD-text'>يرجى إيقاف <strong>Adblock</strong> للاستمرار في دعم الموقع من أجل التطوير</p>
      <a class='WgD-reload' href='#' onclick='adBlockReload()'>تعطيل Adblock &amp; إعادة تحميل</a>
    </div>
  </div>
  <div class='WgD-particles'>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-btc'/>
    <i class='wgd-usd'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-btc'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
 </div></div>


<!-- Adblock -->
<script>
function adBlockClose() {
  document.getElementById(&quot;WgD&quot;).classList.remove(&quot;is-detected&quot;);
  document.body.classList.remove(&quot;ab-is-detected&quot;)
};
function adBlockReload() {
  window.location.reload();
  return !1
};
function adBlockDetected() {
  document.getElementById(&quot;WgD&quot;).classList.add(&quot;is-detected&quot;);
  document.body.classList.add(&quot;ab-is-detected&quot;)
};
if(typeof fuckAdBlock !== &#39;undefined&#39; || typeof FuckAdBlock !== &#39;undefined&#39;) {
 adBlockDetected();
} else {
 var importFAB = document.createElement(&#39;script&#39;);
 importFAB.onload = function() {
  fuckAdBlock.onDetected(adBlockDetected)
  fuckAdBlock.onNotDetected(adBlockNotDetected);
 };
 importFAB.onerror = function() {
  adBlockDetected(); 
 };
 importFAB.integrity = &#39;sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=&#39;;
 importFAB.crossOrigin = &#39;anonymous&#39;;
 importFAB.src = &#39;https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js&#39;;
 document.head.appendChild(importFAB);
}
</script>

اضافة تأثيرات الظل على شعار المدونة

2020-05-15T21:17:00.002-07:00

جعل تأثير الظل يتحرك ذهابا وإيابا على شعار المدونة. هذا التأثير رائع حقا سيعطي لشعار مدونتك لمسة جميلة، لا يؤثر بتاتا على تحميل مدونتك لأنه مكون فقط من Css. انتقل للوضع الليلي من مدونتنا لترى بوضوح الظلال

عرب ويب | الأفضل لكم

كما رأيتم وظيفة هذا التأثير بسيطة هي جعل مدونتك تبدو احترافية 😍 وجعل الزائرين مرتاحين! وبالطبع، ستظهر مدونتك بشكل اروع لندخل للتطبيق

شرح طريقة التركيب

1. المظهر >> تعديل HTML
2. ابحث بإستعمال CTRL+F عن ]]> </ b: skin>
3. ضع الكود التالي قبله

/* Effect Logo Ar1web */
header #header-inner a{position:relative}
header #header-inner a:before,header #header-inner a:after{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}
header #header-inner a:before{left:-5%;animation:light-left 3s infinite alternate linear}
header #header-inner a:after{right:-5%;animation:light-right 3s infinite alternate linear}
@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}
@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}

اكواد القوالب تختلف عن بعضها فإن لم يكن قالبك معدل فالتأثير سيتشتغل معك مباشرة، وإن لم يعمل فأنا هنا للمساعدة

طريقة اعادة توجيه الروابط ببلوجر

2020-05-15T17:07:00.000-07:00

كيفية إنشاء رابط URL إعادة التوجيه / إعادة التوجيه تلقائيًا باستخدام Java Script/HTML بالعد التنازلي. طريقة إعادة توجيه موقع ويب أو صفحة مدونة إلى صفحة أخرى.
مرحبًا بكم بناء على احد الطلبات، سنناقش طريقة من الطرق لتحويل عنوان URL / رابط موقع ويب إلى الصفحة التي تريدها.
حسنًا، لإعادة توجيه الرابط يمكن القيام بها باستخدام جافا سكريبت، يمكنك تعديله كما يحلو لك.

معروف على هذه الإضافة أنها تزيد من ارباح ادسنس أو أى شركة اعلانات اخرى ولو بشكل طفيف وذلك بتخصيص مجموعة من الروابط المعينة الخاصة بالمدونة، مثل روابط المواضيع وروابط صفحات التواصل الاجتماعي وغيرها من الصفحات التى تريد استثنائها من التحويل ولا تقتصر على الإعلانات يمكن ان تضع بها اي شيء!
ملاحظة : هذه النسخة الأولى من السكربت والذي هو عبارة عن PreLoader وهناك نسخة اخرى سأوفرها لكم في الأيام القادمة إن شاء الله

شرح طريقة التركيب

1. عمل صفحه جديدة من خلال الصفحات > صفحة جديدة
2. ضع عنوان للصفحة ويفضل أن يكون بالإنجليزية مثلا Redirect
3. انتقل لوضع HTML ثم اختر الشكل والصقه
* ألغي اختيار التعليقات من الإعدادات

الشكل الأول

<script>
            var url = "https://ar1web.blogspot.com/"; // رابط الموقع
            var count = 10; // عدد الثواني
            function countDown() {
                if (count > 0) {
                    count--;
                    var waktu = count + 1;
                    $('#Kata').html('<b>ستعيد هذه الصفحة التوجيه تلقائيًا إلى </b> ' + url + ' dalam ' + waktu + ' detik.');
                    setTimeout("countDown()", 1000);
                } else {
                    window.location.href = url;
                }
            }
            countDown();
        </script>
<style>
#comments,#side-bar{display: none;} .col-lg-8 { width: 100%; }
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%!important;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
margin:20px 0;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.cnt-right { float: right; width: 50%;padding: 10px; } .cnt-left { float: left; width: 50%; padding: 10px; }

 #content1{position:relative;margin-bottom: 30px;color:rgba(0,0,0,0.15); background: #f1e791;font-weight:700;overflow:hidden;width:100%;height:90px} #content1 .button{margin:0;position:absolute;left:5%;top:29%;list-style:none} #content1 .button a.download{display:inline-block;background:#d63031;color:#fff;font-size:14px;font-weight:400;padding:8px 16px;border-radius:3px} #content1 .button a.download:hover{background:#222;color:#fff} #content1 .visible{position: absolute; right: 3px; color: rgba(0,0,0,0.1); font-size: 4rem; line-height: 2.4;} @media screen and (max-width:768px){ #content1 .button{left:20px;right:20px} #content1 .button a.download{display:block} #content1 .visible{display:none}} 
</style>
<center>
<div id="content1"> <div style="text-align: center;"> <ul class="button"> <li><a class="download" href="#" rel="nofollow noopener" target="_blank">تحميل</a></li> </ul> </div> <div class="visible"> <p> Ads 1100x90 </p> </div> </div>
<b>يرجى تعطيل مانع الإعلانات وتفعيل جافا سكريبت  للولوج إلى هذه الصفحة... إذا كنت تستخدم متصفح فيرفوكس أو أوبرا ميني، فقم بتغييره إلى متصفح افتراضي، لأن هذا المتصفح يعطل وظيفة جافا سكريبت.</b>
<br />
<center style="color: red; padding:10px">
إذا لم تتم إعادة توجيهك للصفحة، اضغط <a href="https://ar1web.blogspot.com/"><b>هنا</b></a>
<br />

<div class="loader">
</div>
</center>
<div class="cnt-right">
<h2>ما هو "لوريم إيبسوم" ؟</h2>
<p dir="rtl">لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.  
</p>
</div>
<div class="cnt-left">
<h2>ما فائدته ؟</h2>
<p dir="ltr">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام "هنا يوجد محتوى نصي، هنا يوجد محتوى نصي" فتجعلها تبدو (أي الأحرف) وكأنها نص مقروء. العديد من برامح النشر المكتبي وبرامح تحرير صفحات الويب تستخدم لوريم إيبسوم بشكل إفتراضي كنموذج عن النص، وإذا قمت بإدخال "lorem ipsum" في أي محرك بحث ستظهر العديد من المواقع الحديثة العهد في نتائج البحث. على مدى السنين ظهرت نسخ جديدة ومختلفة من نص لوريم إيبسوم، أحياناً عن طريق الصدفة، وأحياناً عن عمد كإدخال بعض العبارات الفكاهية إليها.  
</p>
</div>
</center>

الشكل الثاني

<script>
            var url = "https://ar1web.blogspot.com/"; // رابط الموقع
            var count = 10; // عدد الثواني
            function countDown() {
                if (count > 0) {
                    count--;
                    var waktu = count + 1;
                    $('#Kata').html('<b>ستعيد هذه الصفحة التوجيه تلقائيًا إلى </b> ' + url + ' dalam ' + waktu + ' detik.');
                    setTimeout("countDown()", 1000);
                } else {
                    window.location.href = url;
                }
            }
            countDown();
        </script>

<style>
#comments,#side-bar{display: none;} .col-lg-8 { width: 100%; }
nsform: rotate(360deg); }
}
.cnt-right { float: right; width: 50%; }
.cnt-right { float: right; width: 50%;padding: 10px; } .cnt-left { float: left; width: 50%; padding: 10px; }

 #content1{position:relative;margin-bottom: 30px;color:rgba(0,0,0,0.15); background: #f1e791;font-weight:700;overflow:hidden;width:100%;height:90px} #content1 .button{margin:0;position:absolute;left:5%;top:29%;list-style:none} #content1 .button a.download{display:inline-block;background:#d63031;color:#fff;font-size:14px;font-weight:400;padding:8px 16px;border-radius:3px} #content1 .button a.download:hover{background:#222;color:#fff} #content1 .visible{position: absolute; right: 3px; color: rgba(0,0,0,0.1); font-size: 4rem; line-height: 2.4;} @media screen and (max-width:768px){ #content1 .button{left:20px;right:20px} #content1 .button a.download{display:block} #content1 .visible{display:none}} 

#fountainG{position:relative;width:234px;height:28px;margin:auto;}.fountainG{position:absolute;top:0;background-color:rgb(0,0,0);width:28px;height:28px;animation-name:bounce_fountainG;-o-animation-name:bounce_fountainG;-ms-animation-name:bounce_fountainG;-webkit-animation-name:bounce_fountainG;-moz-animation-name:bounce_fountainG;animation-duration:1.5s;-o-animation-duration:1.5s;-ms-animation-duration:1.5s;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;transform:scale(.3);-o-transform:scale(.3);-ms-transform:scale(.3);-webkit-transform:scale(.3);-moz-transform:scale(.3);border-radius:19px!important;-o-border-radius:19px!important;-ms-border-radius:19px;-webkit-border-radius:19px;-moz-border-radius:19px;}#fountainG_1{left:0;animation-delay:0.6s;-o-animation-delay:0.6s;-ms-animation-delay:0.6s;-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;}#fountainG_2{left:29px;animation-delay:0.75s;-o-animation-delay:0.75s;-ms-animation-delay:0.75s;-webkit-animation-delay:0.75s;-moz-animation-delay:0.75s;}#fountainG_3{left:58px;animation-delay:0.9s;-o-animation-delay:0.9s;-ms-animation-delay:0.9s;-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;}#fountainG_4{left:88px;animation-delay:1.05s;-o-animation-delay:1.05s;-ms-animation-delay:1.05s;-webkit-animation-delay:1.05s;-moz-animation-delay:1.05s;}#fountainG_5{left:117px;animation-delay:1.2s;-o-animation-delay:1.2s;-ms-animation-delay:1.2s;-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;}#fountainG_6{left:146px;animation-delay:1.35s;-o-animation-delay:1.35s;-ms-animation-delay:1.35s;-webkit-animation-delay:1.35s;-moz-animation-delay:1.35s;}#fountainG_7{left:175px;animation-delay:1.5s;-o-animation-delay:1.5s;-ms-animation-delay:1.5s;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;}#fountainG_8{left:205px;animation-delay:1.64s;-o-animation-delay:1.64s;-ms-animation-delay:1.64s;-webkit-animation-delay:1.64s;-moz-animation-delay:1.64s;}@keyframes bounce_fountainG{0%{transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{transform:scale(.3);background-color:rgb(92,90,92);}}@-o-keyframes bounce_fountainG{0%{-o-transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{-o-transform:scale(.3);background-color:rgb(92,90,92);}}@-ms-keyframes bounce_fountainG{0%{-ms-transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{-ms-transform:scale(.3);background-color:rgb(92,90,92);}}@-webkit-keyframes bounce_fountainG{0%{-webkit-transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{-webkit-transform:scale(.3);background-color:rgb(92,90,92);}}@-moz-keyframes bounce_fountainG{0%{-moz-transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{-moz-transform:scale(.3);background-color:rgb(92,90,92);}}

</style>
<center>
<div id="content1"> <div style="text-align: center;"> <ul class="button"> <li><a class="download" href="#" rel="nofollow noopener" target="_blank">تحميل</a></li> </ul> </div> <div class="visible"> <p> Ads 1100x90 </p> </div> </div>
<b>يرجى تعطيل مانع الإعلانات وتفعيل جافا سكريبت  للولوج إلى هذه الصفحة... إذا كنت تستخدم متصفح فيرفوكس أو أوبرا ميني، فقم بتغييره إلى متصفح افتراضي، لأن هذا المتصفح يعطل وظيفة جافا سكريبت.</b>
<br />
<center style="color: red; padding:10px">
إذا لم تتم إعادة توجيهك للصفحة، اضغط <a href="https://ar1web.blogspot.com/"><b>هنا</b></a>
<br />

<div id="fountainG">
 <div class="fountainG" id="fountainG_1">
</div>
<div class="fountainG" id="fountainG_2">
</div>
<div class="fountainG" id="fountainG_3">
</div>
<div class="fountainG" id="fountainG_4">
</div>
<div class="fountainG" id="fountainG_5">
</div>
<div class="fountainG" id="fountainG_6">
</div>
<div class="fountainG" id="fountainG_7">
</div>
<div class="fountainG" id="fountainG_8">
</div>
</div>
</center>
<div class="cnt-right">
<h2>ما هو "لوريم إيبسوم" ؟</h2>
<p dir="rtl">لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.  
</p>
</div>
<div class="cnt-left">
<h2>ما فائدته ؟</h2>
<p dir="ltr">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام "هنا يوجد محتوى نصي، هنا يوجد محتوى نصي" فتجعلها تبدو (أي الأحرف) وكأنها نص مقروء. العديد من برامح النشر المكتبي وبرامح تحرير صفحات الويب تستخدم لوريم إيبسوم بشكل إفتراضي كنموذج عن النص، وإذا قمت بإدخال "lorem ipsum" في أي محرك بحث ستظهر العديد من المواقع الحديثة العهد في نتائج البحث. على مدى السنين ظهرت نسخ جديدة ومختلفة من نص لوريم إيبسوم، أحياناً عن طريق الصدفة، وأحياناً عن عمد كإدخال بعض العبارات الفكاهية إليها.  
</p>
</div>
</center>

التغييرات المطلوبة

1. غير الرابطين ar1web.blogspot.com بالصفحة المراد الذهاب اليها
2. غير count=10 بعدد الثواني التي تريد (ابقها اقل من 20 ثانية)
3. غير الكتابة المحددة بالأزرق

الى هنا نصل لنهاية التدوينة، مرحبا باستفساراتكم. ان لم تعجبك طريقة اشتغال الإضافة فما عليك الا انتظار النسخة القادمة 😉 تحياتي

افضل موقع لتحميل قوالب بلوجر

2020-04-20T17:07:00.000-07:00

مرحبا بكم في تدوينة من صنف المواقع المفيدة، نظرا لأننا في الحجر الصحي مع هذه الأزمة أتمنى ان يكون الجميع في صحة جيدة وان تحافظوا على سلامتكم قدر المستطاع.
حقيقة كنت افكر مع نفسي نظرا لوجود كم هائل من قوالب بلوجر سوى عربية أو اجنبية أصادف يوميا قالب جديد واحتار أي منهم سأقوم بتعريبه لكم مع ذلك يساورني الشكوك انه لم يعد يوجد ذلك الإقبال على القوالب المعربة كما كنا من قبل وذلك للتطويرات التي حصلت على القوالب الأجنبية لان معظمها الآن يقبل RTL وهو الإتجاه العربي بمعنى اخر. موقعنا هذا هو موقع DonuTheme موقع جديد متخصص في عرض قوالب بلوجر فقط. يضم أشكال وأنواع منها المدفوعة ومنها المجانية الا ان الموقع كل شيء به مجاني مجاني 😊 بدون روابط مزعجة أو باسووردات للملفات
محتويات الموقع هي كالآتي:

صفحة للطلبات.
صفحة الإتصال.
صفحة سياسة الخصوصية.

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

الدخول للموقع Donutheme.com

قالب مدونة عرب ويب الأصلي V2

2020-04-09T10:06:00.000-07:00

قالب مدونة عرب ويب النسخة الثانية. اهلا بكم من جديد متابعينا الاعزاء بمناسبة اطلاق الدومين الجديد Arab1web.com يسعدنا ان نشارككم قالب Ar1web V2 بعد ان قمنا بطرح النسخة الأولى، ستحصلون على نسخة جديدة محسنة بتحديثات مميزة بتصميم material design
لا يحتاج القالب للتعريف به فهو نسخة من طبق الأصل كنا نستعملها فيما مضى جاهز للإستعمال يتضمن ادواة السيو وغيرها لتحسين جودة المحتوى شرح تعديل القالب مرفق مع الملف إطلع على باقي المميزات بجانب الصفحة

الواجهة كاملة

اداة مواضيع ذات صلة على شكل سلايدر

2020-04-05T05:54:00.000-07:00

هل تبحث عن اضافة تقوم فيها بتحديث مدونتك؟ اذا أنت في التدوينة الملائمة، غالبًا ما يتم العثور على هذه الأداة في كل مدونة وربما تكون هذه الأداة واحدة من أكثر التطبيقات الإلزامية التي يجب ان تكون بالمدونة.

يواصل صانعو قوالب المدونات التنافس على ابتكار مظهر جديد لهذه الأداة، وأحد الأمثلة هي ما سنشارككم خلاله في هذا التدوينة.

التحديث الذي جرى في هذه الإضافة انها تتحرك على شكل سلايدر تضمن التاريخ واسم الكاتب... ولا شيء افضل من المعاينة بأنفسكم

معاينة

إقرأ أيضًا

إضافة مواضيع ذات صلة بشكليين

إضافة مواضيع ذات صلة الشكل الثالث

شرح طريقة التركيب

1. المظهر >> تعديل HTML

2. ابحث بإستعمال CTRL+F عن </head>

3. ضع الكود التالي قبله

<b:if cond='data:view.isPost'>
<!-- owl Carousel -->
<link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
<style type='text/css'>
/*<![CDATA[*/
/* Related Posts Ar1web */
#related-posts{background:#ffffff;border:1px solid #eee;margin-bottom:30px;padding:20px;font-family: 'Droid Arabic Naskh',sans-serif;    margin: 20px 0;}
#related-posts li{overflow:hidden;position:relative;padding:0;list-style:none}
.related-img{height:240px}
.related-img a{display:block;width:100%;height:100%}
.related-content{position:absolute;bottom:0;padding:20px;width:100%;text-align:right}
.related-title a{color:#eee;font-family:inherit;font-weight:700;font-size:15px}
.related-label{color:#fff;font-size:13px;background:#ffffff;padding:2px 10px;display:inline-block;margin-bottom:10px;overflow:hidden}#related-posts .recent-meta{opacity:0;visibility:hidden;margin-bottom:-24px}
#related-posts li:hover .recent-meta{opacity:1;visibility:visible;margin-bottom:0}
#related-posts li:hover .related-label{color:#555;background:#fff}
#related-posts h5{float: right;display:inline-block;background:#ffffff;padding:0 8px;font-family:inherit;text-transform:uppercase;font-weight:700;font-size:14px;border-right:3px solid #ec2423;color:#555555;position:relative;z-index:999}
#related-posts .widget-title{border-bottom:1px solid #eeeeee;position:relative;margin-bottom:15px;padding-bottom:10px}
#related-posts .widget-title:after{content:"";height:2px;background:#eeeeee;display:inline-block;width:100%;position:absolute;left:0;top:9px}
#related-posts .owl-nav{float:left;background:#ffffff;padding-right:3px;position:relative;z-index:999}
#related-posts .owl-nav div{float:right;width:25px;text-align:center;background:#eeeeee;height:25px;margin-right:5px;line-height:25px;margin-top:-4px;color:#555;font-size:15px;cursor:pointer}
#related-posts .owl-nav div:hover{color:#fff;background:#813781}
.mag-share{position:absolute;top:0;height:0;right:0;z-index:99;width:100%;padding:10px}a.linkedin-share { display: none; }
.mag-share .share-button{line-height:27px!important;font-size:13px!important;border:1px solid #fff;float:right;color:#fff!important;position:static!important;width:27px;height:27px;text-align:center;background:rgba(0,0,0,0.11);padding:0!important}
.mag-share ul{float:left;margin-top:-15px;opacity:0;visibility:hidden}
.mag-share ul a{float:right;width:25px;height:25px;padding:0!important;font-size:13px;text-align:center;line-height:25px!important;margin-right:5px;color:#fff!important}
.share-button {background: none!important }
.mag-share.actived ul{opacity:1;margin:0;visibility:visible}
.mag-share a:hover,.mag-share.actived .share-button{color:#555!important;background:#fff}
.facebook-share{margin-right:0!important;background:#3b5998}
.twitter-share{background:#55acee}
.google-plus-share{background:#DD4B39}
#related-posts a,#related-posts .recent-meta,.owl-nav div{transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s}
.grident-mag{z-index:99;right:0;pointer-events:none;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-webkit-gradient(linear,right top,right bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.8)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=0)}
.grident-mag span{color:#ccc!important}
.recent-meta{margin-top:10px}
.recent-meta span{font-family:inherit;text-transform:capitalize;color:#6d7683;font-size:12px}
.recent-date{margin-left:10px}
.recent-meta span:before,.related-meta span:before{font-family:fontawesome;margin-left:5px;position:relative;top:-1px}
.recent-author:before{content:"\f007"}
.recent-date:before{content:"\f073"}
/*]]>*/
</style>
</b:if>

4. ابحث عن </body> ثم ضع الكود التالي بعده

<script type='text/javascript'>
//<![CDATA[
 !function(a,b,c,d){function e(b,c){this.settings=null,this.options=a.extend({},e.Defaults,c),this.$element=a(b),this.drag=a.extend({},m),this.state=a.extend({},n),this.e=a.extend({},o),this._plugins={},this._supress={},this._current=null,this._speed=null,this._coordinates=[],this._breakpoint=null,this._width=null,this._items=[],this._clones=[],this._mergers=[],this._invalidated={},this._pipe=[],a.each(e.Plugins,a.proxy(function(a,b){this._plugins[a[0].toLowerCase()+a.slice(1)]=new b(this)},this)),a.each(e.Pipe,a.proxy(function(b,c){this._pipe.push({filter:c.filter,run:a.proxy(c.run,this)})},this)),this.setup(),this.initialize()}function f(a){if(a.touches!==d)return{x:a.touches[0].pageX,y:a.touches[0].pageY};if(a.touches===d){if(a.pageX!==d)return{x:a.pageX,y:a.pageY};if(a.pageX===d)return{x:a.clientX,y:a.clientY}}}function g(a){var b,d,e=c.createElement("div"),f=a;for(b in f)if(d=f[b],"undefined"!=typeof e.style[d])return e=null,[d,b];return[!1]}function h(){return g(["transition","WebkitTransition","MozTransition","OTransition"])[1]}function i(){return g(["transform","WebkitTransform","MozTransform","OTransform","msTransform"])[0]}function j(){return g(["perspective","webkitPerspective","MozPerspective","OPerspective","MsPerspective"])[0]}function k(){return"ontouchstart"in b||!!navigator.msMaxTouchPoints}function l(){return b.navigator.msPointerEnabled}var m,n,o;m={start:0,startX:0,startY:0,current:0,currentX:0,currentY:0,offsetX:0,offsetY:0,distance:null,startTime:0,endTime:0,updatedX:0,targetEl:null},n={isTouch:!1,isScrolling:!1,isSwiping:!1,direction:!1,inMotion:!1},o={_onDragStart:null,_onDragMove:null,_onDragEnd:null,_transitionEnd:null,_resizer:null,_responsiveCall:null,_goToLoop:null,_checkVisibile:null},e.Defaults={items:3,loop:!1,center:!1,mouseDrag:!0,touchDrag:!0,pullDrag:!0,freeDrag:!1,margin:0,stagePadding:0,merge:!1,mergeFit:!0,autoWidth:!1,startPosition:0,rtl:!0,smartSpeed:250,fluidSpeed:!1,dragEndSpeed:!1,responsive:{},responsiveRefreshRate:200,responsiveBaseElement:b,responsiveClass:!1,fallbackEasing:"swing",info:!1,nestedItemSelector:!1,itemElement:"div",stageElement:"div",themeClass:"owl-theme",baseClass:"owl-carousel",itemClass:"owl-item",centerClass:"center",activeClass:"active"},e.Width={Default:"default",Inner:"inner",Outer:"outer"},e.Plugins={},e.Pipe=[{filter:["width","items","settings"],run:function(a){a.current=this._items&&this._items[this.relative(this._current)]}},{filter:["items","settings"],run:function(){var a=this._clones,b=this.$stage.children(".cloned");(b.length!==a.length||!this.settings.loop&&a.length>0)&&(this.$stage.children(".cloned").remove(),this._clones=[])}},{filter:["items","settings"],run:function(){var a,b,c=this._clones,d=this._items,e=this.settings.loop?c.length-Math.max(2*this.settings.items,4):0;for(a=0,b=Math.abs(e/2);b>a;a++)e>0?(this.$stage.children().eq(d.length+c.length-1).remove(),c.pop(),this.$stage.children().eq(0).remove(),c.pop()):(c.push(c.length/2),this.$stage.append(d[c[c.length-1]].clone().addClass("cloned")),c.push(d.length-1-(c.length-1)/2),this.$stage.prepend(d[c[c.length-1]].clone().addClass("cloned")))}},{filter:["width","items","settings"],run:function(){var a,b,c,d=this.settings.rtl?1:-1,e=(this.width()/this.settings.items).toFixed(3),f=0;for(this._coordinates=[],b=0,c=this._clones.length+this._items.length;c>b;b++)a=this._mergers[this.relative(b)],a=this.settings.mergeFit&&Math.min(a,this.settings.items)||a,f+=(this.settings.autoWidth?this._items[this.relative(b)].width()+this.settings.margin:e*a)*d,this._coordinates.push(f)}},{filter:["width","items","settings"],run:function(){var b,c,d=(this.width()/this.settings.items).toFixed(3),e={width:Math.abs(this._coordinates[this._coordinates.length-1])+2*this.settings.stagePadding,"padding-left":this.settings.stagePadding||"","padding-right":this.settings.stagePadding||""};if(this.$stage.css(e),e={width:this.settings.autoWidth?"auto":d-this.settings.margin},e[this.settings.rtl?"margin-left":"margin-right"]=this.settings.margin,!this.settings.autoWidth&&a.grep(this._mergers,function(a){return a>1}).length>0)for(b=0,c=this._coordinates.length;c>b;b++)e.width=Math.abs(this._coordinates[b])-Math.abs(this._coordinates[b-1]||0)-this.settings.margin,this.$stage.children().eq(b).css(e);else this.$stage.children().css(e)}},{filter:["width","items","settings"],run:function(a){a.current&&this.reset(this.$stage.children().index(a.current))}},{filter:["position"],run:function(){this.animate(this.coordinates(this._current))}},{filter:["width","position","items","settings"],run:function(){var a,b,c,d,e=this.settings.rtl?1:-1,f=2*this.settings.stagePadding,g=this.coordinates(this.current())+f,h=g+this.width()*e,i=[];for(c=0,d=this._coordinates.length;d>c;c++)a=this._coordinates[c-1]||0,b=Math.abs(this._coordinates[c])+f*e,(this.op(a,"<=",g)&&this.op(a,">",h)||this.op(b,"<",g)&&this.op(b,">",h))&&i.push(c);this.$stage.children("."+this.settings.activeClass).removeClass(this.settings.activeClass),this.$stage.children(":eq("+i.join("), :eq(")+")").addClass(this.settings.activeClass),this.settings.center&&(this.$stage.children("."+this.settings.centerClass).removeClass(this.settings.centerClass),this.$stage.children().eq(this.current()).addClass(this.settings.centerClass))}}],e.prototype.initialize=function(){if(this.trigger("initialize"),this.$element.addClass(this.settings.baseClass).addClass(this.settings.themeClass).toggleClass("owl-rtl",this.settings.rtl),this.browserSupport(),this.settings.autoWidth&&this.state.imagesLoaded!==!0){var b,c,e;if(b=this.$element.find("img"),c=this.settings.nestedItemSelector?"."+this.settings.nestedItemSelector:d,e=this.$element.children(c).width(),b.length&&0>=e)return this.preloadAutoWidthImages(b),!1}this.$element.addClass("owl-loading"),this.$stage=a("<"+this.settings.stageElement+' class="owl-stage"/>').wrap('<div class="owl-stage-outer">'),this.$element.append(this.$stage.parent()),this.replace(this.$element.children().not(this.$stage.parent())),this._width=this.$element.width(),this.refresh(),this.$element.removeClass("owl-loading").addClass("owl-loaded"),this.eventsCall(),this.internalEvents(),this.addTriggerableEvents(),this.trigger("initialized")},e.prototype.setup=function(){var b=this.viewport(),c=this.options.responsive,d=-1,e=null;c?(a.each(c,function(a){b>=a&&a>d&&(d=Number(a))}),e=a.extend({},this.options,c[d]),delete e.responsive,e.responsiveClass&&this.$element.attr("class",function(a,b){return b.replace(/\b owl-responsive-\S+/g,"")}).addClass("owl-responsive-"+d)):e=a.extend({},this.options),(null===this.settings||this._breakpoint!==d)&&(this.trigger("change",{property:{name:"settings",value:e}}),this._breakpoint=d,this.settings=e,this.invalidate("settings"),this.trigger("changed",{property:{name:"settings",value:this.settings}}))},e.prototype.optionsLogic=function(){this.$element.toggleClass("owl-center",this.settings.center),this.settings.loop&&this._items.length<this.settings.items&&(this.settings.loop=!1),this.settings.autoWidth&&(this.settings.stagePadding=!1,this.settings.merge=!1)},e.prototype.prepare=function(b){var c=this.trigger("prepare",{content:b});return c.data||(c.data=a("<"+this.settings.itemElement+"/>").addClass(this.settings.itemClass).append(b)),this.trigger("prepared",{content:c.data}),c.data},e.prototype.update=function(){for(var b=0,c=this._pipe.length,d=a.proxy(function(a){return this[a]},this._invalidated),e={};c>b;)(this._invalidated.all||a.grep(this._pipe[b].filter,d).length>0)&&this._pipe[b].run(e),b++;this._invalidated={}},e.prototype.width=function(a){switch(a=a||e.Width.Default){case e.Width.Inner:case e.Width.Outer:return this._width;default:return this._width-2*this.settings.stagePadding+this.settings.margin}},e.prototype.refresh=function(){if(0===this._items.length)return!1;(new Date).getTime();this.trigger("refresh"),this.setup(),this.optionsLogic(),this.$stage.addClass("owl-refresh"),this.update(),this.$stage.removeClass("owl-refresh"),this.state.orientation=b.orientation,this.watchVisibility(),this.trigger("refreshed")},e.prototype.eventsCall=function(){this.e._onDragStart=a.proxy(function(a){this.onDragStart(a)},this),this.e._onDragMove=a.proxy(function(a){this.onDragMove(a)},this),this.e._onDragEnd=a.proxy(function(a){this.onDragEnd(a)},this),this.e._onResize=a.proxy(function(a){this.onResize(a)},this),this.e._transitionEnd=a.proxy(function(a){this.transitionEnd(a)},this),this.e._preventClick=a.proxy(function(a){this.preventClick(a)},this)},e.prototype.onThrottledResize=function(){b.clearTimeout(this.resizeTimer),this.resizeTimer=b.setTimeout(this.e._onResize,this.settings.responsiveRefreshRate)},e.prototype.onResize=function(){return this._items.length?this._width===this.$element.width()?!1:this.trigger("resize").isDefaultPrevented()?!1:(this._width=this.$element.width(),this.invalidate("width"),this.refresh(),void this.trigger("resized")):!1},e.prototype.eventsRouter=function(a){var b=a.type;"mousedown"===b||"touchstart"===b?this.onDragStart(a):"mousemove"===b||"touchmove"===b?this.onDragMove(a):"mouseup"===b||"touchend"===b?this.onDragEnd(a):"touchcancel"===b&&this.onDragEnd(a)},e.prototype.internalEvents=function(){var c=(k(),l());this.settings.mouseDrag?(this.$stage.on("mousedown",a.proxy(function(a){this.eventsRouter(a)},this)),this.$stage.on("dragstart",function(){return!1}),this.$stage.get(0).onselectstart=function(){return!1}):this.$element.addClass("owl-text-select-on"),this.settings.touchDrag&&!c&&this.$stage.on("touchstart touchcancel",a.proxy(function(a){this.eventsRouter(a)},this)),this.transitionEndVendor&&this.on(this.$stage.get(0),this.transitionEndVendor,this.e._transitionEnd,!1),this.settings.responsive!==!1&&this.on(b,"resize",a.proxy(this.onThrottledResize,this))},e.prototype.onDragStart=function(d){var e,g,h,i;if(e=d.originalEvent||d||b.event,3===e.which||this.state.isTouch)return!1;if("mousedown"===e.type&&this.$stage.addClass("owl-grab"),this.trigger("drag"),this.drag.startTime=(new Date).getTime(),this.speed(0),this.state.isTouch=!0,this.state.isScrolling=!1,this.state.isSwiping=!1,this.drag.distance=0,g=f(e).x,h=f(e).y,this.drag.offsetX=this.$stage.position().left,this.drag.offsetY=this.$stage.position().top,this.settings.rtl&&(this.drag.offsetX=this.$stage.position().left+this.$stage.width()-this.width()+this.settings.margin),this.state.inMotion&&this.support3d)i=this.getTransformProperty(),this.drag.offsetX=i,this.animate(i),this.state.inMotion=!0;else if(this.state.inMotion&&!this.support3d)return this.state.inMotion=!1,!1;this.drag.startX=g-this.drag.offsetX,this.drag.startY=h-this.drag.offsetY,this.drag.start=g-this.drag.startX,this.drag.targetEl=e.target||e.srcElement,this.drag.updatedX=this.drag.start,("IMG"===this.drag.targetEl.tagName||"A"===this.drag.targetEl.tagName)&&(this.drag.targetEl.draggable=!1),a(c).on("mousemove.owl.dragEvents mouseup.owl.dragEvents touchmove.owl.dragEvents touchend.owl.dragEvents",a.proxy(function(a){this.eventsRouter(a)},this))},e.prototype.onDragMove=function(a){var c,e,g,h,i,j;this.state.isTouch&&(this.state.isScrolling||(c=a.originalEvent||a||b.event,e=f(c).x,g=f(c).y,this.drag.currentX=e-this.drag.startX,this.drag.currentY=g-this.drag.startY,this.drag.distance=this.drag.currentX-this.drag.offsetX,this.drag.distance<0?this.state.direction=this.settings.rtl?"right":"left":this.drag.distance>0&&(this.state.direction=this.settings.rtl?"left":"right"),this.settings.loop?this.op(this.drag.currentX,">",this.coordinates(this.minimum()))&&"right"===this.state.direction?this.drag.currentX-=(this.settings.center&&this.coordinates(0))-this.coordinates(this._items.length):this.op(this.drag.currentX,"<",this.coordinates(this.maximum()))&&"left"===this.state.direction&&(this.drag.currentX+=(this.settings.center&&this.coordinates(0))-this.coordinates(this._items.length)):(h=this.coordinates(this.settings.rtl?this.maximum():this.minimum()),i=this.coordinates(this.settings.rtl?this.minimum():this.maximum()),j=this.settings.pullDrag?this.drag.distance/5:0,this.drag.currentX=Math.max(Math.min(this.drag.currentX,h+j),i+j)),(this.drag.distance>8||this.drag.distance<-8)&&(c.preventDefault!==d?c.preventDefault():c.returnValue=!1,this.state.isSwiping=!0),this.drag.updatedX=this.drag.currentX,(this.drag.currentY>16||this.drag.currentY<-16)&&this.state.isSwiping===!1&&(this.state.isScrolling=!0,this.drag.updatedX=this.drag.start),this.animate(this.drag.updatedX)))},e.prototype.onDragEnd=function(b){var d,e,f;if(this.state.isTouch){if("mouseup"===b.type&&this.$stage.removeClass("owl-grab"),this.trigger("dragged"),this.drag.targetEl.removeAttribute("draggable"),this.state.isTouch=!1,this.state.isScrolling=!1,this.state.isSwiping=!1,0===this.drag.distance&&this.state.inMotion!==!0)return this.state.inMotion=!1,!1;this.drag.endTime=(new Date).getTime(),d=this.drag.endTime-this.drag.startTime,e=Math.abs(this.drag.distance),(e>3||d>300)&&this.removeClick(this.drag.targetEl),f=this.closest(this.drag.updatedX),this.speed(this.settings.dragEndSpeed||this.settings.smartSpeed),this.current(f),this.invalidate("position"),this.update(),this.settings.pullDrag||this.drag.updatedX!==this.coordinates(f)||this.transitionEnd(),this.drag.distance=0,a(c).off(".owl.dragEvents")}},e.prototype.removeClick=function(c){this.drag.targetEl=c,a(c).on("click.preventClick",this.e._preventClick),b.setTimeout(function(){a(c).off("click.preventClick")},300)},e.prototype.preventClick=function(b){b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation&&b.stopPropagation(),a(b.target).off("click.preventClick")},e.prototype.getTransformProperty=function(){var a,c;return a=b.getComputedStyle(this.$stage.get(0),null).getPropertyValue(this.vendorName+"transform"),a=a.replace(/matrix(3d)?\(|\)/g,"").split(","),c=16===a.length,c!==!0?a[4]:a[12]},e.prototype.closest=function(b){var c=-1,d=30,e=this.width(),f=this.coordinates();return this.settings.freeDrag||a.each(f,a.proxy(function(a,g){return b>g-d&&g+d>b?c=a:this.op(b,"<",g)&&this.op(b,">",f[a+1]||g-e)&&(c="left"===this.state.direction?a+1:a),-1===c},this)),this.settings.loop||(this.op(b,">",f[this.minimum()])?c=b=this.minimum():this.op(b,"<",f[this.maximum()])&&(c=b=this.maximum())),c},e.prototype.animate=function(b){this.trigger("translate"),this.state.inMotion=this.speed()>0,this.support3d?this.$stage.css({transform:"translate3d("+b+"px,0px, 0px)",transition:this.speed()/1e3+"s"}):this.state.isTouch?this.$stage.css({left:b+"px"}):this.$stage.animate({left:b},this.speed()/1e3,this.settings.fallbackEasing,a.proxy(function(){this.state.inMotion&&this.transitionEnd()},this))},e.prototype.current=function(a){if(a===d)return this._current;if(0===this._items.length)return d;if(a=this.normalize(a),this._current!==a){var b=this.trigger("change",{property:{name:"position",value:a}});b.data!==d&&(a=this.normalize(b.data)),this._current=a,this.invalidate("position"),this.trigger("changed",{property:{name:"position",value:this._current}})}return this._current},e.prototype.invalidate=function(a){this._invalidated[a]=!0},e.prototype.reset=function(a){a=this.normalize(a),a!==d&&(this._speed=0,this._current=a,this.suppress(["translate","translated"]),this.animate(this.coordinates(a)),this.release(["translate","translated"]))},e.prototype.normalize=function(b,c){var e=c?this._items.length:this._items.length+this._clones.length;return!a.isNumeric(b)||1>e?d:b=this._clones.length?(b%e+e)%e:Math.max(this.minimum(c),Math.min(this.maximum(c),b))},e.prototype.relative=function(a){return a=this.normalize(a),a-=this._clones.length/2,this.normalize(a,!0)},e.prototype.maximum=function(a){var b,c,d,e=0,f=this.settings;if(a)return this._items.length-1;if(!f.loop&&f.center)b=this._items.length-1;else if(f.loop||f.center)if(f.loop||f.center)b=this._items.length+f.items;else{if(!f.autoWidth&&!f.merge)throw"Can not detect maximum absolute position.";for(revert=f.rtl?1:-1,c=this.$stage.width()-this.$element.width();(d=this.coordinates(e))&&!(d*revert>=c);)b=++e}else b=this._items.length-f.items;return b},e.prototype.minimum=function(a){return a?0:this._clones.length/2},e.prototype.items=function(a){return a===d?this._items.slice():(a=this.normalize(a,!0),this._items[a])},e.prototype.mergers=function(a){return a===d?this._mergers.slice():(a=this.normalize(a,!0),this._mergers[a])},e.prototype.clones=function(b){var c=this._clones.length/2,e=c+this._items.length,f=function(a){return a%2===0?e+a/2:c-(a+1)/2};return b===d?a.map(this._clones,function(a,b){return f(b)}):a.map(this._clones,function(a,c){return a===b?f(c):null})},e.prototype.speed=function(a){return a!==d&&(this._speed=a),this._speed},e.prototype.coordinates=function(b){var c=null;return b===d?a.map(this._coordinates,a.proxy(function(a,b){return this.coordinates(b)},this)):(this.settings.center?(c=this._coordinates[b],c+=(this.width()-c+(this._coordinates[b-1]||0))/2*(this.settings.rtl?-1:1)):c=this._coordinates[b-1]||0,c)},e.prototype.duration=function(a,b,c){return Math.min(Math.max(Math.abs(b-a),1),6)*Math.abs(c||this.settings.smartSpeed)},e.prototype.to=function(c,d){if(this.settings.loop){var e=c-this.relative(this.current()),f=this.current(),g=this.current(),h=this.current()+e,i=0>g-h?!0:!1,j=this._clones.length+this._items.length;h<this.settings.items&&i===!1?(f=g+this._items.length,this.reset(f)):h>=j-this.settings.items&&i===!0&&(f=g-this._items.length,this.reset(f)),b.clearTimeout(this.e._goToLoop),this.e._goToLoop=b.setTimeout(a.proxy(function(){this.speed(this.duration(this.current(),f+e,d)),this.current(f+e),this.update()},this),30)}else this.speed(this.duration(this.current(),c,d)),this.current(c),this.update()},e.prototype.next=function(a){a=a||!1,this.to(this.relative(this.current())+1,a)},e.prototype.prev=function(a){a=a||!1,this.to(this.relative(this.current())-1,a)},e.prototype.transitionEnd=function(a){return a!==d&&(a.stopPropagation(),(a.target||a.srcElement||a.originalTarget)!==this.$stage.get(0))?!1:(this.state.inMotion=!1,void this.trigger("translated"))},e.prototype.viewport=function(){var d;if(this.options.responsiveBaseElement!==b)d=a(this.options.responsiveBaseElement).width();else if(b.innerWidth)d=b.innerWidth;else{if(!c.documentElement||!c.documentElement.clientWidth)throw"Can not detect viewport width.";d=c.documentElement.clientWidth}return d},e.prototype.replace=function(b){this.$stage.empty(),this._items=[],b&&(b=b instanceof jQuery?b:a(b)),this.settings.nestedItemSelector&&(b=b.find("."+this.settings.nestedItemSelector)),b.filter(function(){return 1===this.nodeType}).each(a.proxy(function(a,b){b=this.prepare(b),this.$stage.append(b),this._items.push(b),this._mergers.push(1*b.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)},this)),this.reset(a.isNumeric(this.settings.startPosition)?this.settings.startPosition:0),this.invalidate("items")},e.prototype.add=function(a,b){b=b===d?this._items.length:this.normalize(b,!0),this.trigger("add",{content:a,position:b}),0===this._items.length||b===this._items.length?(this.$stage.append(a),this._items.push(a),this._mergers.push(1*a.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)):(this._items[b].before(a),this._items.splice(b,0,a),this._mergers.splice(b,0,1*a.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)),this.invalidate("items"),this.trigger("added",{content:a,position:b})},e.prototype.remove=function(a){a=this.normalize(a,!0),a!==d&&(this.trigger("remove",{content:this._items[a],position:a}),this._items[a].remove(),this._items.splice(a,1),this._mergers.splice(a,1),this.invalidate("items"),this.trigger("removed",{content:null,position:a}))},e.prototype.addTriggerableEvents=function(){var b=a.proxy(function(b,c){return a.proxy(function(a){a.relatedTarget!==this&&(this.suppress([c]),b.apply(this,[].slice.call(arguments,1)),this.release([c]))},this)},this);a.each({next:this.next,prev:this.prev,to:this.to,destroy:this.destroy,refresh:this.refresh,replace:this.replace,add:this.add,remove:this.remove},a.proxy(function(a,c){this.$element.on(a+".owl.carousel",b(c,a+".owl.carousel"))},this))},e.prototype.watchVisibility=function(){function c(a){return a.offsetWidth>0&&a.offsetHeight>0}function d(){c(this.$element.get(0))&&(this.$element.removeClass("owl-hidden"),this.refresh(),b.clearInterval(this.e._checkVisibile))}c(this.$element.get(0))||(this.$element.addClass("owl-hidden"),b.clearInterval(this.e._checkVisibile),this.e._checkVisibile=b.setInterval(a.proxy(d,this),500))},e.prototype.preloadAutoWidthImages=function(b){var c,d,e,f;c=0,d=this,b.each(function(g,h){e=a(h),f=new Image,f.onload=function(){c++,e.attr("src",f.src),e.css("opacity",1),c>=b.length&&(d.state.imagesLoaded=!0,d.initialize())},f.src=e.attr("src")||e.attr("data-src")||e.attr("data-src-retina")})},e.prototype.destroy=function(){this.$element.hasClass(this.settings.themeClass)&&this.$element.removeClass(this.settings.themeClass),this.settings.responsive!==!1&&a(b).off("resize.owl.carousel"),this.transitionEndVendor&&this.off(this.$stage.get(0),this.transitionEndVendor,this.e._transitionEnd);for(var d in this._plugins)this._plugins[d].destroy();(this.settings.mouseDrag||this.settings.touchDrag)&&(this.$stage.off("mousedown touchstart touchcancel"),a(c).off(".owl.dragEvents"),this.$stage.get(0).onselectstart=function(){},this.$stage.off("dragstart",function(){return!1})),this.$element.off(".owl"),this.$stage.children(".cloned").remove(),this.e=null,this.$element.removeData("owlCarousel"),this.$stage.children().contents().unwrap(),this.$stage.children().unwrap(),this.$stage.unwrap()},e.prototype.op=function(a,b,c){var d=this.settings.rtl;switch(b){case"<":return d?a>c:c>a;case">":return d?c>a:a>c;case">=":return d?c>=a:a>=c;case"<=":return d?a>=c:c>=a}},e.prototype.on=function(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d):a.attachEvent&&a.attachEvent("on"+b,c)},e.prototype.off=function(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d):a.detachEvent&&a.detachEvent("on"+b,c)},e.prototype.trigger=function(b,c,d){var e={item:{count:this._items.length,index:this.current()}},f=a.camelCase(a.grep(["on",b,d],function(a){return a}).join("-").toLowerCase()),g=a.Event([b,"owl",d||"carousel"].join(".").toLowerCase(),a.extend({relatedTarget:this},e,c));return this._supress[b]||(a.each(this._plugins,function(a,b){b.onTrigger&&b.onTrigger(g)}),this.$element.trigger(g),this.settings&&"function"==typeof this.settings[f]&&this.settings[f].apply(this,g)),g},e.prototype.suppress=function(b){a.each(b,a.proxy(function(a,b){this._supress[b]=!0},this))},e.prototype.release=function(b){a.each(b,a.proxy(function(a,b){delete this._supress[b]},this))},e.prototype.browserSupport=function(){if(this.support3d=j(),this.support3d){this.transformVendor=i();var a=["transitionend","webkitTransitionEnd","transitionend","oTransitionEnd"];this.transitionEndVendor=a[h()],this.vendorName=this.transformVendor.replace(/Transform/i,""),this.vendorName=""!==this.vendorName?"-"+this.vendorName.toLowerCase()+"-":""}this.state.orientation=b.orientation},a.fn.owlCarousel=function(b){return this.each(function(){a(this).data("owlCarousel")||a(this).data("owlCarousel",new e(this,b))})},a.fn.owlCarousel.Constructor=e}(window.Zepto||window.jQuery,window,document),function(a,b){var c=function(b){this._core=b,this._loaded=[],this._handlers={"initialized.owl.carousel change.owl.carousel":a.proxy(function(b){if(b.namespace&&this._core.settings&&this._core.settings.lazyLoad&&(b.property&&"position"==b.property.name||"initialized"==b.type))for(var c=this._core.settings,d=c.center&&Math.ceil(c.items/2)||c.items,e=c.center&&-1*d||0,f=(b.property&&b.property.value||this._core.current())+e,g=this._core.clones().length,h=a.proxy(function(a,b){this.load(b)},this);e++<d;)this.load(g/2+this._core.relative(f)),g&&a.each(this._core.clones(this._core.relative(f++)),h)},this)},this._core.options=a.extend({},c.Defaults,this._core.options),this._core.$element.on(this._handlers)};c.Defaults={lazyLoad:!1},c.prototype.load=function(c){var d=this._core.$stage.children().eq(c),e=d&&d.find(".owl-lazy");!e||a.inArray(d.get(0),this._loaded)>-1||(e.each(a.proxy(function(c,d){var e,f=a(d),g=b.devicePixelRatio>1&&f.attr("data-src-retina")||f.attr("data-src");this._core.trigger("load",{element:f,url:g},"lazy"),f.is("img")?f.one("load.owl.lazy",a.proxy(function(){f.css("opacity",1),this._core.trigger("loaded",{element:f,url:g},"lazy")},this)).attr("src",g):(e=new Image,e.onload=a.proxy(function(){f.css({"background-image":"url("+g+")",opacity:"1"}),this._core.trigger("loaded",{element:f,url:g},"lazy")},this),e.src=g)},this)),this._loaded.push(d.get(0)))},c.prototype.destroy=function(){var a,b;for(a in this.handlers)this._core.$element.off(a,this.handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Lazy=c}(window.Zepto||window.jQuery,window,document),function(a){var b=function(c){this._core=c,this._handlers={"initialized.owl.carousel":a.proxy(function(){this._core.settings.autoHeight&&this.update()},this),"changed.owl.carousel":a.proxy(function(a){this._core.settings.autoHeight&&"position"==a.property.name&&this.update()},this),"loaded.owl.lazy":a.proxy(function(a){this._core.settings.autoHeight&&a.element.closest("."+this._core.settings.itemClass)===this._core.$stage.children().eq(this._core.current())&&this.update()},this)},this._core.options=a.extend({},b.Defaults,this._core.options),this._core.$element.on(this._handlers)};b.Defaults={autoHeight:!1,autoHeightClass:"owl-height"},b.prototype.update=function(){this._core.$stage.parent().height(this._core.$stage.children().eq(this._core.current()).height()).addClass(this._core.settings.autoHeightClass)},b.prototype.destroy=function(){var a,b;for(a in this._handlers)this._core.$element.off(a,this._handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.AutoHeight=b}(window.Zepto||window.jQuery,window,document),function(a,b,c){var d=function(b){this._core=b,this._videos={},this._playing=null,this._fullscreen=!1,this._handlers={"resize.owl.carousel":a.proxy(function(a){this._core.settings.video&&!this.isInFullScreen()&&a.preventDefault()},this),"refresh.owl.carousel changed.owl.carousel":a.proxy(function(){this._playing&&this.stop()},this),"prepared.owl.carousel":a.proxy(function(b){var c=a(b.content).find(".owl-video");c.length&&(c.css("display","none"),this.fetch(c,a(b.content)))},this)},this._core.options=a.extend({},d.Defaults,this._core.options),this._core.$element.on(this._handlers),this._core.$element.on("click.owl.video",".owl-video-play-icon",a.proxy(function(a){this.play(a)},this))};d.Defaults={video:!1,videoHeight:!1,videoWidth:!1},d.prototype.fetch=function(a,b){var c=a.attr("data-vimeo-id")?"vimeo":"youtube",d=a.attr("data-vimeo-id")||a.attr("data-youtube-id"),e=a.attr("data-width")||this._core.settings.videoWidth,f=a.attr("data-height")||this._core.settings.videoHeight,g=a.attr("href");if(!g)throw new Error("Missing video URL.");if(d=g.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/),d[3].indexOf("youtu")>-1)c="youtube";else{if(!(d[3].indexOf("vimeo")>-1))throw new Error("Video URL not supported.");c="vimeo"}d=d[6],this._videos[g]={type:c,id:d,width:e,height:f},b.attr("data-video",g),this.thumbnail(a,this._videos[g])},d.prototype.thumbnail=function(b,c){var d,e,f,g=c.width&&c.height?'style="width:'+c.width+"px;height:"+c.height+'px;"':"",h=b.find("img"),i="src",j="",k=this._core.settings,l=function(a){e='<div class="owl-video-play-icon"></div>',d=k.lazyLoad?'<div class="owl-video-tn '+j+'" '+i+'="'+a+'"></div>':'<div class="owl-video-tn" style="opacity:1;background-image:url('+a+')"></div>',b.after(d),b.after(e)};return b.wrap('<div class="owl-video-wrapper"'+g+"></div>"),this._core.settings.lazyLoad&&(i="data-src",j="owl-lazy"),h.length?(l(h.attr(i)),h.remove(),!1):void("youtube"===c.type?(f="http://img.youtube.com/vi/"+c.id+"/hqdefault.jpg",l(f)):"vimeo"===c.type&&a.ajax({type:"GET",url:"http://vimeo.com/api/v2/video/"+c.id+".json",jsonp:"callback",dataType:"jsonp",success:function(a){f=a[0].thumbnail_large,l(f)}}))},d.prototype.stop=function(){this._core.trigger("stop",null,"video"),this._playing.find(".owl-video-frame").remove(),this._playing.removeClass("owl-video-playing"),this._playing=null},d.prototype.play=function(b){this._core.trigger("play",null,"video"),this._playing&&this.stop();var c,d,e=a(b.target||b.srcElement),f=e.closest("."+this._core.settings.itemClass),g=this._videos[f.attr("data-video")],h=g.width||"100%",i=g.height||this._core.$stage.height();"youtube"===g.type?c='<iframe width="'+h+'" height="'+i+'" src="http://www.youtube.com/embed/'+g.id+"?autoplay=1&v="+g.id+'" frameborder="0" allowfullscreen></iframe>':"vimeo"===g.type&&(c='<iframe src="http://player.vimeo.com/video/'+g.id+'?autoplay=1" width="'+h+'" height="'+i+'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'),f.addClass("owl-video-playing"),this._playing=f,d=a('<div style="height:'+i+"px; width:"+h+'px" class="owl-video-frame">'+c+"</div>"),e.after(d)},d.prototype.isInFullScreen=function(){var d=c.fullscreenElement||c.mozFullScreenElement||c.webkitFullscreenElement;return d&&a(d).parent().hasClass("owl-video-frame")&&(this._core.speed(0),this._fullscreen=!0),d&&this._fullscreen&&this._playing?!1:this._fullscreen?(this._fullscreen=!1,!1):this._playing&&this._core.state.orientation!==b.orientation?(this._core.state.orientation=b.orientation,!1):!0},d.prototype.destroy=function(){var a,b;this._core.$element.off("click.owl.video");for(a in this._handlers)this._core.$element.off(a,this._handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Video=d}(window.Zepto||window.jQuery,window,document),function(a,b,c,d){var e=function(b){this.core=b,this.core.options=a.extend({},e.Defaults,this.core.options),this.swapping=!0,this.previous=d,this.next=d,this.handlers={"change.owl.carousel":a.proxy(function(a){"position"==a.property.name&&(this.previous=this.core.current(),this.next=a.property.value)},this),"drag.owl.carousel dragged.owl.carousel translated.owl.carousel":a.proxy(function(a){this.swapping="translated"==a.type},this),"translate.owl.carousel":a.proxy(function(){this.swapping&&(this.core.options.animateOut||this.core.options.animateIn)&&this.swap()},this)},this.core.$element.on(this.handlers)};e.Defaults={animateOut:!1,animateIn:!1},e.prototype.swap=function(){if(1===this.core.settings.items&&this.core.support3d){this.core.speed(0);var b,c=a.proxy(this.clear,this),d=this.core.$stage.children().eq(this.previous),e=this.core.$stage.children().eq(this.next),f=this.core.settings.animateIn,g=this.core.settings.animateOut;this.core.current()!==this.previous&&(g&&(b=this.core.coordinates(this.previous)-this.core.coordinates(this.next),d.css({left:b+"px"}).addClass("animated owl-animated-out").addClass(g).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",c)),f&&e.addClass("animated owl-animated-in").addClass(f).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",c))}},e.prototype.clear=function(b){a(b.target).css({left:""}).removeClass("animated owl-animated-out owl-animated-in").removeClass(this.core.settings.animateIn).removeClass(this.core.settings.animateOut),this.core.transitionEnd()},e.prototype.destroy=function(){var a,b;for(a in this.handlers)this.core.$element.off(a,this.handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Animate=e}(window.Zepto||window.jQuery,window,document),function(a,b,c){var d=function(b){this.core=b,this.core.options=a.extend({},d.Defaults,this.core.options),this.handlers={"translated.owl.carousel refreshed.owl.carousel":a.proxy(function(){this.autoplay()
},this),"play.owl.autoplay":a.proxy(function(a,b,c){this.play(b,c)},this),"stop.owl.autoplay":a.proxy(function(){this.stop()},this),"mouseover.owl.autoplay":a.proxy(function(){this.core.settings.autoplayHoverPause&&this.pause()},this),"mouseleave.owl.autoplay":a.proxy(function(){this.core.settings.autoplayHoverPause&&this.autoplay()},this)},this.core.$element.on(this.handlers)};d.Defaults={autoplay:!1,autoplayTimeout:5e3,autoplayHoverPause:!1,autoplaySpeed:!1},d.prototype.autoplay=function(){this.core.settings.autoplay&&!this.core.state.videoPlay?(b.clearInterval(this.interval),this.interval=b.setInterval(a.proxy(function(){this.play()},this),this.core.settings.autoplayTimeout)):b.clearInterval(this.interval)},d.prototype.play=function(){return c.hidden===!0||this.core.state.isTouch||this.core.state.isScrolling||this.core.state.isSwiping||this.core.state.inMotion?void 0:this.core.settings.autoplay===!1?void b.clearInterval(this.interval):void this.core.next(this.core.settings.autoplaySpeed)},d.prototype.stop=function(){b.clearInterval(this.interval)},d.prototype.pause=function(){b.clearInterval(this.interval)},d.prototype.destroy=function(){var a,c;b.clearInterval(this.interval);for(a in this.handlers)this.core.$element.off(a,this.handlers[a]);for(c in Object.getOwnPropertyNames(this))"function"!=typeof this[c]&&(this[c]=null)},a.fn.owlCarousel.Constructor.Plugins.autoplay=d}(window.Zepto||window.jQuery,window,document),function(a){"use strict";var b=function(c){this._core=c,this._initialized=!1,this._pages=[],this._controls={},this._templates=[],this.$element=this._core.$element,this._overrides={next:this._core.next,prev:this._core.prev,to:this._core.to},this._handlers={"prepared.owl.carousel":a.proxy(function(b){this._core.settings.dotsData&&this._templates.push(a(b.content).find("[data-dot]").andSelf("[data-dot]").attr("data-dot"))},this),"add.owl.carousel":a.proxy(function(b){this._core.settings.dotsData&&this._templates.splice(b.position,0,a(b.content).find("[data-dot]").andSelf("[data-dot]").attr("data-dot"))},this),"remove.owl.carousel prepared.owl.carousel":a.proxy(function(a){this._core.settings.dotsData&&this._templates.splice(a.position,1)},this),"change.owl.carousel":a.proxy(function(a){if("position"==a.property.name&&!this._core.state.revert&&!this._core.settings.loop&&this._core.settings.navRewind){var b=this._core.current(),c=this._core.maximum(),d=this._core.minimum();a.data=a.property.value>c?b>=c?d:c:a.property.value<d?c:a.property.value}},this),"changed.owl.carousel":a.proxy(function(a){"position"==a.property.name&&this.draw()},this),"refreshed.owl.carousel":a.proxy(function(){this._initialized||(this.initialize(),this._initialized=!0),this._core.trigger("refresh",null,"navigation"),this.update(),this.draw(),this._core.trigger("refreshed",null,"navigation")},this)},this._core.options=a.extend({},b.Defaults,this._core.options),this.$element.on(this._handlers)};b.Defaults={nav:!1,navRewind:!0,navText:["prev","next"],navSpeed:!1,navElement:"div",navContainer:!1,navContainerClass:"owl-nav",navClass:["owl-prev","owl-next"],slideBy:1,dotClass:"owl-dot",dotsClass:"owl-dots",dots:!0,dotsEach:!1,dotData:!1,dotsSpeed:!1,dotsContainer:!1,controlsClass:"owl-controls"},b.prototype.initialize=function(){var b,c,d=this._core.settings;d.dotsData||(this._templates=[a("<div>").addClass(d.dotClass).append(a("<span>")).prop("outerHTML")]),d.navContainer&&d.dotsContainer||(this._controls.$container=a("<div>").addClass(d.controlsClass).appendTo(this.$element)),this._controls.$indicators=d.dotsContainer?a(d.dotsContainer):a("<div>").hide().addClass(d.dotsClass).appendTo(this._controls.$container),this._controls.$indicators.on("click","div",a.proxy(function(b){var c=a(b.target).parent().is(this._controls.$indicators)?a(b.target).index():a(b.target).parent().index();b.preventDefault(),this.to(c,d.dotsSpeed)},this)),b=d.navContainer?a(d.navContainer):a("<div>").addClass(d.navContainerClass).prependTo(this._controls.$container),this._controls.$next=a("<"+d.navElement+">"),this._controls.$previous=this._controls.$next.clone(),this._controls.$previous.addClass(d.navClass[0]).html(d.navText[0]).hide().prependTo(b).on("click",a.proxy(function(){this.prev(d.navSpeed)},this)),this._controls.$next.addClass(d.navClass[1]).html(d.navText[1]).hide().appendTo(b).on("click",a.proxy(function(){this.next(d.navSpeed)},this));for(c in this._overrides)this._core[c]=a.proxy(this[c],this)},b.prototype.destroy=function(){var a,b,c,d;for(a in this._handlers)this.$element.off(a,this._handlers[a]);for(b in this._controls)this._controls[b].remove();for(d in this.overides)this._core[d]=this._overrides[d];for(c in Object.getOwnPropertyNames(this))"function"!=typeof this[c]&&(this[c]=null)},b.prototype.update=function(){var a,b,c,d=this._core.settings,e=this._core.clones().length/2,f=e+this._core.items().length,g=d.center||d.autoWidth||d.dotData?1:d.dotsEach||d.items;if("page"!==d.slideBy&&(d.slideBy=Math.min(d.slideBy,d.items)),d.dots||"page"==d.slideBy)for(this._pages=[],a=e,b=0,c=0;f>a;a++)(b>=g||0===b)&&(this._pages.push({start:a-e,end:a-e+g-1}),b=0,++c),b+=this._core.mergers(this._core.relative(a))},b.prototype.draw=function(){var b,c,d="",e=this._core.settings,f=(this._core.$stage.children(),this._core.relative(this._core.current()));if(!e.nav||e.loop||e.navRewind||(this._controls.$previous.toggleClass("disabled",0>=f),this._controls.$next.toggleClass("disabled",f>=this._core.maximum())),this._controls.$previous.toggle(e.nav),this._controls.$next.toggle(e.nav),e.dots){if(b=this._pages.length-this._controls.$indicators.children().length,e.dotData&&0!==b){for(c=0;c<this._controls.$indicators.children().length;c++)d+=this._templates[this._core.relative(c)];this._controls.$indicators.html(d)}else b>0?(d=new Array(b+1).join(this._templates[0]),this._controls.$indicators.append(d)):0>b&&this._controls.$indicators.children().slice(b).remove();this._controls.$indicators.find(".active").removeClass("active"),this._controls.$indicators.children().eq(a.inArray(this.current(),this._pages)).addClass("active")}this._controls.$indicators.toggle(e.dots)},b.prototype.onTrigger=function(b){var c=this._core.settings;b.page={index:a.inArray(this.current(),this._pages),count:this._pages.length,size:c&&(c.center||c.autoWidth||c.dotData?1:c.dotsEach||c.items)}},b.prototype.current=function(){var b=this._core.relative(this._core.current());return a.grep(this._pages,function(a){return a.start<=b&&a.end>=b}).pop()},b.prototype.getPosition=function(b){var c,d,e=this._core.settings;return"page"==e.slideBy?(c=a.inArray(this.current(),this._pages),d=this._pages.length,b?++c:--c,c=this._pages[(c%d+d)%d].start):(c=this._core.relative(this._core.current()),d=this._core.items().length,b?c+=e.slideBy:c-=e.slideBy),c},b.prototype.next=function(b){a.proxy(this._overrides.to,this._core)(this.getPosition(!0),b)},b.prototype.prev=function(b){a.proxy(this._overrides.to,this._core)(this.getPosition(!1),b)},b.prototype.to=function(b,c,d){var e;d?a.proxy(this._overrides.to,this._core)(b,c):(e=this._pages.length,a.proxy(this._overrides.to,this._core)(this._pages[(b%e+e)%e].start,c))},a.fn.owlCarousel.Constructor.Plugins.Navigation=b}(window.Zepto||window.jQuery,window,document),function(a,b){"use strict";var c=function(d){this._core=d,this._hashes={},this.$element=this._core.$element,this._handlers={"initialized.owl.carousel":a.proxy(function(){"URLHash"==this._core.settings.startPosition&&a(b).trigger("hashchange.owl.navigation")},this),"prepared.owl.carousel":a.proxy(function(b){var c=a(b.content).find("[data-hash]").andSelf("[data-hash]").attr("data-hash");this._hashes[c]=b.content},this)},this._core.options=a.extend({},c.Defaults,this._core.options),this.$element.on(this._handlers),a(b).on("hashchange.owl.navigation",a.proxy(function(){var a=b.location.hash.substring(1),c=this._core.$stage.children(),d=this._hashes[a]&&c.index(this._hashes[a])||0;return a?void this._core.to(d,!1,!0):!1},this))};c.Defaults={URLhashListener:!1},c.prototype.destroy=function(){var c,d;a(b).off("hashchange.owl.navigation");for(c in this._handlers)this._core.$element.off(c,this._handlers[c]);for(d in Object.getOwnPropertyNames(this))"function"!=typeof this[d]&&(this[d]=null)},a.fn.owlCarousel.Constructor.Plugins.Hash=c}(window.Zepto||window.jQuery,window,document);
var text_month = [,"كانون الثاني","فبراير","مارس","أبريل","ماي","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];
!function(){var e=document.createElement("script")
e.type="text/javascript",e.async=!0,e.src="https://raw.githack.com/iHussam/ar1web/master/relatedposts.js"
var t=document.getElementsByTagName("script")[0]
t.parentNode.insertBefore(e,t)}();
//]]>
</script>

5. ابحث عن <data:post.body/> ضع بعده الكود التالي

* ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود، بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة أو تعريف الكاتب إلى غير ذلك وتعرف مكان الأكواد ضع الكود بالمكان المناسب لك

<b:if cond='data:view.isPost'>
<div id='related-posts'>
<div class='widget-title'>
<h5>
<trans id='pRelalted'>شاهد ايضا</trans></h5>
</div>
<div class='related-l' data-no='9' data-show='3'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<data:label.name/>
</b:if>
</b:loop>
</div>
</div>
</b:if>

6. احفظ التغييرات ومبروك عليك الإضافة

تثبيت اشعارات Disqus بزر الصعود والنزول

2020-04-04T06:19:00.000-07:00

كيفية تثبيت صندوق تعليقات DISQUS الجديدة تضمن زر العودة إلى الأعلى. ربما أنت تعرف بالفعل بهذه الإضافة هل رأيتها بمدونة؟ وخاصة المواقع التي تستعمل تعليقات ديسكس
تحتوي الإضافة على زر صعود ونزول تتوسطها ايقونة الإشعارات كل ذلك متجاوب لأفضل تصفح على الأجهزة الأخرى
واليوم سنتعرف على طريقة الحصول عليها بتركيبها مباشرة على القالب، تابع معي بعد المعاينة

معاينة

إقرأ أيضًا
تثبيت تعليقات DISQUS على بلوجر

شرح طريقة التركيب

1. المظهر >> تعديل HTML
2. ابحث بإستعمال CTRL+F عن </head>
3. ضع الكود التالي قبله

<style type='text/css'>
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}.header-1 h4{font-size:18px;float:left;color:#fff}.header-1 img{float:right}#scrollToTop .notif-show{color:#54a0ff;transition:all .6s}#scrollToTop .notif-show:hover{color:#2e86de}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;top:0;right:-769px;bottom:0;transition:all .5s}#disqus-notif.active{right:0}#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}#disqus-notif .close-1{position:fixed;    margin-top:16px;color:#fff;transition:all .3s}#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#disqus-notif .close-1:hover i{transform:rotate(360deg)}#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}#RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:12px}#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:2px solid rgba(0,0,0,0.08)}#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:400;font-size:14px;margin:7px 0 0 0}#RecentComments a.dsq-widget-user:hover{color:#2e87e7}#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}#RecentComments .dsq-widget-item pre{position:relative;background-color:#f1f2f6;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}#RecentComments .dsq-widget-item pre code{color:#000;padding:0}#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}#RecentComments .dsq-widget-comment p a{color:#ced6e0}#RecentComments .dsq-widget-comment p a:hover{color:#a4b0be}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}}
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:30px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}#scrollToTop a{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;font-size:.9rem;margin:5px auto;padding:14px 16px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}#scrollToTop a:hover{color:#747d8c;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}#top{position:absolute;top:0}#scrollToTop li:nth-child(1){animation:slideInTop .5s}#scrollToTop li:nth-child(2){animation:slideInRight .5s}#scrollToTop li:nth-child(3){animation:slideInDown .5s}
</style>

4. ابحث عن </body> ثم ضع الكود التالي بعده

<div id='overlay-1'/>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='أغلق'><i class='fa fa-times'/></a>
<div class='header-1'><h4>إشعارات</h4>
</div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ar1web.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>
<ul id='scrollToTop'>
<li><a class='ripplelink' href='#top' title='الى الأعلى'><i class='fa fa-chevron-up'/></a></li>
<li><a class='notif-show ripplelink' href='javascript:;' title='Open Disqus Notifications'><i class='fa fa-bell'/></a></li>
<li><a class='ripplelink' href='#bottom' title='الى الأسفل'><i class='fa fa-chevron-down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
// Notif Disqus
$(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})});
$(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>

5. غير ar1web بإسم تعليقاتك على ديسكس

قالب Cleanify معرب

2020-03-22T04:34:00.000-07:00

قالب Cleanify الاحترافي المتميز، جد نظيف وسريع بشكلٍ مدهش تم تجهيز قالب Cleanify تمامًا لمحركات البحث الرئيسية، بحيث يمكن أن ينمو موقعك أكثر فأكثر كما يدعم أنظمة تحقيق الدخل، خاصةً جوجل ادسنس باستخدامه ستتمكن من عرض الإعلانات بطريقة احترافية ومحسنة للحصول على نتائج أفضل.
من منظوري الشخصي فالقالب من احسن القوالب البسيطة بواجهة تحكم غاية في التعديل وانصح باستعماله فور معاينتك للقالب ستلاحظ على الفور ما اقصده. ويجدر بالذكر انه يدعم واجهة التحكم العربية بمعنى انه معرب اصلا فقط قمت ببعض التعديلات الجذرية.

الواجهة كاملة

قالب للإنتقال للموقع الجديد

2020-03-05T13:08:00.001-08:00

بالنسبة لأولئك الذين لديهم مدونة أو موقع جديد ويرغبون في نقل الزوار من مدونة قديمة إلى المدونة جديدة، فيمكنك استخدام هذا القالب في مدونتك القديمة. لأن هذا القالب يخبرالزائر بانتقال الموقع إلى عنوان جديد.

لا توجد ميزات خاصة في هذا القالب، غير تصميمه المنعش واضافة الإنتقال الأتوماتيكي. يمكنك تحميل القالب من جانب هذه الصفحة

التغييرات المطلوبة
ابحث عن هذا الكود :

 
<h1>انتقل موقعنا هنا <a href='https://ar1web.blogspot.com/' onmouseover='window.location=this.href' target='_blank' title='عرب ويب'>AR1WEB</a></h1>

اضافة تأثير سقوط الثلج للبلوجر

2018-12-25T05:55:00.002-08:00

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

معاينة

شرح طريقة التركيب

1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن <body> باستخدام CTRL+F
4. ضع الكود التالي قبل

<style>
.snow{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}.contentz{height:100%;position:relative;overflow:hidden;z-index:1}
</style>
<div class='contentz'>
<canvas class='snow' id='snow'></canvas>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(){function t(t){var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){this.x=this.y=this.dx=this.dy=0,this.reset()};function a(){e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){if(t!=o.length){o=[];for(var n=0;n<t;n++)o.push(new d)}}(e*i/1e4)}d.prototype.reset=function(){this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5},a(),function t(){n.clearRect(0,0,e,i),n.fillStyle="rgba(255,255,255,.3)",o.forEach(function(t){t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()}),window.requestAnimationFrame(t)}(),window.addEventListener("resize",a)}var n;n=function(){t(document.getElementById("snow"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>

قالب مدونة عرب ويب الأصلي V1

2018-08-30T13:02:00.005-07:00

ق الب مدونة عرب ويب الأصلي، بنسخته الأولى وحصريا على المدونة يمكنكم الحصول على نسخة منه مجانا.

فبعد طول انتظار حان الوقت ليتم مشاركتكم جزء من مدونة عرب ويب 🎊 ولمتتبعينا الأعزاء، لكن لن ننسى القالب الأول الذي بدأنا مشوارنا التدويني به حقا ذكريات جميلة ومشوار رائع قضيناه جميعا... حسنا يكفينا حنين الماضي 😀
القالب متاح بنسخته الأولى V1 2015 التي كنا نستعملها فيما مضى، لذا من المقرر نشر كل نسخة من القالب التي مررنا بها من تحديثات الى التحديث 2018 والذي نستعمله الآن نتمنى أن تتقبلوا منا هذه النسخة ولقائنا سيتجدد قريبا إن شاء الله.

الواجهة كاملة

عرب ويب

اضافة ملف تعريف احترفي على بلوجر

ازيد من 400 خط عربي جاهز للإستعمال

تحميل الخطوط

معلومات عن الملحق

قالب صفحة

تحميل القالب

المميزات / الإضافات

قالب Median Ui

تم تحديث القالب لآخر نسخة 1.4

معاينة القالب

المميزات / الإضافات

تغيير شكل Scrollbar ببلوجر

شريط التمرير الأبيض

شريط التمرير النحيل

شريط التمرير الأسود

شريط التمرير البرتقالي

شريط تمرير مجرة

شريط التمرير الأخضر

اضافة اداة الدردشة Whatsapp لبلوجر

قالب شروحات بابكورن

تحميل القالب

المميزات / الإضافات

قالب افلام نيوز لمدونات الانيمي والافلام

تحميل القالب

المميزات / الإضافات

منع النسخ ببلوجر عند النقر بتحذير منبثق

ملف مفتوح لأجهزة Pixel 4 و Pixelbook Go

تحميل الملحق

معلومات عن الملحق

اضافة صفحة الأرشيف لمدونات بلوجر

قالب فكرة مين متعدد الإستعمال

تحميل القالب

المميزات / الإضافات

إضافة تأثير التموج على بلوجر Ripple Effect

إضافة الوضع الليلي السريع إلى قالبك

تركيب اضافة مانع الإعلانات بشكل جديد

اضافة تأثيرات الظل على شعار المدونة

عرب ويب | الأفضل لكم

طريقة اعادة توجيه الروابط ببلوجر

التغييرات المطلوبة

افضل موقع لتحميل قوالب بلوجر

قالب مدونة عرب ويب الأصلي V2

تحميل القالب

المميزات / الإضافات

اداة مواضيع ذات صلة على شكل سلايدر

تثبيت اشعارات Disqus بزر الصعود والنزول

قالب Cleanify معرب

تحميل القالب

المميزات / الإضافات

قالب للإنتقال للموقع الجديد

تحميل القالب

اضافة تأثير سقوط الثلج للبلوجر

قالب مدونة عرب ويب الأصلي V1

تحميل القالب

المميزات / الإضافات