امیرحسین دادگستر

AMIR HOSSEIN DADGOSTAR

امیرحسین دادگستر

AMIR HOSSEIN DADGOSTAR

طبقه بندی موضوعی
آخرین مطالب
پربیننده ترین مطالب
آخرین نظرات
  • ۱۴۰۱/۱۰/۲۹ ۱۴:۲۵:۲۹ - منصور پارسا نژاد
    ...
پیوندها

کد طراحی سایت

🌷کپی متن:با این کد میتوانید متنی که از قبل داخل کادر گذاشته اید را کپی کنید :

<html>
<body>

<input type="text" value="متن اینجا نوشته میشود" id="myInput">
<button onclick="myFunction()">انتخاب</button>

<script>
function myFunction() {
  // Get the text field
  var copyText = document.getElementById("myInput");

  // Select the text field
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile devices

  // Copy the text inside the text field
  navigator.clipboard.writeText(copyText.value);
  
  // Alert the copied text
  alert("Copied the text: " + copyText.value);
}
</script>

</body>
</html>

❌دکمه بازشو(مثلا کدهای صفحات دوره ها را که روی دکمه می‌زنید دوره باز میشه را من با این کدها ایجاد کردم)

<p style="text-align: center;"><button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo4">جزوه آموزشی</button></p><div id="demo4" class="collapse" style="text-align: center;"><div class="alert alert-primary" role="alert"><p style="text-align: center;">فرمت فایل: pdf</p><p style="text-align: center;">حجم فایل: 1m</p><p style="text-align: center;">صفحات: ۳ صفحه</p><p style="text-align: center;"><a href="http://bayanbox.ir/download/2835680581495757404/%D8%B1%D9%88%D8%AE%D9%88%D8%A7%D9%86%DB%8C.pdf"><span style="background-color:#f1c40f;">&nbsp;دانلود pdf </span></a>&nbsp;</p></div></div>

❤️کد های متا( در سایت نمایش داده نمی‌شود اما برای بالا بردن دیده شدن سایت مفید هستند)

<head>
  <meta charset="UTF-8">
  <meta name="description" content="توضیحات">
  <meta name="keywords" content="تگ, تگ, تگ">
  <meta name="author" content="نویسنده">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>مطلب</body>

🌷اسلایدر عکس ساده و جذاب

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">تصاویر برنامه</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="عکس" style="width:100%">
  <img class="mySlides" src="عکس" style="width:100%">
  <img class="mySlides" src="عکس" style="width:100%">
  <img class="mySlides" src="عکس" style="width:100%">
  <img class="mySlides" src="عکس" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button></div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script></body>
</html>

🌷نمایش صفحه وب در سایت:

<p><iframe src="آدرس سایت"style="width:100%"></iframe></p>

نمایش صفحات وب به صورت قالب تلفن:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* The device with borders */
.smartphone {
  position: relative;
  width: 250px;
  height: 500px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone .content {
  width: 100%;
  height: 100%;
  background: white;
}
</style>
</head>
<body>


<div class="smartphone">
  <div class="content">
    <iframe src="d" style="width:100%;border:none;height:100%" />
  </div>
</div>

</body>
</html>

🌷منو پوشاننده صفحه(ظهور از بالا به پائین بسیار شیک):

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">body {
  font-family: 'Lato', sans-serif;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}</style><div id="myNav" class="overlay"><a class="closebtn" href="javascript:void(0)" onclick="closeNav()">×</a><div class="overlay-content"><a href="#">چار</a> <a href="#">سه</a> <a href="#">دو</a> <a href="#">یک</a></div></div><p><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> <script>
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}</script></p>

🌷بلوک رسپانسیو:

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}</style><h2> </h2><div class="row"><div class="column"><div class="card"><h3>سر تیتر</h3><p>مطلب در اینجا خواهد بود</p></div></div><div class="column"><div class="card"><h3>سرتیتر</h3><p>مطلب</p></div></div><div class="column"><div class="card"><h3>تیتر</h3><p>مطلب</p></div></div><div class="column"><div class="card"><h3>تیتر</h3><p>مطلب</p></div></div></div>

🌹محو کلاس از صفحه اصلی و نمایش در صفحات و برعکس:

<check:if index_selected>
متن محو شونده در دیگر صفحات
</check:if>


    <check:if not index_selected>
متن محو شونده در صفحه اصلی
    </check:if>

 

🌹پلیر ساده رسپانسیو با افزایش سرعت

<style type="text/css">audio {
/*border-radius: 90px;*/
width: 100%;
height: 24px;
margin-top: 3px;
margin-bottom: 3px;
}</style><p><audio id="myAudio" controls=""><source type="audio/ogg" src="horse.ogg" /> <source type="audio/mp3" src="https://drive.google.com/uc?id=1Zn9bk57RA230fw2FPBytWwt5iERgBbNw&export=download" /> Your browser does not support the audio element.</audio><br /><button type="button" onclick="setPlaySpeed()">افزایش سرعت</button><script>
var x = document.getElementById("myAudio");
function getPlaySpeed() { 
  alert(x.playbackRate);
} 

function setPlaySpeed() { 
  x.playbackRate = 1.20;
} 
</script></p>

🌹پلیر رسپانسیو 

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"><style type="text/css">audio {
/*border-radius: 90px;*/
width: 100%;
height: 24px;
margin-top: 3px;
margin-bottom: 3px;
}</style><p><audio controls="" autoplay="" name="media"><source type="audio/mpeg" src="لینک مستقیم" /></audio></p>

🌹آی فریم بدون حاشیه و پیشرفته

<iframe src="آدرس سایت" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">درحال  باز کردن</iframe>

🌷جاوا اسکریپت مترجم سایت به زبان های مختلف:

<div id="google_translate_element" style="text-align: center;"> </div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

🌷منو کشویی بازشونده به راست(پوشاننده)بسیار زیبا:

<style type="text/css">body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}</style><div id="mySidenav" class="sidenav"><a class="closebtn" href="javascript:void(0)" onclick="closeNav()">❌</a></p><p></p><p> <a href="#">گزینه</a> <a href="#">گزینه</a> <a href="#">گزینه</a> <a href="#">گزینه</a></div><p><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> <script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script></p>

🌷منو بازشونده به پائین زیبا:

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}</style><h2> </h2><div class="dropdown"><button class="dropbtn">منو بازشونده</button><div class="dropdown-content"><a href="#">مطلب</a> <a href="#">مطلب</a> <a href="#">مطلب</a></div></div>

❤️دکمه رنگی لینک دار عرض 100%

