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



أولا أدخل على الموقع التالي :
http://khadejah.net/

بعد ذلك قم بالضغط على المواقع


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

قم بنسخ الكود

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


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

فلنبدأ..
اولا عليك تجهيز الصورة او الشعار الذي تريد وضعه بدلا من الافتراضي، سأفترض ان الشعار الجديد اسمه mylogo.png وموجود بداخل مجلد image بداخل القالب الذي تستخدمه .. قم بوضع هذا الكود في ملف functions.php الخاص بالقالب:

function arwp_loginLogo() {
    $logoUrl = get_stylesheet_directory_uri() . '/images/mylogo.png';
    echo '<style> .login h1 a { background-image: url(' . $logoUrl . '); background-size: auto; } </style>' ;
}
 add_action( 'login_head', 'arwp_loginLogo' );
بعد حفظ الملف .. الآن اذهب الى صفحة تسجيل الدخول، ستجد ان الشعار قد تم استبداله بشعارك الخاص، شيء جميل .. هذا ما تريده اليس كذلك؟، لكن هناك مشكلة بسيطة، عندما تضع مؤشر الفأرة على الشعار تظهر عبارة “يعمل بواسطة برنامج ووردبريس” .. لا تقلق يمكن تغيير هذا تابع..
إذاً، فلنفترض انك تريد تغيير هذه العبارة الى عنوان موقعك، سنستخدم الآن فلتر login_headertitle لنفعل ذلك، ضع هذا الكود ايضا في ملف functions.php:
function arwp_loginTitle( $title ) {
    return get_bloginfo( 'name' );
}
 add_filter( 'login_headertitle', 'arwp_loginTitle' );
قم بحفظ الملف .. واعمل تحديث لصفحة تسجيل الدخول وضع مؤشر الفارة على شعارك .. عنوان موقعك يظهر الآن بدلا من العبارة الافتراضية.
الآن كل شيء جيد بالنسبة لك .. تقوم بالضغط على الشعار للرجوع إلى رئيسية موقعك، لكن ما حدث انك ذهبت إلى wordpress.org، ابتسم فمازال يمكنك السيطرة على الامر :).
استخدم فلتر login_headerurl لتجعل الأمر في صالحك، ستضع هذا الكود في ملف functions.php الخاص بقالبك كذلك:
 

function arwp_loginUrl( $url ) {
    return home_url();
}
 add_filter( 'login_headerurl', 'arwp_loginUrl' );
الآن بحد حفظ ملف functions.php للمرة الثالثة .. قم بتحديث صفحة تسجيل الدخول، شعارك الخاص يظهر .. جيد، عند وضع مؤشر الفأرة عليه يظهر اسم موقعك .. جيد، عند الضغط عليه تذهب الى رئيسية موقعك .. رائع جدا، انتهى الأمر .. يمكنك الرجوع الى صفحة تسجيل الدخول لتتاكد مرة أخرى
في هذه التدوينه الى كيفية اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب ,  يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript  , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا

اضافة سلايد شو لمدونات بلوجر
انتقل إلى لوحة تحكم مدونتك
 إختر "تخطيط" ثم إضافة أداة ثم اختر HTML/Javascript

والآن الصق داخل المستطيل الكود التالي
 

<style type="text/css">
/* alb33dani.blogspot.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
       
#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MlZvUkHXdZNc3c8WSuw_AASju18h0rV5V_YZmk73Ij5IL_RIqY_cl2hfNBeCBMFN2PVfhKVvUSKdxFTH9KYw-QA5BENIixxHnv2yMOtHTx_jAk5yHCeITBelHwk5QUfzDm5vGuw4ogJE/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
    }
#slider img {
position:absolute;
border:none;
display:none;
    }
/* the link style undefinedif an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
    }
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
    }
div.mc-caption-bg {
background-color:black;
    }
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
    }
div.mc-caption a {
color:#FB0;
    }
div.mc-caption a:hover {
color:#DA0;
    }
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
    }
/* each bullet */
div.navBulletsWrapper div
    {
width:11px; height:11px;
background:transparent urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOiD2ITQoZxuVLAvsjQ2aUkmZ7GWu_kwRvjGxZ29pFAb7PtaFZO2ha88V2dWzhsBjYl_7ceuumQ0aaMCFlXMnN5Ob8ux0VoRUxXIc5hjIRYkDcrdSt16uP50nUWmZN1neKUWcRhN0-K2H/s1600/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
    }
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
    {
transform: translate3dundefined0,0,0);
-ms-transform:translate3dundefined0,0,0);
-moz-transform:translate3dundefined0,0,0);
-o-transform:translate3dundefined0,0,0);
    }
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>


