Tip.maxlayout.com

Blender: ตัวอย่างเบื้องต้นการใช้ script

noreply@blogger.com (Max) — Mon, 16 Sep 2019 12:00:00 +0700

step 1.เคลื่่อนย้ายจุด vertices ของวัตถุชื่อ cube
import bpy
bpy.data.objects["Cube"].data.vertices[2].co.x += 1.0

step 2.เคลื่่อนย้ายวัตถุที่เลือกอยู่
import bpy
bpy.ops.transform.translate(value = (0.5,0,0))

step 3.สร้างตารางของวัตถุสี่เหลี่ยม
import bpy #Imports the Blender Python API
import mathutils #Imports Blender vector math utilities
import math #Imports the standard Python math library

#Loop to create a row of cubes
for i in range (0, 10):
for j in range (0, 10):

x = i*3
y = j*3
z = 0

# Create a mesh cube in the scene
bpy.ops.mesh.primitive_cube_add(location=(x, y, z))

refer:
https://www.youtube.com/watch?v=Gj0la2nkvrY
https://www.youtube.com/watch?v=Roc6kt7piJg

Python: กฏการตั้งชื่อตัวแปร และคำสงวนในภาษาไพธอน

noreply@blogger.com (Max) — Wed, 28 Aug 2019 11:23:00 +0700

กฏการตั้งชื่อตัวแปรและคำสงวนในภาษา Python
1. ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษ โดยสามารถตามหลังด้วยตัวอักษรหรือตัวเลขใดๆก็ได้
2. ห้ามเว้นช่องว่าง และห้ามใช้สัญลักษณ์พิเศษนอกเหนือจาก underscore "_" เท่านั้น
3. ตัวอักษรในชื่อต้องคำนึงถึงความแตกต่างระหว่างอักษรตัวพิมพ์ใหญ่กับตัวพิมพ์เล็ก เนื่องจากตัวแปรที่มีพิมพ์ใหญ่และตัวพิมพ์เล็กผสมกันจะมีความหมายต่างกัน กับตัวพิมพ์เล็กเพียงอย่างเดียว
4. ชื่อต้องไม่ซ้ำกับคำสงวน (Reserved word, Keyword)
5. ควรตั้งชื่อโดยให้ความหมายสอดคล้องกับข้อมูล เพื่อให้เข้าใจง่าย
6. ห้ามใช้เครื่องหมายต่อไปนี้ในการตั้งชื่อตัวแปร !,@, #, $, %, ^, &, *, (, ), -, =, \, |, +, ~

คำสงวนในภาษาไพธอน
ภาษาไพธอนก็เหมือนภาษาอื่นที่มีคำสงวนซึ่งห้ามนำไปตั้งชื่อตัวแปร เพราะจะทำให้เกิดข้อผิดพลาด คือ SyntaxError: invalidsyntax โดยคำสงวนสามารถแสดงได้ตามตารางด้านล่างนี้

and	assert	break	class	continue
def	del	elif	else	except
exec	finally	for	from	global
if	import	in	is	lamda
not	or	pass	print	raise
return	try	while	yield

refer: https://www.w3resource.com/python/python-variable.php

Blogger: ลบหรือซ่อนคำว่า "บทความที่ใหม่กว่า หน้าแรก บทความที่เก่ากว่า "

noreply@blogger.com (Max) — Mon, 4 Jan 2016 11:29:00 +0700

วิธีลบให้ข้อความ "บทความที่ใหม่กว่า หน้าแรก บทความที่เก่ากว่า" หายไป (Removing The Newer Post - Home - Older Posts Links From Blogger Blogs) สามารถทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. สั่งค้นหา
]]></b:skin>

ขั้นตอนที่ 3. แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
.blog-pager {display: none;}
]]></b:skin>

ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็เสร็จแล้ว

อธิบายเพิ่มเติม
นอกจากนี้ถ้าต้องการลบคำว่า "สมัครสมาชิก: บทความ (Atom)" ก็สามารถทำได้ตามลิงก์นี้ครับ
http://tip.maxlayout.com/2013/08/blogger-remove-subscribe-to-posts-atom.html

refer: http://blogging.nitecruzr.net/2007/08/removing-newer-post-home-older-posts.html

Blogger: สไลเดอร์รูปภาพแบบหีบเพลงยืดหด

noreply@blogger.com (Max) — Mon, 29 Sep 2014 13:34:00 +0700

วิธีสร้างสไลเดอร์รูปภาพแบบยืดหด (jQuery accordion slider) ซึ่งสามารถปรับการจัดเรียงได้ทั้งเป็นแนวตั้ง (Vertical) และ แนวนอน (Horizontal) สามารถสร่างได้ดังนี้

Step 1.
เข้าสู่เมนูจัดการบล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

Step 2.
กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
</head>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$().ready(function() {
$('#example .kwicks').kwicks({
max : 300,
spacing : 3,
isVertical : true
});
});
</script>
</head>

Step 3.
สั่งค้นหา
]]></b:skin>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}

.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}

#example .kwicks li{
width: 240px;
height: 120px;
margin-bottom: 3px;
}

]]></b:skin>

Step 4.
จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็จะทำให้ javascript และ CSS codes ถูกบันทึกลงในเทมเพลท

Step 5.
เข้าสู่บล็อกของคุณจากนั้นไปที่
'รูปแบบ'
โดยให้กดเลือก
'เพิ่ม Gadget'
แบบ
'HTML/จาวาสคริปต์'

Step 6.
นำโค้ดแบบใดแบบหนึ่งด้านล่างนี้แล้วคัดลอกใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

แบบที่ 1. โชว์ภาพที่ดูได้อย่างเดียว
<div id="example"><ul class="kwicks">
<li id="kwick1"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick2"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick3"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick4"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
</ul></div>

แบบที่ 2. โชว์ภาพที่กดลงไปแล้วเป็นลิงก์ด้วย
<div id="example"><ul class="kwicks">
<li id="kwick1"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title" src="IMAGE_URL"/></li></a>
<li id="kwick2"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title" src="IMAGE_URL"/></li></a>
<li id="kwick3"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title" src="IMAGE_URL"/></li></a>
<li id="kwick4"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title" src="IMAGE_URL"/></li></a>
</ul></div>

ซึ่งตั้งค่าได้ดังนี้
LINK_URL คือ ลิงก์ปลายทางของรูปภาพ
LINK_Title คือ คำอธิบายลิงก์
IMAGE_Title คือ คำอธิบายรูปภาพ
IMAGE_URL คือ ที่ตั้งของรูปภาพ

เพิ่มหรือลดจำนวนลิงก์
ถ้าต้องการเพิ่มลิงก์ก็ทำโดยคัดลอกรูปแบบของลิงก์เดิมแล้วใส่ตัวเลขเพิ่มลงไป
เช่นสร้างเป็น
<li id="kwick5">...
<li id="kwick6">...
<li id="kwick7">...
เขียนเพิ่มต่อไปเรื่อยๆ
แต่ถ้าจะลดจำนวนก็ลบลิงก์ทิ้งไป

ตัวอย่าง

นี่คือตัวอย่างวิธีสร้างเมนูภาพในขั้นตอนที่ 6 ซึ่งต้องผ่านการทำขั้นตอนที่ 1-5 ก่อนจึงจะใทำงานได้ครับ

ตัวอย่างแบบที่ 1 ภาพไม่มีลิงก์
<div id="example"><ul class="kwicks">
<li id="kwick1"><img alt="Singha Myanmar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMANpClxEPKDN70cyXgHWHhpNGSZsvB8PrY-wT1jfnGefmu1wbvhjN4FXkboNSAF6BKRgvOQbilBuwzuenciutzbQ7SjY3aVdDp-uvs2BfhpzbPV3h2mW-COZSz73EzJObDQY8TKWs7SQ/"/></li>
<li id="kwick2"><img alt="Otaru Orgel Museum" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIH5yhP3n9uHtkGCXfNed1AGh4VqJ7ve6LlyzscG_Ykl8vMC5T89RF0Kdwkyx0msIkrZSDpb5BTm6QmpI4cmdDah3KOc3EAd1mEWwjCucqiu9H4n9zPfutf4_gkeAeoon4bZC6lUF8ijE/s400/photoshop-distort-ripple-frame-008.png"/></li>
<li id="kwick3"><img alt="Uni" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqwzinlV0Sd-oS5fTfMkYXFrqUFwKbzKaet2ooEL_Kg_PbmG7S_mUbAkJrC0nlqwOyJDH09VzF1dszIt_L5_RwgSdxNDP3OUceDncyqSubVdoTUA2_f-hyU1Pv3Q3mZ3Wm35iADByH1c/s400/photoshop-feather-frame-contract-selection-006.png"/></li>
<li id="kwick4">"><img alt="Otaru Canal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEine7nwMkqwTqERBK3P25TuM956DcAtQrUr_Kp3P4S_J7JzHAAjMAbK6L7tOSfwwEHCAcAYDXKWIj2ggBNvCaQmJcMUWnAIiy8OqhOThPeZ7aJW7J0Jp7oIjX6MiU5y7xLeX-4MeZP-Swk/s430/photoshop-change-canvas-size-otaru-canal-004.png"/></li>
</ul></div>

ตัวอย่างแบบที่ 2 ภาพมีลิงก์ด้วย
<div id="example"><ul class="kwicks">
<li id="kwick1"><a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html" title="สิงห์พม่า"><img alt="Singha Myanmar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMANpClxEPKDN70cyXgHWHhpNGSZsvB8PrY-wT1jfnGefmu1wbvhjN4FXkboNSAF6BKRgvOQbilBuwzuenciutzbQ7SjY3aVdDp-uvs2BfhpzbPV3h2mW-COZSz73EzJObDQY8TKWs7SQ/"/></li></a>
<li id="kwick2"><a href="http://tip.maxlayout.com/2010/08/photoshop-distort-ripple-frame.html" title="พิพิธภัณฑ์กล่องดนตรีโอตารุ"><img alt="Otaru Orgel Museum" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIH5yhP3n9uHtkGCXfNed1AGh4VqJ7ve6LlyzscG_Ykl8vMC5T89RF0Kdwkyx0msIkrZSDpb5BTm6QmpI4cmdDah3KOc3EAd1mEWwjCucqiu9H4n9zPfutf4_gkeAeoon4bZC6lUF8ijE/s400/photoshop-distort-ripple-frame-008.png"/></li></a>
<li id="kwick3"><a href="http://tip.maxlayout.com/2010/08/photoshop-feather-frame-contract.html" title="ไข่หอยเม่น"><img alt="Uni" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqwzinlV0Sd-oS5fTfMkYXFrqUFwKbzKaet2ooEL_Kg_PbmG7S_mUbAkJrC0nlqwOyJDH09VzF1dszIt_L5_RwgSdxNDP3OUceDncyqSubVdoTUA2_f-hyU1Pv3Q3mZ3Wm35iADByH1c/s400/photoshop-feather-frame-contract-selection-006.png"/></li></a>
<li id="kwick4"><a href="http://tip.maxlayout.com/2010/08/photoshop-change-canvas-size.html" title="คลองโอตารุ"><img alt="Otaru Canal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEine7nwMkqwTqERBK3P25TuM956DcAtQrUr_Kp3P4S_J7JzHAAjMAbK6L7tOSfwwEHCAcAYDXKWIj2ggBNvCaQmJcMUWnAIiy8OqhOThPeZ7aJW7J0Jp7oIjX6MiU5y7xLeX-4MeZP-Swk/s430/photoshop-change-canvas-size-otaru-canal-004.png"/></li></a>
</ul></div>

