كن مهووس: إضافة أداة للمشاركات الأخيرة بصور مصغرة

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
إضافة أداة للمشاركات الأخيرة بصور مصغرة
كتب بواسطة
عدد التعليقات
0 التعليقات


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

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

لمن أراد تركيبها على موقعه فليتابع الشرح بعد المعاينة

شرح طريقة التركيب
* إذا كنت تتوفر على أداة فوق رسائل المدونة الالكترونية أو أسفلها فانتقل مباشرة للخطوة 4
1. حرر القالب وابحث عن هذا الكود <b:section class='main' id='main' في حالة لم تجده اختر الانتقال الى الاداة واضغط على Blog1 وسيوجهك إليه
2. بعد أن تجده ضع الكود التالي فوقه
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='Recent-Posts section' id='RecentPosts-ar1web' maxwidgets='1' showaddelement='yes'>
 
</b:section>
</b:if></b:if>
3. قم بحفظ النموذج واتجه إلى التخطيط ستجد اداة فوق رسائل المدونة الالكترونية
4. اضف اداة Html/Javascript وضع بها الكود التالية
<style>
      .th-container {
        list-style-type: none;
        font-family: inherit;
        float: right;
        width: 100%;
        max-width: 600px;
        min-height: 70px;
        margin: 5px 0px 5px 0px;
        padding: 0;
        font-size: 12px;
    border: 1px solid rgba(243, 243, 243, 0.56);
    background: rgba(251, 250, 250, 0.6);
    }
    
    .th-container a {
        text-decoration: none;
        color: #333;
    }
    
    .thumb {
        display: block;
        position: relative;
        overflow: hidden;
    }
    
    .th_narrow a.category {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #444;
        color: #fff;
        font-size: 10px;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        text-transform: uppercase;
      
        z-index: 1;
    }
    
    .category-main-wrap {
        text-align: center;
        transform: translateY(-58%);
        -ms-transform: translateY(-58%);
        -moz-transform: translateY(-58%);
        -webkittransform: translateY(-58%);
    }
    
    .category-main {
        background: #fff;
        border: none;
        padding: 10px 0;
        font-size: 11px;
        position: relative;
    }
    
   .category-list {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    font-family: inherit;
    z-index: 2;
    background: #FFFFFF;
    line-height: 0;
    border-bottom: 1px solid rgb(234, 232, 232);
    padding: 10px;
    bottom: 5px;
}
    
   
    .center-ar1web { text-align: center; }
    
  
   .postmeta {
   text-align: center;
    font: 11px tahoma;
    padding: 10px 0;
    line-height: 0;
}
    
    .featuredPost.lastPost .day,
    .th-wide a.category {
        color: #454545;
        font-weight: 700;
        text-transform: uppercase;
        padding: 0 10px;
        font-size: 11px;
        text-transform: uppercase;
        margin-bottom: 30px;
        opacity: 0.8;
        text-align: center;
        display: inline-block;
    }
    
    .featuredPost.lastPost {
        /* margin: 0 auto; */
        margin-top: -23px;
    }
    
    .th-wide img {
        height: auto;
        width: 100%;
       transition: .3s ease-in-out;
    }
.th-wide img:hover {
    opacity: .85;
    transform: scale(1.1);
}
    
    .th-container i {
        margin-right: 3px;
        margin-left: 3px;
    }
    
    .th_narrow {
        display: inline-block;
        margin: 0 6px;
        text-align: center;
    height: 250px;
    }
    
    .post-comments {
        background: #DD2727;
        font-size: 12px;
        line-height: 20px;
        color: #fff !important;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .th_narrow .comm {
        display: block;
        position: relative;
        padding: 2px 7px;
    }
    
    .th_narrow .comm:before {
        content: '';
        display: inline-block;
        border-right: 4px solid transparent;
        border-left: 4px solid #DD2727;
        border-top: 4px solid #DD2727;
        border-bottom: 4px solid transparent;
        position: absolute;
        top: 24px;
        right: 10px;
    }
    
    .th_narrow .comm i {
        margin-left: 3px;
    }
    
    .th_narrow {
        width: 180px;
        overflow: hidden;
    }
