مساحة إعلانية

القالب من تصميم المبدع كن مدون ومن تطويرنا الخاص ورقة مدون

إعلانك هنا

الخميس، 29 ديسمبر 2016

حصرياً افضل كود تبادل اعلاني بنري مع تلميحات Tooltip


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

<style>
/* Css Tooltip : pmudwn.blogspot.com
--------------------------------------*/
a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: #002AFF;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  box-shadow: 5px 0px 0px #001E80;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #002AFF;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
/* End Css Tooltip : pmudwn.blogspot.com
-----------------------------------------*/
.kotak_iklan {
    text-align: center;
margin-bottom: 33px;
}
</style>
<div class="kotak_iklan">
<a class="tip tooltips" href="#" target="_blank">
<img style="border: none;" src="https://1.bp.blogspot.com/-Qb91sUCCJBQ/WD16ZV42J0I/AAAAAAAAAGY/wivx6lHIKls6tZ8PNf50VuD7BZwWVue0wCLcB/s1600/bup.png" width="125" height="125" /><span>اعلن هنا</span></a>

<a class="tip tooltips" href="#" target="_blank">
<img style="border: none;" src="https://1.bp.blogspot.com/-Qb91sUCCJBQ/WD16ZV42J0I/AAAAAAAAAGY/wivx6lHIKls6tZ8PNf50VuD7BZwWVue0wCLcB/s1600/bup.png" width="125" height="125" /><span>اعلن هنا</span></a>

<a class="tip tooltips" href="#" target="_blank">
<img style="border: none;" src="https://1.bp.blogspot.com/-Qb91sUCCJBQ/WD16ZV42J0I/AAAAAAAAAGY/wivx6lHIKls6tZ8PNf50VuD7BZwWVue0wCLcB/s1600/bup.png" width="125" height="125" /><span>اعلن هنا</span></a>

</div>

هذا هو الكود ! طريقة تعديلة سهلة جداً تابع ...

  1.  علامة # :  استبدلة برابط المدونة المعلنة
  2. اللينك بللون الاحمر :رابط البنر لمموقع المعلن
  3. كلمة "اعلن هنا" : اسم المدونة المعلنة
الان اين تضع الكود ! للناس الجديدة فالبلوجر تعالو نعرف ...
  • لوحة تحكم Blogger.com
  • تذهب لاعدادات مدونتك >> التخطيط >> اختار مكان الاضافة >> اضف اداة >> HTML/JavaScript
  • ضع (العنوان) اسم الاضافة وليكن (إعلانك هنا يحقق اهدافك)
  • ضع (الرسالة) الكود الموجود اعلي وثم اضغط علي حفظ
  • تم اضافة الاضافة اللي مدونتك بنجاح اي سؤال ضعه فالتعليقات
يرجي عدم حذف حقوق من الكود

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

تفعيل https في مدونة بلوجر


تم تفعيل شهادة SSL والتي تتيح لك اضافة https مع شكل القفل الاخضر بجانب رابط مدونتك وهذا مجاناً مقابل ضغطة في زر الاعدادات في اعدادات مدونتك

  • ما فائدة https
هو اتصال مشفر بين مستضيف مدونتك (بلوجر) ويمنع الهاكرز او من يحاول بالحصول علي معلومات التي ترسل من مدونتك الي مستضيف بلوجر من معلومات - ايميلات سوف يحصل عليها الهاكرز لاكن سوف يحصل بطريقة مشفره بالكامل الامر شبيه بـ قالب بلوجر محمي بكود Javascript مشفر وانتا تحاول ازالة حقوقة او التعديل علي كود المشفر هل ستعرف اين كود هو الصحيح ؟ لا
  • تفعيل https والحصول علي شكل القفل بجانب رابط المدونة