อธิบายเพิ่มเติม

เกี่ยวกับ Step 2
ขนาดของภาพเมื่อขยายออกมาขณะเอาเมาส์วางไว้เหนือรูปคือ
max : 300

เปลี่ยนการจัดเรียงของสไลด์รูปภาพจากแนวตั้งให้กลายเป็นแนวนอนได้โดยเปลี่ยนจาก
isVertical : true
ให้เป็น
isVertical : false

เกี่ยวกับ Step 3
ขนาดของภาพที่ยังไม่ขยายออกมาคือ
width: 360px;
height: 120px;

Credit: http://www.itechcolumn.com/2012/01/jquery-accordion-vertical-image-slider.html

Unity: ส่งออก Terrian เป็นไฟล์ Obj

noreply@blogger.com (Max) — Fri, 12 Sep 2014 17:51:00 +0700

Step 1.
ใช้ Unity สร้างวัตถุ Terrian ขึ้นมา

Step 2.
ในโฟลเดอร์ "Assets" ให้สร้างโฟลเดอร์ชื่อว่า "Editor" ขึ้นมา

Step 3.
สร้าง C# Script ชื่อว่า "ExportTerrain.cs" ไว้ที่
Assets>Editor>ExportTerrain.cs

Step 4.
แทนที่สคริปต์ของ ExportTerrain.cs ด้วยโค้ดด้านล่างนี้

// Converted from UnityScript to C# at http://www.M2H.nl/files/js_to_c.php - by Mike Hergaarden
// C # manual conversion work by Yun Kyu Choi

using UnityEngine;
using UnityEditor;
using System;
using System.Collections;
using System.IO;
using System.Text;

enum SaveFormat { Triangles, Quads }
enum SaveResolution { Full=0, Half, Quarter, Eighth, Sixteenth }

class ExportTerrain : EditorWindow
{
SaveFormat saveFormat = SaveFormat.Triangles;
SaveResolution saveResolution = SaveResolution.Half;

static TerrainData terrain;
static Vector3 terrainPos;

int tCount;
int counter;
int totalCount;
int progressUpdateInterval = 10000;

[MenuItem("Terrain/Export To Obj...")]
static void Init()
{
terrain = null;
Terrain terrainObject = Selection.activeObject as Terrain;
if (!terrainObject)
{
terrainObject = Terrain.activeTerrain;
}
if (terrainObject)
{
terrain = terrainObject.terrainData;
terrainPos = terrainObject.transform.position;
}

EditorWindow.GetWindow<ExportTerrain>().Show();
}

void OnGUI()
{
if (!terrain)
{
GUILayout.Label("No terrain found");
if (GUILayout.Button("Cancel"))
{
EditorWindow.GetWindow<ExportTerrain>().Close();
}
return;
}
saveFormat = (SaveFormat) EditorGUILayout.EnumPopup("Export Format", saveFormat);

saveResolution = (SaveResolution) EditorGUILayout.EnumPopup("Resolution", saveResolution);

if (GUILayout.Button("Export"))
{
Export();
}
}

void Export()
{
string fileName = EditorUtility.SaveFilePanel("Export .obj file", "", "Terrain", "obj");
int w = terrain.heightmapWidth;
int h = terrain.heightmapHeight;
Vector3 meshScale = terrain.size;
int tRes = (int)Mathf.Pow(2, (int)saveResolution );
meshScale = new Vector3(meshScale.x / (w - 1) * tRes, meshScale.y, meshScale.z / (h - 1) * tRes);
Vector2 uvScale = new Vector2(1.0f / (w - 1), 1.0f / (h - 1));
float[,] tData = terrain.GetHeights(0, 0, w, h);

w = (w - 1) / tRes + 1;
h = (h - 1) / tRes + 1;
Vector3[] tVertices = new Vector3[w * h];
Vector2[] tUV = new Vector2[w * h];

int[] tPolys;

if (saveFormat == SaveFormat.Triangles)
{
tPolys = new int[(w - 1) * (h - 1) * 6];
}
else
{
tPolys = new int[(w - 1) * (h - 1) * 4];
}

// Build vertices and UVs
for (int y = 0; y < h; y++)
{
for (int x = 0; x < w; x++)
{
tVertices[y * w + x] = Vector3.Scale(meshScale, new Vector3(-y, tData[x * tRes, y * tRes], x)) + terrainPos;
tUV[y * w + x] = Vector2.Scale( new Vector2(x * tRes, y * tRes), uvScale);
}
}

int index = 0;
if (saveFormat == SaveFormat.Triangles)
{
// Build triangle indices: 3 indices into vertex array for each triangle
for (int y = 0; y < h - 1; y++)
{
for (int x = 0; x < w - 1; x++)
{
// For each grid cell output two triangles
tPolys[index++] = (y * w) + x;
tPolys[index++] = ((y + 1) * w) + x;
tPolys[index++] = (y * w) + x + 1;

tPolys[index++] = ((y + 1) * w) + x;
tPolys[index++] = ((y + 1) * w) + x + 1;
tPolys[index++] = (y * w) + x + 1;
}
}
}
else
{
// Build quad indices: 4 indices into vertex array for each quad
for (int y = 0; y < h - 1; y++)
{
for (int x = 0; x < w - 1; x++)
{
// For each grid cell output one quad
tPolys[index++] = (y * w) + x;
tPolys[index++] = ((y + 1) * w) + x;
tPolys[index++] = ((y + 1) * w) + x + 1;
tPolys[index++] = (y * w) + x + 1;
}
}
}

// Export to .obj
StreamWriter sw = new StreamWriter(fileName);
try
{

sw.WriteLine("# Unity terrain OBJ File");

// Write vertices
System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
counter = tCount = 0;
totalCount = (tVertices.Length * 2 + (saveFormat == SaveFormat.Triangles ? tPolys.Length / 3 : tPolys.Length / 4)) / progressUpdateInterval;
for (int i = 0; i < tVertices.Length; i++)
{
UpdateProgress();
StringBuilder sb = new StringBuilder("v ", 20);
// StringBuilder stuff is done this way because it's faster than using the "{0} {1} {2}"etc. format
// Which is important when you're exporting huge terrains.
sb.Append(tVertices[i].x.ToString()).Append(" ").
Append(tVertices[i].y.ToString()).Append(" ").
Append(tVertices[i].z.ToString());
sw.WriteLine(sb);
}
// Write UVs
for (int i = 0; i < tUV.Length; i++)
{
UpdateProgress();
StringBuilder sb = new StringBuilder("vt ", 22);
sb.Append(tUV[i].x.ToString()).Append(" ").
Append(tUV[i].y.ToString());
sw.WriteLine(sb);
}
if (saveFormat == SaveFormat.Triangles)
{
// Write triangles
for (int i = 0; i < tPolys.Length; i += 3)
{
UpdateProgress();
StringBuilder sb = new StringBuilder("f ", 43);
sb.Append(tPolys[i] + 1).Append("/").Append(tPolys[i] + 1).Append(" ").
Append(tPolys[i + 1] + 1).Append("/").Append(tPolys[i + 1] + 1).Append(" ").
Append(tPolys[i + 2] + 1).Append("/").Append(tPolys[i + 2] + 1);
sw.WriteLine(sb);
}
}
else
{
// Write quads
for (int i = 0; i < tPolys.Length; i += 4)
{
UpdateProgress();
StringBuilder sb = new StringBuilder("f ", 57);
sb.Append(tPolys[i] + 1).Append("/").Append(tPolys[i] + 1).Append(" ").
Append(tPolys[i + 1] + 1).Append("/").Append(tPolys[i + 1] + 1).Append(" ").
Append(tPolys[i + 2] + 1).Append("/").Append(tPolys[i + 2] + 1).Append(" ").
Append(tPolys[i + 3] + 1).Append("/").Append(tPolys[i + 3] + 1);
sw.WriteLine(sb);
}
}
}
catch(Exception err)
{
Debug.Log("Error saving file: " + err.Message);
}
sw.Close();

terrain = null;
EditorUtility.DisplayProgressBar("Saving file to disc.", "This might take a while...", 1f);
EditorWindow.GetWindow<ExportTerrain>().Close();
EditorUtility.ClearProgressBar();
}

void UpdateProgress()
{
if (counter++ == progressUpdateInterval)
{
counter = 0;
EditorUtility.DisplayProgressBar("Saving...", "", Mathf.InverseLerp(0, totalCount, ++tCount));
}
}
}

Step 5.
รอสักครู่จะพบว่าในแถบเมนูด้านบนจะมีหัวข้อ Terrian โผล่ออกมา โดยให้กดบนหัวข้อนั้นแล้วเลือกที่ "Export To Obj.."

Step 6.
จากนั้นเมื่อปรับรายละเอียดแล้วก็สั่งปุ่ม Export ได้เลย

Credit: http://wiki.unity3d.com/index.php?title=TerrainObjExporter

Blogger: แสดงบทความล่าสุดจำแนกตามป้ายกำกับแบบเลือกเอง

noreply@blogger.com (Max) — Thu, 14 Aug 2014 00:15:00 +0700

บทความนี้คือวิธีแสดงบทความล่าสุดของบล็อกโดยจำแนกตามป้ายกำกับ Label ที่แตกต่างกันไว้ใน Gadget อันเดียวกัน
ซึ่งจริงๆ แล้วก็คือการนำสคริปต์ของลิงก์ข้างล่างนี้มาปรับการแสดงผลใหม่เท่านั้นเอง
http://tip.maxlayout.com/2014/02/blogger-add-gadget-for-show-all-post.html
โดยจะมีวิธีทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'

ขั้นตอนที่ 2. ให้เลือก 'เพิ่ม Gadget' แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว
โดยตั้งค่า URL และปรับขนาดต่างๆ ของเนื้อหาได้ด้วยตนเองตามส่วนอธิบายเพิ่มเติมด้านล่างครับ

<style type='text/css'>
div.labelrecentlist div {
height: 320px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left;
}
div.labelrecentlist div p {
color:black; font-size:18px; text-align:center; font-weight:bold; line-height:100%;
}
div.labelrecentlist div div {
height: 265px; width:210px; padding:0; margin:0; border:none; background:#ffffff; display:inline; float:center;
}
div.labelrecentlist div div img {
margin-bottom:5px;
}
</style>


