اخر المواضيع

آخر الأخبار
إختر لونك المفضل

عرض المحتوي

بحث
‏إظهار الرسائل ذات التسميات htm - css - js. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات htm - css - js. إظهار كافة الرسائل

الجمعة، 16 أكتوبر 2026

برمجه ويب واجهه خفيفه عرض الصوت والصور والمواقع ومقالات بلا قاعده pm3-sorh-mk-moke-4

السفراني | أكتوبر 16, 2026 | لا يوجد تعليقات !

الخدمه فقط ل content.js
نسخه غير مطوره بس ممتازه وتحكم بمزاجك
1- عرض الصوتيات
2- عرض الصور
3- عرض المواقع
4- عرض مقالات

برمجه ويب واجهه خفيفه عرض الصوت والصور والمواقع ومقالات بلا قاعده pm3-sorh-mk-moke-4

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

السبت، 22 فبراير 2025

Hayef-makia-1 معرض صور مميز وعداد يخرج كم صوره

السفراني | فبراير 22, 2025 | لا يوجد تعليقات !

الويب


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ar" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>معرض الصور</title>
<link rel="stylesheet" href="styles-hayef-soer.css">
</head>
<body>
<header>
<h1>معرض الصور</h1>
<nav>
<ul>
<li><a href="#">الصفحة الرئيسية</a></li>
<li><a href="#">المعرض</a></li>
</ul>
</nav>
</header>

<main>
<div id="gallery">
<!-- صور الاحتياطية -->
<img src="maeppne-1.jpg" alt="صورة 1" data-caption="نبذة عن الصورة 1">
<img src="maeppne-2.jpg" alt="صورة 2" data-caption="نبذة عن الصورة 2">
<img src="maeppne-3.jpg" alt="صورة 3" data-caption="نبذة عن الصورة 3">
<img src="saiiiibeah1.png" alt="صورة 4" data-caption="نبذة عن الصورة 4">
<img src="saiiiibeah2.png" alt="صورة 5" data-caption="نبذة عن الصورة 5">
<img src="saiiiibeah3.png" alt="صورة 5" data-caption="نبذة عن الصورة 5">
<img src="saiiiibeah4.png" alt="صورة 5" data-caption="نبذة عن الصورة 5">

<!-- أضف المزيد من الصور هنا -->
</div>
</main>

<div id="lightbox">
<div id="lightbox-content">
<span class="close">&times;</span>
<img id="lightbox-image" src="" alt="">
</div>
</div>

<footer>
<p>تابعنا على الشبكات الاجتماعية:</p>
<div id="social-links">
<a href="#"><img src="facebook.png" alt="Facebook"></a>
<a href="#"><img src="twitter.png" alt="Twitter"></a>
<a href="#"><img src="instagram.gif" alt="Instagram"></a>
</div>
<p id="photo-count">عدد الصور: <span>5</span></p>
</footer>

<script src="styles-hayef-soer.js"></script>
</body>
</html>


الاستايل :
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-left: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

#gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#gallery img {
max-width: 200px;
height: auto;
margin: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

#gallery img:hover {
transform: scale(1.1);
cursor: pointer;
}

#lightbox {
display: none;
position: fixed;
z-index: 999;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
overflow: auto;
}

#lightbox-content {
position: relative;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 90%;
}

#lightbox-image {
max-width: 100%;
max-height: 100%;
}

.close {
color: #fff;
position: absolute;
top: 10px;
right: 25px;
font-size: 36px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}

.close:hover,
.close:focus {
color: #999;
text-decoration: none;
}

footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

#social-links {
margin-bottom: 10px;
}

#social-links a {
margin: 0 5px;
}

#photo-count {
margin-top: 0;
}


الجافا سكربت :
document.addEventListener("DOMContentLoaded", function() {
const photoCount = document.querySelectorAll("#gallery img").length;
document.querySelector("#photo-count span").textContent = photoCount;

const images = document.querySelectorAll("#gallery img");
const lightbox = document.getElementById("lightbox");
const lightboxImage = document.getElementById("lightbox-image");

images.forEach(img => {
img.addEventListener("click", function() {
lightbox.style.display = "flex";
lightboxImage.src = this.src;
});
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", function() {
lightbox.style.display = "none";
});

lightbox.addEventListener("click", function(event) {
if (event.target === lightbox) {
lightbox.style.display = "none";
}
});
});

