منع نسخ المحتوى بإستثناء الاقتباسات

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

     التركيب:

1. بعد تحميل الكود أسفل التدوينة
2. على منص بلوجر
3. المظهر
4. تحرير أو تعديل HTML
5. إبحث عن وسم إغلاق STYLE
6. بعده مباشرة ألصق الكود التالي وأحفظ المظهر

<style> blockquote,.blockquote{ /*** مجال النسخ داخل الاقتباس متاح ***/ -webkit-user-select: text; -moz-user-select: text;-ms-user-select: text; user-select: text;} comment_body,.comment_body p{ /*** مجال النسخ داخل التعليقات ***/ -webkit-user-select: text; -moz-user-select: text;-ms-user-select: text; user-select: text;} body{ /*** النسخ ممنوع في كامل المدونة ***/-webkit-user-select: none; -moz-user-select: -moz-none;-ms-user-select: none; user-select: none;} </style>

شاهد الفيديو

#صف

*

منع النسخ 02

*

405kB

*

2018

*

غوغل دريف

مركز الخليج

إقرأ المزيد

تركيب صفحة تحميل المدونة للمدونة

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

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

التركيب؟

1. تحميل النماذج أسفل التدوينة
2. المظهر
3. تحرير أو تعديل HTML
4. أبحث عن الوسم BODY
5. بعده مباشرة ألصق الكود الذي تريده
6. حفظ المظهر

شاهد الفيديو

#صف

*

الشكل 01

*

405KB

*

-

*

غوغل دريف

#صف

*

الشكل 02

*

405KB

*

-

*

غوغل دريف

#صف

*

الشكل 03

*

405KB

*

-

*

غوغل دريف

#صف

*

الشكل 04

*

405KB

*

-

*

غوغل دريف

#صف

*

الشكل 05

*

405KB

*

-

*

غوغل دريف

إقرأ المزيد

مضاد مانع الإعلانات بخلفية شفافة

     من جديد مرحبا بكم, كما يعلم الجميع أن أهم ما يحفز أي مشروع ويغذيه هو التموين, أي المداخيل, وطرق الحصول على المحفزات تختلف وبالخصوص داخل مجال الأنترنت, وأغلبها ينحصر حول الإعلانات, بمجرد ظهور اعلان على مذونتك لزوار تكسب مبلغ معين حسب مجموعة من الخصائص, لكن عدم ظهورها يعني غياب الدخل والربح, من اهم الأسباب التي تمنع ظهور الإعلانات على مدونتك هي أن الزبون يقوموا بتفعيل مانع الإعلانات(AD-BLOCK) على المتصفح الخاص به سواء على نظام الأندرويد او الويندوز ...

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

   

     التركيب؟

1. التخطيط
2. في أي مكان أضف أداة HTML/JAVASCRIPT
3. أنسخ الكود التالي وألصقه وأحفظ الترتيب

