บทความ

กำลังแสดงโพสต์จาก มิถุนายน, 2021

วิธีเปลี่ยนขนาดภาพ cover header และภาพของ post ของ Theme Soho ใน blogger

 วิธีเปลี่ยนขนาดภาพ cover page ของ Theme Soho วิธีเปลี่ยนขนาดภาพ cover header ของ Theme Soho ใน blogger ไปที่ Theme->Customize->Advanced->Add CSS จากนั้นใส่โค้ดนี้ลงในกล่องโค้ด body.homepage-view .hero-image.has-image { height: 62.5 vw; max-height: 75 vh; min-height: 200 px;  *เปลี่ยนขนาดความสูง-กว้างตามที่ต้องการ width: 100%; } หากต้องการเปลี่ยนขนาดภาพของโพสต์ในบล็อก ให้เพิ่มโค้ดด้านล่างนี้ลงในกล่องโค้ดด้วย .snippet-thumbnail img { width: 100% ; height: 100%   *เปลี่ยนขนาดความสูง-กว้างตามที่ต้องการ } กดปุ่มบันทึก แล้วดูผลลัพธ์

วิธีตั้งค่าให้ Post ในหน้าแรกของ Blogger แสดงเต็มโดยไม่มี Jump Break (Contempo theme)

รูปภาพ
วิธีตั้งค่าให้ Post ในหน้าแรกของ Blogger แสดงเต็มโดยไม่มี Jump Break (Contempo theme)  อยู่ที่หน้าจัดการ Blogger ที่เมนูด้านซ้ายของหน้า ทำดังนี้ 1. ไปเอาการแสดง  Featured Post กับ   Popular Posts ออกก่อน ตามขั้นตอนดังนี้ 1.1 โดยไปที่ Layout 1.2 แล้วไปแก้ไข  Featured Post   gadget  โดยยกเลิกเครื่องหมายหน้าตัวเลือก  Show Featured Post แล้วกด Save 1.3 แล้วไปแก้ไข  Popular Posts   gadget   โดยยกเลิกเครื่องหมายหน้าตัวเลือก  Show  Popular Posts  แล้วกด Save 2. ไปแก้ไขโค้ด ใน Theme  ตามขั้นตอนดังนี้ 2.1 ไปที่  Theme->Edit HTML 2.2 ค้นหาโค้ดนี้  <b:if cond='data:view.isSingleItem'>                 <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom invisible&quot;, overridden: true }' name='maybeAddShareButtons'/>             <b:else/>               <b:include data='post' name='postFooterJumpLink'/>             </b:if> 2.3 แทนที่ด้วยโค้ดนี้ <b:if cond='data:view.isSingleItem'> &

ทำแถบสีเป็นลิงก์(คล้าย nav page) โค้ดยังไม่เรียบร้อย ยังไม่สวย ใช้ html ถ้า css จะทำได้สวยกว่านี้

  <div  style="    background-color: #fff; float: left;     color: black;   text-align: center;   padding: 14px 16px;   font-weight: bold;   font-size: 20px;">   <a style=" padding: 15px; background: #CCFF66;" target="_blank" class="active" href="https://taxiserviceth.blogspot.com/">HOME</a>   <a style=" padding: 15px; background: #99FF66;" target="_blank" href="https://taxiserviceth.blogspot.com/p/blog-page_7.html">พื้นที่บริการ</a>   <a style=" padding: 15px; background: #66FF66;" target="_blank" href="https://taxiserviceth.blogspot.com/p/blog-page_98.html">อัตราค่าบริการ</a>   <a style=" padding: 15px; background: #00FF66;" target="_blank" href="https://taxiserviceth.blogspot.com/p/blog-page_5.html">รูปแบบรถที่มีให้บริการ</a>   <a style=" padding: 15px; background: #00FF33;" targ

แก้ไขส่วนแท็บชื่อเพจในบล็อก customize page tabs blogger

 แก้ไขส่วนชื่อเพจในบล็อก customize page tabs blogger 1.ไปที่หน้า html 2.ค้นหาบรรทัด .tab 3.แก้ไขเส้นรอบกรอบ Tab page  ไปที่บรรทัด  .tabs .selected{ border-bottom:4px solid $(tabs.selected.color)  แก้ไขเส้นบนล่างซ้ายขวา ด้วยการใส่ 0px ลงไปแทน 4px (ไม่เอาขอบ) หรือ #000 (ไม่มีสี) หรือแก้ไขตามที่ชอบ ใส่รหัสสีที่ชอบลงไปแทน

เอาแถบ Nav Blogger แถบนำทางบล็อกที่อยู่ส่วนหัวออกไป

 เอาแถบ Nav Blogger แถบนำทางบล็อกที่อยู่ส่วนหัวออกไป ขั้นตอน  1. ให้ไปที่  Edit HTML  2. ค้นหาโค้ดในหน้า HTML   ]]></b:skin> 3.แล้วใ่ส่โค้ดนี้ลงไปก่อนบรรทัดโค้ดในข้อ 2 /* NAVBAR */ #navbar {opacity:0; filter:alpha(opacity=0);} #navbar:hover {opacity:0.7; filter:alpha(opacity=70);}
รูปภาพ
คำสั่ง aside แทรกข้อมูลในย่อหน้าข้อความเดิม คำสั่งตามภาพ css aside <style> aside {     width: 30%;   padding-left: 15px;   margin-left: 15px;   float: right;   font-style: italic;   background-color: lightgray; } </style> กรณีเพิ่มภาพเข้าไป ขนาดภาพกำหนดให้เหมาะสมกับส่วน aside ดังตัวอย่างด้านล่าง   โค้ดขนาดภาพ height="auto"  width="80%"></aside>

เอาส่วนด้านข้าง (sidebar) ออกจากบล็อก ให้ส่วนโพสต์เต็มหน้า

เอาส่วนด้านข้างออกจากบล็อก ให้ส่วนโพสต์เต็มหน้า ใช้โค้ด    <style> #rsidebar-wrapper { display: none; } #main-wrapper { width: 1000px!important; } </style>        </head>

โค้ดคำสั่ง วางภาพสวยพอดีใน blogger

รูปภาพ
 โค้ดคำสั่ง วางภาพสวยพอดีใน blogger ภาพพอดีหน้าเว็บ  <div class="separator" style="clear: both;">       <span style="color: black; font-family: KoHo; font-size: large;"> <a href=" " style="display: block; padding: 1em 0px; text-align: center;"> <img border="0" data-original-height="618" data-original-width="3706" height="Auto" src=" " width="1000" /> </a>       </span>     </div> ตัวอย่างภาพ

เอาพื้นที่ Navbar and Navbar Space ด้านบน Blogger ออก

รูปภาพ
เอาพื้นที่ Navbar and Navbar Space  ด้านบน Blogger ออก  โดยเพิ่ม Code ด้านล่าง ในส่วน Customize ไปที่ advance เพิ่ม CSS #navbar-iframe {display: none !important;} body .navbar {height:0px;} .content-outer {margin-top:0px;}