إضافات بلوجر
‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل

الأربعاء، 1 فبراير 2017

اضافة نوعين من ازرار النشر على المواقع الاجتماعية

sharing buttons
السلام عليكم ورحمة الله وبركاته
أحبتي في الله ، اليوم سأقدم لكم إضافة رائعة ألا وهي أزرار النشر على المواقع الإجتماعية ، فيس بوك، تويتر، جوجل بلس ....  إلخ 

ما فائدة أزرار النشر وإضافتها على المدونات والمواقع؟ 

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

المهم ، اليوم سأقدم لكم نوعين من أزرار النشر على المواقع الإجتماعية 

عاين الإضافة الأولى
عاين الإضافة الثانية 

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


الكود الاول 


<script>
document.write('<script src="//sharebutton.net/plugin/sharebutton.php?type=vertical&u=' + encodeURIComponent(document.location.href) + '"></scr' + 'ipt>');
</script>

 الكود الثاني


 <script>
document.write('<script src="//sharebutton.net/plugin/sharebutton.php?type=horizontal&u=' + encodeURIComponent(document.location.href) + '"></scr' + 'ipt>');
</script>

وشكرا

لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

الأربعاء، 16 نوفمبر 2016

إضافة أزرار النشر على المواقع الإجتماعية

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