وسلامتكم ويوجد استايل وتطوير افضل

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

السبت، 5 أكتوبر 2024

أخبر صديقك عن الصفحة Tell a friend about the page

السفراني | أكتوبر 05, 2024 | لا يوجد تعليقات !
إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

أضع موقعك بلا شروط I put your site without conditions

السفراني | أكتوبر 05, 2024 | لا يوجد تعليقات !

قريبا

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

اضف مقاله وبدون تسجيل Add an article without registration

السفراني | أكتوبر 05, 2024 | لا يوجد تعليقات !

المثال

http://camel-carry-arab.atwebpages.com/HaYeF5-NeseaR3/index.html

تنزيل
https://top4top.io/downloadf-320035ouz1-rar.html
https://files.fm/u/586c7enkg4
الملفات المشروع
1- articles.csv
2- scripts
3- styles
4- index
5- صور

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

علم الدولة لزائر State flag for visitor برمجه ويب

السفراني | أكتوبر 05, 2024 | لا يوجد تعليقات !

كيفية الاستخدام
أنشئ ملف HTML (مثل index.html) وضع فيه كود HTML
أنشئ ملف CSS (مثل styles.css) وضع فيه كود CSS
أنشئ ملف JavaScript (مثل script.js) وضع فيه كود JavaScript
افتح ملف index.html في المتصفح
ملاحظات
تأكد من أنك متصل بالإنترنت لأن الكود يستخدم خدمات خارجية للحصول على معلومات الموقع وعلم الدولة

الكود لـ styles.css

body {
font-family: Arial, sans-serif;
text-align: center;
}

.flag img {
width: 150px;
height: auto;
}

الكود لـ script.js
// استخدم واجهة برمجة التطبيقات للحصول على معلومات الموقع
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
const countryCode = data.country.toLowerCase(); // رمز الدولة
const flagUrl = `https://restcountries.com/v3.1/flags/${countryCode}.svg`;

const flagContainer = document.getElementById('flag');
const img = document.createElement('img');
img.src = flagUrl;
img.alt = `علم ${data.country_name}`;

flagContainer.appendChild(img);
})
.catch(error => {
console.error('Error fetching data:', error);
});

الكود لـ index.html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>علم الدولة الزائر</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>علم دولتك</h1>
<div id="flag" class="flag"></div>

<script src="script.js"></script>
</body>
</html>

تم تطويره : script.js تم تعديل الرابط على مجلد
بس عليك تغير اعلام الدول 
من Kuwait
الى حرفين
kw
وتم تعديل صيغه الصوره الى
gif

// استخدم واجهة برمجة التطبيقات للحصول على معلومات الموقع

fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
  const countryCode = data.country.toLowerCase(); // رمز الدولة
  
  // تعديل رابط العلم إلى مجلد "flags" واستخدام اسم الدولة بالكامل
  const flagUrl = `flags/${countryCode}.gif`;

  const flagContainer = document.getElementById('flag');
  const img = document.createElement('img');
  img.src = flagUrl;
  img.alt = `علم ${data.country_name}`;

  flagContainer.appendChild(img);
})
.catch(error => {
  console.error('Error fetching data:', error);
});
وسلامتكم
إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

الجمعة، 26 يوليو 2024

ماشر الساحر بالالوان على الكتابه js و css

السفراني | يوليو 26, 2024 | لا يوجد تعليقات !

 HTML



<link rel="stylesheet" href="milinn-style-css.css" type="text/css" />

</head>

<body>

<p align="center">HaYeF N 101 KuwaiT

<div id='sparkler'></div></p>

<script async src="milinn-js.js"></script>

</body>

</html>


CSS


html {

  cursor: none;

  font-family: system-ui;

  display: grid;

  place-items: center;

  min-height: 100vh;

  user-select: none;

}

body {

  background: black;

  overflow: hidden;

  color: white;

  --color-spark: peru;

}


#sparkler {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 1px;

  height: 1px;

  transform: rotate(-25deg);

  border-radius: 50%;

  box-shadow: 0 0 2500px 100px var(--color-spark);

}

#sparkler:before {

  content: '';

  width: 10px;

  height: 25vh;

  background: linear-gradient(to right, dimgray, silver);

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 1rem;

}