<p><br /><style type="text/css">.button {
  border-radius: 4px;
  background-color: #ADD8E6;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}</style><strong><button class="button"><span><a href="https://ismcj.blog.ir/category/%D9%85%D8%B7%D8%A7%D9%84%D8%A8-%D8%AA%D9%87%D8%B0%DB%8C%D8%A8%DB%8C/"><span style="color:#191970;">مطالب تربیتی و تبلیغی</span></a></span></button></strong></p><p><strong><button class="button"><span><a href="http://tahzib.ismc.ir/index.aspx?siteid=32&amp;fkeyid=&amp;siteid=32&amp;pageid=42121"><span style="color:#191970;">منشور روحانیت امام خمینی ره</span></a></span></button></strong></p><p> </p>

🌷دکمه صفحه لاگین زیبا و بازشونده:

<style type="text/css">body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}


@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}</style><h2> </h2><p style="text-align: center;"><button style="width:auto;" onclick="document.getElementById('id01').style.display='block'">ورود</button></p><div id="id01" class="modal"><form class="modal-content animate" action="%D8%A2%D8%AF%D8%B1%D8%B3%20%D9%BE%D9%88%D8%B4%D9%87" method="post"><div class="imgcontainer"><span class="close" title="Close Modal" onclick="document.getElementById('id01').style.display='none'">×</span> <img alt="Avatar" class="avatar" src="https://bayanbox.ir/download/1951468728153580654/User-Avatar-Transparent.png" /></div><div class="container"><label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username" required="" name="uname" /> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" required="" name="psw" /><button type="submit">Login</button> <label> <input type="checkbox" checked="checked" name="remember" /> Remember me </label></div><div class="container" style="background-color:#f1f1f1"><button type="button" class="cancelbtn" onclick="document.getElementById('id01').style.display='none'">Cancel</button><span class="psw">فراموشی <a href="#">پسورر</a></span></div></form></div><script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

 

🌷ایجاد زیر مجموعه مثل فهرست باز شونده:

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.nested {
  display: none;
}

.active {
  display: block;
}</style><h2> </h2><ul id="myUL"><li><span class="caret">مطلب</span><ul class="nested"><li>مطلب</li><li>مطلب</li><li><span class="caret">مطلب</span><ul class="nested"><li>مطلب</li><li>مطلب</li><li><span class="caret">مطلب</span><ul class="nested"><li>مطلب</li><li>مطلب</li><li>مطلب</li><li>مطلب</li></ul></li></ul></li></ul></li></ul><script>
var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

</script>

🌷جدول مقایسه:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: center;
  padding: 16px;
}

th:first-child, td:first-child {
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}
</style>
</head>
<body>

<h2>Comparison Table</h2>

<table>
  <tr>
    <th style="width:50%">نام و نام خانوادگی</th>
    <th>هفته اول</th>
    <th>هفته دوم</th>
    <th>هفته دوم</th>
  </tr>
  <tr>
    <td>علی دهقان</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>محمد احندی</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>بزرگی</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>کاهش</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
  <tr>
    <td>افزایش</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
  </tr>
</table>

</body>
</html>

🌷جعبه متن رنگی محو شونده:

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}</style><h2> </h2><div class="alert"><span class="closebtn">×</span> <b>علی محمدی فرزند محمد پائین دهی&nbsp;</b></div><div class="alert success"><span class="closebtn">×</span> <strong>Success!</strong> Indicates a successful or positive action.</div><div class="alert info"><span class="closebtn">×</span> <strong>Info!</strong> Indicates a neutral informative change or action.</div><div class="alert warning"><span class="closebtn">×</span> <strong>Warning!</strong> Indicates a warning that might need attention.</div><script>
var close = document.getElementsByClassName("closebtn");var i;

