الجمعة, أغسطس 10, 2012

كيف تجعل تدوينه او أكثر مثبته على الصفحه الرئيسيه لمدونتك على بلوجر

يمكنك الآن إنشاء أو تحويل تدوينه او أكثر من تدوينه عاديه إلى تدوينه مثبته , وتدوينه مثبته تعنى أن التدوينه تظهر على الصفحه الرئيسيه دائما وفى مقدمة باقى التدوينات , حتى ولو كانت هذه التدوينه اقدم من باقى التدوينات فسوف تظهر أيضا فى المقدمه دائما .

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

طريقة التاريخ ( غير جيده )

قم بنشر تدوينتك ولكن ستقوم بتغيير التاريخ لتجعله مستقبليا , وكمثال أن تجعل التاريخ 2020 وستظهر هذه التدوينه فى المقدمه دائما حتى بلوغ هذا التاريخ , ولكن بها مشكله كبيره وهى أن خلاصات مدونتك لن تعمل بشكل جيد , بل ستظل خلاصات مدونتك متوقفه مع هذه التدوينه كآخر تدوينه تم نشرها ولن تقوم بأرشفة أى تدوينات أخرى .

طريقة الإضافه ( غير جيده )

وهى أن تقوم بإستخدام بعض الأكواد عن طريق لصقها فى إضافة أداة HTML/JAVASCRIPT فى تخطيط مدونتك أعلى رسائل المدونه الإلكترونيه , ومع انها سوف تأخذ نفس شكل التدوينات العاديه وسوف تظهر فى مقدمة كل التدوينات , ألا أن لديها مشكله كبيره وهى انها ليست تدوينه ولن يتم نشرها فى محركات البحث ولن يتم أرشفتها كما أنها لن تدخل ضمن ارشيف المدونه الإلكترونيه .

طريقة التدوينه المثبته الحديثه ( ممتازه )

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

