الأحد، 27 ديسمبر 2015

حصريا الطريقة الصحيحة لإضافة سكريبت إقرأ المزيد لمدونات بلوجر

بقلم: BR MED يوم الأحد، 27 ديسمبر 2015 القسم : | 0 التعليقات
أداة إقرأ المزيد أو ما يسمى read more، من الإضافات الضرورية في المدونات أو المواقع مهما كان نوعها، فهي تتحكم في حجم المحتوى الذي يظهر في الصفحة الرئيسية و بحيث يتم تلخيص المواضيع في عدة كلمات أو جمل يتم التحكم فيها من خلال عدد الأحرف التي تريد الظهور، بالأضافة إلى التحكم في إرتفاع و عرض الصور المصغرة للموضيع img thumbnail ، هذا كله يجعل مظهر المدونة متناسق مع عرض عدد أكبر من التدوينات في مساحة أقل ، ليكون سهل على الزائر تصفح المواضيع بكل سهولة.
و لكن المشكلة هي أن أغلب هذه السكريبتات بها أخطاء ، مما يجعل هذه الإضافة تطبق حتى على الصفحات الثابتة بالمدونة ، أما اليوم فقد أصلحت المشكل و قمت بجلب هذا السكريبت السهل في التركيب كي لا أطيل عليكم ننتقل للشرح.

