المقالات الحديثة

زر ويب متحرك [ css ]

Omar Shiriyani 1:04 ص اضف تعليق
Omar Shiriyani
مزيد من المعلومات »


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


كود css

.anim { animation: jiggle 2s ease-in infinite; } @keyframes jiggle { 48%, 62% { transform: scale(1.0, 1.0) } 50% { transform: scale(1.1, 0.9) } 56% { transform: scale(0.9, 1.1) translate(0, -5px) } 59% { transform: scale(1.0, 1.0) translate(0, -3px) } }



كود html

<a class='tombol anim' href='#'>النص يضع هنا</a> 3. Selamat Mencoba

افضل طريقة لتصوير شاشة الموقع

Omar Shiriyani 3:38 ص اضف تعليق
Omar Shiriyani
مزيد من المعلومات »


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


الذهاب الى الموقع



واتساب بلس نسخة المتجر اخفاء ظهور + ثيمات + نسخ حالة

Omar Shiriyani 3:03 م اضف تعليق
Omar Shiriyani
مزيد من المعلومات »


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

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

مميزات  :

  • إمكانية إخفاء الظهور , خيارات الخصوصية .
  • إمكانية وضع قفل للواتس اب بكلمة مرور.
  • 91 فيس جديد من اندرويد 6.0.1 ( مسجد – الكعبة – الخ ) .
  • إمكانية إرسال فيديو حجمه 1 جيجا بدلا من 16 ميغا.
  • إمكانية إرسال 90 صورة دفعه واحدة بلا من 10
  • إمكانية وضع حالة عدد احرفها 250 بدلا من 139 حرف.
  • إمكانية الضغط على الروابط دون تخزين رقم مرسل الرسالة او صاحب المجموعة.
  • عداد إحصائيات للمجموعات و معاينة الوسائط بدون تحميل.
  • إمكانية إخفاء الاسم والتاريخ عند نسخ رسالتين او اكثر , إمكانية نسخ الحالة.
  • إمكانية تغيير شكل البرنامج , و تغيير ايقونة البرنامج والاشعارات.
  • والعديد من المميزات اكتشفها بنفسك .
التحميل

3 اشكال ازرار التواصل الاجتماعي بتأثير hover

Omar Shiriyani 5:15 ص اضف تعليق
Omar Shiriyani
مزيد من المعلومات »


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

اولا قم ببحث عن <head>
وتضع تحت هذا الكود 

<link href='https://googledrive.com/host/0Bwq2NE-tHynqcDB4Vlh4c0t1NmM' rel='stylesheet' type='text/css'/>


  1. الشكل الاول ميترو 


الكود 

<div id="social-wrapper">
<a class="fb" href="https://facebook.com/USER_NAME" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="gp" href="https://plus.google.com/USER_NAME" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a class="yt" href="https://youtube.com/USER_NAME" target="_blank">
<i class="fa fa-youtube"></i>
</a>
<a class="tw" href="https://twitter.com/USER_NAME" target="_blank">
<i class="fa fa-twitter"></i>
</a></div>

   2. الشكل الثاني القائمة العمودية



الكود

<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
</a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
</a></div>
<div class="app_social google">
<a href="https://www.google.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
</a></div>
</div>




   3. الشكل الثالث القائمة العمودية بتحرك اكثر احترافية



الكود 

<a href="#" class="icon icon-border facebook">facebook</a>
<a href="#" class="icon icon-border twitter">twitter</a>
 <a href="#" class="icon icon-border googleplus">google+</a>


 * لايسمح نقل من دون ذكر مصدر *

مراسلة اصدقائك عبر الواتساب من دون أشتراك لا يفوتك

Omar Shiriyani 1:53 ص اضف تعليق
Omar Shiriyani
مزيد من المعلومات »


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

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

الذهاب الى الموقع

اضافة خاصية "إتصل بنا" لمنصة بلوجر

