‏إظهار الرسائل ذات التسميات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات بلوجر. إظهار كافة الرسائل

07‏/02‏/2019

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

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

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

مثال للزر داخل المدونة


   اسم الملف
مدونة فوتوماكس حجم الملف 300MB
إذا لم يتم تنزيله تلقائيًا ، فيرجى النقر على إعادة التنزيل. وإذا كان الرابط معطلاً ، فيرجى الإبلاغ عبر صفحة نموذج الاتصال في هذه المدونة.

الآن مع التركيب

ندخل على القالب تم نبحت عن </head>  او &lt;/head&gt;&lt;!--<head/>--&gt;
نضف الكو التالى فوقه


<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

تم نضيف الكود التالى قبل الوسم </head>  او &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}

@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}

@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

</style>

تم نبحت عن هدى الوسم </body> ونضيف الكود التالى فوقه
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}
//]]>
</script>
نضيف الكود السابق في الموضوع بعد تحويل صندوق الكتابة من وضع التأليف الى وضع HTML 


اضف الكود التالى مع تغيير مايناسب موضوعك


<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
اسم الملف
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="رابط التحميل" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Namina Responsive Blogger</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
حجم الملف 300MB</span>
</div>
</div>
<div class="catatan-downx">
إذا لم يتم تنزيله تلقائيًا ، فيرجى النقر على إعادة التنزيل. وإذا كان الرابط معطلاً ، فيرجى الإبلاغ عبر صفحة نموذج الاتصال في هذه المدونة.
</div>
</div>


إقرأ المزيد

25‏/01‏/2019

تحميل أفضل قالب بلوجر تقنى مجاني 2019 قالب اندلس بدون حقوق بدون تشفير

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


إقرأ المزيد

07‏/01‏/2019

قالب التنظيف لمدونات بلوجر وحل المشاكل بعد تركيب اي قالب جديد

قالب التنظيف لمدونات بلوجر وحل المشاكل بعد تركيب اي قالب جديد

قالب التنظيف لمدونات بلوجر وحل المشاكل بعد تركيب اي قالب جديد

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


طريقة تركيب كود التنظيف في المدونة 

المدونة > القالب > تحرير القالب
قم بتحديد الكل لمسح القالب الصابق إضغط على Ctrl+A لتحديد الكل وبعدها مسح وقم بنسخ كود قالب التنظيف ولصقه وبعدها إضغط حفظ 
شرح بالفيديو