1- نذهب للوحة التحكم بلوجرثم القالب ثم تحرير html . (خد نسخة إحتياطية )
2- ننقر و سط الأكواد ثم ننقر على الزرين ctrl و f دفعة واحدة ، ينبثق مربع البحث و نبحث عن الكود التالي: <data:post.body/> 
ملاحظة : قد تجد أكثر من واحد الأخير هو المقصود.
3- نستبدل الكود الذي وجدناه بهذا الكود :
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>إقرأ المزيد »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
4- الآن نقوم بالبحث عن الوسم    </head> و نقوم بلصق هذا الكود قبله مباشرة:
<script type='text/javascript'>posts_no_thumb_sum = 490;posts_thumb_sum = 400;img_thumb_height = 160;img_thumb_width = 180;</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID, pURL, pTITLE){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = posts_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';summ = posts_thumb_sum;}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>.post-footer {display: none;}.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; }</style></b:if></b:if>

تعديلات على الكود:
بالنسبة لهذا الكود فهو يجعل الصورة في اليمين إذا أردت العكس قم بتغيرright ب left   و قم بتغيرleft ب right .
يمكنك أيضا تغير هذه التفاصيل:
490 عدد أحرف النص في حالة عدم وجود صورة
400 عدد أحرف النص مع وجود الصورة
160 إرتفاع الصورة
180 عرض الصورة
ثم قم بحفظ القالب
إنتهى الدرس أي إستفسار لاتتردد في ترك تعليق ، دمتم بود .
إقرأ البقية

السبت، 7 نوفمبر 2015

حصريا: أفضل سكريبت لعرض مواضيع بلوجر حسب التسميات

بقلم: BR MED يوم السبت، 7 نوفمبر 2015 القسم : 1 التعليقات
السلام عليكم ورحمة الله تعالى وبركاته
أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن طرح المواضيع و عدم الإجابة عن تساؤلاتكم و إستفسارتكم ، لظروف خاصة حالة دون ذلك ، أحبابي كما و عاودتكم دائما بالجديد و المفيد في كل ما يتعلق بالتدوين و تطوير البلوجر، درس اليوم عبارة عن إضافة أو سكريبت يمكنك من إظهار مواضيع مدونتك حسب التسميات أو التصنيفات، سكريبت يعتمد على تقنية json و هو طريقة إحترافية لعرض التدوينات أو المشاركات في مدونتك ، بالإضافة إلى أنه يضفي جمالية على واجهة المداونة ، ومع إمكانية تغير الألوان والأيقونات. كي لا إطيل عليكم نمر للمعاينة ثم شرح طريقة التركيب

 الآن شرح طريقة التركيب.
1- إذهب للوحة التحكم بلوجر ثم القالب (خذ نسخة إحتياطية للقالب)
2 - إنقر تحرير html  ثم إنقر وسط الأكواد 
3- إضغط على الزرين ctrl و f في نفس الوقت ،سيظهر مربع البحث ثم إبحث عن الوسم التالي: ]]></b:skin> 
وضع قبله هذا الكود :
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{
display: table;
    background: #FFFFFF;
    margin: 5px 0px 0px 0px;
    width: 650px;
    float: right;
    padding: 0px 0px 20px 0px;
}
.list-entries ul,.list-entries li{margin:0;list-style:none;padding: 0;}
#feed-list-container ul li{
    background: #FFFFFF;
    line-height: normal;
    border: 1px solid #E2E2E2;
    text-align: right;
    width: 315px;
    margin: 5px 5px 0px 0px;
    float: right;
}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{}
.list-entries .main-title{padding:0;overflow:hidden;background-size: 22px 22px !important;border-radius: 5px;}
.list-entries .main-title h4{
    position: relative;
    display: block;
    font-weight: normal;
    padding: 6px 40px;
    color: #fff;
    margin: 0!important;
    font-size: 25px;
    height: 30px;
    line-height: 28px;
}
.list-entries .title a{
font-size: 12px;
    text-decoration: none;
    color: #656565;
}
.list-entries .title a:hover{color:#4f93c5}
.summary span {}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 0 0 1em;padding:0;float:right}
.list-entries .summary{
    overflow: hidden;
    color: #BBBABA;
    line-height: 17px;
    padding-top: 2px;
    font-size: 10px;
}
.list-entries .more-link{
display:none;
    width: 316px;
    float: left;
    margin: -304px 0px 0px -13px;
    text-align: center;
}
.list-entries .more-link a{
display:none;
    line-height: 15px;
    height: 15px;
    background: #FFFEFE;
    padding: 8px 20px;
    position: relative;
    color: #656565;
    font-size: 15px;
    width: 120px;
    margin: 6px 20px;
    border-radius: 5px;
    float: left;
}
.list-entries .more-link a:hover{background-color: #5A5A5A;color: #fff;}
.title{
line-height: 16px;
padding: 4px 0px 0px 0px;
}

4- ثم قم بالبحث عن هذا الوسم: </body> ثم ضع قبله هذه الأكواد :
<script type='text/javascript'>
var multiFeed = {
    feedsUri: [
        {
            name: "بلوجر",
            url: "https://warch-mo.blogspot.com/",
            tag: "بلوجر",
   background:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6IGn590E5OaGODhewURibkA-lqQxAQsvCm0dH24bnQgG1-ujN76bx-lwJ9A1u-i1_9rwD6KKFiqKntaxl-mEsBhVrwpv1WhRKeS5iCkR-4BzZCDA0gPN0s9CWRyKFE_wCo-mzNxm588/s1600/Twitter_Logo_Silhouette_16+%25281%2529.png) no-repeat 618px 11px,#EF6B15",
        },
        {
            name: "حلول",
            url: "https://warch-mo.blogspot.com/",
            tag: "حلول",
      background:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6IGn590E5OaGODhewURibkA-lqQxAQsvCm0dH24bnQgG1-ujN76bx-lwJ9A1u-i1_9rwD6KKFiqKntaxl-mEsBhVrwpv1WhRKeS5iCkR-4BzZCDA0gPN0s9CWRyKFE_wCo-mzNxm588/s1600/Twitter_Logo_Silhouette_16+%25281%2529.png) no-repeat 618px 11px,#EF6B15",
        },
  {
            name: "حلول",
            url: "https://warch-mo.blogspot.com/",
            tag: "حلول",
   background:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6IGn590E5OaGODhewURibkA-lqQxAQsvCm0dH24bnQgG1-ujN76bx-lwJ9A1u-i1_9rwD6KKFiqKntaxl-mEsBhVrwpv1WhRKeS5iCkR-4BzZCDA0gPN0s9CWRyKFE_wCo-mzNxm588/s1600/Twitter_Logo_Silhouette_16+%25281%2529.png) no-repeat 618px 11px,#EF6B15",
        },
    ],
    numPost: 6,
    showThumbnail: true,
    showDate: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 90,
 thumbSizeh: 80,
    containerId: "feed-list-container",
    readMore: {
        text: "مزيد من المواضيع",
        endParam: "?max-results=20"
    }
};
</script>
<script src='https://dl.dropboxusercontent.com/s/5d974tanv7zb8el/feed6%20-%20Copy.js' type='text/javascript'/>
تعديلات :
غير الروابط الحمراء برابط مدونتك.
الروابط الخضراء خاصة بالايقونات يمكنك أيضا تغيرها بأيقونات أخرى من إختيارك
الكلمات الزرقاء هي عناوين الأقسام التي تظهر في الإضافة
الكلمات الزهرية هي التسميات إحذر أن تخطئ في كتابتها يجب أن تكون كما كتبتها شاهد أداة التسميات.

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