<div class='labelrecentlist'>
<script type="text/javascript">
function recentpostslist3(json)
{
var defaultThumbnail = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s72-c/maxlayout-pencil-blogger-no-image-2013.png';
var thumbnailSize = '210'; // 1600 = Largest Size of Image.

var i,j;
var entryUrl,entryLink,entryTitle,entryThumbnail;
var thumbnailSizeC = 's'+ thumbnailSize + '-c';

for (i = 0; i < json.feed.entry.length; i++)
{
for (j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}

entryUrl = json.feed.entry[i].link[j].href;//bs
entryLink = '<a href="' + entryUrl + '">';
entryTitle = json.feed.entry[i].title.$t;

if(typeof json.feed.entry[i].media$thumbnail != 'undefined') {
entryThumbnail = json.feed.entry[i].media$thumbnail.url;
} else { entryThumbnail = defaultThumbnail; }

document.write('<div>' + entryLink + '<img src="' + entryThumbnail.replace('s72-c',thumbnailSizeC) + '" alt="' + entryTitle + '"></img></a>' +
entryLink + entryTitle + '</a></div>');
}
}
</script>


<div>
<p>Lightwave</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

<div>
<p>Photoshop</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Photoshop?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

<div>
<p>Illustrator</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Illustrator?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

<div>
<p>Fireworks</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Fireworks?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>


</div>

อธิบายเพิ่มเติม
ตอนนำไปใช้เองก็ให้แทนที่ URL ด้วยวิธีดังนี้
ส่วนแสดงเนื้อหาว่าจะมาจากบล็อกใดเขียนอยู่ในส่วนท้ายระหว่าง  และ 
มีโครงสร้างคือ
<div>
<p>ชื่อหัวข้อ</p>
<script src="ที่ตั้งบล็อก/feeds/posts/summary/-/ชื่อป้ายกำกับ?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

ซึ่งในตัวอย่างด้านบนอันแรกสุดนั้นผมต้องการให้อันแรกแสดงข้อมูลจากป้ายชื่อ Lightwave จึงต้องแทนที่
ชื่อหัวข้อ คือ Lightwave (จะเขียนว่าอะไรก็ได้)
ที่ตั้งบล็อก คือ http://tip.maxlayout.com
ชื่อป้ายกำกับ คือ Lightwave (ต้องเขียนให้ถูกหมดทั้งตัวพิมพ์เล็กพิมพ์ใหญ่และการเว้นวรรค)

ดังนั้นจะเขียนใหม่ได้ดังนี้
<div>
<p>Lightwave</p>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=1&alt=json-in-script&callback=recentpostslist3"></script>
</div>

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

Blogger: ให้หน้าแรกแสดงภาพตัวอย่างขนาดเล็กพร้อมเนื้อหาที่เราเลือกไว้

noreply@blogger.com (Max) — Tue, 29 Jul 2014 14:37:00 +0700

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

ซึ่งบทความนี้อาจไม่เหมาะสำหรับผู้เขียนบล็อกที่ไม่ชอบการแก้ไข HTML ภายในแต่ละบทความ โดยสำหรับผู้ที่ต้องการใช้ตัวข้ามเนื้อหาแบบธรรมดาของบล็อกเกอร์ซึ่งง่ายกว่าบทความนี้เยอะก็สามารถทำตามลิงก์นี้ได้ครับ
http://tip.maxlayout.com/2010/08/blogger-insert-jumb-break.html

อย่างไรก็ตาม ก่อนที่จะแก้ไขตามบทความนี้ควรเข้าไปที่ 'ดาวน์โหลดแม่แบบฉบับเต็ม' เพื่อป้องกันความผิดพลาดโดยดาวน์โหลด Template เดิมที่ใช้อยู่มาเก็บสำรองไว้ในเครื่องของคุณเองก่อนเริ่มการปรับแต่ง

ซึ่งหลังจากทำตามบทความนี้แล้ว จะสามารถแสดงและซ่อนเนื้อหาได้โดยขณะอยู่ในหน้าเขียนบทความหรือโพสต์ให้กดที่แท็บ HTML แล้ว ใช้ Class กำหนดเนื้อหาได้ดังตัวอย่างนี้

กำหนดเนื่้อหาที่ต้องการแสดงในหน้าแรกโดยเขียนว่า
<div class="hide">
เนื้อหาที่แสดงให้เห็นในหน้าแรก
</div>

กำหนดเนื่้อหาที่ต้องการซ่อนจากหน้าแรกโดยเขียนว่า
<div class="seek">
เนื้อหาที่ต้องการซ่อนจากแรก
</div>

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

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>

ขั้นตอนที่ 3. จะพบว่าบริเวณข้างใต้โค้ดที่ได้หาเจอนั้นจะมีโค้ดเป้าหมายสำหรับการแก้ไขโค้ดของเรา
เขียนอยู่ในบรรทัดถัดลงมาซึ่งก็คือ
<data:post.body/>

ขั้นตอนที่ 4. จากนั้นให้สั่งแทนที่โค้ดเป้าหมายที่จากขั้นตอนที่แล้วซึ่งก็คือ
<data:post.body/>

ด้วยโค้ดข้างล่างนี้

<b:if cond='data:blog.url != data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=250;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s250/maxlayout-pencil-blogger-no-image-2013.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>


<div class='clone-post-label'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<br/>
<div class='clone-post-comment-counter'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
</div>
<br/>

<div class='post-hideandseek'>
<data:post.body/>
</div>
<b:else/>
<data:post.body/>
</b:if>

ขั้นตอนที่ 5. สั่งค้นหา
]]></b:skin>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
]]></b:skin>

<b:if cond='data:blog.pageType == "index"'>
<style>
.jump-link,
.post-footer,
.post-hideandseek .hide {
display:none;
}

.postthumb {
float: left;
overflow: hidden;
display: inline;
}

.clone-post-label,
.clone-post-comment-counter {
float: left;
padding-left: 50px;
display:block;
}

.post-hideandseek .seek {
float: right;
position: absolute;
padding-left: 50px;
display: inline;
}
</style>
</b:if>

ขั้นตอนที่ 6. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วก็ทำตามส่วนอธิบายด้านบนได้เลย

Blogger: ทำลิงก์เชื่อมโยงจุดอ้างอิง (Anchor Link)

noreply@blogger.com (Max) — Sat, 10 May 2014 23:14:00 +0700

คำอธิบายเกี่ยวกับลิงค์แบบ Anchor Links คือ

การสร้างลิงค์สำหรับเชื่อมโยงจุดอ้างอิงที่มีปลายทางอยู่ในหน้าเว็บเดียวกันหรือข้ามเพจก็ได้ โดยถ้าผู้เข้าชมเว็บของเราไปคลิกเมาส์ ณ ตำแหน่งนั้น ก็จะสามารถกำหนดได้ว่าต้องการส่งผู้เข้าชมเว้บไปสู่จุดอ้างอิงในตำแหน่งใดของหน้าเว็บเป้าหมาย ซึ่งลิงก์ชนิดนี้เหมาะสำหรับหน้าเพจที่มีเนื้อหายาวมาก เพื่อให้ผู้ชมจะได้ไม่ต้องเสียเวลาเลื่อนหาเนื้อหาที่ต้องการ

ซึ่งคำอธิบายยืดยาวแบบข้างบนนี้อาจทำให้บางคนสับสนได้ ผมเองลองกลับไปอ่านที่ตัวเองเขียนไว้ดูก็งงเหมือนกัน ดังนั้นใช้เมาส์กดลิงก์ตัวอย่างข้างล่างนี้ดูจะเข้าใจได้ง่ายกว่า
ตัวย่างที่ 1 ลิงก์ไปสู่ส่วนท้ายของบทความนี้ (โดยปลายทางจะมีคำว่า "จบแล้วจ้า" เขียนอยู่ด้านบน)
จบแล้วจ้า
ตัวย่างที่ 2 ลิงก์ไปสู่ปลายทางภายในบทความอื่น (โดยส่งไปสู่ขั้นตอน 13 ที่อยู่กลางบทควา่มนั้น)
ตัวอย่างการใช้ Photoshop ทำ Inverse Selection

โดยวิธีสร้างลิงก์ดังกล่าวทำได้ด้วย 2 ขั้นตอนดังต่อไปนี้

วิธีสร้างจุดอ้างอิง

เราต้องสร้างจุดอ้างอิงสำหรับใช้เป็นปลายทางของลิงก์ขึ้นมาก่อน
ซึ่งสร้างโดยเข้าไปในบทความนั้นๆ แล้วก็กดเป็นโหมด HTML จากนั้นก็วางโค้ดลงไป

ซึ่งจุดอ้างอิงปลายทางโดยทั่วไปจะมีโครงสร้างดังนี้
<div id="ชื่อจุดอ้างอิง">ข้อความที่แสดง</div>
โดยมีความหมายดังนี้
ชื่อจุดอ้างอิง - คือสิ่งที่ต้องระบุไว้ในลิงก์ที่เราสร้างขึ้น
ข้อความที่แสดง - จะเป็นสิ่งที่ผู้ชมเว็บมองเห็น

โดยจุดอ้างอิงของตัวอย่างที่ 1 ซึ่งอยู่ด้านบนนั้นเขียนได้ดังนี้
<div id="anchortext1">จบแล้วจ้า</div>
ซึ่งค่าที่ผมกำหนดไว้มีดังนี้
ชื่อจุดอ้างอิง ผมตั้งไว้เป็น anchortext1
ข้อความที่แสดง ผมตั้งไว้เป็น จบแล้วจ้า

วิธีสร้างลิงก์ไปสู่จุดอ้างอิง

วิธีสร้างลิงก์แบบจุดอ้างอิงก็คล้ายกับการกำหนดที่ตั้ง URL แบบปกติแต่ให้เขียนต่อท้ายด้วย "#" แล้วค่อยตามด้วย "ชื่อจุดอ้างอิง" อีกทีหนึ่ง

ซึ่งมีโครงสร้างดังนี้
ที่ตั้งของหน้า#ชื่อจุดอ้างอิง
ตัวอย่างเช่นที่ตั้ง URL ของหน้านี้คือ
http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html
ดังนั้นที่ตั้งของจุดอ้างอิง anchortext1 ก็คือ
http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html#anchortext1
โดยพอนำที่ตั้ง URL ที่กล่าวมาไปสร้างเป็นลิงก์ข้อความแบบง่ายๆ ก็จะมีโครงสร้างคือ
<a href="ที่ตั้งของหน้า#ชื่อจุดอ้างอิง">ข้อความลิงก์</a>
ดังนั้นลิงก์ข้อความในตัวอย่างที่ 1 จะสามารถเขียนได้ดังนี้
<a href="http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html#anchortext1">จบแล้วจ้า</a>