#sparkler:after {

  content: '';

  width: 4px;

  height: 25vh;

  background: linear-gradient(to right, dimgray, gray);

  position: absolute;

  top: calc(25vh - 1px);

  left: 3px;

/*  border-radius: 1rem; */

}


.particle {

  height: 5px;

  border-radius: 50%;

  background: linear-gradient(to right, transparent, var(--color-spark), white, var(--color-spark), transparent);

  box-shadow: 0 0 30px var(--color-spark);

  position: absolute;

  transition: .5s linear;

  z-index: 100;

}



JS


const div = document.querySelector('#sparkler')


function sparkle() {

  var p = document.createElement('div')

  p.className = 'particle'

  p.style.left = div.getBoundingClientRect().x + 'px'

  p.style.top = div.getBoundingClientRect().y + 'px'

  let w = (Math.floor(Math.random() * 30)) + 20

  p.style.width = w + 'vh'

  p.style.transform = 'translateX('+((-1)*(w*.475))+'vh) rotate('+Math.random()*360+'deg)'

  document.body.appendChild(p)

  

  setTimeout(function(){

    let pp = document.querySelectorAll('.particle')[0]

    pp.remove() 

  }, 256)

}


let shiny = setInterval(sparkle, 16)


window.addEventListener('click', function() {

  let c = 'hsl('+Math.random()*360+'deg, 100%, 50%)'

  document.body.style.setProperty('--color-spark', c)

})


window.addEventListener('mousemove', function(e){

  let x = e.clientX,

      y = e.clientY

  

  div.style.left = x + 'px'

  div.style.top = y + 'px'

})

وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

الوان متحركه حول اي كتابه HaYeF N 101 KuwaiT css

السفراني | يوليو 26, 2024 | لا يوجد تعليقات !

 يمكنك ربطها باي ويب او برمجه اخره

<link rel="stylesheet" href="zaear-style-css.css" type="text/css" />

والتكوين يكون

<body>


<button>

  <div>

    HaYeF N 101 KuwaiT


  </div>

</button>

</script>


</body>

</html>

وكود css

@property --border-angle-1 {

  syntax: "<angle>";

  inherits: true;

  initial-value: 0deg;

}


@property --border-angle-2 {

  syntax: "<angle>";

  inherits: true;

  initial-value: 90deg;

}


@property --border-angle-3 {

  syntax: "<angle>";

  inherits: true;

  initial-value: 180deg;

}



:root {

  --bright-blue: rgb(0, 100, 255);

  --bright-green: rgb(0, 255, 0);

  --bright-red: rgb(255, 0, 0);

  --background: black;

  --foreground: white;

  --border-size: 2px;

  --border-radius: 0.75em;

}


@supports (color: color(display-p3 1 1 1)) {

  :root {

    --bright-blue: color(display-p3 0 0.2 1);

    --bright-green: color(display-p3 0.4 1 0);

    --bright-red: color(display-p3 1 0 0);

  }

}


@keyframes rotateBackground {

  to { --border-angle-1: 360deg; }

}


@keyframes rotateBackground2 {

  to { --border-angle-2: -270deg; }

}


@keyframes rotateBackground3 {

  to { --border-angle-3: 540deg; }

}


body {

  background: var(--background);

  color: var(--foreground);

  min-height: 100dvh;

  display: grid;

  place-content: center;

  margin: 0;

  font-family: "Aspekta";

}


button {

  --border-angle-1: 0deg;

  --border-angle-2: 90deg;

  --border-angle-3: 180deg;

  color: inherit;

  font-size: calc(0.8rem + 4vmin);

  font-family: inherit;

  border: 0;

  padding: var(--border-size);

  display: flex;

  width: max-content;

  border-radius: var(--border-radius);

  background-color: transparent;

  background-image: conic-gradient(

      from var(--border-angle-1) at 10% 15%,

      transparent,

      var(--bright-blue) 10%,

      transparent 30%,

      transparent

    ),

    conic-gradient(

      from var(--border-angle-2) at 70% 60%,

      transparent,

      var(--bright-green) 10%,

      transparent 60%,

      transparent

    ),

    conic-gradient(

      from var(--border-angle-3) at 50% 20%,

      transparent,

      var(--bright-red) 10%,

      transparent 50%,

      transparent

    );

  animation: 

    rotateBackground 3s linear infinite,

    rotateBackground2 8s linear infinite,

    rotateBackground3 13s linear infinite;

}


