شفرات قنوات ART على النايلسات

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

معاينة وتحميل أكواد الإضافة

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

معاينة تحميل 

صور من الإضافة .

شِرح التركيب

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

.kutipan .blanter{background:#9C0C0C!important;overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:all .4s ease-in-out;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px 20px 20px 40px;text-align: center;}
.gantiwarna{position:absolute;right:0;bottom:-25px}
.gantiwarna a{margin-right:5px;border:2px solid #fff;border-radius:100%;padding:10px;width:10px;height:10px;font-size:0}
.kutipan{float:left;width:100%;margin-bottom:25px;position:relative;border-radius:2px;line-height:1.5}
.kutipan i.fa{background:#9C0C0C;z-index:9;border:2px solid #fff;border-radius:100%;padding:10px;font-size:15px;color:#fff;position:absolute;top:15px;left:5px}
.kutipan.merah .blanter,.merah,.kutipan.merah i.fa{background:#9C0C0C!important}
.kutipan.biru .blanter,.biru,.kutipan.biru i.fa{background:#0c6d9c!important}
.kutipan.cyan .blanter,.cyan,.kutipan.cyan i.fa{background:#0c9c81!important}

• هذا الكود السابق هو كود الأستايل واذا تريد تعديل به شئ لا مشكلة اذا كانت تريد تكبير الخط تغيير الألوان لا مشكلة فى ذلك يجب عليك فقط أن يكون لديك القليل من الخبرة فى التعامل مع أكواد الـ css
• الأن أبحث عن هذه الوسم ايضا</body>ثم قم وضع فوقه الكود التالى .

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){$("a.biru").click(function(){$(".kutipan").toggleClass("biru").removeClass("cyan","merah");});});
$(document).ready(function(){$("a.merah").click(function(){$(".kutipan").toggleClass("merah").removeClass("cyan","biru");});});
$(document).ready(function(){$("a.cyan").click(function(){$(".kutipan").toggleClass("cyan").removeClass("biru","merah");});});
$(document).ready(function(){$(".kutipan .blanter").kutipan()});(function(e){e.fn.kutipan=function(t,n){if(!t)t=550;if(!n)n=7000;var r=t*4;if(r>n)n=r;var i=e(this),s=e(this).filter(":first"),o=e(this).filter(":last"),u='<div id="quote_wrap"></div>';e(this).wrapAll(u);e(this).hide();e(s).show();e(this).parent().css({height:e(s).height()});setInterval(function(){if(e(o).is(":visible")){var n=e(s);var r=e(n).height()}else{var n=e(i).filter(":visible").next();var r=e(n).height()}e(i).filter(":visible").fadeOut(t);setTimeout(function(){e(i).parent().animate({height:r},t)},t);if(e(o).is(":visible")){setTimeout(function(){e(s).fadeIn(t*2)},t*2)}else{setTimeout(function(){e(n).fadeIn(t)},t*2)}},n)}})(jQuery)
/*]]>*/
</script>

• هذا الكود هو كود الجافا سكربت الخاص بعمل الصناديق وجعلها متحركة وهذا الكود سوف تقوم بوضعه كما قلت فوق الوسم كما قلت ، ولكن فى الكثير من القوالب لا تنجح هكذا بسبب أكواد جافا سكربت اخر لذلك سوف يكون عليك وضع الكود مرة اخر فوق الوسم هذا ايضا </head>وبذلك سوف تعمل بدون مشكلة .
• بمعنى أنك أذا لم تعمل معك الأضافة عندما تضع كود الجافا كما قلت سوف يكون عليك وضعه فوق الوسم ايضا</head>واذا لم تجدها هكذا ابحث عنه هكذا ايضا<head/>وضع نفس الكود هذه فوقه .

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){$("a.biru").click(function(){$(".kutipan").toggleClass("biru").removeClass("cyan","merah");});});
$(document).ready(function(){$("a.merah").click(function(){$(".kutipan").toggleClass("merah").removeClass("cyan","biru");});});
$(document).ready(function(){$("a.cyan").click(function(){$(".kutipan").toggleClass("cyan").removeClass("biru","merah");});});
$(document).ready(function(){$(".kutipan .blanter").kutipan()});(function(e){e.fn.kutipan=function(t,n){if(!t)t=550;if(!n)n=7000;var r=t*4;if(r>n)n=r;var i=e(this),s=e(this).filter(":first"),o=e(this).filter(":last"),u='<div id="quote_wrap"></div>';e(this).wrapAll(u);e(this).hide();e(s).show();e(this).parent().css({height:e(s).height()});setInterval(function(){if(e(o).is(":visible")){var n=e(s);var r=e(n).height()}else{var n=e(i).filter(":visible").next();var r=e(n).height()}e(i).filter(":visible").fadeOut(t);setTimeout(function(){e(i).parent().animate({height:r},t)},t);if(e(o).is(":visible")){setTimeout(function(){e(s).fadeIn(t*2)},t*2)}else{setTimeout(function(){e(n).fadeIn(t)},t*2)}},n)}})(jQuery)
/*]]>*/
</script>

• الأن مع أخر كود وهو كود html وهذا الكود سوف تضعه كما تريد أنت فى المكان الذى تريده فى قالب مدونتك  بين الوسمين هذا<body و هذا </body>ايضا .

<div class='container'>
<div class='clear'/>
<div class='kutipan'>
<i aria-hidden='true' class='fa fa-quote-right'/>
<div class='blanter'>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق&#1548; إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد&#1548; النص لن يبدو مقسما ولا يحوي أخطاء لغوية
</div>
<div class='blanter'>
 مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص&#1548; حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع&#1548; ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملا&#1611;&#1548;دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق
</div>
<div class='blanter'>
3هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق&#1548; إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد&#1548; النص لن يبدو مقسما ولا يحوي أخطاء لغوية

</div>
<div class='gantiwarna'>
<a class='merah' href='javascript:;'/>
<a class='biru' href='javascript:;'/>
<a class='cyan' href='javascript:;'/>
</div>
</div>
<div class='clear'/>
</div>

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

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