بعد أن تختار المكان المناسب . ضع فيه هذا الكود:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='feed-list-container'/>
</b:if>
ثم قم بحفظ القالب و عاين الإضافة 
هذا كل ماجاء في موضوع اليوم ،أثمنى أن يعجبكم 
أي أستفسار لا تتردد في ترك تعليق ، في أمان الله،

إقرأ البقية

الأحد، 10 مايو 2015

إضافة صندوق إعجابات الفيسبوك بعد التحديث الجديد

بقلم: BR MED يوم الأحد، 10 مايو 2015 القسم : 1 التعليقات

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

طريقة التركيب:
1- تذهب إلى لوحة التحكم بلوجر ثم التخطيط
2- تنقر إضافة أداة ثم تختار أداة html javascript
3- تلصق الأكواد التالية داخل الإطار ثم تقوم بالحفظ.
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ar_AR/sdk.js#xfbml=1&version=v2.3&appId=567405696684175";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/warch.mo"
  data-width="325" data-hide-cover="false" data-show-facepile="true"
  data-show-posts="false"></div>
بعض التعديلات على الكود:
غير الرابط الأحمر برابط صفحتك على الفيس بوك.
325 هو عرض الإضافة و يمكنك تعديله حسب ما يناسبك.
false و تعني منع ظهور المنشورات المتواجدة بصفحتك ، إن أردت أن تظهر غيرها بكلمة true.
true وتعني قبول ظهور أيقونات معجبي  صفحتك على الإضافة، و كذلك إذا اردت عدم إظهارهم غيرها بكلمة false.
false و تعني منع إظهار غلاف صفحتك ، إن أردت أن لا يظهر غيرها بكلمة true.
موضوعنا اليوم أشرف على الأنتهاء، أي إستفسار أنا في الخدمة فقط إترك تعليق، دمتم بود في أمان الله
إقرأ البقية

الأحد، 1 فبراير 2015

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

بقلم: BR MED يوم الأحد، 1 فبراير 2015 القسم : 2 التعليقات
السلام عليكم ورحمة الله وبركاته
متابعي ورشة مدون الأوفياء، أعتذر عن مدة غيابي التي كانت بسبب بعض المشاكل التقنية الخارجة عن إرادتي، المهم كما عودتكم دائما بجديد المواضيع ، لقد ذكرت سابقا في إحدى التدوينات كيفية إنشاء أزرار التحميل والمعاينة و هذا الموضوع هو في نفس السياق إلا أن هذه الأزرار هذه المرة بها أيقونات تدل على غرضها مع أنها أكثر إحترافية و ستزيد من مدى جمالية مدونتك، و لتركيبها ما عليك إلا متابعة الشرح.
  1. أولا نذهب للوحة التحكم بلوجر ثم القالب.
  2. نقوم بأخذ نسخة إحطياطية دائما لتفادي أي غلط  بالرغم من سهولة الشرح
  3. بعد ذلك نقوم بالضغط على تحرير html و ننقر وسط الأكواد.
  4. نبحث عن هذا الوسم ]]></b:skin> مستعينا بالزراين(ctrl+f).
  5. ثم ضع فوقه هذا الكود مباشرة و قم بحفظ القالب.
#warch {
    margin: 20px auto;
    text-align: center;
}

#warch br {
    display: none;
}

.mo-slide, .mo-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.mo-slide2 {
    border: 2px solid #efa666;
}

.mo-slide:hover {
    background-color: #0099cc;
}

