الرئيسية المشاركات تحت قسم اضافات
‏إظهار الرسائل ذات التسميات اضافات. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافات. إظهار كافة الرسائل

السبت، 22 يوليو 2017

إضافة اكواد Meta Tag لتقوية الارشفة ونشر موقعك في محركات البحث

تعليق
نتيجة بحث الصور عن اكواد ميتا تاج
فى هذه التدوينه سنقوم بالبدء فى شرح كيفيه تهيئه قالب المدونه لكى يصبح جاهز للظهور فى محركات البحث .
وأول شئ يجب عليك عمله هو اضافه ما يسمى بـالميتا تاج Meta Tag Code .
وظيفه هذا الكود فى المدونه انه يعمل كبطاقه تعارف للمدونه لمحركات البحث فمن خلال هذا الكود يستطيع محرك البحث معرفه اسم المدونه ووصفها ومعرفه الكلمات المهمه التى تدور عليها موضوعات المدونه .
وضع هذا الكود فى قالب المدونه لا غنى عنه للصعود بمدونتك فى نتائج محركات البحث مثل yahoo ,Bing  والعملاق Google.

طريقه إضافه كود الميتا تاج للمدونه 


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


  • بعد حفظ نسخه من القالب الان اضغط على تحرير HTML
  • الأن اضغط داخل مربع الاكواد وإضغط على Ctrl + F  من الكيبورد سفتح لك صندوق للبحث أكتب فى هذا الصندوق هذا الكود وإضغط على Enter للبحث عن مكانه
<head>
كما فى الصورة التالية
  • بعد ان تجد كود <head> قم بمسح جميع الاكواد التى بينه وبين الكود :
</b:skin>
الان قم بوضع الكود التالى بعد كلمه <head> مباشرة
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content=' وصف المدونة' name='description'/>
<meta content='كلمات , دلالية' name='keywords'/>
<meta content='global' name='distribution'/>
<meta content='10 days' name='revisit'/>
<meta content='10 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='إسمك بالإنجليزية' name='author'/>
<meta content='ar' name='language'/>
<meta content='بلدك بالإنجليزية' name='country'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if> 
سيصبح الكود كالاتى 
  •  الأن قم بالتغيير على الكود بما يناسب مدونتك 
1- وصف المدونة  قم بكتابه وصف قصير لمدونتك اشرح فيه ما الذى تقدمه مدونتك للزائر واعلم جيدا ان هذا الوصف سيظهر للزائرين من محركات البحث فتفنن فى الكلمات حتى تجذبهم للدخول على مدونتك ومتابعتها 
2- كلمات دلاليه  قم بكتابه الكلمات الدلاليه لمدونتك مع الفصل بين كل كلمه والأخرى بالكومه ,  مثل جوجل,مدونات بلوجر,اخبار
3- اسمك بالانجليزيه  أكتب اسمك 
4- بلدك بالانجليزيه اكتب بلدك  
بعد الانتهاء من التعديل قم بالضغط على حفظ النموذج 
 الان انت قمت باول خطوة لتعريف مدونتك لمحركات البحث وايضا هى خطوة هامه جدا فى عالم السيو seo والذى سنتناوله بالتفصيل فى التدوينات القادمه 
والسلام عليكم ورحمة الله تعالي وبركاتة.
الميتا تاج الخاصة بي هي التي في التدوينة.

الخميس، 20 يوليو 2017

اضافة إعلان منزلق احترافي في اسفل مدونتك


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

طريق التركيب :
تذهب الى تحرير القالب ثم ctrl+f و ابحث عن وسم  </body> و اضف الكود التالي قبله مباشرة :


<script type='text/javascript'> $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});}); </script> <div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'> <div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuSiQqGN1LaIAKO82bB6cjoGRruJMnpbAQRgFSustV_agBowxG_8XeccNH2fIrlOEC36wLzRTER9FRM_npexEfJzdh-LyRo6503YbUYsoEPcuVBB2hkd0zRk0SveC83qLB9KxMH002WCFb/s1600/btn_close.gif' style='vertical-align:middle;' title='close button'/></a></div> <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'> <a href='رابط الموقع هنا' target='_blank' title='Banner iklan disini'><img alt='Banner iklan disini' src='http://f.top4top.net/p_271p97p1.png' style='max-width:100%;height:auto;vertical-align:middle;'/></a> </div> </div>
تخصيص الاعلان :
- قم بوضع رابط الموقع او اي رابط تريد في المكان المخصص له .
- قم بتغيير رابط الصورة المحددة باللون الاحمر .



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



