اعجبني موقع 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>
https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp
ونتابع الجديد