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


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

1.เคลื่่อนย้ายจุด vertices ของวัตถุชื่อ cube

import bpy
bpy.data.objects["Cube"].data.vertices[2].co.x += 1.0


2.เคลื่่อนย้ายวัตถุที่เลือกอยู่

import bpy
bpy.ops.transform.translate(value = (0.5,0,0))


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

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


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


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

Blender: import mmd


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

Step 1.
Go to the mmd_tools download link below then click "Download ZIP"
https://github.com/sugiany/blender_mmd_tools

Step 2.
Extract ZIP File.

Step 3.
Now you have a new folder that is named "blender_mmd_tools-master". Go inside that folder once

Step 4.
Cut and paste the "mmd_tools" into your addons folder.
(EX: Program Files\Blender Foundation\Blender\2.76\scripts\addons)

Step 5.
Open up blender and go to "File" then "User Preferences"

Step 6.
Once the Preferences box pops ups search "MMD" and to your right "object: mmd_tools" should be seen. the next step is important

Step 7.
Check the  box  next to the little running man and at the bottom click save user preferences
(If you don't you're not going to be able to import .pmd or .pmx files)

Step 8.
Go to "File" then "Import" and import your MMD Files.

Credit:
https://www.youtube.com/watch?v=WBX7DHfQ9SU
https://www.youtube.com/user/PurpleHazePro
https://www.youtube.com/watch?v=ez8LLV7JUgo
http://hanatsuki-kimiko.deviantart.com/art/MMD-to-Blender-Tutorial-1-The-Basics-415726940

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="http://4.bp.blogspot.com/-0Wd_XVrQgBM/TiZLFN9FHYI/AAAAAAAADAc/dYXo2xhRY_o/photoshop-page-curl-018.png"/></li>
<li id="kwick2"><img alt="Otaru Orgel Museum" src="http://3.bp.blogspot.com/-b21lbzhOpDM/T3hg0ulfKaI/AAAAAAAAEZI/l9qT5f1MIHA/s400/photoshop-distort-ripple-frame-008.png"/></li>
<li id="kwick3"><img alt="Uni"  src="http://2.bp.blogspot.com/-xg09jRqgJS4/T3bYO_aMIkI/AAAAAAAAEX4/xBlxATpd6CM/s400/photoshop-feather-frame-contract-selection-006.png"/></li>
<li id="kwick4">"><img alt="Otaru Canal"  src="http://2.bp.blogspot.com/-Ysa1JClu1HQ/T3Z_0-1SNdI/AAAAAAAAEWU/ZXGgtRBGlRc/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="http://4.bp.blogspot.com/-0Wd_XVrQgBM/TiZLFN9FHYI/AAAAAAAADAc/dYXo2xhRY_o/photoshop-page-curl-018.png"/></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="http://3.bp.blogspot.com/-b21lbzhOpDM/T3hg0ulfKaI/AAAAAAAAEZI/l9qT5f1MIHA/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="http://2.bp.blogspot.com/-xg09jRqgJS4/T3bYO_aMIkI/AAAAAAAAEX4/xBlxATpd6CM/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="http://2.bp.blogspot.com/-Ysa1JClu1HQ/T3Z_0-1SNdI/AAAAAAAAEWU/ZXGgtRBGlRc/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://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/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://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/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