الرئيسية المشاركات تحت قسم تأثيرات

‏إظهار الرسائل ذات التسميات تأثيرات. إظهار كافة الرسائل

الأربعاء، 29 يوليو 2015

✔ مجو تعليق

بسم الله الرحمن الرحيم

مرحبا بكم في مدونة مسطرة ... و موعدنا اليوم مع اضافة تأثير تحميل المدونة على بلوجر اجعل مدونتك متميزة

قالب,معرب,مطور,مدونات,بلوجر,تحميل,اضافات,معاينة,صور,blogger,template,addition,فيسبوك,تويتر,facebook,الربح من الانترنت,جوجل,ادسنس,فيديو,شرح,طريقة,تقنية,معلومات,محترف,problems ,طريقة,تغير,شكل,مشاكل ,answers ,بلوجر,نشر,حلول ,تأثير ,تحميل ,متميزة

◄ موضوع اليوم هو كيف اضافة تأثير التمرير لانهائية في المدونة على بلوجر .

◄ هذا التأثير يجعل بلوق أكثر احتراف وجذابة للنظر .

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

◄ عندما يقوم شخص بدخول الى مدونة على الصفحة الرئيسية ، هناك سيرى المواضيع تظهر أسفل تلقائيا .

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

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

◄ الآن مع كيفية اضافتها على بلوجر خاص بك:

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

◄ الذهاب إلى مدونة >>> قالب >>> ثم خد نسخة الاحتياطية للقالب تجنب لأية مشكل

◄ انقر فوق تحرير HTML . و بحث عن

<head>

◄ ثم بلصق التعليمة البرمجية التالية فوق كود السابق

| رابط الكود الذي يتم اضافته |

<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='https://bloggeryard.googlecode.com/svn/trunk/Infinite%20Scroll%20Plugin.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkILIYwl9DB92gev1A3VbDe4gr-ZmxU3SSCrQcc94928b6H1-Dsaz_dCGbQYjCLzQ5W4ypypM3-COnrwtdp32GKQh8W5Rr_ZC2SxoNNbb6kUZHhgyA0dmVP5zx0NNELyr6etnFkwlXYssQ/s1600/loading.gif'
});
  </script>
</b:if>

◄ استبدال رابط المشار اليه الى أي صورة تحميل.

◄ و أخيرا حفظ القالب .

◄ بعض أيقونات تحميل المتوفرة :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXr-aAJjiEM4yvigEEiSHJ4qEQDteSzjzA1qHFlehRjVMIqdJNUo-yPGM93GONSjKal_-KTwDIwZ3gJBdo9OogGvxaIyI9euia8XlTg22LdWf9dG5LMB_8rXlpnUPd8TyU58odu27FEwR/s1600/Round+Loader.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheRdO5Rwcb_6PPDSNmQSw-7BBCkvKKIQAnP28yMDiPiE-1iuHYPeRfVKdijJqHBrVfRpK0G1LtevlkIIojfjncGlMn8IQ4QWx_idvyGKx0xF2msJSPU2_ZlOBDqXLzUKjX8gZprXA1HEQq/s1600/arrow+loader.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoNXKt6cMGQ2oFIS-bMO5g9KKWy_uSMfm963hX1_8V6SyCB_9PpqO8hOAxKr6Z1jxCrP4jzUFfPgNXNGj4id3qJDCrk9aHVbLXtkjyyz5H8tG-kkNmNS2Ak1WHRMolO1u7sFXB-_JkWI5R/s1600/silver+arrows+circle.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRqS2zjL-AVw5s9Te3sYVL9On_qcaxFNDDidPUIOdM51NJ7TwFpsgw7VI-myif8rgLJuudJwfyJSOM9O8t29jNHDM3JzgEFpsItDTLIDK-e6v5wGbPcI8NnZAosZaZdCjEy4BEp92-Mb0/s1600/blue.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCux8SNEoMyP3jin9Xg5CHYoLGrJ-WI9giArvYTeR2jorMgZVJhbGgc53sktJ6PNNo-w8MviGbiaWInnt5g_WnO6IqxpoGzFJHvQkdh1qSElN3kHOIM0v5FgAUGMI8kBQ6zGXpTLZEJoie/s1600/red+loader.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBwajyLBsJsO9TJOa_RFxMrHB36elxpR-oU0281wGKfqkhjfcP9xnt861j4iGPnKa5aA4t5H51SQjPExVinhHmGxt-p6z4M7PkeGzEOoK0la2oBGbXRb1o3VnmICqLQ5XQTUL2drr7GScY/s1600/border+loader.gif