.th_narrow img:hover {
    opacity: .85;
}
.th_narrow img {
    height: 150px;
    width: 100%;
-webkit-transition: all 200ms ease-in-out;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    showRandomImg = true;
    numposts = 7;

    function recentarticles2(json) {
        j = (showRandomImg) ? Math.floor((imgr.length + 1) * Math.random()) : 0;
        img = new Array();
        if (numposts <= json.feed.entry.length) {
            maxpost = numposts
        } else {
            maxpost = json.feed.entry.length
        }
        for (var i = 0; i < maxpost; i++) {
            var entry = json.feed.entry[i];
            var posttitle = entry.title.$t;
            var pcm;
            var posturl;
            var commentsurl;


            var zz;
            var cate = '';
            for (var e = 0; e < json.feed.entry[i].category.length; e++) {
                cate = cate + '<a class="category" href="/search/label/' + json.feed.entry[i].category[e].term + '?max-results=6">' + json.feed.entry[i].category[e].term + '</a>';
                zz = '<a class="category" href="/search/label/' + json.feed.entry[i].category[e].term + '?max-results=6">' + json.feed.entry[i].category[e].term + '</a>';
            }



            if (i == json.feed.entry.length) break;
            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break
                }
            }
            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                    pcm = entry.link[k].title.split(" ")[0];
                    commentsurl = entry.link[k].href.split(" ")[0];
                    break
                }
            }
            if ("content" in entry) {
                var postcontent = entry.content.$t
            } else
            if ("summary" in entry) {
                var postcontent = entry.summary.$t
            } else var postcontent = "";
            postdate = entry.published.$t;
            if (j > imgr.length - 1) j = 0;
            img[i] = "";
            s = postcontent;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                if (i == 0) {
                    img[i] = '<img min-width="620" min-height="240" class="alignone" src="' + d + '"/>'
                } else {
                    img[i] = '<img class="alignright" min-height="100" src="' + d + '" width="180"/>'
                }
            }
            var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
             var month2 = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
            var day = postdate.split("-")[2].substring(0, 2);
            var m = postdate.split("-")[1];
            var y = postdate.split("-")[0];
            for (var u2 = 0; u2 < month.length; u2++) {
                if (parseInt(m) == month[u2]) {
                    m = month2[u2];
                    break
                }
            }

            var daystr = day + ' ' + m + ' ' + y;

            if (i == 0) {
                var trtd = '<div class="th-container"><div class="th-wide"><div class="thumb overlay"><a href="' + posturl + '">' + img[i] + '</a></div><div class="category-main-wrap"><div class="category-list category-main"><h3 class="postTitle"><a href="' + posturl + '">' + posttitle + '</a></h3></div></div><div class="featuredPost lastPost"><div class="postmeta"><span class="day">' + daystr + '</span>' + zz + '</div><div class="clear"></div><span class="featuredPostMeta"><a href="' + posturl + '"></a></span></div></div><div class="center-ar1web">';
                document.write(trtd)
            }
            if ((i > 0) && (i < maxpost)) {
                var trtd = '<div class="th_narrow"><div class="thumb overlay"><a href="' + posturl + '">' + img[i] + '</a>' + zz + '<a class="post-comments" href="' + commentsurl + '" target ="_top"><span class="comm"><i class="fa fa-comment-o"></i>' + pcm + '</span></a></div><h4 class="featuredTitle"><a href="' + posturl + '">' + posttitle + '</a></h4><div class="clear"></div></div>';
                document.write(trtd)
            }
            j++
        }
        document.write('</div>')
    }
     document.write("<script src=\"/feeds/posts/default/?max-results=" + numposts + "&orderby=published&alt=json-in-script&callback=recentarticles2\"><\/script>");
    //]]>
</script>
التغييرات الأساسية
1. للتحكم بعرض الأداة فالرقم 600 محدد بالأخضر
2. إن كنت تتوفر على كود خطوط الأيقونات FontAwesome فقم بحذفه من الكود - محدد بالبرتقالي
3. غير numposts = 7; لتظهر عدد المشاركات المناسب لديك - محدد بالأزرق
4. لاضافة تسمية معينة غير /feeds/posts/default/?max-results - محدد بالأحمر وضع بدله هذا/feeds/posts/default/-/التسمية?max-results
نصل لنهاية التدوينة، ونحب أن ننوه أن بعض القوالب لن تقبل الإضافة إن كان به إضافات مشابهة... وكالعادة واجهتك مشكلة / استفسار فضعه بالتعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1-أن يكون التعليق خاص بمحتوى التدوينة
2-أن لا تضع أي روابط خارجية
3-لاضافة كود حوله اولا بمحول الاكواد
4-أي سؤال خارج محتوى التدوينة يرجى التواصل معنا عبر صفحتنا


محول الاكواد الابتسامات





اخبار الهواتف الذكيه
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    عبدالله محمد

    مدون ومحترف بلوجر

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير