13‏/01‏/2016

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

لمن أراد تركيبها على موقعه فليتابع الشرح بعد المعاينة
شرح طريقة التركيب
* إذا كنت تتوفر على أداة فوق رسائل المدونة الالكترونية أو أسفلها فانتقل مباشرة للخطوة 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
نصل لنهاية التدوينة، ونحب أن ننوه أن بعض القوالب لن تقبل الإضافة إن كان به إضافات مشابهة... وكالعادة واجهتك مشكلة / استفسار فضعه بالتعليق
إضافة أداة بأولها صورة موضوع كبيرة، بعد أن شاركناكم أداة لوضع محتوى مواضيع ثابت فهذه المرة سنشارككم طريقة لتركيب أداة مواضيع جديدة بأولها صورة كبيرة...
هذه الأداة لا تختلف كثيرا عن بقيتها كأداة أحدث المواضيع التي توضع في السيدبار إلا أن أداتنا لليوم تم تصميمها خصيصا لتكون فوق المواضيع أو أسفلها، بشكل جد احترافي،كما يمكنكم التحكم في عرض القسم المختار عبر التسمية.

لمن أراد تركيبها على موقعه فليتابع الشرح بعد المعاينة
شرح طريقة التركيب
* إذا كنت تتوفر على أداة فوق رسائل المدونة الالكترونية أو أسفلها فانتقل مباشرة للخطوة 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
نصل لنهاية التدوينة، ونحب أن ننوه أن بعض القوالب لن تقبل الإضافة إن كان به إضافات مشابهة... وكالعادة واجهتك مشكلة / استفسار فضعه بالتعليق
17 Blogger تعليقات
Disqus
17 التعليقات
المشرف
avatar

إضافة رائعة لكن وجدت مشكل في المرحلة الأولى

المشرف
avatar

The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements

المشرف
avatar

salamo khay houssam chokran bzaf 3la majhodat dyalk lee3z khay ghi bghit n9olek 3la had l2adat mli 3mlta sidbar hawli nltaht mab9achi fe janb dlisar fhamti chno aykon mochkil

المشرف
avatar

مبدع دائما
اخي اريد منك انك تنشر طريقه اضافه معلومات عن التدوينه مثلك لما بندخل علي التدوينه شكرا مقدما

المشرف
avatar

إذ كان فوقها كود فضعه فوقه أي ما قبله

المشرف
avatar

إن شاء الله اخي سأقوم بنشرها لكن بداخل الموضوع

المشرف
avatar

3alikom salam khoya khassek t3del 3la l3rd dyal edafa rahwa mojod f2awl
l'code :
max-width: 600px;
n9ess ra9em mataln l'400px
ila mazal lmochkill golhali

المشرف
avatar

لمم تنجح معي ممكن مساعدة

المشرف
avatar

khay hussam chokran 3la jawab dyalk la walo mli rja3to n 400 px b9a kima homa ya3ni mazal sidbar kayhawd nltaht we ana kansta3ml 9alab dyal wajahat noskha taniya we kansta3ml wahd adat akhra dyal idafat tasmiyat hasab lmawadi3 kandon ykon hiya li3amlali mochkil ??

المشرف
avatar

أرجو أن تمهلني بعض الوقت فالكثير من الطلبات والأعمال تتراكم

المشرف
avatar

la madam anaha dahra bchakl dyalha fahya khdama mzyane tayb9a ghir lmakan hwa lmochkill ...
siftli l9alab o radi nchof m3aha : info@ar1web.com

المشرف
avatar

عايز اعرف اذا حابب الغي الصورة الكبيرة بحيث تكون كل الصور صغيره اعمل ايه ؟

المشرف
avatar

wakha akhay hussam chokraaaan bzaaf n3adbk m3aya akhay wllah ana ansayftolk fe email dyalk . bsaha slider jdid li3mlti fblast tswira lfooo9 jat waa3ra

المشرف
avatar

hanya khoya sifto mobachra lhena : info@ar1web.com

المشرف
avatar

ana sayfto we hada email dyali mourad@alboghaz.com

المشرف
avatar

khay hussam ana sayfto akhay mn had email : mourad@alboghaz.com

المشرف
avatar

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