.mo-slide2:hover {
    background-color: #efa666;
}

.mo-slide:hover span.circle, .mo-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.mo-slide2:hover span.circle2 {
    color: #efa666;
}

.mo-slide:hover span.title, .mo-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.mo-slide:hover span.title-hover, .mo-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.mo-slide span.circle, .mo-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.mo-slide2 span.circle2 {
    background-color: #efa666;
}

.mo-slide span.title,
  .mo-slide span.title-hover, .mo-slide2 span.title2,
  .mo-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.mo-slide2 span.title2,
  .mo-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.mo-slide span.title-hover, .mo-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.mo-slide span.title-hover, .mo-slide2 span.title-hover2 {
    color: #fff;
}
ثم إبحث عن هذا الوسم <head> وضع الكود التالي بعده مباشرة و قم بحفظ القالب.
<link href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css' rel='stylesheet' type='text/css'/>
الآن طريقة التعامل مع الأزرار في المواضيع.
عند قيامك بكتابة موضوع قم بالنقر على زر "خيارات" و قم بتعديلها كما تلاحظ في الصورة.

أما بالنسبة للأزرار فسوف تضع هذا الكود في المكان الذي يعجبك وذلك في واجهة html الخاصة بالمواضيع.

<div id="warch">
<a href="#" class="mo-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">إنقر هنا</span>
</a>
<a href="#" class="mo-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">إنقر هنا</span>
</a>
</div>
قم بتغير علامة # برابط المعاينة و العلامة # برابط التحميل.
ملاحظة : هذا الكود يحتوي على نموذج التحميل و المعاينة أي زرين في نفس الوقت يمكنكم إستعملهما كما تريد.
هذا كل ما في موضوع اليوم أتمنى لكم التوفيق في عملكم ، دمتم بود في أمان الله.


إقرأ البقية

الاثنين، 8 ديسمبر 2014

طريقة التضليل التلقائي لمحتوى الإقتباس في التدوينات

بقلم: BR MED يوم الاثنين، 8 ديسمبر 2014 القسم : 0 التعليقات
السلام عليكم ورحمة الله وبركاته.
أداة الإقتباس من الأدوات التي يعتمدها المدونين في التحرير بكثرة ، ويكمن دورها في توضيح و تبين المحتوى المقتبس من النص الذي قام الكاتب أو المدون بكتابته. وتختلف أغراض هذا الإقتباس من موقع إلى أخر ، فهناك مواقع تهتم بقضايا إسلامية تستعمله للتفريق بين الأيات القرأنية، أو الأحاديث النبوية، و بين الكلام العادي. أما بالنسبة لمدونتي فأنا أستعمله لتميز الأكواد البرمجية من نص الشرح. وهكذا ، اليوم سنقوم بجعل المحتوى المقتبس سواء أيات أو أكواد يظلل بمجرد النقر عليه ضغطة واحدة فقط ، هذا يجعل ذلك المحتوى سهل النسخ و لن يتعبث الزائر، فأحيانا يجد البعض صعوبة في نسخ الأكواد المقتبسة ،فيظلل البعض و يبقى البعض وغيرها من المشاكل. المهم ننتقل للشرح .
1- نذهب للوحة التحكم بلوجر ثم القالب يستحسن حفظ نسخة من القالب، بعد ذلك نقوم بتحرير html.
2 - نقوم بالضغط و سط الأكواد ،ثم نضغط على الزرين ( crtl+f) ثم نبحث عن الوسم : </body>
3 - ثم ضع فوقه مباشرة هذا الكود:
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;click&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>
4 - قم بحفظ القالب.
إذا رغبت في جعل محتوى الإقتباس يظلل بنقرتين أو دوبلكليك ، قم بإستبدال كلمة click الموجودة في الكود بي dblclick.
هذا كل ما في موضوع اليوم، أتمنى أن تستفيدو منه ، أي إستفسار أنا في الخدمة ، بالتوفيق للجميع ، في أمان الله.
إقرأ البقية

السبت، 6 ديسمبر 2014

إنشاء خريطة لموقعك أو مدونتك (الفهرس)