الامر بسهولة هو دخول الي الرابط الاتي
https://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#basicsettings
ايضا تقوم بتغير xxxxxxxxxxx بمعرف مدونتك المكون من 19 رقم
تقوم بالنزول الي HTTPS ‏إعادة التوجيه عبر HTTPS سوف تجد كلمة (لا) اجلهعا (نعم) وتقوم بالحفظ الان سوف يتم اضافة https الي مدونتك مجاناً


هناك بعض الاشخاص يستخدمون كود لمنع اضافة دومين الدولة (تحديث رابط الي دومين الدولة xxx.blogspot.com.eg)
بالطبع الكود يقوم بعدم اضافة https لذا سوف يحصل تضارب بينهم ما الحل ؟ سوف نعرفة الان

  1. دخول الي بلوجر
  2. قالب >> تحرير html
  3. تقوم بحذف الكود القديم الذي تستخدمه لمنع تحويل الدومين للدولة الزائره لمدونتك
  4. تقوم بالبحث عن </head>
  5. تضيف الكود الاتي
  6. تحفظ القالب


 <script type='text/javascript'>
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
  var ncr = "https://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);}
</script>

 <script type='text/javascript'>
function check_secure() {
var secssl = /^https/i;
var blog = document.location.hostname;
var slug = document.location.pathname;
var subs = window.location.search;
if (!window.location.origin.match(secssl)) {
window.location = "https://" + blog + slug + subs;
}
}
check_secure();
</script>

الي هنا نكون انتيهنا واتمني ان تعجبكم التدوينة

الاثنين، 28 نوفمبر 2016

كيفية تغير سكرول بار لشكل احترافي


سكرول بار هو شريط الجانبي اللي يستخدمه الزائر او المتصفح في نزول وصعود في مدونتك ويكون علي شكل الافتراضي وتفكرون فـ انه لايمكن تغير شكلة ولاطن هذا خطأ اولاً احب ان انوه انه شكل فقط ليس له اي ميزة ولاكن اذا كنت تريد تغيير شكلة فلا مانع سوف اعرض لكم 16 اشكال

معاينة

في المعاينة هناك 16 شكل ولاكن سوف اعرض لكم الشكل التاسع (9) لانه اعجبني واحببت ان اشاركة معكم مع اعدادات الوانة

اولاً لاضافة السكرول بار لديك في القالب اكواد CSS تقوم بإضافة الكود الاتي في اؤاخر الاكواد CSS



::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
 background-color: #F90; 
 background-image: -webkit-linear-gradient(90deg,
                                           rgba(255, 255, 255, .2) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, .2) 50%,
             rgba(255, 255, 255, .2) 75%,
             transparent 75%,
             transparent)
}

الان احفظ القالب واذهب الي المدونة لتجد السكرول بار بـ هذا الشكل



الان نقوم بإعدادات السكرول بار
background-color: #F5F5F5;
كود لون السكرول
background-color: #F90;
تقوم بتغيرها بنفس اللون او افتح منه قليلة

الي هنا اكون انتيهت

رابط المصمم الاصلي
https://codepen.io/GhostRider/full/GHaFw
لتكملة اشكال السكرول بار
http://codepen.io/EbramN/full/vyeKXd 

السبت، 26 نوفمبر 2016

من هنا نبدا افتتاح مدونة ورقة مدون


ورقة مدون مدونة جديدة تم انشائها في 24/11/2016 وتم البدء في 26/11/2016
عن مسؤلين المدونة :-
إبرام ناجي مدون علي منصة البلوجر لدي فكرة بسيطة عن لغة HTML , css
لماذا اسم ورقة مدون :-
قررت ان اقوم بإنشاء مدونة خاصة بلبلوجر وايضا تطرق الي شروحات اخري وفكرت في اسم يصلح لمجالات المدونة حيث نتطرق الي بلوجر اكثر لذلك تم اختيار ورقة مدون نسبة الي بلوجر تعتبر ورقة وانا مدون ادون علي الورقة (بلوجر)


الي هنا هنا نكون انتيهنا الافتتاح ونراكم في شروحات قادمة بإذن الله
جميع الحقوق محفوظة لــ ورقة مدون 2016 ©