<style> #h237 { background-color: #ffffff59; opacity: .99; display: table; position: fixed!important; position: absolute; z-index: 9999!important; width: 100%; height: 100%; top: 0; top: expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop: document.body.scrollTop)+"px"); bottom: 0; right: 0; left: 0; padding: 2% 0 } #h237 p { font-family: 'neo', sans-serif; font-size: 20px; font-weight: normal; color: #000000; line-height: 30px; text-decoration: none; text-align: center; display: table-cell; vertical-align: middle; margin: 0 auto } #h237 p a { background: #979797; display: block; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 14px; color: #fff!important; line-height: initial; text-align: center; text-transform: uppercase; letter-spacing: .5px; width: 100px; padding: 10px; border-radius: 3px; margin: 30px auto; clear: both; transition: all .3s ease-out } #h237 p a:hover { background: #ff4e00; color: #fff } #h237~ * { display: none } </style> <div id="h237"> <span>Mohon Aktifkan Javascript!<a href="http://www.enable-javascript.com/">Enable JavaScript</a></span> </div> <script> /*<![CDATA[*/ window.document.getElementById("h237").parentNode.removeChild(window.document.getElementById("h237")); (function(b, a) { function e(f) { f && h237.nextFunction() } var c = b.document, d = ["i", "s", "u"]; e.prototype = { rand: function(f) { return Math.floor(Math.random() * f) }, getElementBy: function(g, f) { return g ? c.getElementById(g) : c.getElementsByTagName(f) }, getStyle: function(g) { var f = c.defaultView; return f && f.getComputedStyle ? f.getComputedStyle(g, null) : g.currentStyle }, deferExecution: function(f) { setTimeout(f, 250) }, insert: function(i, h) { var n = c.createElement("span"), o = c.body, p = o.childNodes.length, l = o.style, m = 0, j = 0; if ("h237" == h) { n.setAttribute("id", h); l.margin = l.padding = 0; l.height = "100%"; for (p = this.rand(p); m < p; m++) { 1 == o.childNodes[m].nodeType && (j = Math.max(j, parseFloat(this.getStyle(o.childNodes[m]).zIndex) || 0)) } j && (n.style.zIndex = j + 1); p++ } n.innerHTML = i; o.insertBefore(n, o.childNodes[p - 1]) }, displayMessage: function(g) { var f = this; g = "abisuq".charAt(f.rand(5)); f.insert('<p>من فضلك قم بتعطيل مضاد الإعلانات<br/><br/><img border="0" src="https://lh3.googleusercontent.com/-L0N72E8E9NQ/Vzrq-aAsrLI/AAAAAAAAENQ/4t2LPjMDYGQIejFrOFVIqJYUpzCDeI5uACCo/I/Disable-Adblock.png" /><br/><br/>هذا الموقع يقوم على وجود الإعلانات<br/>من فضلك قم بتعطيل مضاد الإعلانات حتى تدعمنا<a href="JavaScript:window.location.reload()">تحديث الصفحة</a></p> ', "h237"); c.addEventListener && f.deferExecution(function() { f.getElementBy("h237").addEventListener("DOMNodeRemoved", function() { f.displayMessage() }, !1) }) }, i: function() { for (var h = "DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","), f = h.length, j = "", k = this, l = 0, i = "abisuq".charAt(k.rand(5)); l < f; l++) { k.getElementBy(h[l]) || (j += "<" + i + ' id="' + h[l] + '"></' + i + ">") } k.insert(j); k.deferExecution(function() { for (l = 0; l < f; l++) { if (null == k.getElementBy(h[l]).offsetParent || "none" == k.getStyle(k.getElementBy(h[l])).display) { return k.displayMessage("#" + h[l] + "(" + l + ")") } } k.nextFunction() }) }, s: function() { var i = { "pagead2.googlesyndic": "google_ad_client", "js.adscale.de/getads": "adscale_slot_id", "get.mirando.de/miran": "adPlaceId" }, h = this, n = h.getElementBy(0, "script"), o = n.length - 1, p, l, m, j; c.write = null; for (c.writeln = null; 0 <= o; --o) { if (p = n[o].src.substr(7, 20), i[p] !== a) { m = c.createElement("script"); m.type = "text/javascript"; m.src = n[o].src; l = i[p]; b[l] = a; m.onload = m.onreadystatechange = function() { j = this; b[l] !== a || j.readyState && "loaded" !== j.readyState && "complete" !== j.readyState || (b[l] = m.onload = m.onreadystatechange = null, n[0].parentNode.removeChild(m)) }; n[0].parentNode.insertBefore(m, n[0]); h.deferExecution(function() { if (b[l] === a) { return h.displayMessage(m.src) } h.nextFunction() }); return } } h.nextFunction() }, u: function() { var g = "ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","), f = this, h = f.getElementBy(0, "img"), i, j; h[0] !== a && h[0].src !== a && (i = new Image, i.onload = function() { j = this; j.onload = null; j.onerror = function() { d = null; f.displayMessage(j.src) }; j.src = h[0].src + "#" + g.join("") }, i.src = h[0].src); f.deferExecution(function() { f.nextFunction() }) }, nextFunction: function() { var f = d[0]; f !== a && (d.shift(), this[f]()) } }; b.h237 = h237 = new e; c.addEventListener ? b.addEventListener("load", e, !1) : b.attachEvent("onload", e) })(window); /*]]>*/ </script>

       ملاحظة:

• يمكنك التحكم باللون والشفافية ...
• داخل روابط التحميل ستجد كود الخاص بغير الشفاف

شاهد الفيديو

#صف

*

شفاف

*

450KB

*

-

*

غوغل دريف

مركز الخليج

#صف

*

غير شفاف

*

450KB

*

-

*

غوغل دريف

مركز الخليج

إقرأ المزيد

تنسيق مظهر التعداد على التدوينة

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

التركيب؟

1. المظهر 
2. تحرير أو تعديل HTML
3. قبل وسم الإغلاق SKIN ألصق الكود التالي