for (i = 0; i < close.length; i++) {
  close[i].onclick = function(){
    var div = this.parentElement;
    div.style.opacity = "0";
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

🌷قالب رنگی دور متن:

<p style="color: red; border-width: 10px; border-style: solid; border-color: olivedrab; text-align: center;">بسم الله الرحمن الرحیم انّا لله و انّا الیه راجعون</p>

🌷ایجاد حاشیه برای متون:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 3px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

🌹قالب خطی رنگی دور متن:

<h3 style="border:2px dashed red;">متن وسط.</h3>

🌷دکمه تمام صفحه کردن سایت یا صفحه:

<style type="text/css">/* Safari syntax */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 */
:-ms-fullscreen {
  background-color: yellow;}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the button */
button {
  padding: 6px;
  font-size: 10px;
}</style><h2> </h2><p style="text-align: center;"><button onclick="openFullscreen();">تمام صفحه</button><button onclick="closeFullscreen();">لغو تمام صفحه</button><script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script></p><p> </p>

🌷حرکت متن از چپ به راست:

<title></title><!-- Styles --><style type="text/css">.example2 {
 height: 100px;	
 overflow: hidden;
 position: relative;
}
.example2 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(-100%);
 -webkit-transform:translateX(-100%);	
 transform:translateX(-100%);
 /* Apply animation to this element */	
 -moz-animation: example2 15s linear infinite;
 -webkit-animation: example2 15s linear infinite;
 animation: example2 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example2 {
 0%   { -moz-transform: translateX(-100%); }
 100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes example2 {
 0%   { -webkit-transform: translateX(-100%); }
}
@keyframes example2 {
 0%   { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 		
 }
 100% { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 
 }</style><!-- HTML --><div class="example2"><h3>ا&nbsp;نسانیت را دوست میداریم چون انسانیت برترین چیز است</h3></div>

🌷عبور تصاویر (راست به چپ):

<marquee behavior="scroll" direction="left">
<img src="//bayanbox.ir/view/34983358652224535/1606235638.jpg" width="125" height="82" alt="Flying Bat">
  <img src="//bayanbox.ir/view/34983358652224535/1606235638.jpg" width="125" height="82" alt="Flying Bat">
  <img src="//bayanbox.ir/view/34983358652224535/1606235638.jpg" width="125" height="82" alt="Flying Bat">
</marquee>

🌷عبور تصویر چپ به راست:

<marquee behavior="scroll" direction="right">
<img src="لینک عکس" width="72" height="79" alt="Flying Bee">
</marquee>

 

🌷قالب های سه رنگ با عنوان:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-info">
<h4>رنیتر</h4>
<p>جدول آبی</p>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">
<h4>سرتیتر</h4>
<p>جدول سبز</p>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning active">
<h4>سرتیتر</h4>
<p>جدول قهوه ای</p>
</a>
</div>

🌷جعبه عکس و متن با دکمه لینک دار:

<style type="text/css">div.polaroid {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}</style><h2> </h2><div class="polaroid"><img alt="Norway" style="width:100%" src="//bayanbox.ir/view/7564258132583444207/images-1.jpeg" /><div class="container"><p><strong>دوره های جذاب روانشناسی</strong>&nbsp;</p><p><a class="btn btn-primary" href="لینک"><span style="color:#2980b9;">مشاهده</span></a></p></div></div>

🌷دکمه های رنگی:

n>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

🌷جعبه نمایش متن رنگی هشت رنگ مختلف:

<div class="alert alert-primary" role="alert">فرم آبی</div>
<div class="alert alert-secondary" role="alert">فرم کرمی</div>
<div class="alert alert-success" role="alert">فرم سبز</div>
<div class="alert alert-info" role="alert">فرم آبی</div>
<div class="alert alert-warning" role="alert">زرد</div>
<div class="alert alert-danger" role="alert">قرمز</div>
<div class="alert alert-light" role="alert">سفید</div>
<div class="alert alert-dark" role="alert">قهوه ای</div>

🌷متن حاشیه دار با حاشیه رنگی:

<style type="text/css">h1 {
  text-shadow: 2px 2px نام رنگ انگلیسی;
}</style><h1>Text-shadow effect!</h1>

🌷نمایش pdf :

<!DOCTYPE html>
<html>
<body>

<object width="100%" height="500px" data="آدرس"></object>
 
</body>
</html>

⬇نمونه:

<!DOCTYPE html>
<html>
<body>

<object width="100%" height="500px" data="لینک مستقیم پی دی اف"></object>
 
</body>
</html>

🌷ظاهر شدن مطلبی در پائین صفحه با کلیک بر دکمه:

<p> </p><p style="text-align: center;"><button onclick="myFunction()">نکته</button></p><div id="snackbar">والله بالله من خسته ام😂</div><script>
function myFunction() {
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script><style type="text/css">#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}</style>

🌷نمایش اعداد تصادفی بین یک تا 100 البته میتونید اعداد را ویرایش کنین:

<p id="msg"> </p><script>
  document.getElementById("msg").innerHTML = Math.floor(Math.random( 1, 100 ) * 100);
</script>

 

🌷ایجاد ماژول:(با کلیک کردن روی دکمه مطلب به صورت کادری بسیار زیبا با عنوان و دوتا دکمه برگشت و ارسال ایمیل نمایش داده می شود،میتوانید ایمیل و تمام متن ها و لینک ایمیل را به باز کردن صفحه و حتی مطلب را به عکس یا پی دی اف یا ویدیو  تغیر دهید)

<p><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#code">لطفا قبل از شروع کردن دوره اینجا کلیک نمائید</button></p><div class="modal fade" id="code" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel"><span style="color:#c0392b;">نکات قابل توجه</span></h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button></div><div class="modal-body">با سلام&nbsp;</div><div class="modal-body">از اینکه به دوره های مجموعه مهتام پیوسه اید خوشحالیم</div><div class="modal-body"><span style="background-color:#f1c40f;">چند نکته را توجه بفرمائید:</span></div><ul><li class="modal-body">بارگذاری پادکست مقدار اندکی زمان لازم دارد</li><li class="modal-body">برای همخوانی pdf با مرورگرتان لازم است درصد عددی پائین آن را تغیر دهید</li><li class="modal-body">در صورتی که مشکلی برایتان رخ داد یا در فایل ها مشکلی وجود داشت&nbsp;با لمس دکمه زیر آن را به ما اطلاع دهید&nbsp;</li></ul><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button><a href="mailto:mahtam.ac@outlook.com?subject=%D9%85%D8%B4%DA%A9%D9%84%20">بیان مشکل</a><p> </p></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

🌷فرم مربع عکس دار متصل به ماژول:(من با این فرم پی دی اف را نشان میدهم،میتوانید به جای پی دی اف عکس یا...نمایش دهید )

<div class="alert alert-danger" role="alert"><div class="card" style="max-width: 100%;"><img class="card-img-top" alt="Photo of sunset" src="آدرس عکس" /><div class="card-body"><p class="card-text" style="text-align: center;">کتاب انسان 250 ساله</p></div><p style="text-align: center;"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#code">مشاهده</button></p><div class="modal fade" id="code" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><p class="modal-title" id="exampleModalLabel"><span style="color:#c0392b;">برای مشاهده بهتر درصد عرض را تغیر دهید.</span></p><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">✖</button></div><div class="modal-body">متن یا کد اچ تی ام ال</div><ul></ul><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button><a href="mailto:mahtam.ac@outlook.com?subject=%D9%85%D8%B4%DA%A9%D9%84%20">&nbsp; گزارش مشکل</a><p> </p></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script></div></div>

🌷ارسال ایمیل با تعیین موضوع و پیام:

<!DOCTYPE html>
<html>
<body>

<a href="mailto:نشانی ایمیل?&subject=موضوع
&body=متن" target="_top">ارسال ایمیل</a>
</p>

</body>
</html>

🌷رفتن به مطلبی در همان صفحه(نشانک)

برای لینک نشانک از این کد استفاده کنید(#a1) لینک نشانک هست که شما میتوانید a1 را تغیر دهید.

<p><a href="#a1">مطلب عشق</a></p>

بعد از این مرحله باید در جایی که میخواهید این کد را بزارید تا با لمس نشانک به مطلب مورد نظر بروید.البته توجه داشته باشید که باید هر نشانکی که در لینک قرار دادید در اینجا هم همان را قرار دهید⬇

<h1 id="a1">عشق</h1>

🌷در صورتی که میخواهید متنی را نمایش دهید که کاربر بعد از مطالعه بتواند آن را محو کند از این کد استفاده کنید:

 <span style="font-size:16px;"><strong><span class="closebtn" onclick="this.parentElement.style.display='none';">×&nbsp;</span>این سایت مختص به کارآموزان میباشد</strong></span></div>

 شما میتوانید به جای مطلب کدی کاربردی دیگر وارد نمائید : مثلا به کد زیر دقت کنید(این کد ساعت ورود شما را ذکر میکند و قابل پنهان شدن هست .

<div class="alert"><span style="font-size:16px;"><strong><span class="closebtn" onclick="this.parentElement.style.display='none';">×&nbsp;</span><h2>ساعت ورود شما</h2><p id="demo"> </p><script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script></strong></span></div>

🌷با این کد به تنهایی میتوانید تاریخ را نمایش دهید:

اگر می‌خواهید جمله ساعت ورود شما را حذف کنید کافیه </h2>ساعت ورود شما<h2> را حذف کنید

<h2>ساعت ورود شما</h2><p id="demo"> </p><script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

🌷جعبه متن زرد ثابت و متن هایی که در او فرو میروند:

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 20px;
  font-size: 20px;
}</style><h2> </h2><div class="sticky">مطلب نمایشی</div><p> </p><p><b>مطلب شما در اینجا واقع میشود</b></p>

🌷کد تازه سازی صفحه:

<p><input type="button" value="تازه سازی صفحه" onclick="document.location.reload(true);" /> <!-- Test the refresh by outputting the time in milliseconds --> <script>
  document.write(new Date().getTime()); 
</script></p>

🌷جعبه نظر و ارسال:

<form action="لینک پوشه پایگاه داده" method="post">
<div>
<textarea name="comments" id="comments" style="font-family:sans-serif;font-size:1.2em;">
نظر
</textarea>
</div>
<input type="submit" value="Submit">
</form>

🌷متن رنگی:

<h3 style="color:نام رنگ به انگلیسی;">متن</h3>

🌷دکمه نویسنده(وقتی روش کلیک کنید متنی که از قبل وارد شده شروع به نوشتن میکنه)

<h1> </h1><p style="text-align: center;"><button onclick="typeWriter()">شروع شود</button></p><p id="demo"> </p><script>
var i = 0;
var txt = 'متن در اینجا واقع میشود';
var speed = 50;

function typeWriter() {  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

🌷شمارش معکوس(به تاریخ میلادی)

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}</style><p id="demo"> </p><script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 12, 2028 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "منقضی شده";
  }
}, 1000);
</script>

🌷: کد بروزرسانی صفحه به صورت خودکار و بدون نمایش هیچ چیزی از زمان و مکان و...:

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

    // Do the automatic refresh
    window.setTimeout(function(){
        document.location.reload(true);
    }, 3500);    

  // Test the refresh by outputting the time in milliseconds
  document.getElementById("timestamp").innerText = new Date().getTime();  
  
});
</script>

🌷قالب متن که هنگام کلیک سایه دار میشه و لینک دار هست:(متن ها و لینک را تغیر دهید)

<script>
function openWin() {
  window.open("http://mahtam313.ir");
}
</script><form><style type="text/css">.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 4px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}</style><h2 style="text-align: center;"><button class="button button2">انسان را انسانیت شرط است</button></h2></form>

🌷قالب تصویری بسیار زیبا(سه نمونه) cod همان کد است:

<style type="text/css">#cod1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(//bayanbox.ir/view/2174473666750457350/Resizer-16244033527630.jpg) 10% round;
}

#cod2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(//bayanbox.ir/view/2174473666750457350/Resizer-16244033527630.jpg) 20% round;
}

#cod3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(//bayanbox.ir/view/2174473666750457350/Resizer-16244033527630.jpg) 30% round;
}</style><h1> </h1><p id="cod1">مطلب داخلی</p><p id="cod2">مطلب داخلی</p><p id="cod3">مطلب داخلی</p>

🌷متا تگ:

<meta name="keywords" content="دوره,دوره علمی,دوره مهتام,دوره مجموعه مهتام">

🌷نکته غیر قابل دید در کد ها(به نفع نویسنده است چون اگر بخواهد کدی را پیدا کند راحت است)

<!--مطلب را در اینجا بنویسید،این مطلب در سایت شما نمایش داده نمیشود -->

🌷ایجاد عکس نوشته در سایت:

<style type="text/css">#example1 {
  background-image: url(//bayanbox.ir/view/678336429316179379/tn-WallpaperGram.IR-1561885686-z20240.jpg), url(//bayanbox.ir/view/678336429316179379/tn-WallpaperGram.IR-1561885686-z20240.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}</style><h1> </h1><div id="example1"><h1>وظیفه ما</h1><p><font color="#1abc9c"><b>آینده ای روشن....</b></font></p><p> </p><p>&nbsp;هدف ما گامی فراتر تا یادگیری آسان می باشد.</p><p>امیدواریم که در این راه خطیر و پر پیچ و خم با همکاری</p><p>اساتید و مراکز علمی مختلف بتوانیم حقیقتا مفید فایده&nbsp;</p><p>برای جامعه ایرآن پهناور باشیم&nbsp;.</p><p><span style="color:#ffffff;"><strong>از طرف جمیع خدمت گذاران شما در مجموعه مهتام</strong></span></p></div>

🌷نمایش تاریخ:

<!DOCTYPE html>
<html>
<body>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
مشاهده تاریخ و تقویم</button>
<p id="demo"></p>
</body>
</html>

 

🌷دکمه بیان مطلب :

نکته: لفظdemoکد دکمه ها هست و باید در هر دکمه در یک صفحه رمز فرق کنه مثلا به جای دمو بنویسید 13

<!DOCTYPE html>
<html>
<body>

<h2>دانشمند کیست؟</h2>

<p id="demo">دانشمند به انسان عالم میگن</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "مثلا شیخ علی معصومی"'>مثال</button>

</body>
</html>

🌷دکمه ادامه مطلب مخفی:

<!DOCTYPE html>
<html>
<body>

<h2>عنوان</h2>

<p>بحث در این است که آیا ما عاشقیم؟</p>

<p id="demo" style="display:none">ادامه مطلب</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">ادآمه</button>

</body>
</html>

🌷فرم نظر زیبا:

<form action="%D8%A7%D8%AF%D8%B1%D8%B3%20%D9%BE%D9%88%D8%B4%D9%87"><textarea name="myTextBox" cols="50" rows="5" style="background-color:#FCF5D8;color:#AD8C08;border:5px double #AD8C08;">مطلب خود را در اینجا بنویسد
</textarea><br /><input type="submit" /> </form>

🌷: اپلود فایل:

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="file" id="myFile" name="filename">
  <input type="submit">
</form>

</body>
</html>

🌷ادامه مطلب:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "این مسئله مسئله ای بسیار مهم است";
}
</script>
</head>
<body>

<h2>مطلب یک</h2>

<p id="demo">حمایت از کاندیدها </p>

<button type="button" onclick="myFunction()">ادامه</button>

</body>
</html>

🌷کم رنگ کردن رنگ ها:

<h3 style="background-color:rgba(0,0,255,1)"><span style="color:#ffffff;">No transparancy</span></h3><h3 style="background-color:rgba(0,0,255,0.5)">Half transparancy</h3><h3 style="background-color:rgba(0,0,255,0.1)">Lots of transparancy</h3>

🌷ایجاد نکته :

<!DOCTYPE html>
<html>

<script>
var txt = "";
function message() {
  try {
    adddlert("Welcome guest!");
  }
  catch(err) {
    txt = "علی";
 if(!confirm(txt)) {
      document.location.href = "http://mahtam313.ir";
    }
  }
}
</script>

<body>

