كوليكا ويب | هدفنا تطوير الويب العربي: ماتيريال ديزاين

صفحات المدونة

    Social Items

كوليكا ويب | هدفنا تطوير الويب العربي

و تقديم كل ماهو جديد و كل ما يخص بلوجر.

Home / ماتيريال ديزاين

تلبية طلب متابعينا الاعزاء سوف يتم شرح كيفية اضافة نسبة مئوية في الشريط الجانبي و اعتقد الكثير منكم لاحظ وجود الاضافة في العديد من القوالب هي اضافة خفيفة و جميلة و وتعطي نبذة عن تطورك و مدي اهتمامك بمدونتك علي الشريط الجانبي و هي مفيدة لانها تعلم الزائر عن مدي طول محتوي الصفحة و ذلك لان النسبة المئوية تزيد كلما نزل داخل الصفحة حتي 100% و عندما يصعد للاعلي تقوم بالعد من 100% الي 0% عدد تنازي الان هي بنا نتطرق الي كيف نقوم بـ اضافة نسبة مئوية في الشريط الجانبي.💖

طريقة التركيب
اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه ]]></b:skin> الان قم باضافة اكواد الـ CSS هذه قبلها ( فوقها ) :

 



#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#32C2A5;
color:#fff;
border-radius:3px;
font-size:14px;
}
#scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#369fcf;
}


ملحوظة : الاكواد المحددة باللون الاحمر هي المسئولة عن الالوان داخل الاضافة يمكنك تغييرها تجد اكواد الالوان في هذه الصفحة (أكبر مكتبة للألوان).

ثاني خطوة ضع الكود التالي بعد ( اسفل ) <body>

 


<div id='scroll'></div>

الخطوة الاخيرة ضع الكود التالي قبل ( فوق ) </body>





<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>

إن واجهت اي مشكلة فا باب التعليقات مفتوح للجميع 😍


اضافة نسبة مئوية في الشريط الجانبي


مرحباً متابعين و زوار كوليكا ويب الاعزاء اليوم معانا قالب جديد وهوا بتصيمم ماتريال ديزاين حسناً انه قالب WP-Mini معرب لكن بالطبع مدونة ماتريال ويب قامت بالتعديل عليه و حذف حقوق المصمم الاساسي للقالب و كان هناك الكثير يطلبون ذلك القالب قمت بتعريبه و تعديل عليه جعله سريع جداً و جلبه لكم مجانا بدون احتكار حسناً انه تصميم ماتريال ديزاين رائع خفيف و صديق لمحركات البحث وتم اضافة به احدث اكواد الميتا تاج للسيو هذه اعادة تكويد القالب وليست سرقة ♥

مميزات القالب:

  1. متوافق للسيو.
  2. سهل التركيب.
  3. أماكن لأضافة اعلانات.
  4. الوان مريحة للعين.
  5. أزرار مشاركة الموضوع.
  6. مواضيع ذات صلة اسفل المشاركات.
  7. تصميم ماتريال ديزاين.
  8. سهل التعديل.
  9. متجاوب مع مختلف الشاشات.
  10. و المزيد...



قالب ماتريال ويب اخر اصدار


متابعين و زوار كوليكا ويب اليوم سوف نتطرق الي شرح جديد مهم و هوا كيفية إضافة رسالة ترحيبية في بلوجر حسناً عزيز قد تقول و ما هوا المميز في التدوينة تلك المميز ان الرسالة الترحيبية هذه المرة بتقنية جديدة تدعي الماتريال ديزاين و هي خاصية جديدة و عصرية و سريعة و عندما تضيف اشعارات بالماتريال ديزياين تظهر موقعك بشكل متطور و ذلك يدل علي مدي تطورك و استخدام الماتريال ديزاين سهل عمل حاجات كتير و جعلها خفيفة هيا بنا نتطرق الي شرح هذه الاضافة ♥

اقرأ أيضاً : صفحة إتصل بنا بالماتيريال ديزاين

طريقة التركيب

اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه </head> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :

<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'/>
 <style>
#toast-container{display:block;position:fixed;z-index:10000}@media only screen and (max-width: 600px){#toast-container{min-width:100%;bottom:0%}}@media only screen and (min-width: 601px) and (max-width: 992px){#toast-container{left:5%;bottom:7%;max-width:90%}}@media only screen and (min-width: 993px){#toast-container{top:10%;right:7%;max-width:86%}}.toast{border-radius:2px;top:0;width:auto;clear:both;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;line-height:1.5em;word-break:break-all;background-color:#323232;padding:10px 25px;font-size:1.1rem;font-weight:300;color:#fff;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.toast .btn,.toast .btn-large,.toast .btn-flat{margin:0;margin-left:3rem}.toast.rounded{border-radius:24px}@media only screen and (max-width: 600px){.toast{width:100%;border-radius:0}}@media only screen and (min-width: 601px) and (max-width: 992px){.toast{float:left}}
</style>

 ثاني خطوة ضع الكود التالي قبل ( فوق ) </body> 