كيفية الإضافة:
  1. من مدونتك اتجه إلى قالب ، ثم تحرير HTML وباستعمال Ctrl +f ، إبحث عن ]]></b:skin> 
  2. قم بلصق الكود التالي فوقه
    /*مشاركة*/
    .sharetool {

    border: 1px solid #eee;
    display: block;
    height: 80px;
    margin: 10px auto;
    padding: 20px;
    width: 390px;
    }
    .sharetool ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    }
    .sharetool li {float: left;}
    .sharetool strong {
    float: right;
    font-size: 13px;
    line-height: 36px;
    }
    .sharetool a::before {
    float: left;
    line-height: 36px;
    text-align: center;
    width: 36px;
    }
    .sharetool a {
    background-color: #333;
    color: #fff;
    display: block;
    height: 36px;
    margin-right: 4px;
    padding: 0 5px 0 0;
    width: 110px;
    }
    .sharetool .fa.fa-facebook::before {background-color: #3b5998;}
    .sharetool .fa.fa-twitter::before {background-color: #11C1FF;}
    .sharetool .fa.fa-google-plus::before {background-color: #DA4835;}
    .sharetool .fa.fa-facebook:hover {box-shadow: 120px 0 0 0 #3b5998 inset;}
    .sharetool .fa.fa-twitter:hover  {box-shadow: 120px 0 0 0 #11C1FF inset;}
    .sharetool .fa.fa-google-plus:hover {box-shadow: 120px 0 0 0 #DA4835 inset;}
    @media screen and (max-width : 540px) {
    .sharetool {padding:0; border:0; width:auto;}
  3. الآن إبحث عن  <div class='post-footer'>  وألصق الكود التالي تحته 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='sharetool'>
    <ul>
    <li><a class='fa fa-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' target='_blank'><strong>فيسبوك</strong></a></li>
    <li><a class='fa fa-twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' target='_blank'><strong>تويتر</strong></a></li>
    <li><a class='fa fa-google-plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&quot;' target='_blank'><strong>جوجل بلس</strong></a></li>
    </ul>
    </div>
    </b:if>
     cn3u

    لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

السبت، 15 أكتوبر 2016

إضافة سلايدشو يعمل بشكل تلقائي رائع و أنيق

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

عاين الإضافة من هنا

كيفية التركيب

من لوحة التحكم على مدونتك إضغط تخطيط ، ثم إضافة أداة واختر HTML /JavaScript ثم ألصق الكود التالي في الصندوق ثم قم بحفظ
      <style scoped="" type="text/css">
    ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguWziaNDx5I6P-tdu5Pstjo6bHF-hsb3lBy9l4K4J8XGme_oTypwiqOieC2MtKjc0dTcRCyfv5S6v8WJSYw5To7bfD61lCx5lcCQ-5bmftyHKiG99izdeL0W-7YBoRQaHYfuWKVVtsCMQ/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
    </style>
    <div id="featuredpostside"></div>
    <script type='text/javascript'>
    function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","اغسطس","سبتمبر","اكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
    //<![CDATA[
    FeaturedPostSide({
      blogURL: "http://jaliloblog.blogspot.ca//",
      MaxPost: 8,
      idcontaint: "#featuredpostside",
      ImageSize: 300,
      interval: 5000,
      autoplay: true,
      tagName: false
    });//]]>
    </script>
 
ملاحظة: غير رابط موقعي برابط مدونتك http://jaliloblog.blogspot.ca/

وشكرا

لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

الجمعة، 14 أكتوبر 2016

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

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

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

إضغط على الصورة لتكبيرها ومعاينة الإضافة

كيفية الإضافة:
  1. من لوحة التحكم على مدونتك إختر قالب ثم خذ لك نسخة إحتياطية لقالبك 
  2. إضغط على تحرير HTML وباستعمال Ctrl+F إبحث على التالي <data:post.body/>، وألصق الكود التالي تحته

    <b:if cond='data:blog.pageType == &quot;item&quot;'><div class='tombol-berbagi-arlina'><div class='tombol-berbagi-arlina-fb'><a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/><a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>  شارك على فيس بوك</a></div><div class='tombol-berbagi-arlina-tw'><a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/><a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>شارك على تويتر</a></div><div class='tombol-berbagi'><a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/><a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>شارك على جوجل بلس</a></div><div class='tombol-berbagi'><a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/><a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>شارك على لينكدإن</a></div></div></b:if>

  3. إبحث عن ]]></b:skin> وضع الكود التالي فوقه ثم قم بحفظ

    /* CSS Share Button */.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlKKwo7UUZm9jIDAuhhcbURXY9LLVx1FMKT5PcgZwMGdO-gdOmG5MZhIbzIukYst0bDj3k8MQo0GAJwm6PznWvutusMYbzhu8DYUhYAMO4XP0Yale62Fq9QSi4MtZ5QSiERRyY3S4a9uqI/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}.tombol-berbagi-fb-label{color:#2d609b}.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}.tombol-berbagi-tw{background-position:0 -43px}.tombol-berbagi-tw-label{color:#00c3f3}.tombol-berbagi-gp{background-position:0 -86px}.tombol-berbagi-gp-label{color:#f00}.tombol-berbagi-lin{background-position:0 -129px}.tombol-berbagi-arlina a{color:#999;transition:all .3s;}.tombol-berbagi-arlina a:hover{color:#7cb0ed}@media only screen and (max-width:640px){.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}
إنتهى ، أرجو أن تنال إعجابكم هذه الإضافة 
تابع القراءة

الخميس، 25 أغسطس 2016

صندوق بحث إحترافي وأنيق لمدونات بلوجر

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

  1. من لوحة التحكم إختر تخطيط ثم إضافة أداة 
  2. إختر JavaScript/HTML . 
  3. إنسخ الكود التالي وضعه في الصندوق ثم قم بحفظ ، وإسحب الأداة حيثما شئت .

الكود:

<div id='search-wrapper'><style type='text/css'> .form-wrapper { width: 290px; padding: 5px; margin: 10px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede #bababa #aaa #bababa; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f6f6f6; } .form-wrapper #search { width: 210px; height: 12px; padding: 10px 5px; float: right; font: bold 18px 'Arial', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #search:focus { outline: 0; border-color: #aaa; } .form-wrapper #search::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-ms-input-placeholder { color: #999; font-weight: normal; } .thumb{position:relative;left:4px;top:1px;} .form-wrapper #submit { float: left; border: 1px solid #00748f; height: 32px; width: 60px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #submit:hover, .form-wrapper #submit:focus { background-color: #91bc1e; } .form-wrapper #submit:active { outline: 0; } .form-wrapper #submit::-moz-focus-inner { border: 0; } </style> <div class='rss'> <form action='/search' class='form-wrapper' method='get'> <input id='search' name='q' placeholder='' type='text'/> <input id='submit' type='submit' value='بحث'/> </form></div></div>

لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

السبت، 6 أغسطس 2016

إضافة خاصية روابط التدوينة قابلة للنسخ واللصق أسفل التدوينات

السلام عليكم ورحمة الله تعالى وبركاته
موضوعنا اليوم حول كيفية إضافة خاصية " روابط هذا الموضوع قابلة للنسخ واللصق " ، بحيث ستظهر تحت كل موضوع تكتبه ، وبها روابط الموضوع على ثلاث أنواع :
- الرابط الأصلي للموضوع
- HTML
- BBCode

تابع طريقة إضافة الخاصية :
  1. من لوحة تحكم مدونتك انقر على قالب ، قم بتحميل نسخة إحتياطية لقالبك 
  2. انقر على تحرير HTML وباستعمال Ctrl +F ، إبحث عن الوسم التالي ]]></b:skin>
  3. الآن ضع الكود التالي فوقه مباشرة :
     #table {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
        font-size: 13px;
        margin: 10px -12px;
        width: 580px;
        text-align: left;
        border-collapse: collapse;
       direction:ltr;
    }
    #table th {
        font-size: 13px;
        font-weight: normal;
        padding: 8px;
     
     background: #b9c9fe
    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYrsVam4I5eMeiwsYXCTyXJ1_h64J3sOihqXtOCAqAR5LUBRPZ_XB5ViV5oVQo7sFaynQILjOrDdJUdgUyJw9zb61lfjrUWCY8Y4_GLS6fbC27RU4ftKOxuaZh8W9QaH5tn6bZUiqhsAhj/s1600/gradhead.png')
     repeat-x;
        border-top: 2px solid #d3ddff;
        border-bottom: 1px solid #fff;
        color: #039;

    }
    #table td {
        padding: 8px;
        border-bottom: 1px solid #fff;
        color: #4c4c4c;
        border-top: 1px solid #fff;
     
     background: #e8edff
    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhXqawe54tXegxV3RlErDOjeNDrKKyfMuDEDPss2Ff3_w-eKsPKHTBjQWbt4pgOKMUT5aOQTUAKsBJz9Hg9ovQs-ssPR0HuCNDWt0i5jzlGH_8i_vfxCiC8kd0aVI-S8ddgu_QIzFUCB9/s1600/gradback.png')
     repeat-x;
    }
    #table tfoot tr td {
        background: #e8edff;
        font-size: 20px;
        color: #99c;
        text-align:center;
    }
    #table tbody tr:hover td {
     
     background: #d0dafd
    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfV_ussMWjYVTNV-ry6cakEs13ErYoAyDCDrGKi6b5kiGtRKyzoFa1EoVuXns8vNe6o7v9iZhUruke1a7eNWugY8kAlLDqxX0fXc96PvRoSL-ozXmov_1sbq64V-fSg3d3Ntp2AOzoYKez/s1600/gradhover.png')
     repeat-x;
        color: #339;
    }
    #table a:hover {
        text-decoration:underline;
    }
  4. إبحث عن <data:post.body/> ، ربما تجد ثلاث أكواد ، فنحن نريد الأخير ،
  5. ضع الكود الموالي فوقه تماما:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table id='table' summary='روابط الموضوع'>
  <tfoot>
    <tr>
      <td colspan='2'>روابط التدوينة قابلة للنسخ واللصق</td>
    </tr>
  </tfoot>
