إضافة مواضيع مميزة إلى مدونات بلوجر

في هذه التدوينة الجديدة و الحصرية على مدونة المحترف للمعلوميات اليوم أحضرت لكم طريقة إضافة كود أداة مواضيع مميزة

مثل مدونة عرب ويب

تابعوا معنا الطريقة ولاتحرمونا من تعليقاتكم المشجعة

الخطوة الأولى :

اذهب لبلوجر
تم القالب
وبعدها تحرير html
واضف الكود التالي فوق ]]></b:skin>

#recomanim { margin: 1% 1% 0px;margin-top: 50px;}
.stat {position: absolute;z-index: 10;color: #FFF;padding: 3px 6px;font-size: 10px;border-radius: 3px;top: 5px;right: 5px;}
.recobox {margin-bottom: 10px;padding: 5px;background-image: linear-gradient(to bottom, #E8E8E8 0px, #F5F5F5 100%);background-repeat: repeat-x;border: 1px solid #DBDBDB;box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 1px 0px rgba(255, 255, 255, 0.1);}
.anim {float: right;margin: 16px;border: 1px solid #CCC;border-radius: 3px;position: relative;width: 122px;height: 171px;overflow: hidden;font-family: ge_ss_threeregular;}
.stat.ongo {background: none repeat scroll 0% 0% #E75040;}
.anim a {display: block;font-size: 0px;}
.anim img {width: 100%;height: 100%;cursor: url(//ar1web-com.googlecode.com/svn/Hm/cursormicky.png),pointer;}
.anim img:hover {opacity: 0.9;margin-top: -11px;transition: all 0.3s ease;}
.anim p {margin: 0px;font-size: 11px;background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);color: #FFF;position: absolute;bottom: 0px;z-index: 200;padding: 4px 6px 5px;width: 110px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: right;}

قم بحفظ القالب

الخطوة الثانية :

اذهب لتخطيط
ثم أضف أداة جديدة
و بعدها إختر أداة HTML/JavaScript
واضف الكود التالي :

    <div class='recobox'>

    <div class='anim'>

    <span class='stat ongo'>قريباً</span>

        <a href='http://th3pc.blogspot.com/'>

    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuFizqQd2zXHG723eroKChsZfdvqc2XS1_r10GTZkK3ZVDwUWehrCOx4AcGQbOlLiyZ7k2I_SHBt8xBUhksYyG62mqrkCCIx_MatmfAdBLHUGLNrlvAhwB9nstqgakFXxOq1XE8zgack/s1600/soon.png' title=''/>

      <p>

    قيد التطوير</p>

    </a>

      </div>

    <div class='anim'>

    <span class='stat ongo'>قريباً</span>

        <a href='http://th3pc.blogspot.com/'>

    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuFizqQd2zXHG723eroKChsZfdvqc2XS1_r10GTZkK3ZVDwUWehrCOx4AcGQbOlLiyZ7k2I_SHBt8xBUhksYyG62mqrkCCIx_MatmfAdBLHUGLNrlvAhwB9nstqgakFXxOq1XE8zgack/s1600/soon.png' title=''/>

      <p>

    قيد التطوير</p>

    </a>

      </div>

    <div class='anim'>

    <span class='stat ongo'>قريباً</span>

        <a href='http://th3pc.blogspot.com/'>

    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuFizqQd2zXHG723eroKChsZfdvqc2XS1_r10GTZkK3ZVDwUWehrCOx4AcGQbOlLiyZ7k2I_SHBt8xBUhksYyG62mqrkCCIx_MatmfAdBLHUGLNrlvAhwB9nstqgakFXxOq1XE8zgack/s1600/soon.png' title=''/>

      <p>

    قيد التطوير</p>

    </a>

      </div>

    <div class='anim'>

    <span class='stat ongo'>قريباً</span>

        <a href='http://th3pc.blogspot.com/'>

    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuFizqQd2zXHG723eroKChsZfdvqc2XS1_r10GTZkK3ZVDwUWehrCOx4AcGQbOlLiyZ7k2I_SHBt8xBUhksYyG62mqrkCCIx_MatmfAdBLHUGLNrlvAhwB9nstqgakFXxOq1XE8zgack/s1600/soon.png' title=''/>

      <p>

    قيد التطوير</p>

    </a>

      </div>

    <div class='anim'>

    <span class='stat ongo'>قريباً</span>

        <a href='http://th3pc.blogspot.com/'>

    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuFizqQd2zXHG723eroKChsZfdvqc2XS1_r10GTZkK3ZVDwUWehrCOx4AcGQbOlLiyZ7k2I_SHBt8xBUhksYyG62mqrkCCIx_MatmfAdBLHUGLNrlvAhwB9nstqgakFXxOq1XE8zgack/s1600/soon.png' title=''/>

      <p>

    قيد التطوير</p>

    </a>

      </div>

    <div class='anim'>

    <span class='stat ongo'>قريباً</span>

        <a href='http://th3pc.blogspot.com/'>

    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuFizqQd2zXHG723eroKChsZfdvqc2XS1_r10GTZkK3ZVDwUWehrCOx4AcGQbOlLiyZ7k2I_SHBt8xBUhksYyG62mqrkCCIx_MatmfAdBLHUGLNrlvAhwB9nstqgakFXxOq1XE8zgack/s1600/soon.png' title=''/>

      <p>

    قيد التطوير</p>

    </a>

      </div>

    <div class='anim'>

    <span class='stat ongo'>قريباً</span>

        <a href='http://th3pc.blogspot.com/'>

    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuFizqQd2zXHG723eroKChsZfdvqc2XS1_r10GTZkK3ZVDwUWehrCOx4AcGQbOlLiyZ7k2I_SHBt8xBUhksYyG62mqrkCCIx_MatmfAdBLHUGLNrlvAhwB9nstqgakFXxOq1XE8zgack/s1600/soon.png' title=''/>

      <p>

    قيد التطوير</p>

    </a>

      </div>

    <div class='anim'>

    <span class='stat ongo'>قريباً</span>

        <a href='http://th3pc.blogspot.com/'>

    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuFizqQd2zXHG723eroKChsZfdvqc2XS1_r10GTZkK3ZVDwUWehrCOx4AcGQbOlLiyZ7k2I_SHBt8xBUhksYyG62mqrkCCIx_MatmfAdBLHUGLNrlvAhwB9nstqgakFXxOq1XE8zgack/s1600/soon.png' title=''/>

      <p>

    قيد التطوير</p>

    </a>

      </div>

    <div class='clear'/>

    </div>

    </div>

النهاية الان نتمنى ان يعجبكم الموضوع ولاتحرمونا من تعليقاتكم المشجعة وشكرا لمروركم نلتقي انشاء الله في تدوينة اخرى

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

إرسال تعليق

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي
----------------------------------
* بإمكانك إدراج الأكواد الغير قابلة للنشر بتحويله عبر محول الأكواد

إضافة مواضيع مميزة إلى مدونات بلوجر

إرسال تعليق

تابعنا عبر الفايسبوك

مساحة إعلانية

"ثلاثة روبوتات على تطبيق تيليغرام تساعدك في كسب المال"