<script>
  var $toastContent = $(&#39;<span>أهلا بكم فى كوليكا ويب</span>&#39;);
  Materialize.toast($toastContent, 1500);
   var $toastContent = $(&#39;<span>ستجدون عندنا أغلب الاضافات للمدونات العربية</span>&#39;);
  Materialize.toast($toastContent, 2500);
   var $toastContent = $(&#39;<span>نتمنى ان تجدوا ماتبحثون عنه</span>&#39;);
  Materialize.toast($toastContent, 4000);
   var $toastContent = $(&#39;<span>جولة سعيدة ^_^</span>&#39;);
  Materialize.toast($toastContent, 5500);
</script>


الأن يمكنك تغيير الملون بـ البنفسجي بالكلام الدي تريده
كما يمكنك التعديل على زمن ظهور رسائل الترحيب بالثانية بالأرقام الملونة بالأحمر

 ثم قم بالحفظ و مبروك الاضافة الجديدة

إضافة رسالة ترحيبية في بلوجر ماتريال ديزاين


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

طريقة التركيب


الآن لتركيب الاضافة على صفحة, عليك الإنتقال إلى الصفحات ثم تغير نوع المقال من تأليف إلى Html ثم ضع هذه الاكواد.

 


<style scoped="scoped">

.blanterinput{float:none;position:relative;margin-bottom:45px;margin-left:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;right:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{right:50%}.bar:after{left:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}

input#ContactForm1_contact-form-email-message{height:150px}

input#ContactForm1_contact-form-submit{font-family: mahdi-font;color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:right;margin-top:15px}

input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

#ContactForm1_contact-form-error-message{float:left;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:left;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}

</style>

<br />

<form name="contact-form">

<div class="blanterinput">

<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />

<span class="highlight"></span>

<span class="bar"></span>

<label>الإسم</label></div>

<div class="blanterinput">

<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />

<span class="highlight"></span>

<span class="bar"></span>

<label>البريد الإلكتروني</label></div>

<div class="blanterinput">

<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>

<span class="highlight"></span>

<span class="bar"></span>

<label>الرسالة</label></div>

<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />

<br />

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3176011237725819468';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3176011237725819468','//colica-web.blogspot.com/','3176011237725819468');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px;color:#fff">Message could not be sent. ;color:#fffPlease try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">البريد الإلكتروني غير صحيح.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px;color:#fff">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '3176011237725819468', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>




  • التغييرات الضرورية


1- غير colica-web.blogspot.com برابط مدونتك
2- غير جميع 3176011237725819468 بمعرف ID الخاص بمدونتك
3- غير #07ACEC باللون الذي تريده
هذه الارقام هي معرف ال ID.

 أخيرا قم بحفظ الصفحة.
و مبروك عليك الاضافة الرائعة.

صفحة إتصل بنا بالماتيريال ديزاين


الكثير منكم يبحث عن قالب أنيق وسريع التصفح واحترافي طبعا 💖 لدى اليوم أحضرت لكم قالب بالماتريال ديزاين الذي كان يستعمله مدونة مبدعي التصميم وسنقدمه لكم مجانا, القالب اعيد تكويده وتصميمه من طرف طاقم مدونة كوليكا ويب وحرصنا على ان يحافظ على نفس سرعته في التحميل ومتجاوب وسهل التعديل عليه ✌ لن أطيل عليكم كثيرا 😋 سأترككم مع معاينة القالب واكتشاف مميزاته الرائعة 👈 👍تابعونا !!

مميزات القالب
  1. متجاوب مع أغلب الاجهزة
  2. أنيق وبسيط وسريع
  3. صمم بتقنية الماتريال ديزاين
  4. هيدر حصري متغير صباحا وليلا
  5. هيدر داخل التدوينات يظهر صورة الموضوع
  6. عن الكاتب بتقنية جديدة
  7. أزرار المشاركة
  8. زر جديد للصعود للأعلى
  9. والمزيد يمكنكم اكتشافه في المعاينة بأنفسكم



قالب ماتيريال ديزاين

الاشتراك في: الرسائل (Atom)

تابعنا عبر البريد الالكتروني