الكثير منا يبحث عن أفضل الإضافات لوضعهها في موقعة ، و كذا لاضافة طابع جمالي للمدونة و من بين هاته الاضافات تأثير التحميل للموقع ، و ما سنعرضه اليوم هو شيء جميل جدا ، و هو تأثير التحميل على فيديوهات اليوتيوب الاحمر ، و سنضيفه على أساس شريط لتحميل الموقع .
طريقة التثبيت :
اذهب الى تحرير القالب ثم Ctrl+f و ابحث عن وسم </body> ، و اضف قبله مباشرة الكود التالي :


<script type='text/javascript'> //<![CDATA[ // http://dia-pro.blogspot.com var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width= a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#df0d0d";this.bars=[];b=this.el=document.createElement("div");c(this.el, k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}(); var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100); //]]> </script>
ثم إضغط حفط وإستمتع بالاضافة. 

كيف تحمي محتوي مدونتك من النسخ ؟ الاجابة داخل التدوينة


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

و الاَن إليكم الاكواد التي تقوم بمنع النسخ مع المهام التي تقوم بها بطريقتين مختلفتين :
الطريقة الاولى :
- منع النسخ نهائيا من مدونتك بلوجر لأي نص موجود بها :
/*------ CSS make anti copy paste except by:www.cre5.blogspot.com. ------*/
.post-outer {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
-moz-user-select:none;}
- كود السماح بالنسخ للكلمات الموجودة في الإقتباس فقط الذي يمكن إيجاده في شريط الأدوات الخاصة ببلوجر ، و هذا يوضع بعد الكود الأول و كذا ستسمح للزوار بنسخ جمل او اكواد معينة مع الحفاظ على خصوصية باقي الموضوع :
.post blockquote,.post pre,.post code{
-webkit-touch-callout:text;
-webkit-user-select:text;
-khtml-user-select:text;
-ms-user-select:text;
-moz-user-select:text;}
كلا من الكودين الأول و الثاني يوضعان فوق ]]></b:skin> .

- منع نسخ الصور من مدونة بلوجر ، و لفعل هذا كل ما ستقوم به هو نسخ الكود التالي :

<script type='text/javascript'> //<![CDATA[
function nocontext(e) {var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName; if (clickedTag == "IMG") {alert(alertMsg);return false;}} var alertMsg = "الصور عليها حقوق لذلك ممنوع النسخ";document.oncontextmenu = nocontext;
//]]>

</script>
الطريقة الثانية :
الطريقة الثانية تقوم بمنع النسخ + تعطيل زر الفأرة الأيمن + تعطيل خاصية النسخ بلوحة المفاتيح ، و كذا تظمن حماية أكبر لمواضيع مدونتك ، و تركب بالطريقة التالية :
حيث نقوم بإستبدال وسم <body> بالكود التالي :
<!-- anti copy paste except by:www.cre5.blogspot.com -->
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
التحكم في الكود الاخير : 
false return='oncontextmenu : لتعيل زر الفأرة الأيمن من جديد قم بتحويل كلمة false الى true .
false return='onkeydown : لتفعيل النسخ عبر لوحة مفاتيح C+Ctrl قم بتحويل كلمة false الى true.
false return='onmousedown : للسماح بتحديد النص في المواضيع قم بتحويل كلمة false الى true .

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

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

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

في البداية تقوم بنسخ الكود التالي :



blockquote{margin:5px 17px;padding:7px;color:#fff;background:rgba(47, 70, 107, 1)} ul,ol,dl{list-style-position:inside;font-weight:normal;list-style:none} body{background: #E8E8E8;background-position: bottom; background-repeat: no-repeat; background-attachment: fixed;padding:0;margin:0;direction:rtl; font-family:Lobster, Droid Arabic Kufi;font-weight:normal;font-size:14px;} .post blockquote {padding: 55px 20px 20px 20px; overflow:auto; max-height:250px; background:#34495e; color:#fff; border-radius:4px; margin:10px; padding10px; text-align: left !important; direction: ltr; font: 14px;font-family: Lobster, Droid Arabic Kufi; line-height: 1.7em; } .post blockquote a {color: #F8D300;} .postblockquote:before { text-align: center; position: absolute; content: ' اضغط مرتين لتحديد و نسخ الاكواد اسفل داخل الاقتباس'; background: rgba(255,255,255,1); left: 3px; right: 3px; top: 3px; font-size:14px; font-family:Tahoma; padding: 5px 20px; display: block; font-weight: 700; border-radius: 3px 3px 0 0; color: #d21998;}

 تذهب إلى تحرير قالب بلوجر ثم تبحث عن ]]></b:skin> و تضع الكود فوقها مباشرة .