<input type="button" value="نکته مهم" onclick="message()" />

</body>
</html>

🌷جدول رنگ به رنگ

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">مطلب یک</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">طلب دو</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">مطلب سه</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success active">مطلب چار</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">مطلب پنج</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">مطلب شش</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">مطلب هفت</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">مطلب هست</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">مطلب نه</a>
</div>

❌کد صفحه دوره ها

<p style="text-align: center;"><button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo4">توضیحات</button></p><div id="demo4" class="collapse" style="text-align: center;"><div class="alert alert-primary" role="alert"><p style="text-align: center;">از خدای متعال برای شما علم آموز گرامی طلب بهترین درجات مادی و معنوی را خواستاریم</p><p style="text-align: center;">دوره ویژه طلاب سطح یک میباشد</p><p style="text-align: center;">این دوره ربطی به مهارت های پژوهشی نگارش دانشنامه ندارد</p></div></div><p style="text-align: center;"><button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo5">جزوه آموزشی</button></p><div id="demo5" class="collapse" style="text-align: center;"><div class="alert alert-primary" role="alert"><p style="text-align: center;">فرمت فایل: pdf</p><p style="text-align: center;">حجم فایل: 1m</p><p style="text-align: center;">۴صفحه</p><p style="text-align: center;"><a href="http://bayanbox.ir/download/4576587507179762438/%D9%86%DA%AF%D8%A7%D8%B1%D8%B4-%D9%85%D9%82%D8%A7%D9%84%D9%87.pdf"><span style="background-color:#f1c40f;">&nbsp;دانلود pdf </span></a>&nbsp;</p></div></div><p style="text-align: center;"><button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo6">نرم افزار پژوهشی</button></p><div id="demo6" class="collapse" style="text-align: center;"><p style="text-align: center;">برنامه محقق یار&nbsp;</p><p style="text-align: center;"><a target="_blank" href="//bayanbox.ir/view/7109415756952783060/Screenshot-%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B9%DB%B2%DB%B4-%DB%B2%DB%B1%DB%B5%DB%B3%DB%B2%DB%B9"><img style="width: 100px; height: 200px;" src="//bayanbox.ir/view/7109415756952783060/Screenshot-%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B9%DB%B2%DB%B4-%DB%B2%DB%B1%DB%B5%DB%B3%DB%B2%DB%B9.jpg" /></a><a target="_blank" href="//bayanbox.ir/view/6473441867611116413/Screenshot-%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B9%DB%B2%DB%B4-%DB%B2%DB%B1%DB%B5%DB%B5%DB%B4%DB%B5-Samsung-Internet"><img style="width: 100px; height: 200px;" src="//bayanbox.ir/view/6473441867611116413/Screenshot-%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B9%DB%B2%DB%B4-%DB%B2%DB%B1%DB%B5%DB%B5%DB%B4%DB%B5-Samsung-Internet.jpg" /></a><a target="_blank" href="//bayanbox.ir/view/8459061287705001669/Screenshot-%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B9%DB%B2%DB%B4-%DB%B2%DB%B1%DB%B5%DB%B7%DB%B0%DB%B2-Samsung-Internet"><img style="width: 100px; height: 200px;" src="//bayanbox.ir/view/8459061287705001669/Screenshot-%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B9%DB%B2%DB%B4-%DB%B2%DB%B1%DB%B5%DB%B7%DB%B0%DB%B2-Samsung-Internet.jpg" /></a></p><p style="text-align: center;">مجموعه ای از بانک های تحقیق و پژوهش</p><p style="text-align: center;">در این برنامه تمام بانک های علمی و تحت وب که مورد نیاز یک محقق است را جمع کرده ام تا به راحتی به میلیون ها میلیون کتاب و مقاله دسترسی داشته باشید.</p><p style="text-align: center;"><a href="https://bayanbox.ir/download/4352581653911246809/base-1.apk">دانلود برنامه</a>&nbsp;</p></div><p style="text-align: center;"><button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo7">پیوست ها</button></p><div id="demo7" class="collapse" style="text-align: center;"><div class="alert alert-primary" role="alert"><p style="text-align: center;"><a target="_blank" href="//bayanbox.ir/info/886799629499409946/Screenshot-%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B8%DB%B3%DB%B0-%DB%B0%DB%B0%DB%B3%DB%B3%DB%B0%DB%B2-Docs"><img height="1004" width="720" src="//bayanbox.ir/view/886799629499409946/Screenshot-%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B8%DB%B3%DB%B0-%DB%B0%DB%B0%DB%B3%DB%B3%DB%B0%DB%B2-Docs.jpg" /></a></p><p style="text-align: center;"><a target="_blank" href="//bayanbox.ir/info/7036396082538283719/IMG-20201129-195606-860-1"><img height="643" width="450" src="//bayanbox.ir/view/7036396082538283719/IMG-20201129-195606-860-1.jpg" /></a></p></div></div><p style="text-align: center;"><button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo8">دروس</button></p><div id="demo8" class="collapse" style="text-align: center;"><div class="alert alert-primary" role="alert"><p style="text-align: center;"> </p><div class="alert alert-primary" role="alert"><p style="text-align: center;"><style type="text/css">audio {
/*border-radius: 90px;*/
width: 100%;
height: 40px;
margin-top: 5px;
margin-bottom: 4px;
}</style><audio controls="" name="media"><source type="audio/mpeg" src="https://bayanbox.ir/download/267993348841242273/235%D8%AD%D8%B5%D8%B1%DB%8C.mp3" /></audio></p></div></div><div class="alert alert-secondary" role="alert"><p style="text-align: center;">❌</p><p style="text-align: center;"><audio controls="">&nbsp;<source src="https://bayanbox.ir/download/5559335956310471816/%D8%AD%D8%B5%D8%B1%DB%8C-236.mp3" /></audio></p></div><div class="alert alert-success" role="alert"><p style="text-align: center;">❌</p><p style="text-align: center;"><audio controls="">&nbsp;<source src="https://bayanbox.ir/download/54036173139726794/%D8%AD%D8%B5%D8%B1%DB%8C-237.mp3" /></audio></p></div><div class="alert alert-info" role="alert"><p style="text-align: center;">❌</p><p style="text-align: center;"><audio controls="">&nbsp;<source src="https://bayanbox.ir/download/7125172737084619230/%D8%AD%D8%B5%D8%B1%DB%8C-%D8%AD%D9%85%D8%AF.mp3" /></audio></p></div><div class="alert alert-warning" role="alert"><p style="text-align: center;">❌</p><p style="text-align: center;"><audio controls="">&nbsp;<source src="https://bayanbox.ir/download/5358078224133146580/%D8%AD%D8%B5%D8%B1%DB%8C-239.mp3" /></audio></p></div><div class="alert alert-danger" role="alert"><p style="text-align: center;">❌</p><p style="text-align: center;"><audio controls="">&nbsp;<source src="https://bayanbox.ir/download/7244622362918096129/%D8%AD%D8%B5%D8%B1%DB%8C-240.mp3" /></audio></p></div><div class="alert alert-dark" role="alert"><p style="text-align: center;">❌</p><p style="text-align: center;"><audio controls="">&nbsp;<source src="https://bayanbox.ir/download/7125172737084619230/%D8%AD%D8%B5%D8%B1%DB%8C-%D8%AD%D9%85%D8%AF.mp3" /></audio></p></div><p> </p></div><p> </p>

