วันพฤหัสบดีที่ 30 สิงหาคม พ.ศ. 2561

วิธีเพิ่ม, ลบ, แก้ไขหรือเปลี่ยนจำนวนบทความ หรือโพสหน้าแรกของ blogger.com

1. เข้าหลังบ้านหน้า Admin ของ blogger.com

2.เลือกการตั้งค่า

3.เลือกการตั้งค่าโพสต์ ความคิดเห็น และการแชร์

4.ดูที่หัวข้อบทความ

5.เปลี่ยนจำนวนแสดงสูงสุด



เขียนโดย ที่ ไม่มีความคิดเห็น :
ป้ายกำกับ:

วันพุธที่ 29 สิงหาคม พ.ศ. 2561

วิธีทำให้ข้อความขึ้นบรรทัดใหม่บนมือถือ (Responsive) - การทำเว็บไซต์

ทำได้ง่ายมากครับ โดยเอา tag span คลุมทั้ง 2  element (ค่า default display ของ span คือ inline ครับ เวลาแสดงบนมือถือเราเลยต้องกำหนดเป็น display:block; เพื่อให้ element ขึ้นบรรทัดใหม่) 

ตัวอย่างคร่าวๆนะครับ

<p><span>text บรรทัดแรก</span><span class="new-line">text ที่อยากให้แสดงผลในมือถือขึ้นบรรทัดใหม่</span></p>

และกำหนดให้เมื่อแสดงบนมือถือ ให้แสดงผลเป็น block เช่น

@media only screen and (max-width: 600px) {
.new-line {
      display:block;
}
}

เท่านี้ก็เสร็จเรียบร้อยครับ หากสงสัยสอบถามเพิ่มเติมได้ในเพจเลยนะครับ
เขียนโดย ที่ ไม่มีความคิดเห็น :
ป้ายกำกับ:

วันอังคารที่ 28 สิงหาคม พ.ศ. 2561

วิธีทำเว็บ 2 คอลัมน์ แบบ Responsive (บนมือถือเหลือคอลัมน์เดียว) พร้อมอธิบายโค้ด



























สนใจเข้าไปตามเว็บนี้เลยครับ สอนพร้อมอธิบาย และได้ลองทำให้เห็นภาพด้วย 
https://www.w3schools.com/howto/howto_css_two_columns.asp

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box; /* กำหนดขนาดของ element รวม padding และ border */
}

 /* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

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

 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>

 <h2>Responsive Two Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>

 <div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>

 </body>

</html>

 credit : https://www.w3schools.com/howto/howto_css_two_columns.asp
เขียนโดย ที่ ไม่มีความคิดเห็น :
ป้ายกำกับ:
สมัครสมาชิก: บทความ ( Atom )