إضافة صناديق إقتباس بشكل لمدونات بلوجر


وهكذا قد إنتهينا من وضع  خاصية صندوق الاقتباس في مدونتك.

الأحد، 4 يونيو 2017

ثلاث قوائم بريدية احترافية لا تفوتها

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

 ✔  طريقة التركيب :

 كل ما عليك هو الذهاب الى تخطيط ثم قم بتحرير اداة في السايدبار او الفوتر ، و أضف داة HTML/Javascript و ضع بها احد الاكواد الثلاث التالية حسب الشكل الذي تريد تطبيقة علي مدونتك .
✔ الشكل الاول





<style>



@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
#subscribe-box {background-color:#47cf73;}
#subscribe-box p {font-size: 18px; color: #fff; padding: 10px 20px 0 20px; margin: 0; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; text-align: center; font-weight: bold;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background: #f9f9f9; color: #bbb; padding: 10px; margin-top: 10px; font-size: 13px; width: 100%; border: 0; transition: all 0.4s ease-in-out; font-family: tahoma; border-radius: 2px!important;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background: #4D504F; color: #fff;font-weight: 700; font-size: 16px; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; border: none; outline: none; width: 100%; cursor: pointer; border-radius: 3px!important; transition: all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
</style>
<div id="subscribe-box">
<p class="technologysub">

اشترك لتصلك احدث مواضيعنا...</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=cre5" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cre5, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="الاسم " />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="البريد الالكتروني" />
<input name="uri" type="hidden" value="cre5" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="اشترك الآن" />
</form>
</div>
</div>


 ✔ الشكل الثاني



<style>

@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
/* Subscribe Box */
.widget-content{padding:0}
.subscribe-wrapper h3{font-weight: 700; margin: 0 auto 10px auto; text-align: center; font-size: 20px; line-height: 1.8; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}
.subscribe-wrapper h3 span{display:inline-block;font-weight:bold;font-size:33px;}
.subscribe-wrapper p{margin:0 auto;opacity:.95;text-align:center;font-family: 'Droid Arabic Naskh', serif; font-size: 14px;}
.subscribe-wrapper{color:#fff;background:#e83e3b;margin:0;padding:20px;}
.subscribe-form{clear:both;display:block;margin:5px 0 10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:rgba(0,0,0,0.2);color:#fff;margin:0 0 15px;padding:0.962em 1.847em;width:100%;border:none;text-align:center;outline:0}
.subscribe-css-button{background: #fff!important; color: #E83E3B!important; cursor: pointer; font-weight: 700; padding: 7px; width: 100%; border: 0; font-size: 15px; text-transform: uppercase; transition: all .3s; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}
.subscribe-css-button:hover{color:#aaa!important;transition:all 0.3s ease-in;}
</style>
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h3>احصل على أحدث مواضيعنا
<span>أول بأول</span></h3>
<p>اشترك للتوصل بكل جديد</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=cre5" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cre5', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="cre5" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="ادخل بريدك الإلكتروني" />
<input class="subscribe-css-button" title="" type="submit" value="اشترك الآن" />
</form>
</div>
</div></div>

اضافة زر scrollber الي مدونتك بشكل احترافي وانيق

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



الخطواط
✔ توجه الى لوحة تحكم بلوجر
✔ اختر المدونة تم القالب
✔ قم بتحرير القال بعدها ابحث عن الوسم ]]></b:skin>
✔ ثم اضف فوقه مباشرة الكود التالي




::-webkit-scrollbar {
background:#fff;
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #28A08E 10%, #28A08E 51%);
}
::-webkit-scrollbar-track {
}
  لتغيير لون الاضافة ابحث عن background-image  ثم غيير كود 
اللون #28A08E  الى اللون المناسب لك 
لتغير العرض ابحث عن width:8px; داخل نفس الكود ثم غيير القيمة 8 الى ما يناسبك.
قم بحفظ القالب واستمتع بالاضافة الرائعة.
هذا كان درسنا اليوم  وانتظروا المزيد من الابداع 
الاشتراك في: الرسائل (Atom)