موقع w3schools كيف تجرب خدماته في البلوجر

مشاهدات الان

اعجبني موقع W3Schools اون لاين الويب دروس في تطبيقات البلوجر اقرب مثال قبل رفع اي كود برمجي كمثال JavaScript HTML CSS

https://www.w3schools.com/default.asp

الكود

انتبه لتطبيق كمثال الروابط بالاختلاف للمحترفيه الفهم
http://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
http://www.w3schools.com/css/tryit.asp?filename=trycss_default
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
http://www.w3schools.com/sql/trysql.asp?filename=trysql_select_all
http://www.w3schools.com/php/showphp.asp?filename=demo_intro
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h
وسلامتكم

موقع w3schools كيف تجرب خدماته في البلوجر
التطبيق عده اوامر : الان على
1- الويب : كمثال برنامج الفرونت بيج لمشاهده والتطبيق
2- بالبلوجر التحكم في البرمجه او اضافه جافا سكربت
مثلا هذي الروابط ونشرح التالي والموقع مليه من الخدمات ومواقع اخره مشابهه
الان نشرح رابط وكمثال على المواقع الاخره
https://www.w3schools.com/css/css3_pagination.asp
اذا تبيها بصفحات الويب هذا الكود لرئيه المباشره بلا : تعب والبحث عن برامج معي : صفحات هايف كل شي سهل
+ ما الذي نحتاجه

<!DOCTYPE html>
<html>
<head>
<style>
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>
<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
</body>
</html>

نعدل في الكود كتالي :
1- لاضافته بالبلوجر كمثال
البحث عن
]]></b:skin>
فوقه ضع

ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {color: green;}

البحث عن
</head>
او
<header>
او
</body>
او
<div class='post-header'>
فوقه

<ul class="breadcrumb">
<li><a href="#">الرئيسيه</a></li>
<li><a href="#">صفحات هايف</a></li>
<li><a href="#">تعلم واستفد</a></li>
<li>Italy</li>
</ul>

ويمكنك وضعه في اضافه اداء جافا سكربت بالبلوجر

<head>
<style>
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>
<ul class="breadcrumb">
<li><a href="#">الرئيسيه</a></li>
<li><a href="#">صفحات هايف</a></li>
<li><a href="#">تعلم واستفد</a></li>
</ul>
</body>

وهذي قائمه بسيطه

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary">البرامج</button>
<button type="button" class="btn btn-secondary">الالعاب</button>
<button type="button" class="btn btn-success">الجوال</button>
<button type="button" class="btn btn-info">التصميم</button>
<button type="button" class="btn btn-warning">البرمجه</button>
<button type="button" class="btn btn-danger">جافا سكربت</button>
<button type="button" class="btn btn-dark">دردشات</button>
<button type="button" class="btn btn-light">
<a href="https://sfehthayef.blogspot.com/">ايميلات</a></button>
<button type="button" class="btn btn-warning">مواقع</button>
</div>
</body>