اضافة صفحة عن مدير الموقع بشكل جديد

إعلان أدسنس

آخر المواضيع

breaking/قوالب بلوجر/9
مقالات

الأربعاء، 6 سبتمبر، 2017

سبتمبر 06, 2017

تكبير النص تصغير النص أعادة للحجم الطبيعي

السلام عليكم و مرحبا بكم في مدونة فيصل ويب
اليوم جئت لكم بأضافة رائعة و جديدة و حصرية ايضا 
هي اضافة صفحة : عن المدير
وهي اضافة تمكن الزوار من التعرف على صااحب الموقع و فيها أيضا نبدة عنه و ازرار التواصل 
أتركك مع  طريقة التركيب 

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

ماعليك سوى الذهاب الى صفحات ثم الى صفحة جديدة و تقوم بلصق هدا الكود في تبويوب HTML  و حفط 



<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div dir="rtl" style="text-align: right;" trbidi="on">
<br /></div>
<div dir="rtl" style="text-align: right;" trbidi="on">
<br /></div>
<div class="container" id="main-container">
<!-- #main -->

<br />
<div class="section" id="main">
<div class="widget Blog" data-version="1" id="Blog1">
<div class="blog-posts">
<div class="post-outer">
<div class="post" itemprop="blogPost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
<span style="color: #444444;"><a href="https://www.blogger.com/null" name="7410980891106195213"></a>
</span>
<br />
<div class="post-body entry-content" id="post-body-7410980891106195213">
<div dir="rtl" style="text-align: right;" trbidi="on">
<style>
  .this-page-content .img {
    position: relative;
    max-height: 400px;
    background-color: #FAFAFA;
    background-image: url("https://cdn.shutterstock.com/shutterstock/videos/3182557/thumb/1.jpg?i10c=img.resize(height:160)");
    background-size: cover;
    background-position: center;
    margin: 0 0 120px;
  }


  .this-page-content .img a {
    width: 200px;
    max-width: 90%;
    position: absolute;
    background-color: #eee;
    border-radius: 100%;
    left: 50%;
    bottom: 0;
    margin: 0 0 -100px -100px;
    background-image: url("https://2.bp.blogspot.com/-pzrartU_qyw/WYCVx9BcKsI/AAAAAAAABi8/gId2FlET9-ABLwiQSSsXin81HmTJtnPKwCK4BGAYYCw/AvFGRbAm.jpeg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  .this-page-content .img a:before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .this-page-content .img:before {
    content: "";
    display: block;
    padding-top: 50%;
  }

  .this-page-content h3 {
    text-align: center;
    color: #4F5050;
    font-family: bein;
    font-size: 20px;
  }

  .this-page-content h3 a {
    text-decoration: none;
    color: #EA3747;
  }

  .this-page-content p {
margin: 25px auto;
    max-width: 600px;
    text-align: center;
    font-family: "Droid Arabic Naskh";
    font-size: 14px;
    line-height: normal;
  }

  .this-page-content .social-icons {
    text-align: center;
font-family: "flat-jooza";
  }

  .this-page-content .social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 100%;
    position: relative;
    margin: 0 5px;
    border: solid 2px;
    color: #4F5050;
    text-decoration: none;
    font-size: 20px;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
  }

  .this-page-content .social-icons a:before {
    content: "";
    position: absolute;
    left: 14.5px;
    top: -7px;
    border: solid transparent;
    border-width: 3px 5px;
    border-top-color: #424242;
    z-index: 1;
    visibility: hidden;
    margin-top: 5px;
    opacity: 0;
    -webkit-transition: visibility 0.2s, margin-top 0.2s, opacity 0.2s;
    transition: visibility 0.2s, margin-top 0.2s, opacity 0.2s;
  }

  .this-page-content .social-icons a:after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    top: -27px;
    background-color: #424242;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    padding: 0 10px;
    font-size: 10px;
    border-radius: 3px;
    line-height: 20px;
    height: 20px;
    pointer-events: none;
    visibility: hidden;
    margin-top: 5px;
    opacity: 0;
    -webkit-transition: visibility 0.2s, margin-top 0.2s, opacity 0.2s;
    transition: visibility 0.2s, margin-top 0.2s, opacity 0.2s;
  }

  .this-page-content .social-icons a:hover {
    color: #EA3747;
  }

  .this-page-content .social-icons a:hover:before,
  .this-page-content .social-icons a:hover:after {
    visibility: visible;
    margin-top: 0;
    opacity: 1;
  }

  @media screen and (max-width: 768px) {
    .this-page-content .img a {
      width: 150px;
      margin: 0 0 -75px -75px;
    }
  }

  @media screen and (max-width: 320px) {
    .this-page-content .img a {
      width: 100px;
      margin: 0 0 -50px -50px;
    }
  }
</style>

<br />
<div class="this-page-content">
<div class="img">
<span style="color: #444444;"><a href="https://www.blogger.com/blogger.g?blogID=857901407791388878#"></a>
  </span></div>
<h3>
<span style="color: #444444;">
    السلام عليكم ، أنا اسمي 
    </span><span style="color: #e06666; font-size: large;">
      فيصل
    </span>
</h3>
<b><span style="color: #444444;">السلام عليكم انا فيصل فروج يوتيوبر و تقني اعشق التقنية و التكنولوجيا ( العاب -- برامج - مواقع - انترنت - برمجة - تطبيقات ) كل هذه المجالات السابقة تجدونها في مدونتي .. فانا احب الافادة و الاستفادة ، هدفي هو الارتقاء بالويب العربي الى ابعد حدوود

</span></b><br />
<b><span style="color: #444444;"><br /></span></b>
<b><span style="color: #444444;"><br /></span></b>
<br />
<div class="social-icons">
<a class="facebook" data-title="حسابي الشخصي على فيسبوك" href="https://www.facebook.com/fayssalwb"><i aria-hidden="true" class="fa fa-facebook"></i></a>
    <a class="twitter" data-title="حسابي الشخصي على تويتر" href="https://twitter.com/FayssalFarrouj"><i aria-hidden="true" class="fa fa-twitter"></i></a>
    <a class="google-plus" data-title="حسابي الشخصي على جوجل بلس" href="https://plus.google.com/112055235431436507283"><i aria-hidden="true" class="fa fa-google-plus"></i></a>
    <a class="youtube" data-title="حسابي الشخصي على يوتيوب" href="https://www.youtube.com/channel/UCLreeKmAMgNGChywlIeugsg"><i aria-hidden="true" class="fa fa-youtube"></i></a>
    <a class="pinterest" data-title="حسابي الشخصي على بنتريست" href="https://www.pinterest.com/"><i aria-hidden="true" class="fa fa-pinterest-p"></i></a>
    <a class="linkedin" data-title="حسابي الشخصي على لينكدان" href="https://www.linkedin.com/"><i aria-hidden="true" class="fa fa-linkedin"></i></a>
    <a class="instagram" data-title="حسابي الشخصي على إنستغرام" href="https://www.instagram.com/fayssalfarrouj/"><i aria-hidden="true" class="fa fa-instagram"></i></a>
  </div>
</div>
<script>
  (function () {
    var arr = [
          {name: "google-plus", value: "fa fa-google-plus", title: "جوجل بلس"},
          {name: "twitter", value: "fa fa-twitter", title: "تويتر"},
          {name: "facebook", value: "fa fa-facebook", title: "فيسبوك"},
          {name: "youtube", value: "fa fa-youtube", title: "يوتيوب"},
          {name: "instagram", value: "fa fa-instagram", title: "إنستغرام"},
          {name: "linkedin", value: "fa fa-linkedin", title: "لينكدان"},
          {name: "pinterest", value: "fa fa-pinterest-p", title: "بنتريست"}
        ];
    Z.forEach(Z.queryAll("div.this-page-content div.social-icons a"), function (a) {
      var name = Z.html(a);
      for (i = 0; i < arr.length; i += 1) {
        if (name === arr[i].name) {
          Z.html(a, '<i class="' + arr[i].value + '" aria-hidden="true"></i>');
          Z.attr(a, {
            "class": name,
            "data-title": "حسابي الشخصي على " + arr[i].title
          });
          return;
        }
      }
    });
  }());