إذهب إلى أكواد HTML الخاصه بقالب مدونتك ثم قم بالبحث عن الكود التالى
</body>
ثم ضع قبله تماما الكود التالى
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .sticky-post { background-color: #F0F0F0; padding: 8px;}
    .stickies-container { background-color: #E4E4E4; padding: 4px; margin-bottom: 2em;}
    .stickymore { display: none; }
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    // Sticky posts by MS-potilas 2011. See http://yabtb.blogspot.com/
    // Configuration:
    var stickyLabel = "sticky"
    var maxStickies = 2;  // 1-20
    var showDate = true;
    var showTitle = true;
    var showFooter = true;
    var showPostedBy = true;
    var showCommentLink = true;
    var showLabels = true;
    var showStickyLabel = false;
    var showEmailPost = false;
    var showShareButtons = true;
    var showShareEmail = true;
    var showShareBlog = true;
    var showShareTwitter = true;
    var showShareFacebook = true;
    var showSharePlusone = true;
    var widthPlusone = 300;
    var txtComment = "comment";
    var txtComments = "comments";
    var txtPostedBy = "Posted by [user] at [time]";
    var txtLabels = "Labels:";
    var txtMore = "Read more &raquo;";
    var dynamicMore = true;
    var txtHideMore = "&laquo; <small>Hide</small>";
    // config end
    function findQuickEdit() {
      var elements = document.getElementsByTagName("*");
      var expr = /(^| )quickedit( |$)/;
      for(var i=0 ; i<elements.length ; i++)
        if(expr.test(elements[i].className))
          return (elements[i].offsetWidth != 0);
      return false;
    }
    function toggleStickyMore(id) {
      if(document.getElementById(id)) {
        if(document.getElementById(id+'-morelink').style.display != 'none') {
          document.getElementById(id).style.display = 'block';
          document.getElementById(id+'-morelink').style.display = 'none';
        } else {
          document.getElementById(id).style.display = 'none';
          document.getElementById(id+'-morelink').style.display = 'inline';
        }
      }
      var elm=document.getElementById(id+'-buttons');
      if(elm) {
        var old=elm.style.display;
        elm.style.display = 'none';
        elm.style.display = old; // because of IE...
      }
    }
    function renderStickies(result) {
        if(!result || !result.feed || !result.feed.entry || !result.feed.entry.length) return;
        var divSticky = document.createElement('div');
        divSticky.className = "stickies-container";
        var elm = document.getElementById("Blog1");
        elm.insertBefore(divSticky, elm.firstChild);
        if(!showLabels && !showPostedBy && !showCommentLink)
          showFooter = false;
        var strBuffer="";
        var isQuickEdit = findQuickEdit();
        for(var i = 0 ; i < result.feed.entry.length && i < maxStickies ; i++) {
            if(strBuffer != "")
              strBuffer += "<br />";
            var entry = result.feed.entry[i];
            strBuffer += "<div class=\"sticky-post\">";
            var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
            postDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
            if(showDate)
              strBuffer += "<h2 class=\"date-header\">" + postDate.toLocaleDateString() + "</h2>";
            var link="";
            for(var k = 0; k < entry.link.length; k++ ) {
              if(entry.link[k].rel == 'alternate') {
                link = entry.link[k].href;
                break;
              }
            }
            var blogid = entry.id.$t.split('-')[1].split('.')[0];
            var postid = entry.id.$t.split('-')[2];
            if(postid != "") {
              var elepost=document.getElementsByName(postid);
              if(elepost && elepost[0]) {
                elepost = elepost[0].parentNode;
                while(elepost && !/(^| )date-outer( |$)/.test(elepost.className))
                  elepost = elepost.parentNode;
                if(elepost && elepost.parentNode) elepost.parentNode.removeChild(elepost);
              }
            }
            if(showTitle)
              strBuffer += "<h3 class=\"post-title entry-title\"><a href=\"" + link + "\">"+ entry.title.$t + "</a></h3><br />";
            var content = entry.content.$t;
            if(content.indexOf("<a name='more'")!=-1) {
              if(!dynamicMore) {
                content = content.replace(/\n/g, " ");
                content = content.replace(/<a name='more'.*$/, "<div style='clear: both;'></div><div class='jump-link'><a href='"+link+"#more' title='"+entry.title.$t+"'>"+txtMore+"</a></div>");
              } else {
                var morelink = '<a href="javascript:void(0);" id="sticky'+postid+'-morelink" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="'+entry.title.$t+'">';
                morelink += txtMore+'</a><div class="stickymore" id="sticky'+postid+'">';
                morelink += '<a style="float:right;margin-left:1em;" href="javascript:void(0);" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="Hide text">' + txtHideMore + '</a>';
                content = content.replace(/\n/g, " ").replace(/<a name='more'.*?<\/a>/, morelink) + "</div>";
              }
            }
            strBuffer += content;
            if(showFooter) {
              var strComments = "";
              if(showCommentLink)
                strComments = "<a class=\"comment-link\" href=\"" + link + "#comments\">" + entry.thr$total.$t + " " + ((entry.thr$total.$t==1) ? txtComment : txtComments) + "</a>";
              strBuffer += "<div class=\"post-footer-line post-footer-line-1\"><div class=\"post-footer\">";
              if(showPostedBy) {
                var strPostedBy = txtPostedBy.replace('[user]', entry.author[0].name.$t);
                strPostedBy = strPostedBy.replace('[time]', '<a class="timestamp-link" href="'+link+'">'+postDate.getHours() + ":" + String("0"+postDate.getMinutes()).slice(-2)+'</a>');
                strBuffer += strPostedBy;
                if(showCommentLink)
                  strBuffer += " &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ";
              }
              if(showCommentLink && (showShareButtons || showEmailPost)) {
                strBuffer += strComments + " &nbsp; &nbsp; ";
                strComments = "";
              }
              if(isQuickEdit) {
                strBuffer += "<a href='http://www.blogger.com/post-edit.g?blogID="+blogid+"&postID="+postid+"&from=pencil' title='Edit Post'><img class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a> &nbsp; ";
              }
              if(showEmailPost) {
                emailPostUrl = "http://www.blogger.com/email-post.g?blogID="+blogid+"&postID="+postid;
                strBuffer += '<span class="item-action"><a href="'+emailPostUrl+'" title="Email Post"><img class="icon-action" height="13" src="http://img1.blogblog.com/img/icon18_email.gif" width="18"/></a></span> &nbsp; &nbsp; ';
              }
              if(showShareButtons) {
                strBuffer += "<div id='sticky"+postid+"-buttons' class='post-share-buttons goog-inline-block'>";
                sharePostUrl = "http://www.blogger.com/share-post.g?blogID="+blogid+"&postID="+postid;
                if(showShareEmail)
                  strBuffer += '<a class="goog-inline-block share-button sb-email" href="'+sharePostUrl+'&target=email" title="Email This" target="_blank"><span class="share-button-link-text">Email This</span></a>';
                if(showShareBlog)
                  strBuffer += '<a class="goog-inline-block share-button sb-blog" href="'+sharePostUrl+'&target=blog" onclick="\'window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;\' title="BlogThis!" target="_blank"><span class="share-button-link-text">BlogThis!</span></a>';
                if(showShareTwitter)
                  strBuffer += '<a class="goog-inline-block share-button sb-twitter" href="'+sharePostUrl+'&target=twitter" title="Share to Twitter" target="_blank"><span class="share-button-link-text">Share to Twitter</span></a>';
                if(showShareFacebook)
                  strBuffer += '<a class="goog-inline-block share-button sb-facebook" href="'+sharePostUrl+'&target=facebook" onclick="\'window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;\' title="Share to Facebook" target="_blank"><span class="share-button-link-text">Share to Facebook</span></a>';
                if(showSharePlusone)
                  strBuffer += '&nbsp;<div class="goog-inline-block dummy-container"><div class="g-plusone" data-size="medium" data-href="'+link+'" data-width="'+widthPlusone+'" data-annotation="inline"></div></div>';
                strBuffer += "</div>";
              }
              if(showLabels && (showPostedBy || showShareButtons))
                strBuffer += "<br />";
              if(showLabels) {
                if((entry.category.length > 1 && !showStickyLabel) || (entry.category.length > 0 && showStickyLabel)) {
                  strBuffer += txtLabels + " ";
                  for(var z = 0 ; z < entry.category.length ; z++) {
                    if(entry.category[z].term == stickyLabel && !showStickyLabel)
                      continue;
                    if(z) strBuffer += ", ";
                    strBuffer += "<a href=\"/search/label/" + encodeURIComponent(entry.category[z].term) + "\">" + entry.category[z].term + "</a>";
                  }
                }
                if(strComments != "")
                  strBuffer += " &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ";
              }
              strBuffer += strComments;
              strBuffer += "</div></div>";
            }
            strBuffer += "</div>";
        }
        strBuffer = strBuffer.replace(/<img width=.1. height=.1. [^>]+>/g, "");
        divSticky.innerHTML = strBuffer;
    }
    feedURI = "/feeds/posts/default/-/" + stickyLabel + "?max-results=25&redirect=false";
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+feedURI+'&alt=json-in-script&callback=renderStickies"></'+'script>');
    //]]>
    </script>
    </b:if>
    </b:if>
ثم قم بحفظ قالب مدونتك وإستمتع بالتدوينات المثبته .

إعدادات وملاحظات هامه جدا

  • التدوينه التى تريد أن تجعلها تدوينه مثبته يجب عليك فقط أن تجعل تسميتها ( sticky ) وستصبح تدوينه مثبته , وتستطيع تغيير هذا الإسم كا تشاء عن طريق تغييره من مكانه فى الكود السابق .
  • يجب عليك تطبيق هذا الدرس أيضا ( إظهار التاريخ على كل التدوينات التى تنشرها فى يوم واحد فى مدونتك على بلوجر ) وذلك لتلافى إنضمام التدوينات العاديه التى تنشر فى نفس التاريخ إلى التدوينه المثبته فى إطار واحد .
  • تستطيع التحكم فى الإعدادات والشكل من خلال هذه السطور الملونه باللون الأزرق فى الكود السابق .
والآن أصبح عندك تدوينات مثبته , أى إستفسار أو إقتراح برجاء وضعه فى التعليقات .
من فضلك اضغظ لايك لمشاهدة لينك التحميل

15 تَعْلِيق:

  1. شكرا لك اخي لقد كنت احتجها سابقا خاصة مع قالبي القديم فكنت استعمل طريقة التاريخ لكنها صراحة غير مجدية البثة لكن الان لم اعد استعملها وشكرا لك مرة اخرى اخي
    لو حبيت ان تزور مدونتي وتساعدني فهي على الرابط الاتي
    http://moussiac.blogspot.com

    ردحذف
  2. يعطيك الف عافية اخي الكريم

    http://3rbyblog.blogspot.com

    ردحذف
  3. من أبسط و أوضح التدوينات في هذا الخصوص (تثبيت تدوينة على الصفحة الرئيسية بالمدونة ) وقد بحثت عنها طويلا بالفرنسية والأنجليزية لأطبقها إن شاء الله في مدونتي
    http://arenjiaohanyu.blogspot.com/
    شكرا

    ردحذف
  4. يعطيك الف عافية
    http://msiteg.blogspot.com

    ردحذف
  5. شكرا جدااااااااااااا..ويا ريت شرح مفصل عن Zemanta مع طريقة تنصيبه الله يعطيك مليون عافيه

    ردحذف
  6. يعطيك الف عافية

    http://baramij-ucom.blogspot.com

    ردحذف
  7. بجد كنت محتاج الخاصيه دى جدا
    اتمنى اعرف رايكو فى مدونتى
    http://lyrics-songss.blogspot.com

    ردحذف
  8. شكرااااا موضوع مفيد http://alkebar.blogspot.com/

    ردحذف
  9. السلام عليكم ورحمة الله وبركاته اهلا بك اخي موضوع جد رائع ومدونة اروع مثل صاحبها كنت اود ان اريك مدونتي وان تنضم لنا مثل اخي شامل كول و اخي وصديقي كاسر بلوجر واخي وصديقي وحبيبي عبد الغفور
    في مشروع كبير لا يمكن التحدث هنا وارجو الرد
    وهذه المدونة التي جمعتنا فوق سقف واحد
    http://blogg-face.blogspot.com
    وهذا بريدي للتواصل
    gabrm30@yahoo.com
    ونحن نجمع مبرمجين ايضا ارجو التواصل....

    ردحذف
  10. اخى اريد مساعدتك فى حل هذى المشكله لقد صممت هاذا القالب http://alfrsan-tv.blogspot.com/
    لاكن واجهتى مشكله وهى ان المواضيع فى منها يلتصق بالاخر والسبب تاريخ التدوينه
    ومنها من يظهر منفردأ والسبب تاريخ التدوينه
    ممكن طريقه لاظهار المواضيع ملتصقه او منفره

    ردحذف
  11. رائع يا اخى

    ارجو ان تطلع على مدونتى البسيطه مدونه مدون لاضافات الفوتوشوب وبلوجر

    http://mdwanblog.blogspot.com/

    ردحذف
  12. أهلا بك أخي ياسو

    اضافة رائعة و لكن عندي استفسار

    كيف أجعل المشاركة المثبتة تظهر مختصرة كما جميع تدويناتي و لا أريدها تظهر كامل المشاركة

    و كيف أضيف اقرأ المزيد كما التي لدي في مدونتي

    و هذه صورة لتطبيق الشرح حيث ظهرت المشاركة كاملة
    و أنا أريدها مختصرة مثلا 100 كلمة فقط

    http://im21.gulfup.com/2Am51.png

    و هذا رابط مدونتي

    http://www.flash-techno.net/

    ردحذف
  13. شكرا لك اخي العزيز تم التطبيق بنجاح
    http://ar-cookies.blogspot.com/

    ردحذف
  14. شكرا اخي
    www.talamlan.blogspot.com

    ردحذف
  15. يعطيك الف عافية اخي الكريم

    http://mostajad.blogspot.com

    ردحذف