≡

شرح كامل لأكواد HTML الخاصه بقوالب مدونات بلوجر - الجزء الأول

قالب بلوجر هو بالأساس عباره عن ملف بإمتداد XML وهو نوع من الملفات التى تحتوى على أكواد HTML و CSS بطريقه مدمجه , فيكون إسم القالب مثلا SIMPLE.XML وهو الملف الذى يتم تحميله ورفعه على مدونتك كى يكسبها شكلا جميلا ومميزا . عند رفع ملف القالب على مدونتك وفتح تحرير HTML سنجد أن القالب عباره عن أكواد مصفوفه بشكل منظم ومرتب , هذه الأكواد لها معنى وكل منها له وظيفه , سنتناول الآن الأكود كل جزء على حدا ولكن عليك أن تفتح قالب مدونتك كى تتابع معنا هذه الأكواد وشكلها فى الواقع . <?xml version="1.0" encoding="UTF-8" ?> وهو الترميز الذى يميز هذا الملف بأنه على لغة XML والذى يخبر المتصفح أن يتعامل مع هذا الملف على هذا النحو . <!DOCTYPE html> <html b:version='2' class='v2' 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'> هذه تك...
صورة

الفرق بين اكواد HTML و CSS و JAVASCRIPT و JQUERY.

-قد يتعجب بعض المدونين المبتدئين من فائدة وجود أكواد تسمى  HTML  وأخرى تسمى  CSS  وأخرى تسمى JAVASCRIPT  وفى الواقع هذا أساس تعلم لغات الويب, لذلك قررت كتابة هذا الموضوع لعرض الفرق بشكل بسيط دون التمادى فى الشرح, لأن الدخول فى صلب كل لغة من اللغات السابقة يتطلب وقت وجهد لشرحه, لذلك سأعتذر من حضراتكم بتأجيل شرح كل لغة على حدة حتى يقوم الفريق بإعداد الكورسات. لنبدأ بأكواد HTML -كلمة  HTML  إختصار لعبارة  H yper  T ext  M arkup  L anguage وذلك لأنها لغة تعتمد بشكل رئيسى على الأوسمة أو  Tags  مثل  <a>  و  <b>  و  <li>  ..... إلخ. -تستخدم أكواد  HTML  لعرض المعلومات, ويراعى فيها الترتيب, فعلى سبيل المثال:إن كنا بصدد إنشاء قائمة فالشئ المسئول عن موضعها هو كود  HTML  . -لنتخيل أن لدينا  "بناء"  فالهيكل عبارة عن أكواد  HTML  والألوان والمظهر عبارة عن أكواد  CSS  ومن هنا نفرق بين اللغتين كالاتى. تصميم قائمة أفقية...
صورة

تغيير شكل إقتباس مدونات بلوجر إلى شكل إحترافى.

السلام عليكم ورحمة الله وبركاته أقدم لحضراتكم اليوم شكل جديد وجذاب غير ما ألفتوه من قبل لإقتباس بلوجر أو ما يسمى  Quot ... والان مع الشرح. لمعاينة الأداة إضغط هنا توجه إلى القالب وقم بالبحث عن  ]]></b:skin> ثم ضع الكود الاتى  فوقه  مباشرةَ blockquote{   display:block;   background:  #fff ;   padding: 15px 20px 15px 45px;   margin: 0 0 20px;   position: relative;   font-family: Georgia, serif;   font-size: 14px;   line-height: 1.2;   color:  #666 ;   -moz-box-shadow: 2px 2px 15px #ccc;   -webkit-box-shadow: 2px 2px 15px #ccc;   box-shadow: 2px 2px 15px #ccc;   border-left-style: solid;   border-left-width: 15px;   border-right-style: solid;   border-color:  ???? ;border-right-width: 2px; } blockquote::before{   content: "\201C";   font-family: Georgia, serif;   font-size: 60px;   font-weight: bold;   color...
صورة

اضافة تأثير اضائة على فيديوهات في بلوجر

السلام عليكم ورحمه الله وبركاته اليوم في هذه تدوينة احضرت لكم كيفية اضافة تأثير اضائة  للفيديوهات في بلوجر حقيقاَ اضافة تجميل ويجعل الفيديو في بلوجر تظهر بشكل  احترافي وجميل  يجعل فيديو يظهر بشكل السينما عندما تضعط على ايقونة  متواجده في اعلى فيديو على يسار  ويمكنك اضائة فيديو على ضغط على نفس ايقونة معاينة اضافة شرح اضافة تأثير اضائة على فيديوهات في بلوجر 1 نتجة الى لوحة تحكم 2 القالب  3 تحرير HTML نبحث عن كود  </head> ونضيف هذا كود فوقة مباشرة  <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#lightsoff").css("height", $(document).height()).hide(); $(".lightSwitcher").click(function(){ $("#lightsoff").toggle(); if ($("#lightsoff").is(":hidden")) $(this).html("Turn off the lights").removeClass("turnedOff"); else $(this).html("Turn on the lights").addClass("turnedOff"); });...
صورة

حصريا اضافة واجهة ترحيبية عند دخول الى مدونة

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد وعلى ال محمد اهلا بكم متابعي مدونة  هاي بلوجر وزوارة الكرام في هذه تدوينة جديدة وحصرية على  مدونة هاي بلوجر  راح نقدم لكم كيفية اضافة واجهة ترحيبية عند دخول الى مدونة احترافي  كما طلب مني احد زائري مدونة هاي بلوجر وقد احضرت لة اضافة  للمعاينة اضافة اضغط هنا شرح تركيب اضافة لوحة تحكم  قالب  تحرير HTML  ابحث عن هذا كود  ]]></b:skin> واضف هذا كود فوقة   /*  CSS Special welcom ebda3 web */  #welcomebox {position:fixed;top:5%;left:50%;width:70%;height:40%;min-height:30%;margin-left:-35%;z-index:1000000;text-align:center;}  #welcomebox p{background:#fff;color:#888;font-family:insan,dkfont,tahoma;font-size:180%;font-weight:700;line-height:1.6em;margin:-5px 0 50px;padding:15px;padding-top:40px;padding-bottom:40px;border-top:60px solid #f35d5c;border-bottom:4px solid #222;transition:all 0.4s linear;} ...
صورة

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

السلام عليكم و رحمة الله و بركاته اهلا زوار و اعضاء مدونة تكنوليبي الكرام , اليوم نقدم لكم اضافة المشاركات الشائعة بشكل جميل لعرض مصغرات الصور فقط بدون ظهور اسم المشاركة أو المقتطف.  معاينة الاضافة  من هنا :  كراك عرب سوف تجد الاضافة في الفوتر  تركيب الاضافة • اولا اذهب الى  التخطيط  ثم  اضافة اداة  ثم  المشاركات الشائعة   و طبق مثل ما في الصورة ثم ا حفظ  الاداة • الان اذهب الى  قالب  ثم  تحرير HTML  و ابحث عن هذا الكود  ]]></b:skin> • ضع تحته هذا الكود :  <style type='text/css'> .PopularPosts .item-title{display:none} .PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent; float: right; list-style:none outside none; margin:10px 0 0 !important; padding:0 !important} .PopularPosts .item-thumbnail{margin:0 8px !important}  .item-thumbnail img{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -...
صورة

اضافة مركز رفع الصور في مدونتك

السلام عليكم ورحمه الله وبركاته  اللهم صلى على سيدنا محمد وعلى اله محمد  اليوم موضوعنه عن كيفية اضافة مركز رفع صور للمدونة طبعا الكود حصري من  هاي بلوجر فقط ونقل بدون ذكر مصدر ممنوع ويدل على فشلك  اول شي تذهب الى لوحه تحكم  تضغط تخطيط تختار اضافة اداة تختار HTML / Java Script تقوم باضافة هذا كود وتضغط حفظ able style= "text-align: left; margin-left: auto; margin-right: auto;" border= "1" cellpadding= "1" cellspacing= "1" width= "70%" > <tbody> <tr> <td style= "text-align: center;" > <center> <div id= "form_upload" > <form action= "http://www.servimg.com/fa_upload.php" enctype= "multipart/form-data" method= "post" name= "upload" > <p class= "champ" style= "text-align: center;" > <input onclick= "switchuploadaddress(true);" checked nam...
صورة

أضافة قائمة بريدية بشكل احترافي من هاي بلوجر

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد وعلى ال محمد اهلا بكم متابعي هاي بلوجر وزوارة الكرام في هذه تدوينة جديدة وحصرية على  هاي بلوجر راح نقدم لكم اضافة احترافية وجميلة وهي اضافة قائمة بريدية احترافية  وجميلة حيث يحتوي على مواقع تواصل اجتماعي وقائمة اشتراك معاينة اضافة. للمعاينة اضافة اضغط هنا  طريقة تركيب لوحة تحكم  قالب  تحرير HTML ابحث عن كود ]]></b:skin> واضف هذا كود فوقة /*---------------الإضافة الأولى--------------------*/ #avdhootblogger{clear:both;background:#E84C3D;color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#avdhootblogger h4{font-size:24px;font-family:GESSTwoMediumRegular;border-bottom:1px solid #746E6E;padding:10px;}#avdhootblogger input[type=text],[type=email],.sl_in_mail{margin-right:-6px;padding:16px 0 16px 40px;width:45%;border:none} #avdhootblogger input[type=submit]{ border-radius: 0; box-shadow: none; padding: 17px 95...
صورة

أضافة سلايدر شو عرب ويب احترافي وحصري ولاول مرة على ويب

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد وعلى ال محمد اهلا بكم متابعي مدونة هاي بلوجر وزوارة الكرام رجعنا لكم بعد غياب  طويل بأول مفاجأه وهي سلايد شو احترافي وحصري  وغير موجود على ويب  ويتميز هذه اضافة بتقنية css احترافي ويمكنك ان تضع سلايد شو في اي مكان تريدة  للمعاينة اضافة اضغط هنا كيفية تركيب الاضافة لوحة تحكم  قالب  تحرير HTML تبحث عن هذا كود </head> وتضع هذا كود فوقة   <style> /* STYLE */ @keyframes columns { from {box-shadow:0 0 0 0 #26C9FF;}   to {box-shadow:0 0 0 20px transparent;} } @-webkit-keyframes columns { from {box-shadow:0 0 0 0 #26C9FF;} to {box-shadow:0 0 0 20px transparent;} } /* Link Hovers */ #latest-news-container a {  color:#000;  text-decoration:none; } #latest-news-container a:hover {  color:#26C9FF; } /* Circular Content Carousel Style */ #latest-news-container {   max-width:1180px;  height:250px;  positio...
صورة

اضافة صندوق الاشعارات والتنبيهات بتقنية css احترافي

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد وعلى ال محمد  اهلا بكم متابعي هاي بلوجر وزوارة كرام في هذا درس جديد وحصري على مدونة هاي بلوجر راح نقدم لكم صندوق الاشعرات والتنبيهات بشكل احترافي وبتقنية css ورائع  وبتصميم رائع css للمعاينة اضغط على صورة شرح طريقة تركيب مباشرة تخطيط اضافة اداة Html/JavaScript واضف كود تالي  <style> #notifjo { right: 10px;  top: 10px;  width: 320px;  height: auto;  overflow: hidden; background: rgba(255,255,255,0.9);  border-radius: 5px;  border: 1px solid #ddd;  z-index: 999999; position: fixed;  -webkit-animation: fadeOutnotif 10s linear forwards;  -moz-animation: fadeOutnotif 10s linear forwards; -o-animation: fadeOutnotif 10s linear forwards; -ms-animation: fadeOutnotif 10s linear forwards; animation: fadeOutnotif 10s linear forwards; } #notifjo a { display:block; text-decoration:none;} #notifjo span { display: block; padding: 15px 15px; pointer-events: no...
صورة
اعلان الهيدر

آخر المشاركات

شاهد المزيد
تغيير شكل إقتباس مدونات بلوجر إلى شكل إحترافى.

تغيير شكل إقتباس مدونات بلوجر إلى شكل إحترافى.

الفرق بين اكواد HTML و CSS و JAVASCRIPT و JQUERY.

الفرق بين اكواد HTML و CSS و JAVASCRIPT و JQUERY.

شرح كامل لأكواد HTML الخاصه بقوالب مدونات بلوجر - الجزء الأول

شرح كامل لأكواد HTML الخاصه بقوالب مدونات بلوجر - الجزء الأول

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

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

اضافة مركز رفع الصور في مدونتك

اضافة مركز رفع الصور في مدونتك

اضافة تأثير اضائة على فيديوهات في بلوجر

اضافة تأثير اضائة على فيديوهات في بلوجر