button div {

  background: var(--background); 

  padding: 1em 1.5em;

  border-radius: calc(var(--border-radius) - var(--border-size));

  color: var(--foreground);

}


@font-face {

  font-family: "Aspekta";

  font-weight: normal;

  src: url("https://assets.codepen.io/240751/Aspekta-300.woff2") format("woff2");

}

وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

كود visitorCount بصيغه js عدد

السفراني | يوليو 26, 2024 | لا يوجد تعليقات !

 وضع الكود تحت

<body>

    <p> أنت الزائر رقم  <span id="visitorCount">0</span>HaYeF5</p>

وضع الكود ل js

</body>

فوقه

    <script src="visitorCounterHayef.js"></script>

لفاهمين يسهل عليهم التطبيق وهذا الكود

// فحص وتحديث عدد الزوار

let count = localStorage.getItem('visitorCount') || 0;

count++;

localStorage.setItem('visitorCount', count);

document.getElementById('visitorCount').textContent = count;

وسلامتكم


إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

السبت، 20 يوليو 2024

خدمات بالصور Free HTML Website Templates htmlcodex

السفراني | يوليو 20, 2024 | لا يوجد تعليقات !

 فيه مجاني وفيه مدفوع

https://htmlcodex.com/

ممتاز

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

السبت، 29 يونيو 2024

لمواقع كود جافا سكربت كشف عدد صفحات الموقع تلقائي

السفراني | يونيو 29, 2024 | لا يوجد تعليقات !

 يمكنك استخدام JavaScript للقيام بذلك. يمكنك استخدام document.getElementsByTagName('a') للعثور على جميع الروابط في الصفحة ثم استخدام filter لتصفية الروابط الداخلة إلى الموقع الحالي، ثم يمكنك العد من الروابط المتبقية. إليك مثال بسيط:


// احصل على جميع الروابط في الصفحة

var allLinks = document.getElementsByTagName('a');

// تحديد الروابط الداخلة إلى الموقع الحالي

var internalLinks = Array.prototype.filter.call(allLinks, function(link) {

    return link.href.indexOf(window.location.hostname) !== -1;

});

// عدد الروابط الداخلة

var numberOfInternalLinks = internalLinks.length;

console.log("عدد الروابط الداخلة إلى الموقع:", numberOfInternalLinks);

تأكد من تضمين هذا الكود داخل <script> في صفحة الويب الخاصة بك. قد لا يكون هذا الكود دقيقًا بنسبة 100% حسب بنية موقعك، لكنه يوفر نقطة انطلاق جيدة


وكيف الرفع "


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>كشف عدد صفحات الموقع</title>

</head>

<body>


<script>

// احصل على جميع الروابط في الصفحة

var allLinks = document.getElementsByTagName('a');


// تحديد الروابط الداخلة إلى الموقع الحالي

var internalLinks = Array.prototype.filter.call(allLinks, function(link) {

    return link.href.indexOf(window.location.hostname) !== -1;

});


// عدد الروابط الداخلة

var numberOfInternalLinks = internalLinks.length;


console.log("عدد الروابط الداخلة إلى الموقع:", numberOfInternalLinks);

</script>


</body>

</html>

كيفية الرفع:

قم بفتح محرر نصوص مثل Notepad++ أو Visual Studio Code

انسخ الكود السابق والصقه في ملف جديد

احفظ الملف باسم "index.html"

قم برفع الملف "index.html" إلى خادم الويب الخاص بك باستخدام أي برنامج نقل ملفات FTP أو عبر لوحة التحكم في الاستضافة

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

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

الخميس، 30 مايو 2024

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

السفراني | مايو 30, 2024 | لا يوجد تعليقات !

المثال شاهد

http://hayef.getenjoyment.net/makia.html

عمل صفحه ويب ب HTML CSS Javascript يقبل جميع الاجهزه والجوالات وتنسيق باستايل جميل بقائمه بروابط التنقل ووضع خانات لصور مقاس 100 وتحته اسم الصوره وفتحها فرعي