Omar Shiriyani 1:20 ص اضف تعليق
Omar Shiriyani
مزيد من المعلومات »
خاصية إتصل بنا مهمة جداً لكل مواقع للتواصل مع ادارة الموقع حول الانظمام أو صفقات تجارية أو  شراء مساحات اعلانية من موقع فمن الاكيد يحتاج الموقع الى هذي الاضافة لأتاحة التواصل للزوار مع ادارة الموقع وهنا نقدم لكم اضافة هذي الخاصية المهمة لمنصة بلوجر بمظهر رسمي واحترافي مثلما تشاهدون في الصورة 

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


 
<center><div class="contact-us-page"><div class="contact-form-widget"><div class="form"><form name="contact-form"><p></p><span class="contact-us-text">اسم المرسل</span><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" autocomplete="off"><p></p><span class="contact-us-text">البريد الاكتروني <span style="font-weight: bolder;">*</span></span><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value=""><p></p><span class="contact-us-text">الرسالة <span style="font-weight: bolder;">*</span></span><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><p></p><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال"><p></p><div style="text-align: center; max-width: 222px; width: 100%"><p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p><p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p></div></form></div></div></div><br /><p>تأكد من ظهور "تم أرسال رسالتلك"</p></center></div>
<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css' rel='stylesheet'/><link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/><style>.bloggeram-contact-page {direction: rtl;text-align: center;}.contact-us-page {width:98%; max-width:400px;}.contact-us-text {float: right;}.contact-form-button, .contact-form-button-submit, #ContactForm1_contact-form-submit {font-family: 'Droid Arabic Kufi';color: #fff;background: #111;border-color: #111;width: 95%;height: 45px;font-size: 1.1em;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width: none !important;width: 95% !important;min-height: 40px !important;font-family: 'Droid Arabic Kufi' !important;}.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {box-shadow: none;}.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {box-shadow: none;outline: none;}

.contact-form-widget {width: inherit;max-width: none !important;padding: 10px 12px 5px 0px;font-size: .90em;}#ContactForm1_contact-form-submit {font-family: 'Droid Arabic Kufi', Voces;color: #fff;background: #111;border-color: #111;width: 95%;height: 45px;font-size: 1.1em;}#ContactForm1_contact-form-submit:hover {background: #FFA200;border: #FFA200;}</style>

أضافة المشاركة المميزة بشكل يدوي بطريقة سهلة

Omar Shiriyani 4:55 م اضف تعليق
Omar Shiriyani
مزيد من المعلومات »
أحد ادوات المهمة التي يفترض لكل اصحاب المدونات بشكل عام التي تطرح مواضيع ساخنة بشكل يومي أو شهري أو اسبوعي او ما يكون ان يقوم بتركيب هذي الاداة التي تلعب دور كبير لجذب الزوار لقرائة المواضيع وهي اداة جديده قد طرحت سابقا في بلوجر بشكل فعلي من لوحة التحكم ولكنها لازالت تحتاج الى تطوير لأن مظهرها ليس كما يتطلب من وجهة نظري في كل حالات لن اطيل بكثير هذي اداة تقوم بنفس الوظيفة ولكن اضافاتها يدوي وبشكل سهل



من التخطيط قم بفتح اداة جافا جديدة واضف الكود التالي 

<style>
.animate { transition: all .5s ease-in-out; }
.thumb {
  float: left;
  height: auto;
  margin: 0 10px 10px 0;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
  font: 1em/1.2em Segoe UI, sans-serif;
}
.thumb .link {
  display: block;
  position: relative;
  overflow: hidden;
  width: 320px; height: 180px;
}
.thumb .image {
  position: absolute;
  width: 100%;
}
.thumb .blend {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  font-weight: normal;
  background: rgba(91, 160, 239,0.8);
  color: #fff;
  transition-duration: .4s;
}
.thumb .head {
  height: 1.2em;
  padding: 10px;
  margin: 0;
  display: block;
  font-weight: normal;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
}
.thumb .text {
  display: none;
  position: relative;
  overflow: hidden;
  height: 8.5em;
  padding: .5em 10px;
  font-size: .7em;
}
.thumb .link:hover .image {
  left: -125%; top: -125%;
  width: 300%;
}
.thumb .link:hover .blend {
  height: 100%;
}
.thumb .link:hover .text {
  display: block;
}
</style>
<div class="thumb">
  <a href="رابط الموضوع" class="link">
    <img src="https://dl.dropbox.com/u/97962632/some.jpg" class="image animate" />
    <span class="blend animate">
      <strong class="head">عنوان التدوينة</strong>
      <span class="text">
تفاصيل عن التدوينة المميزه
      </span>
    </span>
  </a>
</div>


ملاحضة لا يسمح بنقل الموضوع من دون ذكر مصدر 
الاشتراك في: الرسائل (Atom)