/* CSS PostStyle by https://www.alphatekania.com/*/ .post ul{list-style:inherit}.post ol{counter-reset:li; list-style: none;*list-style: decimal;margin-top:6px;padding-left:0} .post ol li{position:relative;margin:0 0 8px 15px !important;padding:4px 30px 8px 5px !important;list-style:none; *list-style: decimal;background: rgba(245, 245, 245, 1); /* background color of each element */ border:1px solid #EBEBEB;text-indent:14px;} .post ol li:before{content: counter(li); counter-increment: li; position: absolute; right: 5px; width: 20px; margin: 0 0 10px 0; padding: 4px !important; color: #fff; background: #446FAA; text-indent: 6px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1); border-radius: 2px;} .post ol li:after{content: ''; border: 10px solid transparent; border-left-color: #446FAA; float: left; margin-top: 3px;} .post ol li:hover:after {margin-left: 5px;border-left-color: #446FAA;transition: all 0.3s ease-out;}

شاهد الفيديو

#صف

*

تخصيص التعداد

*

450KB

*

-

*

غوغل دريف

مركز الخليج

إقرأ المزيد

أداة المتابعة بشكل منبثق

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

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

التركيب؟

1. توجه مباشرة إلى التخطيط
2. في أي مكان أضف اداة HTML JAVASCRIPT
3. ألصقه فيه الكود التالي واحفظ الترتيب

<style scoped='' type="text/css"> /*<![CDATA[*/ .arlinafollowForm p {font-family: Electrolize,ge_dinar_tworegular;font-size: 13px;} a.arlinafollowButton.followActive {background-color: #F74047;color: #fff;} a.arlinafollowButton {color: #FFFFFF;background: #456B8E;} #arlinafollowSubscribe{background-color:#F74047;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0} .arlinafollowButton{background:#464646;color:#fff;font-size:13px;line-height:28px;padding:0 10px;text-decoration:none;position:absolute;top:-28px;right:0;display:block;border-radius:2px 2px 0 0;height:28px;font-weight:700} .arlinafollowButton span{background:url("https://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px} .arlinafollowButton:hover,.arlinafollowButton:focus,.followActive,.followActive:hover{color:#fff} .arlinafollowButton:hover span,.followActive span{background-position:0 -37px!important} .followactive{background-color:#333} .arlinafollowForm{padding:15px;margin:auto;text-align:center;font-size:12px} .arlinafollowForm p{margin:10px 0} .arlinaFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c} .arlinaFollowFooter a{color:#aaa;background:none;text-decoration:none} .arlinaFollowFooter a:hover{color:#fff;background:none} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ !function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery); /*]]>*/ </script> <div id="arlinafollowSubscribe" style="bottom: -971px;"> <div class="arlinafollowForm"> <a class="arlinafollowButton" href="#" title="متابعه"><b style="font-family: Electrolize,ge_dinar_tworegular; font-size: 13px; font-weight: 100;">تابعنا هنا</b></a> <br /> <a href="http://www.Blogger.com/follow-blog.g?blogID=6834270398171671909" title="إنضما إلينا الأن" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZEAVU-my1BotA25By3M_n8T0V0S1o8yO3L1LStd67qxoqNfmgI-KBYyQO4niGLrqEZr-4wWS1g99dzehuKBBj4KAGlpOvXKFfeBuRIUUEeDmkQQxtuVi_b8Jav6hHP1eOPtdz2-XWjyk/s1600/wdbloog.png" alt="إنضما إلينا الأن" /></a> <br /> <p> إنضم الينا ليصلك كل جديد عالمنا</p> </div> </div>

ملاحظة:

    - يمكنك تغيير العبارات الموجودة بالرسالة واللون ... 
    - إستبدل معرف غوغل+ الخاص بي بالخاص بك (الأحمر)

6834270398171671909

#صف

*

أداة المتابعة

*

450KB

*

-

*

غوغل دريف

إقرأ المزيد

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

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

الإضافات التي أقدم لكم, يمكنكم تغيير لونها والشكل كما تحبون.

التركيب؟

1-حرر HTML
2-إبحث عن وسم الإغلاق SKIN
3-ألصق الكود التالي فوقه مباشرة وأحفظ المظهر

#wrap {margin:20px auto;text-align:center;} a.btn {display:inline-block;position:relative;font-family: Electrolize,ge_dinar_tworegular;text-decoration:none;font-weight:100;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;} a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;} a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;} a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;} a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}

4-توجه نحو المشاركة المراد وضع فيها الزر
5-ألصق الكود التالي في المكان الذي تريد أن يظهر

<div id="wrap"> <a class="btn" href="lien01">تحميل</a></div> <div id="wrap"> <a class="btn warn" href="lien02">معاينة</a></div>

ملاحظة:

1. يمكنك التحكم بوضع زر واحد أو أكثر
2. الروابط في lien01 أو lien02

شاهد الفيديو

#صف

*

أزرار 2

*

450KB

*

-

*

غوغل دريف

إقرأ المزيد

صندوق دردشة ماسنجر وإعجاب فيسبوك على بلوجر

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

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

معاينة إنقر هنا

      كيف ذلك؟

1. حمل الكود أسفل التدوينة
2. توجه نحو المظهر 
3. ثم حرر HTML
4. إبحث عن وسم الإغلاق body
5. فوقه مباشرة ألصق الكود التالي

<style> .fb-livechat { display: none; } .ctrlq.fb-button { z-index: 9; background: #0084ff; width: 60px; height: 60px; text-align: center; position: fixed; bottom: 24px; right: 24px; border: 0; outline: none; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); -webkit-transition: box-shadow 200ms ease; transition: box-shadow 200ms ease; cursor: pointer; background-size: 80%; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+"); transition: all .2s ease-in-out; } .ctrlq.fb-button:focus, .ctrlq.fb-button:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09), 0 4px 40px rgba(0, 0, 0, 0.24); } .fb-widget { background: #fff; z-index: 9; position: fixed; width: 360px; height: 398px; overflow: hidden; display: none; opacity: 0; bottom: 0; right: 24px; border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); -o-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); } .ctrlq.fb-overlay { z-index: 0; position: fixed; height: 100vh; width: 100vw; -webkit-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; top: 0; reght: 0; background: rgba(0, 0, 0, 0.05); display: none; } .ctrlq.fb-close { position: absolute; reght: 10px; z-index: 4; padding: 0 6px; background: #365899; font-weight: bold; font-size: 11px; color: #fff; cursor: pointer; margin: 8px; border-radius: 3px; } .ctrlq.fb-close::after { content: 'X'; font-family: cursive; } h1 { font-weight: 300; } </style> <div class='fb-livechat'> <div class='ctrlq fb-overlay'/> <div class='fb-widget' > <div class='ctrlq fb-close'/> <div class='fb-page' data-height='400' data-hide-cover='true' data-href='https://www.facebook.com/alphatekania/' data-show-facepile='false' data-small-header='true' data-tabs='messages' data-width='360'> <blockquote cite='https://www.facebook.com/alphatekania/' class='fb-xfbml-parse-ignore'> </blockquote> </div> <div id='fb-root'/> </div> <a class='ctrlq fb-button' href='https://m.me/alphatekania' title='Send us a message on Facebook'/> </div> <script> $(document).ready(function() { var $fb = { delay: 125, overlay: $(".fb-overlay"), widget: $(".fb-widget"), button: $(".fb-button") }; setTimeout(function() { $("div.fb-livechat").fadeIn(); }, $fb.delay * 8); $(".ctrlq").on('click', function(e) { e.preventDefault(); if ($fb.overlay.is(":visible")) { $fb.overlay.fadeOut($fb.delay); $fb.widget.stop().animate({ bottom: 0, opacity: 0 }, $fb.delay * 2, function() { $(this).hide('slow'); $fb.button.show(); }); } else { $fb.button.fadeOut('medium', function() { $fb.widget.stop().show().animate({ bottom: "30px", opacity: 1 }, $fb.delay * 2); $fb.overlay.fadeIn($fb.delay); }); } }); }); </script>

      ملاحظة: غير معرف الخاص بصفحة ألفا التقنية بالمعرف الخاص بك (المشار إليه باللون الأحمر).

https://www.facebook.com/alphatekania

شاهد التطبيق على الفيديو

#صف

*

الدردشة على بلوجر

*

500KB

*

2018

*

غوغل دريف

إقرأ المزيد

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

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

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

معاينة إنقر هنا تحميل إنقر هنا

       كيف ذلك؟

1-في البداية حمل الملف الذي يحتوي على الأكواد أسفل التدوينة

2-توجه نحو المظهر ثم حرر HTML

3-ألصق الكود التالي مباشرة وراء وسم head

<link href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css' rel='stylesheet' type='text/css'/>

4-ألصق الكود التالي فوق وسم الإغلاق skin/ 

#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; }

5-حفظ المظهر

6-على أي مشاركة أو تدوينة, أين ما تريد ألصق الكود التالي بعد الإنتقال من تأليف إلى 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>

       ملاحظة: 
الروابط الخارجية تضعها مكان كلمة "رابط"
يمكنك استبدال الكلمات مثل "معاينة" و"تحميل"... وكذلك والرموز يمكنك ذلك من الموقع Fontawesome.

شاهد التطبيق على الفيديو

#صف

*

تحميل ومعاينة احترافية

*

1MB

*

-

*

غوغل دريف

إقرأ المزيد

إضافة تأثير الطيف على روابط المدونة

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

كيف ذلك؟

1. في البداية قم بتحميل الكود, رابطه أسفل التدوينة
2. توجه نحو حسابك بلوجر
3. إختر المظهر وحرر HTML
4. إبحث عن الوسم الإغلاق  body/
5. فوقه مباشرة قم بوضع الكود الذي حملته
6. حفظ المظهر

شاهد التطبيق على الفيديو

<script type='text/javascript'> //<![CDATA[ function doRainbow(e){0==act&&(act=1,objActive=e?e:event.srcElement,clrOrg=objActive.style.color,TimerID=setInterval("ChangeColor()",100))}function stopRainbow(){act&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function doRainbowAnchor(){if(0==act){for(var e=event.srcElement;"A"!=e.tagName&&"BODY"!=e.tagName&&(e=e.parentElement,"A"!=e.tagName&&"BODY"!=e.tagName););"A"==e.tagName&&""!=e.href&&(objActive=e,act=1,clrOrg=objActive.style.color,TimerID=setInterval("ChangeColor()",100))}}function stopRainbowAnchor(){act&&"A"==objActive.tagName&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function Mozilla_doRainbowAnchor(e){if(0==act){for(obj=e.target;"A"!=obj.nodeName&&"BODY"!=obj.nodeName&&(obj=obj.parentNode,"A"!=obj.nodeName&&"BODY"!=obj.nodeName););"A"==obj.nodeName&&""!=obj.href&&(objActive=obj,act=1,clrOrg=obj.style.color,TimerID=setInterval("ChangeColor()",100))}}function Mozilla_stopRainbowAnchor(){act&&"A"==objActive.nodeName&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function ChangeColor(){objActive.style.color=makeColor()}function makeColor(){return 0==elmS?(elmR=elmV,elmG=elmV,elmB=elmV):(t1=elmV,t2=(255-elmS)*elmV/255,t3=elmH%60,t3=(t1-t2)*t3/60,60>elmH?(elmR=t1,elmB=t2,elmG=t2+t3):120>elmH?(elmG=t1,elmB=t2,elmR=t1-t3):180>elmH?(elmG=t1,elmR=t2,elmB=t2+t3):240>elmH?(elmB=t1,elmR=t2,elmG=t1-t3):300>elmH?(elmB=t1,elmG=t2,elmR=t2+t3):360>elmH?(elmR=t1,elmG=t2,elmB=t1-t3):(elmR=0,elmG=0,elmB=0)),elmR=Math.floor(elmR).toString(16),elmG=Math.floor(elmG).toString(16),elmB=Math.floor(elmB).toString(16),1==elmR.length&&(elmR="0"+elmR),1==elmG.length&&(elmG="0"+elmG),1==elmB.length&&(elmB="0"+elmB),elmH+=rate,elmH>=360&&(elmH=0),"#"+elmR+elmG+elmB}var rate=20;document.getElementById&&(window.onerror=new Function("return true"));var objActive,act=0,elmH=0,elmS=128,elmV=255,clrOrg,TimerID;document.all?(document.onmouseover=doRainbowAnchor,document.onmouseout=stopRainbowAnchor):document.getElementById&&(document.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT),document.onmouseover=Mozilla_doRainbowAnchor,document.onmouseout=Mozilla_stopRainbowAnchor); //]]> </script>

#صف

*

تأثير الطيف لروابط

*

1kb

*

-

*

غوغل دريف

إقرأ المزيد

إلغاء نسخ المحتوى من المدونة

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

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

كيف ذلك؟

1. على قائمة بلوجر, نتوجر الى المظهر ثم نختار تعديل HTML
2. داخل أكواد المظهر نقوم بضغط في أي مكان وبلوحة المفاتيح نضغط Ctrl +F
3. نبحث عن الوسم head
4. بعده مباشرة نضع الكود التالي ونقوم بحفظ المظهر.
<!-- Disable Copy and Paste--> <script language='JavaScript1.2'> function disableselect(e){ return false } function reEnable(){ return true } document.onselectstart=new Function ("return false") if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script> <script>var message="ÚÐÑÇ . ÇáäÓÎ ããäæÚ !!";function clickIE4(){if (event.button==2) {alert(message);return false;}}function clickNS4(e) {if (document.layers||document.getElementById&&!document.all) {if (e.which==2||e.which==3){alert(message);return false;}}}if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false")</script>

شاهد التطبيق على الفيديو

الكود إنقر هنا

إقرأ المزيد