🌷دکمه بازکردن صفحه ای دیگر:(صفحه قبل و بعد،لینک های خارجی،)

<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
  window.open("http://mahtam313.ir");
}
</script>
</head>
<body>

<form>
  <input type="button" value="سایت مهتام" onclick="openWin()">
</form>

🌷دکمه چاپ صفحه:

<!DOCTYPE html>
<html>
<head>
<script>
function printPage() {
  window.print();
}
</script>
</head>
<body>

<input type="button" value="چاپ صفحه 📠" onclick="printPage()" />

</body>
</html>

🌷حرکت متن و سپس توقف در سمت چپ:

<title></title><!-- Styles --><style type="text/css">.example4 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example4 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: left;

 /* Apply animation to this element */	
 -moz-animation: example4 10s ease-out;
 -webkit-animation: example4 10s ease-out;
 animation: example4 10s ease-out;
}
/* Move it (define the animation) */
@-moz-keyframes example4 {
 0%   { -moz-transform: translateX(200%); }
 100% { -moz-transform: translateX(0%); }
}
@-webkit-keyframes example4 {
 0%   { -webkit-transform: translateX(200%); }
 100% { -webkit-transform: translateX(0%); }
}
@keyframes example4 {
 0%   { 
 -moz-transform: translateX(200%); /* Firefox bug fix */
 -webkit-transform: translateX(200%); /* Firefox bug fix */
 transform: translateX(200%); 		
 }
 100% { 
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%); 
 }
}</style><!-- HTML --><div class="example4"><h3>مطلب یک</h3></div><!-- HTML --><div class="example4"><h3>مطلب یک</h3></div>

🌷برش متن روی عکس:

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">body {font-family: Arial, Helvetica, sans-serif;}

.image-container {
  background-image: url("https://bayanbox.ir/download/678336429316179379/tn-WallpaperGram.IR-1561885686-z20240.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}

.text {  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}</style><h2> </h2><div class="image-container"><div class="text">رایگان</div></div>

🌷جدول با نشان آبی:

<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">مطلب اول&nbsp;<span class="badge bg-primary rounded-pill">✅</span></li><li class="list-group-item d-flex justify-content-between align-items-center">مطلب دو&nbsp;<span class="badge bg-primary rounded-pill">✖</span></li><li class="list-group-item d-flex justify-content-between align-items-center">مطلب سه&nbsp;<span class="badge bg-primary rounded-pill">🔳</span></li><li class="list-group-item d-flex justify-content-between align-items-center">مطلب چار&nbsp;<span class="badge bg-primary rounded-pill">🌟</span></li><li class="list-group-item d-flex justify-content-between align-items-center">مطلب پنج&nbsp;<span class="badge bg-primary rounded-pill">⚪</span></li></ul>

🌷جعبه الحاق :

<!DOCTYPE html>
<html>
<body>

<h2>اگر مطلب را فهمیدید روی دکمه کلیک کنید</h2>

<button onclick="myFunction()">دکمه</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  var person = prompt("نام شما چیست؟", "");
  if (person == null || person == "") {
    txt = "User cancelled the prompt.";
  } else {
    txt = "سلام " + person + "حالت خوبه؟" + person+ "کجا میخواهی بروی" + person+ "کجا میخواهی بروی";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

🌷دکمه زمانسنج:

<!DOCTYPE html>
<html>
<body>

<button onClick="setInterval(myCounter, 1000)"> زمانسنج</button>

<p id="demo"></p>

<script>
var c = 0;
function myCounter() {
  document.getElementById("demo").innerHTML = ++c;
}
</script> 

</body>
</html>

 

🌷عکس متن نوشته قالب دار زیبا:

<style type="text/css">#cod1 {
  border: 10px solid black;
  padding: 35px;
  background: url(//bayanbox.ir/view/5027140468583168957/1053500x751-1480251067925186.jpg);
  background-repeat: no-repeat;
}</style><h1> </h1><div id="cod1"><h4>از شما کمال تقدیر و تشکر را داریم</h4><p>بسیار خرسند هستیم که مشتاقانی چون شما در اقیانوس علم سیر میکنید</p><p>امیدواریم استفاده کافی را از مجموعه مهتام ببرید و مراحل والای علم و دانش را طی کنید و در تمام این مراحل موفق باشید</p><p>به جمع دوستدادآن علم در مجموعه علمی تربیتی مهتام خوش آمدید.</p><p> </p><p> </p></div>

🌷نوار پیمایش:

<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-light" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>

🌷نوار پیمایش فانتزی و محرک:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 97%"></div>
</div>

🌷زمانسنج با قابلیت توقف:

<!DOCTYPE html>
<html>
<body>

<button onClick="myTimer = setInterval(myCounter, 1000)">زمانسنج</button>

<p id="demo"></p>

<button onClick="clearInterval(myTimer)">توقف</button>

<script>
var c = 0;
function myCounter() {
  document.getElementById("demo").innerHTML = ++c;
}
</script> 

</body>
</html>

🌷کادر متن متقابل(یعنی روش بزنی میچرخه و یه چی دیگه نشو میده):چرخش عرضی:

مثلا تصویر پائین دور خودش میچرخه و بعد قرمز میشه و یه متن را نشون میده:

<style type="text/css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border: 1px solid 	#800000;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {  background-color: #CD853F;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateX(180deg);
}</style><h1> </h1><div class="flip-box"><div class="flip-box-inner"><div class="flip-box-front"><h2>Front Side</h2></div><div class="flip-box-back"><h2>😂</h2></div></div></div>

🌷کادر متن متقابل چرخش طولی:

<style type="text/css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}</style><h1> </h1><div class="flip-box"><div class="flip-box-inner"><div class="flip-box-front"><h2>Froont Side</h2></div><div class="flip-box-back"><h2>Back Side</h2></div></div></div><style type="text/css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateX(180deg);
}</style><h1> </h1><div class="flip-box"><div class="flip-box-inner"><div class="flip-box-front"><h2>Front Side</h2></div><div class="flip-box-back"><h2>Back Side</h2></div></div></div>

🌷متن حاشیه دار شفاف روشن :

<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>مجموعه علمی مهتام!</h1>

🌷ساعت ساده:

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 1000);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10