<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[/*
-----------------------------------------------
Name : CNMU Cleaning Template
Designer URL  : http://www.kalabani.com/
year          : 2015
----------------------------------------------- */
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id="Blog1" locked="true" type="Blog" />
</b:section>
</body>
</html>
إقرأ المزيد

05‏/11‏/2018

كيفية تحسين الصور وضغطها وحفظها للويب

كيفية تحسين الصور وضغطها وحفظها للويب
كيفية تحسين الصور وضغطها وحفظها للويب


ليس اكتشافًا مفاجئًا أن حجم صفحات الويب يتزايد. يقوم المطورون بتخفيض الكود الخاص بهم ، وتقطيع المكتبات الواسعة ، ورمز التحول إلى جانب الخادم ، كل ذلك في محاولة لتقليل 100 كيلوبايت من قاعدة الكود الخاصة بهم. قد يُطلب منك أيضًا إسقاط مكتبات قيمة مثل jQuery في محاولة لتسريع عمليات تحميل صفحاتك. ولكن بعد ذلك يأتي التصميم ، ويمر بسعادة على صورة رأسية تبلغ 1 ميغا بايت ، ويصرون على أنهم بحاجة إلى صور فائقة الجودة ، ولن يكفي أي شيء آخر.
هناك ، بالطبع ، بعض الجدارة في هذه الحجة. يتم توجيه العملاء بشكل مرئي ، كما أن التصوير الفوتوغرافي عالي الجودة وتصميمات التصميم الجيد هي طريقة ممتازة لجذب الزوار الجدد إلى موقعك.  ويجب علينا تحسين الأداء لتحسين أوقات التحميل وزيادة تحسين محركات البحث. بعد كل شيء ، تقوم Google بمعاقبة الصفحات الخاصة بأوقات التحميل البطيئة وأحجام الصفحات الكبيرة. 

استخدام Photoshop لحفظ الصور للويب

إذا كنت تقوم بتحرير الصور في Photoshop ، فلديك عدد من الطرق لحفظ الصور التي تقلل حجم الملف. أسهل طريقة هي ضبط شريط تمرير الجودة عند الحفظ كملف JPG ، بالطبع. لكن هذا علم غير دقيق إلى حد ما. الأداة الأفضل هي أداة "حفظ الويب". على الرغم من كونه قديمًا ومصمم تقنيًا لتحويل تخطيطات Photoshop إلى شرائح "جاهزة للويب"  ، فإنه يوفر تحكمًا شديدًا في ضغط الصور.
يمكنك الوصول إلى Save for Web ضمن ملف> تصدير> حفظ للويب والأجهزة.
حفظ الصور للويبكيفية تحسين الصور وضغطها وحفظها للويب
سيظهر ذلك قائمة تعرض معاينة لصورتك ، بالإضافة إلى لوحة جانبية من الخيارات. هنا يمكنك مقارنة تأثيرات خيارات الضغط الخاصة بك في الوقت الحقيقي. خفض جودة JPG إلى 0 على سبيل المثال ، لمعرفة مدى فظاعة حقا قد يبدو. يمكن لهذه النافذة تنفيذ ملفات بتنسيقات JPG و GIF و PNG ، مع كل مجموعة رائعة من الأوضاع والإعدادات. استكشفها للتعرف على نوع التأثيرات التي تتضمنها الإعدادات على صورك. يمكنك أيضًا استكشاف الإعدادات المسبقة المدمجة لمعرفة ما يفكر فيه Photoshop قد يكون مفيدًا.
كيفية تحسين الصور وضغطها وحفظها للويب
يمكن أيضًا أن تكون الألواح 2-up و 4-up مفيدة. هنا ، يمكنك المقارنة بين منهجين أو أربعة أساليب ضغط مختلفة ، مما يجعل من السهل اختيار الطريقة التي تناسب احتياجاتك.
كيفية تحسين الصور وضغطها وحفظها للويب
انقر على الصورة لاستكشاف فائدة جزء 4-Up.
فقط اضغط عليها في الجزء العلوي من النافذة لتنشيط الوضع. ثم انقر فوق كل نافذة معاينة وقم بتعيين إعدادات الضغط الخاصة بك بشكل فردي. يمكنك أيضًا الحصول على المعاينات وتحريكها حولها. ترتبط هذه الروابط ببعضها البعض ، لذا فإن عرض صورة واحدة يؤدي إلى حظرها جميعًا ، مما يسمح بمقارنة متسقة.
انظر أسفل أي معاينة لرؤية حجم الملف وإحصائيات بشكل أساسي.
كيفية تحسين الصور وضغطها وحفظها للويب
إذا كنت تريد مشاهدة الصورة في نافذة متصفح ، فيمكنك النقر على زر "معاينة" لتحميلها في المتصفح الافتراضي.
كيفية تحسين الصور وضغطها وحفظها للويببمجرد تحديد الإعدادات المفضلة لديك ، انقر فوق الزر "حفظ" لحفظ الملف على القرص.كيفية تحسين الصور وضغطها وحفظها للويب

ضغط الصور بفعالية مع أدوات مجانية

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

1. TinyPNG

كيفية تحسين الصور وضغطها وحفظها للويب
ستعمل أداة TonePNG ، هذه الأداة المتواضعة في الويب ، مع كل من JPG و PNG. يعمل مع أي ملف بين 5 ميغابايت ، ويمكن معالجة 20 ملف في وقت واحد. يقلل بسرعة وبشكل فعال أحجام كل من أنواع الملفات ، وغالبا ما يطرق بين 30 و 50 في المئة من حجم الملف. ليس من غير المألوف أن نرى تخفيضات تصل إلى 90 في المئة مع ملفات البدء غير فعالة بشكل خاص. إذا لم تعجبك واجهة الويب ، فيمكنك بدلاً من ذلك اختيار الوصول إلى واجهة برمجة التطبيقات وإنشاء الأداة الخاصة بك. يمكنك أيضًا دفع رسوم لمرة واحدة تبلغ 50 دولارًا أمريكيًا لمكوّن Photoshop الإضافي. بهذه الطريقة ، يمكنك التخلص من Save for Web والانتقال مباشرة إلى أدوات ضغط TinyPNG الرائعة. إذا كنت مريضًا من حد 5 ميغابايت أو 20 ملفًا لكل ضغط ضغط ، فاشترك في TinyPNG Pro بسعر 25 دولارًا سنويًا وأزل كليهما.

2. Compressor

كيفية تحسين الصور وضغطها وحفظها للويب
مثل TinyPNG ، الضاغط هو أداة في المتصفح لتقليص الملفات. يقبل JPG و PNGs بالإضافة إلى ملفات GIF و SVG ، بحد أقصى 10 ميغابايت. كما يوفر تحكمًا أكثر قليلاً: يمكن للمستخدمين الاختيار بين الضغط الفاسد والغير ضار. لسوء الحظ ، يمكنك فقط تحميل صورة واحدة في كل مرة ، كما أن الضغط ليس قويًا مثل خوارزمية TinyPNG. فهي تنتج صورًا ذات جودة أعلى قليلاً ، ولكنك تحتاج بالفعل إلى تكبير 100٪ لملاحظة الفرق.

3. Kraken

كيفية تحسين الصور وضغطها وحفظها للويب
كراكن هي أداة احترافية للمستخدمين الذين يحتاجون إلى أكبر قدر من التحكم وأعلى حجم. هناك نسخة مجانية يمكنك تجربتها ، وحتى هذه الميزة غنية بشكل مدهش. يتضمن ذلك جزءًا كبيرًا من إعدادات الخبراء للمستخدمين الملمين جيدًا ، بما في ذلك مستويات الجودة وإدارة البيانات الوصفية وحتى اختيار طريقة chroma subampling لـ JPGs. المستخدمون الذين يتطلعون إلى الحصول على التجربة الكاملة مع Kraken Pro يحصلون أيضًا على تغيير حجم الصورة ، والاستيراد من عنوان URL وضغط الصفحة الكاملة ، والوصول الكامل إلى واجهة برمجة التطبيقات ، ومكونات WordPress و Magento وسعة التخزين السحابي في Kraken. تمتد الخطط من 5 دولارات إلى 79 دولارًا شهريًا ، حسب حجم الميغابايت المضغوطة. يقتصر الإصدار المجاني على 1 ميغابايت ، ولكن لا تزال جميع أدوات ضغط الصور تعمل بشكل كامل.

باستخدام كلاهما؟

لنفترض أنك تبحث عن أصغر ملف فعال ممكن. هل يمكنك استخدام كل من Save for Web وأداة ضغط خارج الحامل مثل TinyPNG؟ إطلاقا. قد تبدو حتى مقبولة. ولكن يمكنك أيضًا الوصول إلى حالات لا يجد فيها TinyPNG أي شيء لضغطه. في حالات نادرة للغاية ، تعود الصورة من الضغط غير قابل للاستخدام ، مع الكثير من القطع الأثرية مثل الربط والأزمات. ولكن في هذه الحالة ، ما عليك سوى استخدام ملف Photoshop الذي تم تصديره بعناية ، بعد أن أهدر خمس ثوانٍ فقط من اتخاذ هذا القرار.
إقرأ المزيد

25‏/12‏/2017

حل مشكلة عدم ظهور القائمة الرئيسية فى قالب المحترف 2016


حل مشكلة عدم ظهور القائمة الرئيسية فى قالب المحترف 2016


بسم الله وصلاة وسلام على رسول الله اما بعد ، احبتي متابعي مدونة فوتوماكس ، اليوم في قسم دروس بلوجرسوف احل لكم مشكلة من بين اكبر المشاكل التي يتعرض لها المدونين على قالب المحترف 2016 وهى
عدم ظهور القائمة الرئيسية فى قالب المحترف 2016
سوف نقوم بالدخول الى القالب ثم >> تحرير HTML >> بعدها نقوم بفتح اداة البحث CRTL+F ونبحث عن هذا الكود .
menu #nav{display:none}

نستبدله بهدى الكود 

menu #nav{display:block}
شاهد الفيديو

إقرأ المزيد

07‏/12‏/2017

درس تغيير عنوان URL لمشاركات بلوجر حتى بعد نشرها


درس تغيير عنوان URL لمشاركات بلوجر حتى بعد نشرها
درس تغيير عنوان URL لمشاركات بلوجر حتى بعد نشرها

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



 ان اعجبتك التدوينة لاتنسى مشاركتها مع اصدقائك .

إقرأ المزيد

24‏/10‏/2017

كيفية الاحتفاظ بنسخة احتياطية من قالب بلوجر

كيفية الاحتفاظ بنسخة احتياطية من قالب بلوجر

كيفية الاحتفاظ بنسخة احتياطية من قالب بلوجر

كيفية الاحتفاظ بنسخة احتياطية من قالب بلوجر:

سجل الدخول الى لوحة التحكم
من الجهة اليمنى اضغط على المضهر
كيفية الاحتفاظ بنسخة احتياطية من قالب بلوجر

الآن انقر على زر النسخ الاحتياطي / استعادة " على الجانب الايسرالعلوي 

كيفية الاحتفاظ بنسخة احتياطية من قالب بلوجر

انقر على الزر "تنزيل القالب الكامل " باللون البرتقالي لتنزيل النموذج.

اختر المكان الذي تريد حفظ القالب فيه على الكمبيوتر ثم اضغط على " حفظ 


كيفية استعادة نموذج بلوجر الخاص بك

  1. سجل الدخول إلى لوحة تحكم بلوجر وانتقل إلى " المضهر" من القائمة اليمنى.

  2. الآن انقر على زر النسخ الاحتياطي / استعادة " على الجانب الأيمن العلوي من الشاشة.

  3. حدد زر " تصفح ". الآن انتقل وحدد النسخ الاحتياطي من القالب الخاص بك فى جهاز الكمبيوتر الخاص بك أو حدد نسخة جديدة.ملاحظة: تأكد من أنه بتنسيق .xml.
  4. انقر على الزر " تحميل
إقرأ المزيد