مايجب عليك تغييره

عنوان الموضوع : استبدلها بعنوان الموضوع المراد عرضه في السلايد شو.رابط صورة الموضوع : استبدلها برابط صورة الموضوع المراد عرضه بالسلايد شو.
# : استبدلها برابط الموضوع المراد عرضه بالسلايد شو.
700px : لتغيير عرض السلايد شو .
306px:لتغيير ارتفاع السلايدشو.

وبالاخير قم بحفظ الاداه ومبروك عليك السلايدشو


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

مثال حي على التصميم :
professional-vcard
لتحميل التصميم هنا :
لتحميل التصميم


شرح مبسط لطريقة عمل نسخة كاملة لموقعك عن طريق السي بنل وبصورة تلقائية
وحسب اوقات انت تختارها .. عن طريق ال Cron job
اولا قم بتحميل الملف المضغوط من المرفقات وقم بفتحه وتعديل ملف cpanel-backup.php
حسب معلوماتك  ( أضغط هنا للتحميل )

كما موضح بالصورة :




بعد تعديل الملف قم بحفظه وارفع الملفين



الى اي مجلد .. ولنفرض انك قمت برفعه الى .. هذا المسار :

رمز Code: /home/username/public_html/cpanel-backup.php

حيث username = يوزر السي بنل

بعد اكمال الرفع لم تبقى الا خطوات بسيطة :

ندخل الكرون جوب من السي بنل




وبعدها ... نضيف الكود التالي في الكرون جوب :






رمز Code: php -q /home/username/public_html/cpanel-backup.php

حيث username مثل ما قلنا يوزر السي بنل + الى المسار البقية مسار وضعك للملفين

يفضل عمل حسلب اف تي جديد من السي بنل .. يكون موجه لمجلد خارج الpublic_html .. حتى لايكون الباك اب خاصتك مرئي !


عند زيارتي لموقع الفيسبوك  لاحظت عدم وجود زر المشاركة مع قائمة الاضافات الكتيرة الموجودة في صفحة اضافات الفيسبوك واستغربت كتير لماذا لم يعرض في قائمة الاضافات. المهم قمت ببحث في الانترت عن وجود وجود زر رسمي بدون فائدة كل الذي وجدت بعض الحلول الغير مجدية بتاتا. والجدير بالذكر ان  موقع الفيسبوك به اداة لتجربة لجافاسكريبت JavaScript Test Console وهى تحتتوى على قائمة تتضمن fb:share-button ا  بما انها موجودة في قائمة التجربة يعني ان الفيسبوك لا يزال يدعم هذا الزر ربما من وجهت نظري لم يدرج في قائمة الاضافات لعدم استعماله كتيرا من المواقع او ان الموقع يجد ان زر اعجبني افضل منه والله اعلم هذه وجهت نظري فقط فكما قلت سابقا ليست لي خبرة بالفيسبوك ولست متابع لاخباره لاني بطبيعة الحال منغمس كتيرا في تعلم واتقان الووردبريس بشكل جيد

زر المشارك يستعمل xfbml لهذا ستحتاج الى تعديل الترويسة والفوتر لاضافة بعض الاكواد يستحسن مراجعة شرح كيفية ادارة تعليقات فيسبوك عن طريق ووردبريس
بالنسبة لطريقة ادراج الكود فهي بسيطة ملف التدوينة المنفردة () وتضعه في المكان المناسب لك مثلا يمكنك وضعه اسفل الكود التالي 

<?php the_content(); ?>

كود زر المشاركة يكون بهذا الشكل :
<fb:share-button href="http://www.fbrell.com"type="button_count"></fb:share-button>

الان سنقوم بتعديل الرابط الموجود به لعرض رابط التدوينة سيصبح الكود بالشكل التالي :
<fb:share-button href="<?php the_permalink() ?>" type="button_count"></fb:share-button>

 بالنسبة ل type فهناك انواع مختلفة  ستاضع الاكثر استعمال في الموقع وهي button , button_count و box_count وهذه صورة توضويحية للازرار



يمكنك ايضا تحديد العرض لكي تتجنب بعض المشاكل مع المتصفحات بهذه الطريقة :

<fb:share-button href="<?php the_permalink() ?>" type="button_count" width="120"></fb:share-button>




هل فكرت يوما بوضع صفحه رئيسيه لموقعك غير الاندكس.
 الحل بسيط للغايه. الكود التالى يوضع بملف .htaccess وسيقوم بتحويل الصفحه الى التى ذكرتها برابط التحويل
 
DirectoryIndex filename.html 

مع استبدال filename.html برابط الصفحه التى تريد أن تظهر كصفحه رئيسيه لموقعك



قناتنا على يوتيوب