و بكده نكون انتهينا من درس اليوم و هو اضافة تأثير تحميل المدونة على بلوجر اجعل مدونتك متميزة

و السلام عليكم و رحمة الله و بركاته

المصدر

✔ مجو تعليق

تأثير التحميل عند التنقل بين الصفحات في بلوجر

عمرو مصطفىالمدير

الجنسية	مصري
العمر	27 سنة
الموقع	كن مدون

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

معاينة

طريقة التركيب سهلة وبسيطة فقط أضف الكود التالي فوق الوسم </body>

<style>
#cnmu-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://lh5.googleusercontent.com/-GL2UQvqMyOQ/U_EDmz70svI/AAAAAAAAEig/rYd-gKkV9OA/s43/load.gif') no-repeat 50% 50%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="cnmu-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#cnmu-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
document.write(unescape("%3Ca%20style%3D%22background%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20border%3A%200%20none%20%21important%3B%20bottom%3A%200%3B%20box-shadow%3A%20none%20%21important%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20cursor%3A%20default%20%21important%3B%20display%3A%20inline%3B%20font-size%3A%201px%3B%20height%3A%201px%20%21important%3B%20margin%3A%200%20%21important%3B%20padding%3A%200%20%21important%3B%20position%3A%20fixed%3B%20right%3A%200%3B%20text-shadow%3A%20none%20%21important%3B%20width%3A%201px%20%21important%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E"));
//]]>
</script>

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

ويمكنك تعديل هذا اللون #000 وهو لون الخلفية

في حال عدم عمل الإضافة هذا يعني ان مكتبة جي كويري غير مضافة في مدونتك

قم بإضافتها بوضع الكود التالي فوق الوسم</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

وبالتوفيق

االموضوع الاصلي بدون اضافات

✔ مجو تعليق

كيفية اضافة تاثير اللمعان على شعار مدونة بلوجر 2014

الزيارات:

كيفية اضافة تاثير اللمعان على شعار مدونة بلوجر 2014

بسم الله الرحمن الرحيم

مرحبا بكم زوار و متتبعي مدونة محترف النت DZ في تدوينة جديدة

حول طريقة اضافةتاثير لمعان على شعار مدونة البلوجر

تابع الشرح

معاينة | تحميل الكود
افتح مدونك بمتصفح قوقل كروم لسهولة البحث و عن الاكواد

اضغط كلك ايمن على شعار المدونة واختر Inspect elemnt اخر اختيار كما في الصورة

بعدها ابحث عن بداية كود الشعار

هو الكود الخاص بالشعار في قالبي <div id='header-inner'

وهو يختلف من قالب لاخر وقد يكون logo

بعد ايجاد الكود في المتصفح ابحث هنه في القالب

لاتنسى اخذ نسخة احتياطية للقالب

قم باستبدال الكود بالكامل بهذا الكود

اخر التاثير الذي يناسبك

اللون الابيض

<div class='peShiner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

التاثير الناري

<div class='peShiner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img data-color='fireHL' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

اللون السمائي

<div class='peShiner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img data-color='oceanHL' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

اللون الاسود

<div class='peShiner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img data-color='black' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

سرعة الحركة 3

بعدها ابحث عن </body>

واضف قبله الكود

<script src='https://trollvlhcv.googlecode.com/svn/trunk/fortroll/jquery-1.7.min.js' type='text/javascript'/>
<script src='https://trollvlhcv.googlecode.com/svn/trunk/fortroll/trolllg.js' type='text/javascript'/>

<script>
jQuery(document).ready(function () {
$(".peShiner").peShiner();
})
</script>

الان اضغط على حفظ وشاهد مدونتك

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

لكي يستفيد الجميع

تابع صفحتنا على الفيسبوك

المصدر اضغط لتراه

✔ مجو تعليق

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

مرحبا بأعضاء وزوار موقع كينج نت درسنا اليوم يتحدث عن كيفية تحريك صور المدونة بشكل اكثر من رائع بعد تجربة الاضافة الرائعة اتضح بأن هذه الاضافة تجعل صور المدونة تتحرك بشكل مائل عند وضع مؤشر الماوس على الصورة نفسها وعندما تبعد مؤشر الماوس عن الصورة فأن الصورة ترجع الى وضعها الطبيعى فهذه الاضافة لمن يريد بأن يزين ويجمل المدونة وايضا بعد التجربة اتضح بأن هذه الاضافة لن تسبب اى ثقل للمدونة لأن الاضافة عبارة عن اكواد وباللغة الــ Css الذى اعطت روح للغة الــ Html الأن تعالو نتعرف سويا على طريقة التركيب .

شرح اضافة تأثيرات على صور بشكل مائل :

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

الأن قم بالبحث عن هذا الكود :

]]></b:skin>

اضف قبلة مباشرة هذا الكود :

.post img {-webkit-transition: -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

padding: 5px 5px 5px 5px;

-webkit-transform: rotate(+2deg);

-moz-transform: rotate(+2deg);

}

.post img:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

بالأخير اضغط حفظ وانتهى التركيب .

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

بالأخير لن اقول غير (( لا خير فى كاتم العلم ))

المصدر

مسموح بنقل الموضوع بشرط ذكر المصدر : كيفية اضافة تأثيرات تحريك جميع صور المدونة بشكل مائل اكثر من رائع | كينج نت

✔ مجو تعليق

إضافة تأثيرات حركية على الصور في البلوجر

الكاتب Abdessamad Chbani | بتاريخ 3/30/2014

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

معاينة الأضافة

إضافة تأثيرات حركية على الصور في البلوجر

الشرح

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

    /* CSS Image Morph http://www.hukmat.blogspot.com */

    .post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
    .post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
    /* CSS Image Morph http://www.hukmat.blogspot.com */

ثم نضغط حفظ .

الموضوع : إضافة تأثيرات حركية على الصور في البلوجر .

✔ مجو تعليق

اضافة تأثير على صور مواضيع المدونة بتقنية CSS

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

في البداية لرؤية مثال على الدرس بإمكانك وضع مؤشر الماوس على الصورة الموجودة في بداية التدوينة ولاحظ التغير قبل وبعد وضع المؤشر, الأن وبعد مشاهدتك المثال نبدأ في التنفيذ ندخل إلى لوحة تحكم بلوجر > قالب > ثم نضغط على Cttl + F ونبحث عن

]]></b:skin>

ونضع الكود التالي قبلها:

.post img {
border: 1px solid #F4F4F4;
transition: all 400ms ease-in-out 0s;
}
.post img:hover {
opacity: 0.7;
}

الآن احفظ النموذج وقم بالمعاينة ما رأيك الأن ;)

الآن نأتي إلى الجزء الأهم وهو كيفية تخصيص الكود ؟

أولا ما ملون بالجزء الأحمر وهو الجزء الخاص بلون وحجم الاطار حول الصورة تستطيع تغير #F4F4F4 باللون الذي ترغب به ويناسب مدونتك أما ما يخص الاطار فتستطيع تغير حجمة من خلال تغير الرقم 1 إلى أي رقم ترغب به.

ثانيا ما ملون باللون الأخضر يخص شفافية الصورة حيث تستطيع التحكم بتلك الشفافية بتغير الرقم 7 حسب ذوقك.

انتهى الدرس أتمنى ان تكونوا قد استدفتم منه والى درس قادم ان شاء الله.

الموضوع منقول من