كود الويب :

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>معرض الصور</title>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <header>

    <h1>معرض الصور</h1>

    <nav>

      <ul>

        <li><a href="#">الصفحة الرئيسية</a></li>

        <li><a href="#">المعرض</a></li>

      </ul>

    </nav>

  </header>

  

  <main>

    <div id="gallery">

      <!-- صور الاحتياطية -->

      <img src="placeholder.jpg" alt="صورة 1" data-caption="نبذة عن الصورة 1">

      <img src="placeholder.jpg" alt="صورة 2" data-caption="نبذة عن الصورة 2">

      <img src="placeholder.jpg" alt="صورة 3" data-caption="نبذة عن الصورة 3">

      <img src="placeholder.jpg" alt="صورة 4" data-caption="نبذة عن الصورة 4">

      <img src="placeholder.jpg" alt="صورة 5" data-caption="نبذة عن الصورة 5">

      <!-- أضف المزيد من الصور هنا -->

    </div>

  </main>


  <footer>

    <p>تابعنا على الشبكات الاجتماعية:</p>

    <div id="social-links">

      <a href="#"><img src="facebook-icon.png" alt="Facebook"></a>

      <a href="#"><img src="twitter-icon.png" alt="Twitter"></a>

      <a href="#"><img src="instagram-icon.png" alt="Instagram"></a>

    </div>

    <p id="photo-count">عدد الصور: <span>5</span></p>

  </footer>


  <script src="script.js"></script>

</body>

</html>

كود الجافا سكربت :

document.addEventListener("DOMContentLoaded", function() {

  const photoCount = document.querySelectorAll("#gallery img").length;

  document.querySelector("#photo-count span").textContent = photoCount;

});

كود الاستايل :

body {

  font-family: Arial, sans-serif;

  margin: 0;

  padding: 0;

}


header {

  background-color: #333;

  color: #fff;

  padding: 20px;

  text-align: center;

}


nav ul {

  list-style-type: none;

  padding: 0;

}


nav ul li {

  display: inline;

  margin-left: 20px;

}


nav ul li a {

  color: #fff;

  text-decoration: none;

}


main {

  padding: 20px;

}


#gallery {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}


#gallery img {

  max-width: 100%;

  height: auto;

  margin: 10px;

  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease;

}


#gallery img:hover {

  transform: scale(1.1);

}


footer {

  background-color: #333;

  color: #fff;

  padding: 20px;

  text-align: center;

}


#social-links {

  margin-bottom: 10px;

}


#social-links a {

  margin: 0 5px;

}


#photo-count {

  margin-top: 0;

}

وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

حركه تجميليه شاهدها

السفراني | مايو 30, 2024 | لا يوجد تعليقات !

الويب HTML

<div class="ribbon">
<span>صفحات</span>
<span>هايف</span>
<span>ترحب بكم</span>
</div>


الاستايل CSS

<style>

body,html{
height:100%;
width:100%;
background:#45b0ff;
position:absolute;
box-shadow:inset 0 0 250px #002c67;
}
.ribbon{
margin: 150px auto;
width:250px;
position:relative;
}
.ribbon span{
display: block;
/* background:red;*/
font-family:verdana;
font-weight:900;
font-size:30px;
color:#0058a3;
padding-top:30px;
line-height: 0;
text-align: center;
margin-bottom:10px;
/*transform*/
-webkit-transform:skew(-10deg) rotate(-10deg);
-moz-transform:skew(-10deg) rotate(-10deg);
-ms-transform:skew(-10deg) rotate(-10deg);
-o-transform:skew(-10deg) rotate(-10deg);
transform:skew(-10deg) rotate(-10deg);
}
.ribbon span:after{
content:"";
height:60px;
display:block;
background:#fcfcfc;
position:relative;
top:-30px;
z-index:-10;
}
.ribbon span:before{
content:"";
width:225px;
height:60px;
background:#0058a3;
position:absolute;
top:51px;
left:12px;
display:block;
/*transform*/
-webkit-transform:skew(25deg) rotate(25deg);
-moz-transform:skew(25deg) rotate(25deg);
-ms-transform:skew(25deg) rotate(25deg);
-o-transform:skew(25deg) rotate(25deg);
transform:skew(25deg) rotate(25deg);
z-index:-20;
}

.ribbon span:last-child:before{
display:none;
}
.ribbon:before{
content:"";
width:0;
height:0;
border:29px solid #fcfcfc;
border-right-color:transparent;
/*transform*/
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
transform:rotate(-10deg);
position:absolute;
top:-24px;
right:-50px;
}
.ribbon:after{
content:"";
width:0;
height:0;
border:29px solid #fcfcfc;
border-left-color:transparent;
/*transform*/
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
transform:rotate(-10deg);
position:absolute;
bottom:6px;
left:-50px;
}

