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


0 ความคิดเห็น

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: กฏการตั้งชื่อตัวแปร และคำสงวนในภาษาไพธอน


0 ความคิดเห็น

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

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

andassertbreakclasscontinue
defdelelifelse except
execfinallyforfromglobal
ifimportinislamda
notorpassprintraise
returntrywhileyield


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

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


0 ความคิดเห็น

วิธีลบให้ข้อความ "บทความที่ใหม่กว่า หน้าแรก บทความที่เก่ากว่า" หายไป (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: สไลเดอร์รูปภาพแบบหีบเพลงยืดหด


3 ความคิดเห็น

วิธีสร้างสไลเดอร์รูปภาพแบบยืดหด (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


3 ความคิดเห็น

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: แสดงบทความล่าสุดจำแนกตามป้ายกำกับแบบเลือกเอง


2 ความคิดเห็น

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

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

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

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

<!-- Label Recent Posts Style Start -->
<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>
<!-- Label Recent Posts Style End -->
<!-- Label Recent Posts Script Start -->
<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>
<!-- List Start -->

<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>

<!-- List End -->
</div>
<!-- Label Recent Posts Script End -->


อธิบายเพิ่มเติม
ตอนนำไปใช้เองก็ให้แทนที่ URL ด้วยวิธีดังนี้
ส่วนแสดงเนื้อหาว่าจะมาจากบล็อกใดเขียนอยู่ในส่วนท้ายระหว่าง <!-- List Start --> และ <!-- List End -->
มีโครงสร้างคือ
<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: ให้หน้าแรกแสดงภาพตัวอย่างขนาดเล็กพร้อมเนื้อหาที่เราเลือกไว้


0 ความคิดเห็น

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

ซึ่งบทความนี้อาจไม่เหมาะสำหรับผู้เขียนบล็อกที่ไม่ชอบการแก้ไข 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='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>


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


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

ด้วยโค้ดข้างล่างนี้
<!-- maxlayout post hide and seek - start -->
<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(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>

<!-- maxlayout clone label and comment counter start -->
    <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 != &quot;true&quot;'>,</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 != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
    </div>
  <br/>
<!-- maxlayout clone label and comment counter end -->
<div class='post-hideandseek'>
<data:post.body/>
</div>
<b:else/>
<data:post.body/>
</b:if>
<!-- maxlayout post hide and seek - end -->



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

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
]]></b:skin>
<!-- maxlayout post index hide and seek - start -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<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>
<!-- maxlayout post index hide and seek - end -->



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

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


0 ความคิดเห็น

คำอธิบายเกี่ยวกับลิงค์แบบ 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: การทำปุ่มเปิดปิดเพื่อซ่อนหรือแสดงเนื้อหาบางส่วน


0 ความคิดเห็น

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

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

ทำได้โดยคัดลอกโค้ดแบบใดแบบหนึ่งด้านล่างนี้ไปวางในช่อง 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 จุดเช่นเดียวกับตัวอย่างข้างล่างนี้ เช่นถ้าโค้ดปุ่มแรกคือ
<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 />
ดังนั้นปุ่มที่สองจะเขียนได้โดยแทนที่คำว่า 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: แสดงบทความทั้งหมดไว้ในหน้าเดียวกัน


30 ความคิดเห็น

Update: 2014/09/12

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

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

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

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

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


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

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

<!-- Show All Posts Style Start -->
<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>
<!-- Show All Posts Style End -->
<!-- Show All Posts Script Start -->
<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>
<!-- Show All Posts Script End -->



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

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

<!-- Show All Posts Style Start -->
<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>
<!-- Show All Posts Style End -->
<!-- Show All Posts Script Start -->
<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>
<!-- Show All Posts Script End -->



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

ตอนนำไปใช้เองก็ให้แทนที่ 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