</script></div>
</div>
</div>
<script>
                /*<![CDATA[*/
                (function (selector) {
                  function replaceAll(thisStr, str1, str2, ignore) {
                    return thisStr.replace(new RegExp(str1.replace(
                      /([\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g,
                      function(c){return "\\" + c;}
                    ), "g"+(ignore?"i":"")), str2);
                  }
                  function stringToEmojis(str) {
                    var i;
                    for (i = 0; i < stringToEmojis.emojis.length; i += 2) {
                      str = replaceAll(
                        str, stringToEmojis.emojis[i],
                        '<img class="icon-emoji" src="' + stringToEmojis.emojis[i + 1] + '"/>'
                      );
                    }
                    return str;
                  }
                  stringToEmojis.emojis = [
                    ':)', '//twemoji.maxcdn.com/36x36/1f600.png',
                    ':(', '//twemoji.maxcdn.com/36x36/1f615.png',
                    'hihi', '//twemoji.maxcdn.com/36x36/1f601.png',
                    ':-)', '//twemoji.maxcdn.com/36x36/1f60f.png',
                    ':D', '//twemoji.maxcdn.com/36x36/1f603.png',
                    '=D', '//twemoji.maxcdn.com/36x36/1f62c.png',
                    ':-d', '//twemoji.maxcdn.com/36x36/1f604.png',
                    ';(', '//twemoji.maxcdn.com/36x36/1f61e.png',
                    ';-(', '//twemoji.maxcdn.com/36x36/1f62d.png',
                    '@-)', '//twemoji.maxcdn.com/36x36/1f616.png',
                    ':P', '//twemoji.maxcdn.com/36x36/1f61c.png',
                    ':o', '//twemoji.maxcdn.com/36x36/1f62e.png',
                    ':&gt;)', '//twemoji.maxcdn.com/36x36/1f606.png',
                    '(o)', '//twemoji.maxcdn.com/36x36/1f609.png',
                    '[-(', '//twemoji.maxcdn.com/36x36/1f614.png',
                    ':-?', '//twemoji.maxcdn.com/36x36/2753.png',
                    '(p)', '//twemoji.maxcdn.com/36x36/1f619.png',
                    ':-s', '//twemoji.maxcdn.com/36x36/1f625.png',
                    '(m)', '//twemoji.maxcdn.com/36x36/1f620.png',
                    '8-)', '//twemoji.maxcdn.com/36x36/1f60e.png',
                    ':-t', '//twemoji.maxcdn.com/36x36/1f624.png',
                    ':-b', '//twemoji.maxcdn.com/36x36/1f634.png',
                    'b-(', '//twemoji.maxcdn.com/36x36/1f635.png',
                    ':-#', '//twemoji.maxcdn.com/36x36/1f637.png',
                    '=p~', '//twemoji.maxcdn.com/36x36/1f35c.png',
                    '$-)', '//twemoji.maxcdn.com/36x36/1f4b5.png',
                    '(y)', '//twemoji.maxcdn.com/36x36/1f44d.png',
                    '(f)', '//twemoji.maxcdn.com/36x36/1f33a.png',
                    'x-)', '//twemoji.maxcdn.com/36x36/1f60d.png',
                    '(k)', '//twemoji.maxcdn.com/36x36/1f496.png',
                    '(h)', '//twemoji.maxcdn.com/36x36/1f44f.png',
                    '(c)', '//twemoji.maxcdn.com/36x36/2615.png'
                  ];
                  var div = Z.query("#comments-show-emojis"), i, button;
                  if (div) {
                    Z.attr(div, "data-show", "0");
                    button = Z.create("h5");
                    Z.html(button, "اجعل تعليقك أكثر جمالا باستخدام الإبتسامات");
                    div.appendChild(button);
                    button = Z.create("button");
                    Z.on(button, "click", function () {
                      Z.attr(div, "data-show", 1 - Z.attr(div, "data-show"));
                    });
                    div.appendChild(button);
                    for (i = 0; i < stringToEmojis.emojis.length; i += 2) {
                      button = Z.create("span");
                      Z.html(button, "<img src='" + stringToEmojis.emojis[i + 1] +
                             "'><input value='" + stringToEmojis.emojis[i] + "'>");
                      div.appendChild(button);
                    }
                  }
                  function convertComments() {
                    Z.forEach(Z.queryAll(selector), function (p) {
                      if (Z.attr(p, "data-is-convert-emoji") === "1") {return;}
                      Z.html(p, stringToEmojis(Z.html(p)));
                      Z.attr(p, "data-is-convert-emoji", "1");
                    });
                  }
                  Z.on(window, "load", convertComments);
                  setInterval(convertComments, 1000);
                }("#comment-holder ol li.comment .comment-block p.comment-content"));
                /*]]>*/
              </script>
</div>
<div class="inline-ad">
</div>
</div>
</div>
</div>
<!--/- #main -->
</div>
</div>

إرسال تعليق

مقالات