.byline{
text-align:center;
font-size:18px;
}
.byline a{
text-decoration:none;
color: #1f5350;
}
<style>

ونتابع كيفيت اضافتها بالبلوجر

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

تم عرض هذه الصفحة بعداد المشاهده

السفراني | مايو 30, 2024 | لا يوجد تعليقات !

 برمجه خفيفه بامر HTML و JavaScript

 
 ملفين فقط
 1- سم ما تحب لـ (.js) كوده
 // فحص وتحديث عدد المشاهدات
 let views = localStorage.getItem('pageViews') || 0;
 views++;
 localStorage.setItem('pageViews', views);
 document.getElementById('pageViews').textContent = views;
 2- سم ما تحب لـ (.html) كوده
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="ar" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title> عداد مشاهدات الصفحة </title>
 </head>
 <body>
 <h1> مرحبا بكم في موقع الويب الخاص بي </h1>
 <p> لقد تم عرض هذه الصفحة <span id="pageViews">0</span> المشاهده </p>
 <!-- تضمين ملف JavaScript -->
 <script src="pageViewsCounterHayef.js"></script>
 </body>
 </html>
 وسلامتكم
إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

السبت، 17 فبراير 2024

كيف تربط ملف js

السفراني | فبراير 17, 2024 | لا يوجد تعليقات !

 1- هذا اذا حاب تحطه بويب (.html)

وفوق

</body>

هذا يكون الكود

<script src="js/script.js"></script>

التغير :

js/script.js

هذا يكون اذا حاطه في مجلد يكون

js

وهذا اسم الملف ويمكنك تغيره

script.js

والصيغه ما تتغير

.js

2- اذا حاب تضيفه في البلوجر مثلا فقط

تتاكد انه في رابط الانترنت وشغال تنسخ الرابط

<script src="مكان الرابط"></script>

وفوق

</body>

تنبيه الصيغه لملف يتحول لـ min

وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

كيف تربط ملف css

السفراني | فبراير 17, 2024 | لا يوجد تعليقات !

 1-اذا حاب تحطه بويب (.html)

وفوق

</head>

هذا هذا  يكون الكود

<script src="css/style.css"></script>

التغير :

css/style.css

هذا يكون اذا حاطه في مجلد يكون

css

وهذا اسم الملف ويمكنك تغيره

style.css

والصيغه ما تتغير

.css

2- اذا حاب تضيفه في البلوجر مثلا فقط

تتاكد انه في رابط الانترنت وشغال تنسخ الرابط

<link href="مكان الرابط" rel="stylesheet">

وفوق

</head>

والتشغيل بالويب كمشاهده :

HTML

<style>

بالنصف تضع الاكواد CSS

<style>

وسلامتكم


إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

كود تحويل بعدد

السفراني | فبراير 17, 2024 | لا يوجد تعليقات !

 يمكنك تحطه باي نوعه من البرمجه

<form name="redirect">

<p align="center">

<input type="text" size="1" name="redirect2">

<script>

var targetURL="https://www."   //  الموقع اللى سيتم التوجه اليه

var countdownfrom=20 // عدد الثوانى

var currentsecond=document.redirect.redirect2.value=countdownfrom+1

function countredirect(){

if (currentsecond!=1){

currentsecond-=1

document.redirect.redirect2.value=currentsecond

}

else{

window.location=targetURL

return

}

setTimeout("countredirect()",1000)

}

countredirect()

</script>

غير

https://www.

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

الجمعة، 5 يناير 2024

بلا برامج شاهد الاكواد قبل التصميم Test your JavaScript CSS HTML

السفراني | يناير 05, 2024 | لا يوجد تعليقات !

البحث في قوقل عن

Test your JavaScript CSS HTML
او
HTML CSS JavaScript - Free Online Editors and Tools
مواقع البرمجه التى تسمح لك ..
في وضع الاكواد كل من !
1- الويب HTML
2- الجافا سكربت js - JavaScript
3- اس سي سي CSS
وهذي مجموعه : ويفضل التسجيل عندهم لخدمات اكثر
https://jsfiddle.net/
https://codepen.io/pen/
https://codepal.ai/live-webpage-generator
https://html-css-js.com/
https://onecompiler.com/
وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