ส่วนลิงก์ข้อความตามตัวอย่างที่ 2 นั้นตามปกติแล้วจะเขียนว่า
<a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html#anchortext2" >ตัวอย่างการ Inverse Selection</a>
แต่ผมต้องการให้ลิงก์นี้ให้เป็นชนิดสั่งเปิดในหน้าต่างใหม่โดยเขียน
target="_blank"
เพิ่มไปด้านหลังที่ตั้ง URL ซึ่งจะกลายเป็นดังนี้
<a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html#anchortext2" target="_blank">ตัวอย่างการ Inverse Selection</a>

Credit:
http://blogtimenow.com/how-to/create-anchor-links-wordpress-blogger-jump-links/

จบแล้วจ้า

Blogger: การทำปุ่มเปิดปิดเพื่อซ่อนหรือแสดงเนื้อหาบางส่วน

noreply@blogger.com (Max) — Tue, 6 May 2014 11:32:00 +0700

สามารถสร้างปุ่มที่ใช้ซ่อนเหนือหา โดยเมื่อเอาเมาส์คลิกลงที่ปุ่มนี้ก็จะมีเนื่อหาแสดงออกมาได้ดังนี้

วิธีเริ่มสร้างปุ่ม

ทำได้โดยคัดลอกโค้ดแบบใดแบบหนึ่งด้านล่างนี้ไปวางในช่อง HTML ของโพสต์หรือของ Gadget ก็ได้

แบบที่หนึ่งมีเนื้อหาแสดงออกมาด้านบนของปุ่ม

<div id="spoiler" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />

แบบที่สองมีเนื้อหาแสดงออกมาด้านล่างของปุ่ม

<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <div id="spoiler" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <br />

วิธีปรับแต่งเนื่อหา

โครงสร้างของปุ่มมีดังนี้ เนื้อหาที่ถูกซ่อนไว้ก็คือ ADD YOUR HIDDEN CONTENT HERE. ข้อความที่แสดงอยู่บนปุ่มคือ Open/Close ข้อความไตเติ้ลที่แสดงออกมาเมื่อเอาเมาส์วางเหนือปุ่มคือ Click to show/hide

วิธีทำปุ่มนี้หลายอันไว้ในหน้าเว็บเดียวกัน

ทำได้โดยให้เพิ่มเลขลงไปที่ด้านหลังคำว่า spoiler ซึ่งในแต่ละปุ่มจะมีกำหนดไว้อยู่ 4 จุดเช่นเดียวกับตัวอย่างข้างล่างนี้ เช่นถ้าโค้ดปุ่มแรกคือ

ดังนั้นปุ่มที่สองจะเขียนได้โดยแทนที่คำว่า spoiler ด้วย spoiler1 ก็จะเป็นดังนี้

<div id="spoiler1" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />

ดังนั้นปุ่มที่สามก็จะเขียนได้โดยแทนที่คำว่า spoiler ด้วย spoiler2 ก็จะเป็นดังนี้

<div id="spoiler2" style="display: none;"> ADD YOUR HIDDEN CONTENT HERE. </div> <button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button> <br />

Credit:
http://www.bloggersentral.com/2009/12/create-show-hide-or-peek-boo.html http://www.allbloggertricks.com/2013/05/how-to-add-openclose-button-to-blogger.html

Blogger: แสดงบทความทั้งหมดไว้ในหน้าเดียวกัน

noreply@blogger.com (Max) — Wed, 12 Feb 2014 20:02:00 +0700

Update: 2014/09/12

บทความนี้คือวิธีแสดงบทความทั้งหมดของบล็อกเกอร์ไว้ภายในเครื่องมือ Gadget อันเดียวกัน
ซึ่งบทความจะมีโค้ดให้เลือกอยู่ 2 แบบคือ สำหรับแสดงภาพเป็นจัตุรัสหรือสี่เหลี่ยมผืนผ้า โดยสามารถตั้งค่า URL และปรับขนาดต่างๆ ของเนื้อหาได้ด้วยตนเองตามส่วนอธิบายเพิ่มเติมด้านล่างครับ
ซึ่งสามารถดูตัวอย่างได้ที่นี่ http://www.maxlayout.com/ โดยจะมีวิธีทำได้ดังนี้

เกี่ยวกับโค้ดทั้งสองแบบ
ที่จริงแล้ว โค้ดแบบผืนผ้าก็สามารถปรับค่าความกว้างและสูงให้กลายเป็นจตุรัสได้เช่นกัน แต่ว่าแบบผืนผ้านั้นจะถูกเขียนด้วยโค้ดที่ยาวกว่าและเวลาปรับขนาดแบบผืนผ้าก็ต้องแก้ไขค่าทั้งสองจุดคือกว้างและสูง แต่ว่าแบบจตุรัสนั้นแก้ที่ค่าไซต์ก็พอแล้ว

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'

ขั้นตอนที่ 2. ให้เลือก 'เพิ่ม Gadget' แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. เลือกโค้ดด้านล่างนี้แล้วคัดลอกใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

แบบที่ 1 แสดงภาพตัวอย่างเป็นสี่เหลี่ยมจัตุรัส

สามารถปรับขนาดภาพได้ตรงโค้ดที่เขียนว่า
var thumbnailSize = '210'
โดยเปลี่ยนตัวเลขเป็นขนาดที่ต้องการได้เลย
ซึ่งโค้ดที่ต้องนำไปใส่ในกล่อง Gadget คือ

<style type='text/css'>
div.allrecentlist div {
height: 265px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left; overflow:hidden;
}
div.allrecentlist div img {
margin-bottom:5px;
}
</style>


<div class='allrecentlist'>
<script type="text/javascript">
function recentpostslist3(json)
{
var defaultThumbnail = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s72-c/maxlayout-pencil-blogger-no-image-2013.png';
var thumbnailSize = '210'; // 1600 = Largest Size of Image.

var i,j;
var entryUrl,entryLink,entryTitle,entryThumbnail;
var thumbnailSizeC = 's'+ thumbnailSize + '-c';

for (i = 0; i < json.feed.entry.length; i++)
{
for (j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}

entryUrl = json.feed.entry[i].link[j].href;//bs
entryLink = '<a href="' + entryUrl + '">';
entryTitle = json.feed.entry[i].title.$t;

if(typeof json.feed.entry[i].media$thumbnail != 'undefined') {
entryThumbnail = json.feed.entry[i].media$thumbnail.url;
} else { entryThumbnail = defaultThumbnail; }

document.write('<div>' + entryLink + '<img src="' + entryThumbnail.replace('s72-c',thumbnailSizeC) + '" alt="' + entryTitle + '"></img></a>' +
entryLink + entryTitle + '</a></div>');
}
}
</script>
<script src="http://tip.maxlayout.com/feeds/posts/summary/?max-results=9999&alt=json-in-script&callback=recentpostslist3"></script>
</div>

แบบที่ 2 แสดงภาพตัวอย่างเป็นสี่เหลี่ยมผืนผ้า

สามารถปรับขนาดภาพได้ตรงโค้ดที่เขียนว่า
var image_width=200;
var image_height=120;
โดยเปลี่ยนตัวเลขความกว้าง (width) และความสูง (height) ได้ตามต้องการ
ซึ่งโค้ดที่ต้องนำไปใส่ในกล่อง Gadget คือ

<style type='text/css'>
div.allrecentlist div {
height: 265px; width:210px; padding:2px; margin:0 5px 15px; border:1px solid silver; background:#ffffff; display:inline; float:left; overflow:hidden;
}
div.allrecentlist div img {
margin-bottom:5px;
}
</style>


<div class='allrecentlist'>
<script type="text/javascript">
function recentpostslist3(json)
{
var defaultThumbnail = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s72-c/maxlayout-pencil-blogger-no-image-2013.png';

// 1600 = Largest Size of Image.
var image_width=200;
var image_height=120;

var const_width = parseInt(image_width);
var const_height = parseInt(image_height);
var const_max = Math.max(image_width,image_height);
var const_margin = '';
if(const_width == const_max){
const_margin = parseInt((image_height - const_max)/2) + 'px 0px 0px 0px';
}else{
const_margin = '0px 0px 0px ' + parseInt((const_width - const_max)/2) + 'px';
}

var thumbnailSize = const_max;

var i,j;
var entryUrl,entryLink,entryTitle,entryThumbnail;
var thumbnailSizeC = 's'+ thumbnailSize + '-c';

for (i = 0; i < json.feed.entry.length; i++)
{
for (j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}

entryUrl = json.feed.entry[i].link[j].href;//bs
entryLink = '<a href="' + entryUrl + '">';
entryTitle = json.feed.entry[i].title.$t;

if(typeof json.feed.entry[i].media$thumbnail != 'undefined') {
entryThumbnail = json.feed.entry[i].media$thumbnail.url;
} else { entryThumbnail = defaultThumbnail; }

document.write('<div><section style="width:' + const_width + 'px;height:' + const_height + 'px;overflow:hidden;">' +
entryLink + '<img src="'+entryThumbnail.replace('s72-c',thumbnailSizeC)+'" class="postthumb" alt="'+entryTitle+'"' +
'style="margin:' + const_margin + '"/></a></section>' +
'<p>' + entryLink + entryTitle + '</a></p></div>');
}
}
</script>
<script src="http://tip.maxlayout.com/feeds/posts/summary/?max-results=9999&alt=json-in-script&callback=recentpostslist3"></script>
</div>

อธิบายเพิ่มเติม

ตอนนำไปใช้เองก็ให้แทนที่ URL ในบรรทัดที่ 3 นับจากด้านล่างสุดของโค้ดจากเดิมที่เขียนว่า
http://tip.maxlayout.com
ให้กลายเป็น URL ของบล็อกคุณเองก็ใช้ได้แล้วครับ

นอกจากนี้สามารถสั่งให้เครื่องมือนี้แสดงแต่เฉพาะบทความจากป้ายกำกับอันใดอันหนึ่งที่ต้องการก็สามารถทำได้โดยเอาชื่อป้ายกำกับอันนั้นเขียนเติมลงไปใน URL เช่น
จากตัวอย่างด้านบนนี้ถ้าบล็อกที่ต้องการดังบทความมาแสดงคือ
http://tip.maxlayout.com
จะทำให้มีโค้ด URL ของบทความซึ่งถูกเขียนอยู่ในบรรทัดที่ 4 นับจากด้านล่างสุดก็คือ
http://tip.maxlayout.com/feeds/posts/summary/
แต่ว่าเมื่อต้องการแสดงแค่เพียงเฉพาะบทความจากป้ายกำกับที่มีชื่อว่า
Text Effect
ก็ต้องนำข้อความว่า
-/Text Effect
ไปเขียนต่อจาก URL เดิมดังนั้นจะได้ URL แบบใหม่คือ
http://tip.maxlayout.com/feeds/posts/summary/-/Text Effect
โดยต้องเขียนชื่อป้ายกำกับนั้นให้ตรงกันทั้งตัวพิมพ์เล็ก พิมพ์ใหญ่ และการเว้นวรรคจึงจะแสดงข้อมูลได้ครับ

