اعلان

  • اخر الأخبار

    ﺇﺿﺎﻓﺔ ﺃﺯﺭﺍﺭ ﺍﻟﺘﺤﻤﻴﻞ ﻭ ﺍﻟﻤﻌﺎﻳﻨﺔ للبلوجر


    ربما زرت بعض المدونات، او اردت تحميل اي شيء من مدونة ما، و لاحضت ان بعض المدونات تعرض روابط التحميل و المعاينة على شكل ازرار و بطريقة رائعة، وربما اردت اضافة هذه أزرار لمدونتك، كما ان هذه الاضافة تطفي لمسة جمالية للمدونة، لذى ففي هذه التدوينة سنقدم لك كيفية ﺇﺿﺎﻓﺔ ﺃﺯﺭﺍﺭ ﺍﻟﺘﺤﻤﻴﻞ ﻭ ﺍﻟﻤﻌﺎﻳﻨﺔ ﻟمدونات اﻠﺒﻠﻮﺟﺮ، الى الشرح كيفية تركيب ازرار المعاينة وتحميل لمدونات بلوجر، وطبعا أول شئ يجب ان تشاهده هو معاينة حية بنفسك.


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


    معاينة

    حنفي هنكة




    تحميل

    حنفي هنكة




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

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

    أولا كود المظهر أضفه فوق الوسم ]]></b:skin>
     
    #cnmubcoun {
      margin: auto;
      width: 420px;
    }
    /*Preview*/
    #cnmudcount1 {
      float: right;
      margin: 10px auto 30px;
      width: 200px;
    }
    #cnmudcount3 {margin: 10px auto 30px; width: 200px;}
    #cnmudcount1 .cb1 a,#cnmudcount3 .cb1 a {
      background: url("https://lh3.googleusercontent.com/-tFT_SzCGOCs/VT6o1RUN9II/AAAAAAAAASw/P8dx0KP6wYo/s24/search.png") no-repeat scroll 96% center #E77B00;
      color: #fff;
      display: block;
      font-size: 20px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      text-decoration: none;
      transition: all 0.7s ease 0s;
    }
    #cnmudcount1 .cb2,#cnmudcount3 .cb2 {
      background-color: #000;
      border-radius: 0 0 5px 5px;
      color: #fff;
      display: block;
      font: bold 12px/20px tahoma;
      height: 0;
      opacity: 0;
      position: absolute;
      text-align: center;
      transition: all 0.5s ease 0s;
      width: 200px;
    }
    
    /*Download*/
    #cnmudcount2 {
      float: left;
      margin: 10px auto 30px;
      width: 200px;
    }
    #cnmudcount4 {margin: 10px auto 30px; width: 200px;}
    #cnmudcount2 .cb1 a,#cnmudcount4 .cb1 a {
      background: url("https://lh3.googleusercontent.com/-Q0fbJ6eNObg/VT6o1blDgdI/AAAAAAAAASs/yUJb62g7Oug/s24/downloadwhite.png") no-repeat scroll 96% center #319300;
      color: #fff;
      display: block;
      font-size: 20px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      text-decoration: none;
      transition: all 0.7s ease 0s;
    }
    #cnmudcount2 .cb2,#cnmudcount4 .cb2 {
      background-color: #c40101;
      border-radius: 0 0 5px 5px;
      color: #fff;
      display: block;
      font: bold 12px/20px tahoma;
      height: 0;
      opacity: 0;
      position: absolute;
      text-align: center;
      transition: all 0.5s ease 0s;
      width: 200px;
    }
    /*Hover*/
    #cnmudcount1:hover .cb2,#cnmudcount2:hover .cb2,#cnmudcount3:hover .cb2,#cnmudcount4:hover .cb2 {height: 24px; opacity: 1;}
    


    طريقة الإستخدام

     
    <div id="cnmubcoun">
    <!--معاينة-->
    <div id="cnmudcount1">
    <span class="cb1"><a href="#" target="_blank" rel="nofollow">معاينة</a></span>
    <span class="cb2">
    حنفي هنكة
    <script type='text/javascript' src='http://dstats.net/sitetracker.php?url=#'></script>
    <script type='text/javascript'>document.write(dsCounter);</script>
    </span>
    </div>
    <!--تحميل-->
    <div id="cnmudcount2">
    <span class="cb1"><a href="#" target="_blank" rel="nofollow">تحميل</a></span>
    <span class="cb2">
    حنفي هنكة
    <script type='text/javascript' src='http://dstats.net/sitetracker.php?url=#'></script>
    <script type='text/javascript'>document.write(dsCounter);</script>
    </span>
    </div>
    </div>
    amp;

    تضيف الكود السابق في الموضوع بعد تحويل صندوق الكتابة من وضع التأليف الى وضع HTML 

    أهم الإعدادات

    استبدل رمز # برابط المعاينة و الملف .


    بالتوفيق

    ليست هناك تعليقات

    تذكر قوله تعالى
    (( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ )) ‏

    الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات

    آرائكم تسعدنا، لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

    اعلان اعلى الموضوع

    ad728

    اعلان اسفل الموضوع

    ad728