السبت، 16 ديسمبر 2023

تطبيق شرح الرموز اللتى بصور وهي برمجيه وتطبيق CSS الى htm لمشاهده

السفراني | ديسمبر 16, 2023 | لا يوجد تعليقات !

 الموقع تختار ما يناسبك كما بالصور راح يعطيك عده اوامر مثلا

1- config.json
او تحمل الملف وهو الافضل وراح تجد ملفات كمثال :
css
font
config.json
demo الويب هو اللى تعدل فيه ويمكنك تسميه اي اسم ومثلا index
عندك هذا الموقع اللى تم التطبيق منه
https://fontello.com/
شاهد الصور المشروحه ...



- حالينا الرموز هذى لم توثق في عالم الانترنت #xe802 فقط موثقه في ملفات البرمجه كما بالصوره fontello3 بالملفات الخاصه لها ورفعها
المقصد في الخدمه للي يبحث عن هذي الرموز في وضعها بالمكان المناسب ونوضح الاكواد الفرديه

<td align="center">
< div class="the-icons span3" title="Code: 0xe802" style="width: 109px; height: 24px"><i class="demo-icon icon-eye">&#xe802;</i> <span class="i-name">المشاهده</span><span class="i-code">0xe802</span></div>
< /td>


هنا حطيت رابط لها في اي برمجه تربطها فيه

<td align="center">
< div class="the-icons span3" title="Code: 0xe802" style="width: 109px; height: 24px"><i class="demo-icon icon-eye">&#xe802;</i> <span class="i-name">المشاهده</span><span class="i-code"><a href="رابط">0xe802</a></span></div>
< /td>



الشرح غير مفهوم بعض الشي للمبتدى بس هو اقرب شي للي ما عنده فكره في عالم البرمجه والرموز ... تطبيق تجريبي : تبخص في التجرب تعرف المعني لطرح :
* هذا الكود اذا حبيت تشاهد التطبيق في الويب كمثال الفرونت بيج .. ويفضل تنشي ملفات لـ js و CSS بربطها بالويب الاندكس لتقدر تشاهد التطبيق بكل سهوله

<html>
< head>
< title></title>
< head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
انتبيه تغير هذا بالبرمجه الخاصه لك
//html5shim.googlecode.com/svn/trunk/html5.js

< style>
ضع كود CSS

< /style><div class="container">
< div id='unknown'>

هنا تضع اكواد الفرونت بيج او اي برمجه واضافه العربيه اتبع الكود index101
</script>
< /body>

< /html>


والناتج الاخير هو رفعها بموقع مجاني او رسمي او تطبيق جوال " شاهد انتاجنا هنا
- كود التعريب بالويب
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

وهذا تطبيق اخــــــــــــــــــــــــر

https://alsafrany.blogspot.com/p/blog-page_71.html
وسلامتكم

إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم :
author

برنامج النوت باد notepad++ الخاص بتحرير التالي Html - php - css - javascript - sql -txt

السفراني | ديسمبر 16, 2023 | | لا يوجد تعليقات !

 تحميل برنامج النوت باد من البرامج الدي يحتاجها الحاسوب بأهمية كبيرة,والبرنامج النوت باد منتشر كتيراً إد لا يكاد يخلى أي حاسوب من تواجد برنامج النوت باد فيه,البرنامج وظيفته لأساسية هي تحرير النصوص و التعديل عليها و من مميزاته :


- دو واجهة سهلة و بعدة لغات من بينها العربية وهنا المصدر
- يدعم أغلب لغات البرمجة ( Html - php - css - javascript - sql ... )
- به ميزة تشفير و فك تشفير بعض لأكواد و كدلك تحويل بعض لأكواد
- إمكانية تجربة الكود على المتصفح
- وعدة مميزات الكتيرة و الرائعة,لأن ننتقل إلى تحميل برنامج النوت باد
المفكرة + +: مصدر محرر مدونة مجانية الذي يدعم العديد من لغات البرمجة التي تعمل تحت بيئة مايكروسوفت ويندوز
Notepad++: a free source code editor which supports several programming languages running under the MS Windows environment
إقرأ المزيد
الكاتب : التاريخ : ليست هناك تعليقات:
عدد المشاهدات لموضوع
القسم : ,
author
الاشتراك في: الرسائل (Atom)