🌷کادر عکس دار و دکمه لینک دار زیبا:

<style type="text/css">div.polaroid {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}</style><h2> </h2><div class="polaroid"><img alt="Norway" style="width:100%" src="تصویر" /><div class="container"><p><strong>متن</strong>&nbsp;</p><p><a class="btn btn-primary" href="لینک"><span style="color:#2980b9;">مشاهده</span></a></p></div></div>

🌷کادر مربع متن دار+دکمه لینک دار:

<div class="alert alert-primary" role="alert"><div class="card card-body"><h6 class="card-title"><span style="color:#e74c3c;">آیا&nbsp;به دنبال دسترسی آسان به علوم مختلف هستید اما نمیدانید از کجا و چگونه شروع کنید؟</span></h6><p class="card-title"><span style="color:#2980b9;"><strong>همین الان دکمه زیر را لمس کن و علم آموزی خودتو شروع کن</strong></span></p><a class="btn btn-primary" href="http://mahtam-ac.ir/category/%D8%AA%D9%85%D8%A7%D9%85-%D8%AF%D9%88%D8%B1%D9%87-%D9%87%D8%A7/"><span style="color:#27ae60;">شروع علم آموزی</span></a></div></div>

🌷کادر عکس دار +متن +دکمه لینک دار:

<div class="alert alert-danger" role="alert"><div class="card" style="max-width: 100%;"><img class="card-img-top" alt="Photo of sunset" src="https://s4.uupload.ir/files/header_3euq.jpg" /><div class="card-body"><p class="card-text" style="text-align: center;">درباره تصویر نکاتی در اینجا گفته خواهد شد</p></div><p style="text-align: center;"><strong><a class="btn btn-primary" href="http://mahtam-ac.ir"><span style="color:#2980b9;">مشاهده</span></a></strong></p></div></div>

🌷فرم ارسال اطلاعات:

<!DOCTYPE html>
<html>
<body>

<form action="صفحه ای که اطلاعات به ان ارسال میشود،که باید پایگاه داده داشته باشید">
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" value=""><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value=""><br><br>
  <input type="Submit" value="ارسال">
</form> 
</body>
</html>

🌷دکمه های رادیویی:

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

🌷دکمه چند گزینه ای:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

🌷نمایش ویدیو:

<p><video width="100%" controls=""><source type="video/mp4" src="لینک ویدیو" /></video></p>

🌷پخش صوت از لینک:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="لینک مستقیم ویدیو" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>
</body>
</html>

🌷دکمه شمارشگر:

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "   تعداد کلیک " + localStorage.clickcount + " مرتبه";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button">شمارشگر</button></p>
<div id="result"></div> 

</body>
</html>

🌷شمارشگرِ یک جلسه:

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = " تعداد شمارش  " + sessionStorage.clickcount + " مرتبه است ";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button">شمارشگر</button></p>
<div id="result"></div>
</body>
</html>

 

🌷اگر میخواهید چنین فاصله های خطی ایجاد کنید از این کد استفاده نمائید:

</p><hr>مطلب

🌷🌷نظرات:

<style type="text/css">body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.darker {
  border-color: #ccc;
  background-color: #ddd;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

.container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}</style><h2>Chat Messages</h2><div class="container"><img alt="Avatar" style="width:100%;" src="https://bayanbox.ir/download/3049051901582141562/students-can-make-studying-fun-and-efficient-by-using-memory-tools.jpg" /><p>Hello. How are you today?</p> <span class="time-right">11:00</span></div><div class="container darker"><a target="_blank" href="//bayanbox.ir/info/2679937762740083024/Resizer-16239946711160"><img src="//bayanbox.ir/thumb/2679937762740083024/Resizer-16239946711160.jpg" /></a><p>Hey! I'm fine. Thanks for asking!</p> <span class="time-left">11:01</span></div><div class="container"><a target="_blank" href="//bayanbox.ir/info/7721463101891309270/Resizer-16240064220920"><img src="//bayanbox.ir/thumb/7721463101891309270/Resizer-16240064220920.jpg" /></a><p>Sweet! So, what do you wanna do today?</p> <span class="time-right">11:02</span></div><div class="container darker"><a target="_blank" href="//bayanbox.ir/info/3049051901582141562/students-can-make-studying-fun-and-efficient-by-using-memory-tools"><img src="//bayanbox.ir/thumb/3049051901582141562/students-can-make-studying-fun-and-efficient-by-using-memory-tools.jpg" /></a><p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p> <span class="time-left">11:05</span></div>

🌷متاتگ برای موتور های جستجو:

<title></title><meta name="keywords" content="سامانه شتام, سایت شتام, شتام" /><p> </p>

🌷فرم نظر عریض:

<form action="آدرس مکان ارسال"method="get"><textarea maxlength="100" rows="5" cols="30">متن داخلی</textarea><vid> <input type="submit" /> </vid></form>

 ⭐فرم حاوی نظر فقط:

<form>
    <textarea maxlength="100" rows="5" cols="30">Enter comments here.</textarea>
</form>

🌷نمونه قالب ساده برای سایت:

<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

/* Style the top navigation bar */
.navbar {
  overflow: hidden;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>A website created by me.</p>
</div>

<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" class="right">Link</a>
</div>

<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>
<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

🌷هدر:

<style type="text/css">body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}


.header {
  padding: 10px 100px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}</style><div class="top-container"><h1>وبلاگ هدف</h1></div><div class="header" id="myHeader"><h2>هدر</h2></div><div class="content"><h3>مطالب هدر</h3></div><script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {header.classList.remove("sticky");
  }
}
</script>

🌷ارسال ایمیل(رفتن به صفحه ارسال):

<a target="_top" href="mailto:goftnab@gmail.com"> ارسال ایمیل</a></p>

🌷دکمه نمایش ارسال ایمیل و بازکردن لینک ایمیل:

<p id="demo" style="display:none"><a target="_top" href="mailto:goftnab@gmail.com">با کلیک روی این پیوند به صفحه ارسال ایمیل در موبایل خود خواهید رفت در صورتی که موافقید اینجا کلیک کنید</a></p><p><button type="button" onclick="document.getElementById('demo').style.display='block'">ارسال ایمیل</button></p>

🌷دکمه رنگی بدون عملکرد نمایش نکته:

<p><span style="color:#ffffff;"><span class="badge bg-primary">لطفا تا بارگذاری فرم مقداری صبر نمائید</span></span></p>

🌷جعبه پیمایش متن:

<div style="height:80px;width:150px;overflow:scroll;border:1px solid #0ADA0A;">بسم الله الرحمن الرحیم . به شما خواهم گفت که علم یعنی چه و علم این است که دو را اندر دو ضرب نمائید</div>

🌷لینک دادن به عکس:

<a href="لینک صفحه">
<img src="لینک عکس" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

🌷جستجوگر:با این قالب جستجو میتوانید لینک جستجو را نمایش بدید و همچنین میتونید آدرس پست ها را در سایت جستجو کنید و نمایش بدید.

<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("go");
  
  // Wait for user to click the button
  e.addEventListener("click", function() {
    
    // Get the URL from the user input
    var url = document.getElementById("url").value;
    
    // Do the popup window
    window.open(url,"popUpWindow","height=500, width=100%, left=100, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes");
    
  }, false);
  
});
</script><p><input id="url" value="آدرسی که سرچ میشود" name="url" /> <input id="go" type="button" value="Go" name="go" /></p>

🌷نمایش گیف:

<img src="آدرس گیف" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>

🌷تصویر شناور سمت راست(مقابل متن)

<p>
<img src="لینک مستقیم عکس" alt="Smiley face" style="float:right;width:42px;height:42px;"><p>متن
 </p>

🌷تصویر شناور سمت چپ:

<img src="آدرس عکس" alt="نام عکس" style="float:left;width:42px;height:42px;">متن</p>
</body>
</html>

 

🌹تصویر شناور سمت راست(قالب گرد)

<p><img class="rounded-circle" alt="Sample image" style="float:right;width:42px;height:42px;" src="لینک عکس" /></p><p>&nbsp;متن</p>

🌷تصویر قالب دار گرد:

<img src="لینک عکس" class="rounded-circle" alt="Sample image">

🌷فهرست کلیکی و نمایش جزئیات و رفتن به لینک :

<script>// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the drop down into a variable
  var e = document.getElementById("jumpmenu");
  
  // Wait for user to select an option
  e.addEventListener("change", function() {
  
      // Put the selected value into a variable
      selectedURL = this.options[this.options.selectedIndex].value;
      
      // Check that the value is not null
      if (this.value != "null") {
      
        // Display the confirm box and put the response into a variable
        var confirmLeave = confirm("💡آیا می خواهید این صفحه را ترک نمائید⁉");

        
        // If user clicked "OK"
        if (confirmLeave==true) { 
        
          // Load the selected URL
          document.location.href = selectedURL; 
        }
        // If user clicked "Cancel"
        else { 
          return false;
        }
      }     
      
  });
  
});
</script><form name="navForm" action=""><select name="jumpmenu" id="jumpmenu"><option value="http://mahtam-ac.ir">انتخاب کنید</option><option value="http://mahtam-ac.ir">صفحه اصلی</option><option value="http://mahtam-ac.ir/category/%D8%AA%D9%85%D8%A7%D9%85-%D8%AF%D9%88%D8%B1%D9%87-%D9%87%D8%A7/">تمام دوره ها</option><option value="http://mahtam-ac.ir/category/%DA%A9%D8%B3%D8%A8-%D9%88-%DA%A9%D8%A7%D8%B1/">کسب و کار</option><option value="http://mahtam-ac.ir/category/%D8%AF%D9%88%D8%B1%D9%87-%D9%87%D8%A7%DB%8C-%D8%B1%D9%88%D8%A7%D9%86%D8%B4%D9%86%D8%A7%D8%B3%DB%8C/">روان شناسی</option><option value="http://mahtam-ac.ir/category/%D8%A8%D9%87%D8%AF%D8%A7%D8%B4%D8%AA/">بهداشت</option><option value="http://mahtam-ac.ir/category/%D8%B1%D8%B4%D8%AF-%D8%B4%D8%AE%D8%B5%DB%8C/">رشد شخصی</option><option value="http://mahtam-ac.ir/category/%D8%AF%D9%88%D8%B1%D9%87-%D9%87%D8%A7%DB%8C-%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87/">دوره های مجموعه</option> </select></form>

🌷فرم مشخصات:

<form method="get" enctype="application/x-www-form-urlencoded" action="آدرس پوشه داده">

<p>
<label>نامی
<input type="text" name="customer_name" required>
</label> 
</p>

<p>
<label>تلفن 
<input type="tel" name="phone_number">
</label>
</p>

<p>
<label>ایمیل 
<input type="email" name="email_address">
</label>
</p>

<fieldset>
<legend>شغل شما چیست؟
</legend>
<p><label> <input type="radio" name="taxi" required value=""> مهندس </label></p>
<p><label> <input type="radio" name="taxi" required value=""> مدیر </label></p>
<p><label> <input type="radio" name="taxi" required value=""> معلم </label></p>
</fieldset>

<fieldset>
<legend>مدرک تحصیلی</legend>
<p><label> <input type="checkbox" name="extras" value=""> دیپلم 
</label></p>
<p><label> <input type="checkbox" name="extras" value=""> لیسانس
</label></p>
<p><label> <input type="checkbox" name="extras" value=""> دکتری
</label></p>
</fieldset>

<p>
<label>سن
<input type="datetime-local" name="pickup_time" required>
</label>
</p>
	
<p>
<label>گزینه ها
<select id="pickup_place" name="pickup_place">
<option value="" selected="">یک</option>
<option value="" >سه</option>
<option value="" >دو</option>
<option value="" >چهار</option>
</select>
</label> 
</p>

<p>
<label>متن
<input type="text" name="dropoff_place" required list="destinations">
</label>

<datalist id="destinations">
<option value="Airport">
<option value="Beach">
<option value="Fred Flinstone's House">
</datalist>
</p>

<p>
<label>متن
<textarea name="comments" maxlength="500"></textarea>
</label>
</p>

<p><button>ارسال</button></p>

</form>

 

ابزار طراحی سایت و وبلاگ رایگان

ابزار وبلاگ بدون تبلیغ

ابزار وبلاگ نویسی

ابزار وبلاگ نویسی رایگان

کد برای وبلاگ

کد طراحی سایت

کد طراحی وبلاگ

کد نویسی سایت

کد وبلاگ

یک ابزار

نظرات  (۲)

۱۶ اسفند ۰۰ ، ۱۳:۰۹ مهدی
این کدها را تو سایتای دیگه با تبلیغ میزارن
ممنون که شما بدون تبلیغ و کامل گذاشتین
۰۱ بهمن ۰۰ ، ۱۲:۱۸ ناشناس

عالی

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی
ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم