ق الب مدونة عرب ويب الأصلي، بنسخته الأولى وحصريا على المدونة يمكنكم الحصول على نسخة منه مجانا.

10

Adblock Killer هي اضافة عملها منع الإعلانات على أي من المتصفحات FireFox, Chrome, safari تشمل بذلك تطبيقات الهواتف وغيرها
أكيد أن Adblock هي اداة رائعة وتجلب الراحة والإطمئنان 😉 في التصفح.

2

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

• لا يتشابه محتوى التدوينة مع التعليقات ، لذلك يبدو كسبام أو تعليق وهمي
• تنخفض سرعة تحميل التدوينة، نظرًا لأنه يتم تحميل عدد كبير من التعليقات
• تعطي تعليقات المدونة الكثير من الانطباع أن المدونة غير نظيفة (نظيفة بمعنى ليست منظمه)

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

• معاينة

شرح طريقة التركيب
قبل التطبيق المرجو حفظ نسخة من القالب تحسبا لأي خطأ وكذلك إن اردت حذف الإضافة في المستقبل فسيسهل الأمر.
1. كالعادة سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن الكود أدناه باستخدام CTRL+F
ملاحظة: عادة هناك رمزين

<div class='comments' id='comments'>

4. استبدل كلا الرمزين بالكود التالي

  <a class='showcontent' href='#' id='comments-show' onclick='showComm(&apos;comments&apos;);return false;'>عرض التعليقات</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a class='hiddencontent' href='#' id='comments-hide' onclick='showComm(&apos;comments&apos;);return false;'>إخفاء التعليقات</a>
<div class='clear'/>

5. أضف الكود أدناه قبل الكود ]]></b:skin> أو بين <style> </style>

.hide-content{display:none;margin:0;padding:0;}
a.showcontent, #comments a.hiddencontent {display: block;text-decoration: none;position: relative;color: #fff;font-weight: 700;font-size: 15px;padding: 12px 0;background: #2797d8;color: #fff;-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);border: 2px solid;border-radius: 5px;text-align: center;margin: 10px auto;transition: all .3s;width: 200px;clear: both;}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background: #2797d8;;color: #fff;-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);color:#fff;}

6. وأخيرا، ضع الرمز التالي فوق </body>

<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

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

0

سعدت بالتواجد معكم في هذه التدوينة 😊 والتي سنناقش فيها جمالية موقعك!
فيما يتعلق بالرموز التعبيرية، فالكثير منا يعرف ما ترمز له التعبيرات سواء صغيرا كان او كبيرا. تستخدم الرموز عادة لإظهار ردة فعلنا على ما نرآه.

15

حان الوقت لتحدث خلفية سطح مكتبك بهذه الباقة الجديدة حتما ستجد ما يروق لك، لذا استفد من بعضها فالقادم اروع 😉

0

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

• معاينة

شرح طريقة التركيب
. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. ضع الكود التالي فوقه

li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:left;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:right;margin-left:10px}
.recenthd{padding:15px;text-align:right;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:260px;max-width:100%;float:right;height:260px;margin-left:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-left:7px}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

3. ابحث عن هذا الكود </body> وضع الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://www.ar1web.co";
var numPosts = 9;
var recentpost_label = "قوالب بلوجر";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://1.bp.blogspot.com/-jHWwEwTEwQ4/WJJ4k71QSYI/AAAAAAAApVc/XO_OitR_VGQS_Wquq1pv1h1D-dgiejSuQCLcB/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img src="'+u+'" alt="'+t+'"></a><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="احدث المواضيع" target="_blank">المزيد</a></div>';
//]]>
</script>

* غير الرابط : https://www.ar1web.co
* var numPosts = 9; غير 9 بعدد المشاركات المراد اظهارها
* ضع تسمية بدل قوالب بلوجر
4. بعد ذلك، يرجى الانتقال إلى التخطيط >> إضافة أداة >> HTML/JAVASCRIPT
5. ثم ضع بها الكود التالي

<div id='xtitlex'></div>
<ul id='recent-posts'></ul>

6. حفظ.

7

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

• معاينة

شرح طريقة التركيب
1. قم بتحرير القالب وابحث عن هذا الكود </b:skin> بالاستعانة بـ Ctrl+F
2. ضع الكود التالي فوقه

 .lovebutton-bloggerku { width: 100%; display: inline-block; text-align: center; margin: 20px 0; } .lovebutton-bloggerku .inner { text-align: center; display: inline-table; } .lovebutton-bloggerku a { background: #fff; border: 1px solid #aaa; display: inline-block; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; float: left; overflow: hidden; margin-right: 10px; } .lovebutton-bloggerku .icon { padding-top: 13px; } .lovebutton-bloggerku svg { fill: #aaa; transition: all 0.2s; } .lovebutton-bloggerku a:hover svg { fill: #666; } .lovebutton-bloggerku a .active svg { fill: #F44336; } .lovebutton-bloggerku .total { line-height: 50px; font-size: 20px; display: inline; }

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

 <div class='lovebutton-bloggerku' expr:data-id='data:blog.blogId + &quot;_&quot; + data:post.id'>
    <div class='inner'>
        <a href='javascript:;'>
            <div class='icon'>
                <svg height='25' viewBox='0 0 1792 1792' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z'/></svg>
            </div>
        </a>
        <div class='total'>جاري التحميل</div>
        <div style='clear:both;'/>
    </div>
</div>

4. ابحث عن هذا الكود </body> وضع الكود التالي فوقه

 
<script src='https://rawgit.com/iHussam/ar1web/master/lovely.js' type='text/javascript'/>

2

سأشارككم هذه المرة طريقة لحماية موقعك او قالبك من استعمال كاشف او عنصر الفحص Inspect Element، هو الشخص الذي يريد إلقاء نظرة خاطفة على موقع ويب باستخدام عنصر الفحص تتمثل في عرض كل شيء يخص الموقع من ناحية التصميم ككل لمعرفة اسم اداة او اضافة او حتى التعديل عليها وهذا يستخدم فقط كعارض اي معاينة قبل التطبيق على القالب.
حسنا سوف اكشف لكم عن السر لحماية موقعك حتى لا يمكن تفتيشه 🔒
إن أساليب Anti Inspect بسيطة للغاية، ألا وهي إنشاء كود يحتوي على عنصر فحص خطاء عكس الأصلي "اجابي = سلبي"، ومثال على ذلك زر الموقع التجريبي هذا. قم بالتجربة أولاً ، وعد للمتابعة 😃

خاصية الفحص نفسها تستخدم لتطوير مواقع الويب، وهذا أمر إيجابي، لكن إذ كان هدفك بتعطيل او حجب شخص من معرفة او سرقة ما لديك من اداة الى غير ذلك، فيمكنك اتباع الخطوات التالية:
من خلال تثبيتك لها، سوف تجعل موقعك أكثر أمانًا من أي وقت مضى، امنًا من النسخ واللصق او التعقليد بشكل عام.
تذكر الطريقة ليست فعالة 100% لكن ستفي بالغرض، مع ان هناك طريقة لاستخدام Inspect Element لكنها معقدة قليلا.
شرح طريقة التركيب
1. من مدونتك > اللتخطيط
2. اضف اداة HTML / Javascript ضع بها الكود التالي

 
<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(){(3 a(){8{(3 b(2){7((\'\'+(2/2)).6!==1||2%5===0){(3(){}).9(\'4\')()}c{4}b(++2)})(0)}d(e){g(a,f)}})()})();',17,17,'||i|function|debugger|20|length|if|try|constructor|||else|catch||5000|setTimeout'.split('|'),0,{}))
</script>

3. ثم قم بالضغط على حفظ وانظر للنتيجة

ملاحظة: هذه الطريقة تبقى اختيارية انت حر في استعمالها، اراكم في التدوينة المقبلة إن شاء الله.

3