<tr>
  <td>URL</td>

 <td><input expr:value='data:post.canonicalUrl'
onclick='this.focus(); this.select();' readonly='readonly' style='width:
 560px;' type='text'/></td>
</tr><tr>
  <td>HTML</td>  
<td><input
 expr:value='&quot;&lt;a href=&amp;quot;&quot; +
data:post.canonicalUrl + &quot;&amp;quot;
title=&amp;quot;&quot; + data:post.title +
&quot;&amp;quot;&gt;&quot; + data:post.title +
&quot;&lt;/a&gt;&quot;' onclick='this.focus();
this.select();' readonly='readonly' style='width: 560px;'
type='text'/></td>
</tr><tr>
  <td>BBCode</td>

 <td><input expr:value='&quot;[url=&quot; +
data:post.canonicalUrl + &quot;]&quot; + data:post.title +
&quot;[/url]&quot;' onclick='this.focus(); this.select();'
readonly='readonly' style='width: 560px;' type='text'/></td>
</tr>
</table> </b:if>

قم بحفظ

ملاحظات :
- يمكنك التحكم في العرض الذي هو width : 580px
- حجم الخط font size:13px
- تجدهما في الكود الثاني
- يمكنك تغيير ما لون بالأحمر بما يناسبك 

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


 لا نسمح بنسخ مواضيعنا بدون ذكر المصدر ، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

الخميس، 4 أغسطس 2016

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

السلام عليكم ورحمة الله تعالى وبركاته
موضوعنا اليوم حول كيفية تغيير ال B رمز التفضيلات والتي بالانجليزية Favicon ، التي على مدونات بلوجر ، والتي تظهر بجانب إسم عنوان المدونة على متصفحات الإنترنت. وهذا مثال في الصورة كي تعرف عما نتحدث ، انقر على الصورة للتكبير

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

إليكم كيفية وضع الأيقونة:
  1. سجل الدخول إلى مدونتك ، وإختر تخطيط
  2. في الأعلى على اليسار سترى رمز التفضيلات بجانبها أيقونة بلوجر B ، أنقر تحرير
  3. ستنبثق لك صفحة لتحميل الصورة من جهاز الكمبيوتر ، اضغط على Browse واختر صورتك وحملها ثم قم بحفظ ، وانتظر للحظات وستظهر لك الصورة المُضافة بدلا من أيقونة بلوجر B .
  4. وهذه النتيجة في الصورة

أتمنى أنكم استفدتم ، من فضلكم شاركو الموضوع و لكم الشكر 

 لا نسمح بنسخ مواضيعنا بدون ذكر المصدر ، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

الأربعاء، 3 أغسطس 2016

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


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

بالفعل هي إضافة رائعة وتمكنك من معرفة ما يجري على موقعك أو مدونتك ، المهم لقد جمعت لكم بعض الأكواد ، فاختر الأداة التي تعجبك ثم إنسخ الكود وضعه في أداة HTML /JavaScript

- أداة ذو خلفية سوداء والأرقام بيضاء