بقلم: BR MED يوم السبت، 6 ديسمبر 2014 القسم : 0 التعليقات
السلام عليكم ورحمة الله وبركاته.
يعتبر إنشاء صفحة الفهرس من بين الأداوت التي تسهل على الزوار التنقل بين مواضيع المدونة ، خصوصا الاصناف التي يحب أن يتابعها أو المواضيع الذي يبحث عنها. فهذه صفحة تكون بمثابة أرشيف لمدونة ، ومن خلالها تتكزن نظرة للزوار عن كل ما بمدونتك من محتوى، و ما يميز هذا الفهرس هو أنه يبين للزائر المواضيع الجديد في المدونة في حدود شهر تقريبا.


<div dir="rtl" style="text-align: center;" trbidi="on">
<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">جديد!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJc_1Qcgo2WAx1-lg5kLUQNLhw_Jx27r3Kx2FCJuaSSkkOS5BTxoc1SlEgWLgXFevj-q7jvPiialBfsYLUmWb5V4RPotHwKVh3iO4ymSSJYVrGqjTNJYXTwiT5DbVgrAI0XkvCQbwslLq/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://warch-mo.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>
</div>
لا تنسى تغير رابط مدونتي بالرابط الخاص بك.
هذا كل ما في تدوينة اليوم، أي إستفسار أنا في الخدمة ، بالتوفيق للجميع في أمان الله.
إقرأ البقية

أزرار ببرمجة css3 لمشاركة المواضيع على مواقع الإجتماعية.

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


الأن طريقة التركيب:
1- نذهب لوحة التحكم البلوجر ثم قالب يفضل أخد نسخة إحتياطية للقالب حتى مع سهولة الدرس، بعد ذلك إنقر على تحرير html .
2 - إنقر وسط الأكواد ثم إبحث عن الوسم :   ]]></b:skin>   بالإستعانة بالزرين ctrl+f .
3 - ضع هذا الكود فوقه مباشرة :
 .share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
4 - الأن أكواد الهيكلة نقوم بالبحث عن هذا الكود : <data:post.body/> غالبا ستجده مكرر مرتين أو أكثر الثاني هو المقصود ، فحالة إن تعذر معك الأمر يمكنك الإستعانة بأكواد الكاتب أو شيء من هذا القبيل فقم مثلا بوضعه فوق أكواد الكاتب مثلا.
5 - نضع تحته مباشرة الكود التالي :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share_button'>
<ul>
<li><h1>
الموضوع!!
</h1></li>
<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKNWQTts044dnB1WclURaoMHGuYI7rAPN8HHa4oo_xfsKm5v-gAHR98SB_HrvUGz_3Sj_AgLn4UR99wfgdkVlJud-L84XuwWD4KO4QmJnEdZMoQLG3tCrBN8JcMIX-V5MsWzf-vvkOTQf/s1600/Facebook.png"/></a></h2>
<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8NkNFtSEGvFUD7b_RnPhqCcWWb1gPtg9oW2bcREHPcllhYK1UZlvWa1RGQoAQ5EdALvIvQLuh_Wdo2cAwWpTMyWIUoYWoZtEGNmKzD3dGOj7uN9KFGM6LN2xylCSaFzbxSRsk7MbweK2/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1>شارك </h1></li>
<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOxbawRZxt8Eutw_SUFfTUYDfHyuaK860oZLVj-4V6XnVZHYteQBHfz2J2Bons7s0A_EvoikXANeAFvnBA5cLsK3NMEB_yJA7zPYyg4dbxWeil5_cJ9OoExRSFKDIW4hAovhBgl-K0BtuY/s1600/Google-plus.png"/></a></h2>
<h2>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZoTdMBK81kCAvF1TLpnVwC6G-CCL_ySf8Fo7zJQP3yxyrq3EAr8blfy_JsTcEbHqq52TGYIUjM4ZJeyZcDKPp5ZX3K5btG818PNM0ptbmBohuZLA30iJxpCs9E80_mSqH9OZXRQ0_e87n/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div></b:if>
هذا كل ما في موضوع اليوم أي تسائل إترك تعليق، بالتوفيق للجميع في أمان الله.
إقرأ البقية
الاشتراك في: الرسائل (Atom)