ส่วนปริมาณบทความที่ถูกแสดงไว้ในเครื่องมืออันนี้สามารถตั้งค่าให้น้อยลงได้จากการแก้ไขที่ตัวเลข 9999 ให้เป็นตัวเลขจำนวนที่ต้องการได้เลยครับ

นอกจากนี้ภาพที่ถูกนำมาแสดงเมื่อบทความเหล่านั้นไม่มีรูปตัวอย่างก็คือ
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s72-c/maxlayout-pencil-blogger-no-image-2013.png
ซึ่งสามารถแทนที่ URL นี้ได้ตามต้องการ

วิธีปรับลักษณะการแสดงผล CSS
สามารถปรับขนาดความกว้างยาวสูงและสีพื้นหลังระยะห่างต่างๆ ของบทความขนาดย่อเพื่อให้เหมาะสมพอดีกับบล็อกของแต่ละคนได้ครับ
โดยแก้ไขหรือเขียนเพิ่มเติมโค้ด CSS ลงไปให้อยู่ต่อจากสคริปต์
div.allrecentlist div {

ตัวอย่างเช่น
ปรับขนาดตัวอักษรให้ font เล็กลงก็เขียนโค้ดเพิ่มต่อท้ายสคริปต์ลงไปว่า
font-size:8px;

ตัวกำหนดความสูงของกล่องบทความตัวอย่างแต่ละอันคือ
height: 265px;

เพิ่มช่องไฟระหว่างกล่องสี่เหลี่ยมทำได้โดยแก้ไขตัวเลขของ
margin:0 5px 15px;
แนวตั้งคือ 5
แนวนอนคือ 15

Blogger: เมนูแสดงรายชื่อหัวข้อบทความแบบเลื่อนลง

noreply@blogger.com (Max) — Wed, 29 Jan 2014 12:49:00 +0700

วิธีสร้างกล่องแสดงรายชื่อหัวข้อบทความแบบเลื่อนลงแบบตัวอย่างข้างล่างนั้นสามารถทำได้ดังนี้

ตัวอย่างที่ 1

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'

ขั้นตอนที่ 2. ให้เลือก 'เพิ่ม Gadget' แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

<script type="text/javascript">
function recentpostslist2(json) {
var allData = '<select style="width:100%;" onchange="location=this.options[this.selectedIndex].value;">' +
'<option>Click to choose a post</option>';
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = json.feed.entry[i].link[j].href;//bs
var entryTitle = json.feed.entry[i].title.$t;
allData += '<option style="width:210px;" value="' + entryUrl + '" title="' + entryTitle + '">' + entryTitle + '</option>';
}
document.write(allData + '</select>');
}
</script>


<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Blogger?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>

อธิบายเพิ่มเติม

ขณะนี้สคริปต์นั้นจะแสดงข้อมูลจากเว็บชื่อ
tip.maxlayout.com
ในป้ายกำกับชื่อว่า
Blogger
ซึ่งทั้งสองจุดนั้นถูกเขียนอยู่ใต้ข้อความว่า

โดยสามารถแทนที่โค้ดทั้งสองจุดนั้นลงไปได้เลย
ก็จะพบว่าเครื่องมือนี้แสดงข้อมูลจากบล็อกของคุณแทน

นอกจากนี้ถ้าหากลองสั่งลบคำว่า
/-/Blogger
แล้วสั่งแทนที่แค่เฉพาะ URL ชื่อบล็อกซึ่งก็คือโค้ดว่า
tip.maxlayout.com
ก็จะทำให้เครื่องมือนี้กลายเป็นแสดงรายชื่อบทความจากทั้งหมดในบล็อกแทน

ส่วนผู้ที่ต้องการแสดงเครื่องมือนี้หลาย ๆ อันในบล็อกแห่งเดียวกันก็ให้แก้ไขเฉพาะโค้ดที่อยู่ระหว่าง  ไปจนถึง  โดยนำมาเขียนต่อกันก็พอแล้วซึ่งอาจเขียนชื่อกำกับไว้ด้วยเพื่อให้แยกแยะได้สะดวกตัวอย่างเช่น ให้ลองแทนที่ตำแหน่งดังกล่าวแบบนี้

<span style="font-weight:bold;">All Post</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Blogger</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Blogger?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Photoshop</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Photoshop?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>
<br/><br/>
<span style="font-weight:bold;">Lightwave</span>
<script src="http://tip.maxlayout.com/feeds/posts/summary/-/Lightwave?max-results=9999&alt=json-in-script&callback=recentpostslist2"></script>

ซึ่งจะให้ผลดังตัวอย่างข้างล่างนี้

ตัวอย่างที่ 2

All Post

Blogger

Photoshop

Lightwave

Blogger: กล่องแสดงรูปภาพแบบสลับอัตโนมัติ

noreply@blogger.com (Max) — Fri, 10 Jan 2014 17:22:00 +0700

บทความนี้เป็นวิธีเพิ่มเครื่องมือ Gadget สำหรับแสดงรูปแบบเปลี่ยนภาพได้เอง โดยภาพที่แสดงจะหยุดเปลี่ยนเมื่อเอาเมาส์วางข้างบนรูปเหล่านั้น

วิธีสร้างเครื่องมือสำหรับแสดงบทความล่าสุดพร้อมภาพตัวอย่าง (JavaScript Image Slider) ทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > องค์ประกอบของหน้า'

ขั้นตอนที่ 2. ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

อธิบายเพิ่มเติม
URL ที่ตั้งและลิงก์ปลายทางของภาพใน Slider ถูกเขียนอยู่ภายใต้
<div id="slider">

ซึ่งตำแหน่งของโค้ดที่ใช้จัดการรูปภาพที่แสดงสลับอยู่ทั้ง 5 อันก็คือ
"><img src="
โดย URL ที่ตั้งของรูปภาพที่กำลังแสดงให้ผู้อ่านเห็นนั้นจะเขียนอยู่ด้านหลังโค้ด
ส่วน URL ลิงก์ปลายทางของหน้าเว็บที่จะเปิดขึ้นมาเมื่อรูปถูกคลิกจะเขียนอยู่ด้านหน้าโค้ดอันนี้
ซึ่งสามารถนำ URL มาเปลี่ยนได้เลยตามต้องการครับ

นอกจากนี้ถ้าต้องการให้ลิงก์บนรูปภาพเป็นชนิดเปิดหน้าต่างใหม่โดยไม่ปิดหน้าเว็บเดิมก็ให้เปลี่ยนโค้ดด้านบนจาก
"><img src="
ให้หลายเป็น
" target="_blank"><img src="

Credit:
http://imagesliderforblogger.blogspot.com/2013/02/add-javascript-image-slider-to-blogger.html#.Us_olfRdXE3
http://www.helperblogger.com/2012/07/javascript-image-slider-for-blogger.html
http://www.menucool.com/javascript-image-slider

Blogger: การแก้ไขเทมเพลทในเมนูบล็อกรุ่นใหม่

noreply@blogger.com (Max) — Sat, 14 Dec 2013 09:31:00 +0700

เนื่องจากในปัจจุบันเมนูสำหรับแก้ไขโค้ดของบล็อกเกอร์นั้นอาจมีการเปลี่ยนแปลงไปอยู่เสมอ และบทความในปีก่อนๆ ของบล็อกนี้บางอันได้เขียนโดยอ้างอิงจากระบบเมนูในเวลานั้นๆ ซึ่งอาจสร้างความสับสนอยู่บ้างต่อผู้้อ่าน ดังนั้นผมจึงเขียนเป็นบทความนี้ขึ้นเพื่อให้ผู้ที่เพิ่งเริ่มแก้ไขโค้ดของ Blogger สามารถเข้าใจเมนูแก้ไขโค้ดรุ่นใหม่ซึ่งผมจะพยายามปรับเนื้อหาบทความนี้ให้ตรงกับเมนูในรุ่นปัจจุบันเมื่อมีการเปลี่ยนแปลงครับ

วิธีดาวน์โหลดแม่แบบที่กำลังใช้อยู่มาเก็บสำรองไว้

เข้าสู่บล็อคของคุณจากนั้นไปที่
'แม่แบบ'
เลือกที่
'สำรอง / กู้คืน' (อยู่มุมขวาบน)
แล้วกดที่คำว่า
'ดาวน์โหลดเทมเพลทแบบเต็ม'
จากนั้นก็ตั้งชื่อ File แล้วก็กด Save ก็เสร็จแล้วครับ

วิธีเข้าไปแก้ไขเทมเพลทภายในบล็อกเกอร์

เข้าสู่บล็อคของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

เมนูสำหรับแก้ไขโค้ด Blogger ในรุ่นปัจจุบันนี้ต้องเอาเมาส์ไปกดตรงจุดใดก็ได้ภายในกรอบที่มีโค้ดแสดงอยู่ซะก่อนครับ จากนั้นค่อยกดคำสั่ง 'Ctrl + F' บนคีย์บอร์ด จึงจะมีช่องค้นหาหรือ Search โผล่ออกมาที่มุมขวาของกรอบใส่โค้ดนั้น

ขณะนี้ได้ปรับข้อความให้ตรงกับเมนู Blogger ในรุ่นปัจจุบันแล้วครับ เพราะว่าบทความเวอชั่นก่อนนั้นผมได้
ขียนขึ้นเมื่อหลายปีมาแล้วซึ่งเมนูบล็อกจะไม่เหมือนกับตอนนี้ นอกจากนี้สำหรับผู้ที่เพิ่งเริ่มแก้ไขโค้ดของ Blogger เป็นครั้งแรก จะพบว่าการค้นหาโค้ดในปัจจุบันนี้ต้องเอาเมาส์ไปกดที่จุดใดก็ได้ภายในกรอบโค้ดทางขวามือก่อนเริ่มค้นหาด้วย Ctrl + F นะครับ

วิธี Search ค้นหาโค้ดในหน้าจอแก้ไขเทมเพลท

การค้นหาโค้ดในปัจจุบันนี้ต้องเอาเมาส์ไปกดที่จุดใดก็ได้ภายในกรอบที่มีโค้ดแสดงอยู่ซะก่อนครับ จากนั้นค่อยกดคำสั่ง 'Ctrl + F' บนคีย์บอร์ด จึงจะมีช่องค้นหาหรือ Search โผล่ออกมาที่มุมขวาบนของกรอบใส่โค้ดอันนั้น จากนั้นก็สามารถพิมพ์โค้ดที่ต้องการค้นหาใส่ลงไปแล้วก็กดปุ่ม Enter บนคีย์บอร์ดเพื่อค้นหาโค้ดได้เลยครับ

Blogger: แสดง Facebook Comment ไว้เหนือ Blogger Comment

noreply@blogger.com (Max) — Sat, 7 Dec 2013 23:02:00 +0700

บทความนี้จะอธิบายวิธีติดตั้งกล่องคอมเมนท์ด้วย Facebook Comment ไว้ที่ตำแหน่งข้างบนเหนือกล่อง Blogger Comment ซึ่งมีวิธีทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. ใส่สคริปต์ของ Facebook Comment
ให้ค้นหา
</b:skin>

แล้วแทนที่โค้ดที่หาเจอด้วยโค้ดสคริปต์คอมเมนท์ด้านล่างนี้
.fb-comment-counter {
}

]]></b:skin>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/th_TH/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ขั้นตอนที่ 3. วางกล่อง Facebook Comment
ให้ค้นหา
</b:includable>
<b:includable id='postQuickEdit' var='post'>

แล้วแทนที่โค้ดทั้ง 2 บรรทัดที่หาเจอนั้นด้วยโค้ดกล่องคอมเมนท์ด้านล่างนี้

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:5px; border:1px solid #c0c0c0;'>
<div style='font-size:170%; margin-bottom:5px; border-bottom:1px solid #c0c0c0;'>
<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
</div>
<div id='fb-root'/>
<div class='fb-comments' data-colorscheme='light' data-num-posts='10' data-width='470' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/>
</div>
</b:if>


</b:includable>
<b:includable id='postQuickEdit' var='post'>

ขั้นตอนที่ 4. เพิ่มตัวนับจำนวน Facebook Comment ลงในหน้าแรก
ให้ค้นหา

ซึ่งถือเป็นเป้าหมายการแก้ไขโค้ดของขั้นตอนนี้

จากนั้นนำโค้ดตัวนับจำนวนซึ่งอยู่ข้างล่างนี้ ไปวางไว้ที่ข้างบนเหนือโค้ดเป้าหมายที่หาเจอนั้น

<b:if cond='data:blog.pageType != "item"'>
<div class='fb-comment-counter'>
<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
</div>
</b:if>

ขั้นตอนที่ 5. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วลองเปิดบล็อกเพื่อดูผลลัพธ์

อธิบายเพิ่มเติมเกี่ยวกับตัวนับจำนวน Facebook Comment

ในตัวอย่างนี้ได้ตั้งค่าให้ตัวนับจำนวน Facebook Comment ไปแสดงไว้ตรงส่วนท้ายของทุกบทความในหน้าแรก แต่ถ้าหากว่าต้องการย้ายตัวนับจำนวนคอมเมนท์นี้ไปวางไว้ที่อื่นก็ทำได้ตามต้องการโดยนำโค้ดที่อยู่เหนือ


ซึ่งก็คือโค้ดตั้งแต่

ไปจนถึง

ไปวางที่ใหม่ได้ตามต้องการ

ส่วนลักษณะต่างๆ ของตัวนับจำนวนนี้สามารถแก้ไขได้เองจากโค้ด CSS ในขั้นตอนที่ 1 ซึ่งก็คือ
.fb-comment-counter {
}

อธิบายเพิ่มเติมเกี่ยวกับกล่องใส่ Facebook Comment

นอกจากนี้สามารถตบแต่งแก้ไข Facebook Comment นี้เช่น ความกว้าง พื้นหลังหรือเส้นขอบได้ตามต้องการดังนี้

เส้นขอบและช่องว่างจากขอบกำหนดจากโค้ดในขั้นตอนที่ 3 คือ
<div style='padding:5px; border:1px solid #c0c0c0;'>

ลักษณะของหัวข้อแสดงจำนวนเหนือกล่องคอมเมนท์กำหนดจากโค้ดในขั้นตอนที่ 3 คือ
<div style='font-size:170%; margin-bottom:5px; border-bottom:1px solid #c0c0c0;'>

ความกว้างของช่องใส่ความคิดเห็นนี้กำหนดจากโค้ดในขั้นตอนที่ 3 คือ
data-width='470'

ชุดสีของข้อความคอมเมนท์เลือกได้สองแบบโดยกำหนดจากโค้ดในขั้นตอนที่ 3 คือ
data-colorscheme='light'
ซึ่งสามารถเลือกได้ด้วยการแทนที่โค้ดในจุดนี้ ระหว่างให้เป็นแบบ 'light' หรือแบบ 'dark' ก็ได้ครับ

Blogger: ติดตั้ง Facebook Comment แบบแสดงให้เห็นตั้งแต่อยู่ในหน้าแรก

noreply@blogger.com (Max) — Thu, 28 Nov 2013 11:10:00 +0700

บทความนี้จะอธิบายวิธีติดตั้ง Facebook Comment ในแต่ละบทความ โดยที่กล่องคอมเมนท์นี้จะมองเห็นได้ตั้งแต่ขณะเปิดเข้าสู่หน้าแรกของบล็อกเกอร์เลย ซึ่งควรกำหนดขีดจำกัดความสูงของกล่องคอมเมนต์อันนี้ให้เหมาะสมกับแต่ละบล็อกตามรายละเอียดจากส่วนอธิบายเพิ่มเติมของบทความนี้ โดยมีวิธีทำได้ดังนี้

อธิบายเพิ่มเติม
นอกจากนี้อย่าลืมว่าในปัจจุบันเทมเพลทพื้นฐานของ Blogger รุ่นใหม่บางชนิด จะสามารถมองเห็นกล่อง Facebook Comment ที่สร้างตามวิธีในบทความนี้ ได้ก็ต่อเมื่อสั่งซ่อนกล่องคอมเมนท์แบบปกติของ Blogger ซะก่อน ด้วยวิธีตามบทความในลิงก์นี้ครับ
http://tip.maxlayout.com/2012/10/blogger-enable-or-disable-comment.html

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 3. วางกล่อง Facebook Comment
ให้ค้นหา


แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดกล่องคอมเมนท์ด้านล่างนี้
     
         <div style='padding:5px; border:1px solid #c0c0c0; max-height:2000px; overflow:hidden;'>
          <div style='font-size:170%; margin-bottom:5px; border-bottom:1px solid #c0c0c0;'>
            <fb:comments-count expr:href='data:post.canonicalUrl'/> comments
          </div>
        <div id='fb-root'/>
          <div class='fb-comments' data-colorscheme='light' data-num-posts='10' data-width='470' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/>
        </div>

อธิบายเพิ่มเติมเกี่ยวกับกล่องใส่ Facebook Comment

นอกจากนี้สามารถตบแต่งแก้ไข Facebook Comment นี้เช่น ความกว้าง พื้นหลังหรือเส้นขอบได้ตามต้องการดังนี้

ขีดจำกัดความสูงของกล่องคอมเมนต์นี้กำหนดจากโค้ดในขั้นตอนที่ 3 คือ
max-height:2000px;

เส้นขอบและช่องว่างจากขอบกำหนดจากโค้ดในขั้นตอนที่ 3 คือ
padding:5px; border:1px solid #c0c0c0;

ลักษณะของหัวข้อแสดงจำนวนเหนือกล่องคอมเมนท์กำหนดจากโค้ดในขั้นตอนที่ 3 คือ
<div style='font-size:170%; margin-bottom:5px; border-bottom:1px solid #c0c0c0;'>

ความกว้างของช่องใส่ความคิดเห็นนี้กำหนดจากโค้ดในขั้นตอนที่ 3 คือ
data-width='470'

ชุดสีของข้อความคอมเมนท์เลือกได้สองแบบโดยกำหนดจากโค้ดในขั้นตอนที่ 3 คือ
data-colorscheme='light'
ซึ่งสามารถเลือกได้ด้วยการแทนที่โค้ดในจุดนี้ ระหว่างให้เป็นแบบ 'light' หรือแบบ 'dark' ก็ได้ครับ

Blogger: ติดตั้งเครื่องมือ Gadget สำหรับแสดงเลขหน้า

noreply@blogger.com (Max) — Mon, 21 Oct 2013 12:24:00 +0700

บทความนี้เป็นวิธีเพิ่มเครื่องมือ Gadget สำหรับแสดงเลขหน้า ไว้ใต้บทความซึ่งมีวิธีสร้างดังนี้

ขั้นตอนที่ 1. เริ่มจากเปิดช่องใส่เครื่องมือที่คอลัมน์บทความด้วยวิธีตามบทความนี้ก่อน
http://tip.maxlayout.com/2013/10/blogger-add-gadget-edit-showaddelement.html

ซึ่งก่อนการแก้ไขตามลิงก์ข้างบนจะเห็นเป้าหมายเป็นแบบนี้

โดยหลังแก้ไขตามลิงก์ข้างบนเสร็จแล้วก็จะเป็นแบบนี้

ขั้นตอนที่ 2. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ'
ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์'
โดยวาง Gadget อันนี้ไว้ข้างใต้ส่วนเนื่อหาบทความดังรูปตัวอย่างข้างล่างนี้

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา'
ของ Gadget อันนั้นและกดปุ่ม 'บันทึก'
ก็จะพบว่ามีเครื่องมือสำหรับแสดงเลขหน้าโผล่ออกมาอยู่ในหน้าแรกของบล็อก

ขั้นตอนที่ 4. กำหนดจำนวนบทความที่แสดงเมื่อเลือกป้ายกำกับ
ตอนนี้จะพบว่าในบล็อกของคุณมีเลขหน้าแสดงอยู่เรียบร้อยแล้วแต่ว่า ถ้ากดเลือกป้ายกำกับหรือ Label อาจพบว่ามีการแสดงผลที่ไม่ถูกต้องเกิดขึ้นซึ่งแก้ไขด้วยวิธีดังนี้

โดยเข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'
จากนั้นให้กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
โดยจะพบโค้ดนั้นแสดงอยู่ 2 จุด

แล้วให้แทนที่โค้ดดังทั้งสองจุดที่กล่าวมานั้นด้วยโค้ดใหม่ด้านล่างนี้

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?&max-results=7"'><data:label.name/></a>
'
ซึ่งเลข 7 ในบรรทัดที่ 2 ของโค้ดนี้ก็คือจำนวนบทความที่แสดงขณะเลือกป่ายกำกับ และสามารถตั้งค่าได้ตามต้องการ

อธิบายเพิ่มเติม
ถ้าชอบตัวแสดงเลขหน้าแบบฝังอยู่ในเทมเพลทเลยก็ทำตามลิงก์นี้ครับ
http://tip.maxlayout.com/2010/12/blogger-numbered-page-navigation-widget.html

Credit:
http://netoopsblog.blogspot.com/2013/08/beautiful-page-navigation-blogger-blog-new-script.html
http://www.allbloggertips.com/2013/06/page-number-navigation-for-blogger.html

Blogger: ยกเลิกการจำกัดเครื่องมือบนแท็บ

noreply@blogger.com (Max) — Tue, 15 Oct 2013 13:57:00 +0700

บทความนี้เป็นตัวอย่างการแก้ไขช่องใส่ Gadget โดยการตั้งค่า "Show Add Element" และ "Max Widgets"
ตามปกติแล้วบล็อกเกอร์ที่สร้างขึ้นใหม่ซึ่งยังไม่ได้สั่งแสดงเครื่องมือหน้าเว็บนั้นจะเป็นแบบนี้

พอเราสั่งให้แสดงหน้าเว็บบนแท็บด้านบนโดยเลือกที่
หน้าเว็บ > แสดงหน้าเว็บเป็น > แท็บด้านบนสุด
ก็จะเป็นแบบด้านล่างนี้

ซึ่งจะพบว่าช่องสำหรับ 'เพิ่ม Gadget' ที่เคยมีอยู่ได้หายไป
โดยเราสามารถเรียกคืนช่องสำหรับใส่ Gadget ให้เป็นดังรูปด้านล่างได้ด้วยวิธีดังต่อไปนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. สั่งค้นหา
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>

ขั้นตอนที่ 3. แทนที่โค้ดที่หาเจอนั้นด้วย
<b:section class='navbar' id='navbar' showaddelement='yes'>

ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็เสร็จแล้ว

Blogger: เปิดช่องใส่เครื่องมือเหนือบทความ

noreply@blogger.com (Max) — Tue, 15 Oct 2013 13:56:00 +0700

บทความนี้เป็นตัวอย่างการแก้ไขช่องใส่ Gadget โดยการตั้งค่า "Show Add Element"
ตามปกติแล้วบล็อกเกอร์ที่สร้างขึ้นใหม่จะมีคอลัมน์ใส่บทความบล็อกเป็นแบบนี้

โดยเราสามารถเปิดช่องสำหรับใส่ Gadget ให้เป็นดังรูปด้านล่างได้ด้วยวิธีดังต่อไปนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. สั่งค้นหา
<b:section class='main' id='main' showaddelement='no'>

ขั้นตอนที่ 3. แทนที่โค้ดที่หาเจอนั้นด้วย
<b:section class='main' id='main' showaddelement='yes'>

ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็เสร็จแล้ว

Window 7: เรียกคืนไอคอน My computer บนหน้า Desktop

noreply@blogger.com (Max) — Sat, 12 Oct 2013 15:00:00 +0700

บางคนที่เผลอทำไอคอน My Computer บนหน้าเดสก์ท็อปของ Window 7 หายไป สามารถแก้ได้ดังนี้

ขั้นตอนที่ 1. กดไอคอนรูปสัญลักษณ์วินโดว์ที่มุมซ้ายล่างของหน้าจอ

ขั้นตอนที่ 2. กดคลิกเมาส์ขวาที่คำว่า 'Computer' ดังรูป

ขั้นตอนที่ 3. แล้วจะเห็นตัวเลือก 'Show on Destop' แสดงอยู่ โดยให้กดสั่งเปิดใช้งานดังภาพก็เสร็จแล้ว

Web: บริการสร้าง QR Code ฟรี

noreply@blogger.com (Max) — Tue, 8 Oct 2013 11:22:00 +0700

ในปัจจุบันเราสามารถค้นหาเว็บที่ให้บริการสร้าง QR code แบบฟรีได้มากมาย และบางแห่งก็ยังสามารถบันทึก Format เป็นไฟล์ Vector เช่น .svg .eps ได้ด้วย
โดยจะขอแนะนำเว็บไซต์ที่ให้่บริการช่วยสร้าง QR code บางส่วนดังนี้

http://qrcode.littleidiot.be/
แสดงให้เห็นทันทีหลังพิมพ์ข้อความเสร็จโดยไม่ต้องกดสร้าง

http://www.the-qrcode-generator.com/
มีประเภทของข้อมูลให้เลือกมากมายหลายชนิด

http://www.qrcode-monkey.com/
มีภาพไอคอนให้เลือกใส่ด้วย

Blogger: ลบคำว่า 'แสดงบทความที่มีป้ายกำกับ... แสดงบทความทั้งหมด'

noreply@blogger.com (Max) — Mon, 7 Oct 2013 20:12:00 +0700

บทความนี้คือวิธีลบข้อความที่ถูกแสดงอยู่ข้างบนเหนือส่วนของบทความเมื่อเลือกป้ายกำกับใดๆ ก็ตามใน Blogger

โดยข้อความนี้จะถูกเขียนเป็นภาษาไทยว่า
'แสดงบทความที่มีป้ายกำกับ... แสดงบทความทั้งหมด'
หรือที่เขียนเป็นภาษาอังกฤษว่า
Remove 'Showing post with label...show all posts'
ซึ่งวิธีลบข้อความที่กล่าวมานั้นสามารถทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. ให้ค้นหา
<b:includable id='status-message'>

ตรงจุดที่หาเจอนั้นจะเป็นตำแหน่งของโค้ดเป้าหมายของเราซึ่งนับลงมาได้รวม 15 บรรทัดเขียนไว้ว่า
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

ขั้นตอนที่ 3. ให้สั่งแทนที่โค้ดทั้งหมดซึ่งเป็นโค้ดเป้าหมายตามขั้นตอนที่แล้วด้วยโค้ดใหม่ข้างล่างนี้
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วลองเปิดบล็อกเพื่อดูผลลัพธ์

Credit: http://simple-blogger-tips.blogspot.com/2009/06/remove-showing-post-with-labelshow-all.html

Blogger: เมนูแท็บนำทางแบบเลื่อนลง

noreply@blogger.com (Max) — Sun, 6 Oct 2013 19:43:00 +0700

บทความนี้จะอธิบายการติดตั้งเมนูแท็บนำทางแบบเลื่อนลง (Drop Down Menu Navigation) โดยการติดตั้งเมนูแบบเลื่อนลงตามวิธีในบทความนี้จะต้องสั่งไม่แสดงเมนูหน้าเว็บแบบเดิมของบล็อกเกอร์ก่อนจึงจะทำงานได้เป็นปกติ และต้องกำหนดลิงก์ใหม่ในเมนูนี้ด้วยตนเอง ดังนั้นก่อนเริ่มแก้ไขแก้ไขโค้ดบล็อกตามบทความนี้ ก็ควรดาวน์โหลดเทมเพลทบล็อกที่กำลังใช้อยู่ในขณะนี้เก็บสำรองไว้ในเครื่องของคุณเองก่อนนะ

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'หน้าเว็บ' แล้วตั้งค่าของ 'แสดงหน้าเว็บเป็น' โดยเลือกแบบ 'ไม่แสดง'

ขั้นตอนที่ 2. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 3. วาง CSS ของเมนู
ค้นหา
]]></b:skin>

แล้วแทนที่ด้วย
/* Drop Down Menu Navigation
----------------------------------------------- */
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
z-index: 1;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #333333;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #eeeeee;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active > a {
background: #d9d9d9 url(grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
filter: none;
}
#cssmenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #ffffff;
-moz-box-shadow: inset 0 0 0 1px #ffffff;
-webkit-box-shadow: inset 0 0 0 1px #ffffff;
background: #bfbfbf url(grad_light.png) repeat-x left top;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
border-bottom: 1px solid #d2d2d2;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu > ul > li a:hover {
background: #ffffff url(grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
filter: none;
}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #d2d2d2;
}
#cssmenu > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;
}
#cssmenu .has-sub ul li {
text-align: center;
}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #d2d2d2;
display: block;
font-size: 12px;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}

]]></b:skin>

ขั้นตอนที่ 4. วางเมนูแบบเลื่อนลง
ค้นหา
<div class='region-inner tabs-inner'>

แทนที่ด้วย
<div class='region-inner tabs-inner'>


<div id='cssmenu'>
<ul>


</ul>
</div>

ขั้นตอนที่ 5. ใส่ลิงก์ลงในเมนู
ใส่ลิงก์ที่ต้องการลงไปในโค้ดสำหรับแทนที่จากขั้นตอนที่ีแล้วตรงตำแหน่งระหว่างโค้ดบรรทัดที่ 6 กับ 7 ซึ่งก็คือ

และ

ซึ่งมีโครงสร้างดังนี้

แบบที่ 1 การใส่ลิงก์ชั้นเดียวมีโครสร้างคือ
<li class='has-sub'><a href='ปลายทางของลิงก์ปกติ'><span>ข้อความลิงก์ปกติ</span></a></li>

แบบที่ 2 การใส่ลิงก์แบบเลื่อนลงมีโครสร้างคือ
<li class='has-sub'><a href='ปลายทางของลิงก์ปกติ'><span>ข้อความลิงก์ปกติ</span></a>
<ul>
<li><a href='ปลายทางของลิงก์ย่อย'><span>ข้อความลิงก์ย่อย</span></a></li>
<li><a href='ปลายทางของลิงก์ย่อย'><span>ข้อความลิงก์ย่อย</span></a></li>
<li><a href='ปลายทางของลิงก์ย่อย'><span>ข้อความลิงก์ย่อย</span></a></li>
</ul>
</li>

โดยตอนนำไปใช้ก็ให้แทนที่คำว่า
- ปลายทางของลิงก์ปกติ
- ข้อความลิงก์ปกติ
- ปลายทางของลิงก์ย่อย
- ข้อความลิงก์ย่อย
ให้ตรงกับเป้าหมายได้ตามต้องการ แต่ถ้าหากว่าต้องการให้ปุ่มอันใดก็ตามในเมนูไม่มีสถานะเป็นลิงก์ก็สามารถทำได้โดยให้แทนที่
<a href='ปลายทางของลิงก์ปกติ'> หรือ <a href='ปลายทางของลิงก์ย่อย'>
ด้วยโค้ดว่า
</a>
ก็จะทำให้เมนูในจุดนั้นไม่เป็นลิงก์

ตัวอย่างการเขียนจากวิธีที่กล่าวมาเช่น

<li class='last'><a href='http://tip.maxlayout.com/'><span>Home</span></a></li>
<li class='has-sub'><a href='http://tip.maxlayout.com/search/label/Text%20Effect'><span>Text Effect</span></a>
<ul>
<li><a href='http://tip.maxlayout.com/search/label/Photoshop'><span>Photoshop</span></a></li>
<li><a href='http://tip.maxlayout.com/search/label/Illustrator'><span>Illustrator</span></a></li>
<li><a href='http://tip.maxlayout.com/search/label/Fireworks'><span>Fireworks</span></a></li>
</ul>
</li>
<li class='has-sub'><a><span>Graphic 3D</span></a>
<ul>
<li><a href='http://tip.maxlayout.com/search/label/Lightwave'><span>Lightwave</span></a></li>
<li><a href='http://tip.maxlayout.com/search/label/3ds%20Max'><span>3ds Max</span></a></li>
</ul>
</li>
<li class='last'><a href='http://www.facebook.com/maxlayout'><span>Fanpage</span></a></li>

อธิบายเพิ่มเติมเกี่ยวกับการปรับค่าของเมนูลิงก์

เนื้อหาส่วนนี้จะอธิบายเกี่ยวกับวิธีปรับลิงก์ให้ชี้ปลายทางตาม URL ภายในตัวบล็อกเดียวกัน เพื่อให้ลิงก์ที่เขียนนั้นสั้นลงและสะดวกยิ่งขึ้น ซึ่งถ้าหากใครคิดว่ามันไม่จำเป็นก็หยุดอยู่ในขั้นตอนที่ 5 แล้วไม่ต้องอ่านเนื้อหาส่วนอธิบายเพิ่มเติมนี้ก็ได้ครับ

การกำหนดปลายทางของลิงก์ไปสู่หน้าหลักสามารถเขียนแบบย่อได้ว่า
index.html
เช่นถ้าหากเมนูนี้ถูกติดตั้งลงในบล็อก
http://tip.maxlayout.com/
การกำหนดลิงก์ว่า
<li class='has-sub'><a href='index.html'><span>Home</span></a></li>
จะให้ผลเหมือนกับ
<li class='has-sub'><a href='http://tip.maxlayout.com/'><span>Home</span></a></li>

การกำหนดข้อความลงไปในปลายทางของลิงก์จะะถูกนำไปเขียนต่อจาก URL ของบล็อกเกอร์เช่น
เช่นถ้าเมนูหากนี้ถูกติดตั้งลงในบล็อก
http://tip.maxlayout.com/
การกำหนดลิงก์ว่า
<li class='has-sub'><a href='search/label/Illustrator'><span>Photoshop</span></a></li>
จะให้ผลเหมือนกับ
<li class='has-sub'><a href='http://tip.maxlayout.com/search/label/Photoshop'><span>Photoshop</span></a></li>

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

<li class='last'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='Text%20Effect'><span>Text Effect</span></a>
<ul>
<li><a href='search/label/Photoshop'><span>Photoshop</span></a></li>
<li><a href='search/label/Illustrator'><span>Illustrator</span></a></li>
<li><a href='search/label/Fireworks'><span>Fireworks</span></a></li>
</ul>
</li>
<li class='has-sub'><a><span>Graphic 3D</span></a>
<ul>
<li><a href='search/label/Lightwave'><span>Lightwave</span></a></li>
<li><a href='search/label/3ds%20Max'><span>3ds Max</span></a></li>
</ul>
</li>
<li class='last'><a href='http://www.facebook.com/maxlayout'><span>Fanpage</span></a></li>

credit:
http://www.nosegraze.com/how-to-add-a-drop-down-menu-navigation-in-blogger/
http://cssmenumaker.com/builder/938078
http://cssmenumaker.com/blog/tutorials/drop-down-menu-for-blogger
http://xomisse.com/blog/create-a-drop-down-navigation-menu/
http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html

Blogger: ให้หน้าแรกแสดงเพียงชื่อบทความ ภาพตัวอย่าง และตัวนับจำนวนคอมเมนต์

noreply@blogger.com (Max) — Tue, 1 Oct 2013 21:30:00 +0700

บทความนี้จะเป็นวิธีทำให้หน้าแรกของบล็อกเกอร์แสดงเพียงแค่ภาพตัวอย่างขนาดย่อ ตามด้วยชื่อบทความและจำนวนคอมเมนต์ตามลำดับ โดยเมื่อผู้ชมบล็อกกดเข้าไปอ่านบทความก็จะแสดงเนื้อหาบล็อกตามปกติซึ่งทำได้ดังนี้

ขั้นตอนที่ 1. เปิดหน้าจอแก้ไขโค้ด
โดยเข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. เลือกโค้ดสำหรับแสดงภาพตัวอย่างขนาดย่อดังนี้
โดยสั่งค้นหา
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

ในบริเวณจุดที่หาเจอนั้นถ้าหากนับลงด้านล่างมาประมาณ 7 บรรทัดจะพบโค้ดเป้าหมายสำหรับการสร้างภาพตัวอย่างของเรา
ซึ่งโค้ดเป้าหมายที่ต้องแก้ไขได้ถูกเขียนเอาไว้ว่า
<a expr:name='data:post.id'/>
โดยให้แทนที่โค้ดเป้าหมายดังกล่าวนั้นด้วยโค้ดแบบใดแบบหนึ่งข้างล่างนี้

ชนิดที่ 2.1 ต้องการให้รูปตัวอย่างแสดงเป็นสี่เหลี่ยมจตุรัส

ซึ่งโค้ดขนิดสี่เหลี่ยมจตุรัสนี้ก็คือ
<a expr:name='data:post.id'/>

<b:if cond='data:blog.url != data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=250;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s250/maxlayout-pencil-blogger-no-image-2013.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a></b:if>


โดยสามารถแก้ไขขนาดภาพตัวอย่างได้จากในบรรทัดที่ 8 ซึ่งถูกเขียนเอาไว้ว่า
var image_size=250;
ให้เป็นขนาดใหม่ได้ตามต้องการ

ชนิดที่ 2.2 ต้องการให้รูปตัวอย่างแสดงเป็นสี่เหลี่ยมผืนผ้าที่สูงและกว้างไม่เท่ากัน

ซึ่งโค้ดขนิดสี่เหลี่ยมผืนผ้านี้ก็คือ
<a expr:name='data:post.id'/>

<b:if cond='data:blog.url != data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_height=300;
var image_width=400;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s250/maxlayout-pencil-blogger-no-image-2013.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_height+'-c/')+'" class="postthumb" alt="'+post_title+'" height="'+image_height+'" width="'+image_width+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>
</b:if>


โดยสามารถแก้ไขขนาดภาพตัวอย่างได้จากในบรรทัดที่ 8 และ 9 ซึ่งถูกเขียนเอาไว้ว่า
var image_height=300;
var image_width=400;
ให้เป็นความกว้างและสูงใหม่ได้ตามต้องการ

ขั้นตอนที่ 3. ซ่อนเนื้อหาขณะอยู่ในหน้าแรก
โดยสั่งค้นหา
]]></b:skin>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดใหม่นี้
]]></b:skin>

<b:if cond='data:blog.pageType == "index"'>
<style>
.post-header,
.post-body,
.jump-link,
.post-footer {
display: none;
}
</style>
</b:if>

ขั้นตอนที่ 4. แสดงตัวนับคอมเมนต์
โดยสั่งค้นหา
<b:if cond='data:post.hasJumpLink'>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดใหม่นี้

<div class='post-comment-counter'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
</div>

<b:if cond='data:post.hasJumpLink'>

อธิบายเพิ่มเติมวิธีย้ายชื่อบทความให้ไปอยู่ทางขวาของรูปตัวอย่าง

สามารถทำได้โดยปรับโค้ดในขั้นตอนที่ 3 และ 4 ใหม่ให้เป็นดังข้างล่างนี้

เปลี่ยนโค้ดสำหรับแทนที่ในขั้นตอนที่ 3 ให้เป็น
]]></b:skin>

<b:if cond='data:blog.pageType == "index"'>
<style>
h3.post-title.entry-title,
.post-header,
.post-body,
.jump-link,
.post-footer {
display: none;
}
.post-outer {
min-height: 60px;
}
.postthumb {
overflow: hidden;
}
.post-show-index {
position: absolute;
display: inline;
padding: 0 0 0 10px;
}
.post-comment-counter {
padding: 10px 0 0 0;
}
</style>
</b:if>


เปลี่ยนโค้ดสำหรับแทนที่ในขั้นตอนที่ 4 ให้เป็น

<div class='post-show-index'>
<div class='post-title-index'>
<b:if cond='data:post.title'>
<h3>
<div class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</div>
</h3>
</b:if>
</div>
<div class='post-comment-counter'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
</div>
</div>

<b:if cond='data:post.hasJumpLink'>

Blogger: ลบหรือซ่อนคำว่า "สมัครสมาชิก: บทความ (Atom)"

noreply@blogger.com (Max) — Sat, 24 Aug 2013 12:43:00 +0700

วิธีทำให้ข้อความ "สมัครสมาชิก: บทความ (Atom)" หายไป (Remove “Subscribe to: Posts(Atom)” Link From Blogger Blogs) นั้นมีอยู่ 2 วิธีซึ่งจะเลือกใช้วิธีไหนก็ได้ตามความชอบของแต่ละคน โดยสามารถทำได้ดังนี้

วิธีทำให้หายไปด้วยการใช้ CSS

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. สั่งค้นหา
]]></b:skin>

ขั้นตอนที่ 3. แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
.blog-feeds{display:none !important;}
]]></b:skin>

ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็เสร็จแล้ว

วิธีทำให้หายไปด้วยการลบ feed links

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. สั่งค้นหา
<b:include name='feedLinks'/>

ขั้นตอนที่ 3. แล้วลบโค้ดที่หาเจอนั้นทิ้งไป

ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็เสร็จแล้ว

อธิบายเพิ่มเติม
นอกจากนี้ถ้าต้องการลบข้อความว่า "บทความที่ใหม่กว่า หน้าแรก บทความที่เก่ากว่า" ก็สามารถทำได้ตามลิงก์นี้ครับ
http://tip.maxlayout.com/2016/01/blogger-remove-newer-post-home-older-posts.html

Credit: http://www.way2blogging.org/2011/03/how-to-remove-subscribe-to-postsatom.html

Blogger: จัดเรียงบทความที่ได้รับความนิยมหรือ Polular Posts ตามแนวนอน

noreply@blogger.com (Max) — Mon, 19 Aug 2013 12:03:00 +0700

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. สั่งค้นหา
]]></b:skin>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
/* Popular Posts
----------------------------------------------- */
.widget.PopularPosts ul li {
display: inline-block;
width: 130px;
height: 180px;
border: none;
margin: 0;
padding: 0;
float: left;
}

.widget.PopularPosts DIV.item-thumbnail-only DIV.item-thumbnail img {
width: 100px;
height: 100px;
padding-left: 15px;
}

.widget.PopularPosts DIV.item-thumbnail-only DIV.item-title {
padding: 5px 5px 0;
text-align: center;
}

]]></b:skin>

ขั้นตอนที่ 3. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็เสร็จแล้ว

อธิบายเพิ่มเติม
ลักษณะและขนาดของบทความตัวอย่างแต่ละอันกำหนดด้วยโค้ด
.widget.PopularPosts ul li {

ลักษณะและขนาดของภาพตัวอย่างกำหนดด้วยโค้ด
.widget.PopularPosts DIV.item-thumbnail-only DIV.item-thumbnail img {

ลักษณะและขนาดของหัวข้อกำหนดด้วยโค้ด
.widget.PopularPosts DIV.item-thumbnail-only DIV.item-title {