الكود:
<script id="_wau3w6">var _wau = _wau || []; _wau.push(["classic", "qvd9jbro6vly", "3w6"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="//widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

- أداة ذو خلفية صفراء والأرقام سوداء



الكود:
<script id="_wauvgn">var _wau = _wau || [];
_wau.push(["colored", "qvd9jbro6vly", "vgn", "ffc20e000000"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="//widgets.amung.us/colored.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

- أداة صغيرة أنيقة ذو خلفية سوداء وأرقام بيضاء



الكود:
<script id="_wau96l">var _wau = _wau || []; _wau.push(["small", "qvd9jbro6vly", "96l"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="//widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

- أداة ذو خلفية حمراء والأرقام بيضاء جانبية



الكود
<script id="_wauxlq">var _wau = _wau || [];
_wau.push(["tab", "qvd9jbro6vly", "xlq", "left-middle"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="//widgets.amung.us/tab.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

أتمنى أن تنال إعجابكم ، من فضلك شارك الموضوع مع أصدقاءك وشكرا.
 

 لا نسمح بنسخ مواضيعنا بدون ذكر المصدر ، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

الأحد، 12 يونيو 2016

إضافة أزرار النشر على المواقع الإجتماعية



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

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


Share this  
share Facebook  
tweet
share on linked in
Pinterest
Email
كما عليها عداد أيضا يعلمك كم مشاركة تمت

كيفية الإضافة:

1- من لوحة التحكم في مدونتك إذهب إلى إضافة أداة HTML/JavaScript ، ثم ألصق الكود التالي:

 <span class='st_sharethis_vcount' displayText='ShareThis'></span>
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
<span class='st_linkedin_vcount' displayText='LinkedIn'></span>
<span class='st_pinterest_vcount' displayText='Pinterest'></span>
<span class='st_email_vcount' displayText='Email'></span>

2- إذهب إلى قالب ، تحرير HTML، وألصق الكود التالي بجانب وبعد الوسم head ثم قم بحفظ .

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "b02c9f45-b223-43ec-bcdc-3cd42c68cafa", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

أرجو أن تنال إعجابكم 

  لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

الأربعاء، 8 يونيو 2016

إضافة عدد القراءات لكل مواضيع بلوجر


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

أولا لابد أن تسجل على موقع فايرباس firebase كي يمكنك من إضافة الخاصية.

للتسجيل على الموقع من : هنا

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


1

2

 لا تغلق الصفحة لأننا سنحتاج إلى الرابط الذي عملت. وسيكون هكذا:

Yourname.firebaseIO.com

الآن من مدونتك إذهب إلى تحرير HTML ، قم بأخذ نسخة إحتياطية للقالب

بإستعمال Ctrl + f إبحث عن الوسم ]]></b:skin>

ضع فوقه الكود التالي:


     /*-------- Post Views ----------*/
        #views-container {
        width: 75px;
        float: right;
        }

        .mbtloading {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipm1V4x2-7EQe5_kqb0cRIUJOaoNEksVkG93zS4XyuX5yJtGzIUPmmT46Z_vcDScJ0-Ff41wocCLwZoT7PgYhdg5pB-XBlSbwuAdmTN522lnNtciDrD7iEQIA69aQTP_rbj3ttxc_e_yZC/s320/mbtloading.gif') no-repeat left center;
        width: 16px;
        height: 16px;
        }

        .viewscount {
        float: right;
        color: #EE5D06;
        font: bold italic 14px arial;
        }

        .views-text {
        float: left;
        font: bold 12px arial;
        color: #333;
        }

        .views-icon{
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRKZUJz3J2ZrHC-Bl9Kas8LgXQm83zwjLkjfn1sNVN2psR9XLScgajYYk5UGaLWXC2zrKzpiceKvcADhlXNuoaME1W6sRWlsbFP7sUCmuuh5tzoAoDKvS8LdLelykWeRwYgDWpoA2uUFc/s1600/adnaneg.png') no-repeat left;
        border: 0px;
        display: block;
        width: 16px;
        height: 16px;
        float: left;
        padding: 0px 2px;
        }

الآن إبحث عن </body>

ضع الكود التالي فوقه:

<!-- Post Views Script by MBT -->
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://yourname.firebaseIO.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr('name');
isnew = true;
}
elem.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>

ملاحظة: غير كلمة yourname بالإسم الذي أنشأته على موقع فايرباس.

Yourname.firebaseIO.com

الآن قم بالبحث على الوسم <data:post.body/>

ألصق الكود التالي فوقه تماما 

ملاحظة: ربما ستجد الوسم  <data:post.body/>  مكرر أكثر من مرة فحاول وضع الكود فوق كل واحد إلى أن تتم العملية بنجاح

<!-- Post Views Counter by MBT-->
    <div id='views-container'>
    <span class='views-icon'/><div class='views-text'>
    Views:</div>
    <div class='mbtloading viewscount' id='postviews'/>
    </div>

غير كلمة Views بما تريد

إنتهى!

   !ممنوع نقل الأكواد لإعادة نشرها في موضوع جديد!

لأي سؤال أو إستفسار أترك تعليقا ، وشكرا


  لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط


تابع القراءة

الأربعاء، 18 مايو 2016

إضافة أداة ألوان رائعة إلى المدونات


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

إنها فعلا أداة رائعة جدا والأروع فيها هي أن أداة الألوان تبقى في دوران مستمر ، إضغط معاينة الأداة أسفله لترى الأداة:


كيفية التركيب على المدونة:
  1. من صفحتك الرئيسة إختر صفحات ثم انقر على صفحة جديدة وبعد ذلك إختر HTML بدلا من تأليف - أنظر الصورة -
     HTML page
  2.  ثم إحذف الكود الذي تجده في الصفحة الجديدة  وألصق الكود التالي وقم بحفظ .

الكود


<script type="text/javascript" src="http://100widgets.com/js_data.php?id=229"></script>

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

  لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط


تابع القراءة

الجمعة، 13 مايو 2016

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


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

عاين الإضافة بالضغط على معاينة أسفله:


كيفية الإضافة:


سجل الدخول لمدونتك ، إختر تخطيط ثم إضافة أداة ، إختر HTML/JavaScript وألصق الكود التالي ثم قم بحفظ ! ومبروك


الكود

<script type="text/javascript" src="http://100widgets.com/js_data.php?id=255"></script>


  لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

الثلاثاء، 3 مايو 2016

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


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


على ماذا تحتوي هاته الإضافة:

  1.  أولا يوجد زرين إعجاب وشارك أو إتصل بنا
  2.  المواضيع التي تقوم بنشرها على صفحتك على الفيس بوك
  3.  يمكنك إظهار أو إخفاء غلاف الصفحة كما يمكنك تكبيره أو تصغيره

المهم ، اليوم أعطيكم الإضافة والتي هي في صورة الموضوع



كيفية الإضافة

إنسخ الكود التالي وضعه في أداة HTML/JavaScript  وغير ما لون بالأحمر بعنوان صفحتك على الفيس بوك والأرقام الملونة باللون الأخضر الطول Height  214 والعرض 305 Width . إذا أردت تغيير الحجم وضع الأداة حيثما شئت على مدونتك

الكود


<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fazzouweb%2F&tabs=%20&width=305&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="305" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

أتمنى أن الإضافة قد أعجبتكم ، إن كان كذلك حفزنا بتعليق ;)

  لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

السبت، 30 أبريل 2016

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


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

كيفية الإضافة :

إذهب إلى قالب ثم تحرير HTML وطبعا باستعمال Ctrl + F إبحث عن الوسم <head>  وبعده / تحته أضف الكود التالي ثم قم بحفظ.

الكود


 <b:if cond='data:blog.pageType == "item"'>&lt;script&gt;var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 1;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if ('https:' === document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;var pfButtonHTML = '&lt;a href=&quot;http://www.printfriendly.com&quot; style=&quot;margin-top:0.5em; float:left;display:block; margin-right: 0.5em; color:#6D9F00; text-decoration:none;&quot; class=&quot;printfriendly&quot; onclick=&quot;window.print(); return false;&quot; title=&quot;Printer Friendly and PDF&quot;&gt;&lt;img style=&quot;border:none;-webkit-box-shadow:none;box-shadow:none;&quot; src=&quot;http://cdn.printfriendly.com/pf-button-both.gif&quot; alt=&quot;Print Friendly and PDF&quot;/&gt;&lt;/a&gt;'; var pfBloggerJs; pfBloggerJs = document.createElement(&quot;script&quot;); pfBloggerJs.type =&quot;text/javascript&quot;; js= &quot;http://cdn.printfriendly.com/blogger.js&quot;; pfBloggerJs.src=js; document.getElementsByTagName(&quot;head&quot;)[0].appendChild(pfBloggerJs);&lt;/script&gt;</b:if>


  لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة

الخميس، 28 أبريل 2016

إضافة زر إعجاب و غير إعجاب إلى بلوجر


السلام عليكم أحبتي في الله
دائما كما عودناكم مع الجديد في موقعنا ، وأتمنى أنكم تستمتعون بالمواد المطروحة من قبلنا، فإسعادكم هدفنا :)
أتيتكم بإضافة زر إعجاب أو لست معجب لمدونات بلوجر ، هذه الإضافة تتكون من زرين ، إعجاب وغير إعجاب ، كما هي باللغة العربية

شاهد الإضافة من  هنا

كيفية الإضافة:

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

 الكود 


<!-- LikeBtn.com BEGIN -->
<span class="likebtn-wrapper" data-i18n_like="إعجاب" data-identifier="item_1" data-lang="ar" data-rich_snippet="true" data-theme="drop"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- LikeBtn.com END --></div>
إن أعجبكم الموضوع شاركوه من فضلكم

  لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط


تابع القراءة

إضافة رائعة لأداة العد التنازلي للمونديال


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

عاين الإضافة:

  معاينة

كيفية وضعها على المدونة:
إذهب إلى تخطيط > إضافة أداة > إختر HTML/JavaScript وضع الكود التالي ثم قم بحفظ ومبروك الإضافة

<script type="text/javascript" src="http://100widgets.com/js_data.php?id=231"></script>

إن أعجبتكم الإضافة قم بنشرها ولَك الشكر 
 Code١٠٠widgets

  لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

تابع القراءة
جميع الحقوق محفوظة لــ: az21dz 2016-2022 © أعلن معنا