ต่อไป »

[ningnongkup]

template ตัวอย่าง>>  http://btemplates.com/2011/blogger-template-feminina/demo/

สิ่งที่ต้องการคืออยากได้ code ตรงส่วน body post ที่แสดง recented post with thumnail ซึ่งมันแยกออกตาม label ไปใช้กับ blog ครับ
รูปครับ

หลายๆ คนในนี้อาจจะทำได้อย่างง่าย ๆ เพราะมีความรู้เรื่องนี้ดี แต่ผมจนปัญญาครับ ขอบคุณทุกท่าครับ

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








 
 

[ningnongkup]

ฮึบ ดันนิดเผื่อ เทพยังไม่มาเห็น ถ้าไม่ได้จริง ๆ จะได้ไปหา จ้างที่อื่น 

[wave100]

สักครู่นะครับ

[waddee]

ไปหา copy ในส่วนของ

#main-wrapper


แล้วก็

<div id='main-wrapper'>
                             

               </div>

มาลงในเว็บคุณครับ.

[ningnongkup]

ไปหา copy ในส่วนของ

#main-wrapper


แล้วก็

<div id='main-wrapper'>
                             

               </div>

มาลงในเว็บคุณครับ.

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

[waddee]

งั้น ก็ไปเลือกใช้ theme นั้นเลย แล้วตัดส่วนที่ไม่ต้องการออก

[click2charm]

มาเก็บความรู้ครับ

[papielay]

เข้ามาดูครับ

[ningnongkup]

งั้น ก็ไปเลือกใช้ theme นั้นเลย แล้วตัดส่วนที่ไม่ต้องการออก

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

[wave100]

ใจเย็นนะ นั่งแงะอยู่ จริงๆทำตั้งแต่เมื่อคืนแล้ว แต่ยังไม่เสร็จครับ ^^

[afterdead]

น่าจะเป็นการอ้าง .js ด้วย ^ ^ ลองหา .js ดูเดี๋ยวตื่นแล้วถ้ายังไม่ได้ จะลองมาช่วยแงะอีกแรง ครับ !!! ตอนนี้ไม่ไหวมึน มาก !! 

[ningnongkup]

ใจเย็นนะ นั่งแงะอยู่ จริงๆทำตั้งแต่เมื่อคืนแล้ว แต่ยังไม่เสร็จครับ ^^

ขอบคุณมากครับ wave100 

[ningnongkup]

น่าจะเป็นการอ้าง .js ด้วย ^ ^ ลองหา .js ดูเดี๋ยวตื่นแล้วถ้ายังไม่ได้ จะลองมาช่วยแงะอีกแรง ครับ !!! ตอนนี้ไม่ไหวมึน มาก !! 

ขอบคุณมาก ๆ เลยครับ

[thaieditblog]

มาดันครับ

[NongNatty]

ลองดู

โค๊ด:

http://beautifulbeta.wikidot.com/json-feeds, http://websitetemplatedatabase.com/blogging/34-recent-posts-

แล้วก็ดูจาก source blog ตัวอย่างไปด้วย เดี๋ยวก็ทำได้ครับ

[testsoft]

เอาใจช่วยคุณ wave100 ออกแรงช่วยเจ้าของกระทู้ครับ

[afterdead]

โค๊ด:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='content'>

<script language='JavaScript'>
//<![CDATA[

imgr = new Array();
imgr[0] = "http://lh4.googleusercontent.com/_5UzqrQjtYEQ/TX6Y6j6b6FI/AAAAAAAAA1U/tNn1QGjsHMI/s000/nothumbnail[1].png";
showRandomImg = true;
aBold = true;
summaryPost = 60; // number character showed in blog post
summaryTitle = 25; // number of character showed in post title
numposts = 3; // number of post showed in each category

var contarlabels = 0;
labelname = new Array("Beauty","Gastronomy","Fashion","Lorem");
labeltitle = new Array("Beauty","Gastronomy","Fashion","Lorem");

function removeHtmlTag(strx,chop){
	var s = strx.split("<");
	for(var i=0;i<s.length;i  ){
		if(s[i].indexOf(">")!=-1){
			s[i] = s[i].substring(s[i].indexOf(">") 1,s[i].length);
		}
	}
	s =  s.join("");
	s = s.substring(0,chop-1);
	return s;
}

function showrecentposts(json) {

var salida = "";
var salidainner= "";

	j = (showRandomImg) ? Math.floor((imgr.length 1)*Math.random()) : 0;
	img  = new Array();

  	for (var i = 0; i < numposts; i  ) {
    	var entry = json.feed.entry[i];
    	var posttitle = entry.title.$t;
		var pcm;
    	var posturl;
    	if (i == json.feed.entry.length) break;
    	for (var k = 0; k < entry.link.length; k  ) {
      		if (entry.link[k].rel == 'alternate') {
        		posturl = entry.link[k].href;
        		break;
      		}
    	}
		
		for (var k = 0; k < entry.link.length; k  ) {
      		if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        		pcm = entry.link[k].title.split(" ")[0];
        		break;
      		}
    	}
		
    	if ("content" in entry) {
      		var postcontent = entry.content.$t;}
    	else
    	if ("summary" in entry) {
      		var postcontent = entry.summary.$t;}
    	else var postcontent = "";
    	
    	postdate = entry.published.$t;
	
	if(j>imgr.length-1) j=0;
	img[i] = imgr[j];
	
	s = postcontent	; a = s.indexOf("<img"); b = s.indexOf("src="",a); c = s.indexOf(""",b 5); d = s.substr(b 5,c-b-5);

	if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

	//cmtext = (text != 'no') ? '<i><font color="' acolor '">(' pcm ' ' text ')</font></i>' : '';


	var month = [1,2,3,4,5,6,7,8,9,10,11,12];
	var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

	var day = postdate.split("-")[2].substring(0,2);
	var m = postdate.split("-")[1];
	var y = postdate.split("-")[0];

	for(var u2=0;u2<month.length;u2  ){
		if(parseInt(m)==month[u2]) {
			m = month2[u2] ; break;
		}
	}

	//var daystr = (showPostDate) ? '<i><font color="' acolor '"> - (' day  ' '   m   ' '   y   ')</font></i>' : "";

posttitle = (aBold) ? "<b>" posttitle "</b>" : posttitle;

	var trtd = '<a href="' posturl '"><img src="' img[i] '"></a><a href="' posturl '"><b>' removeHtmlTag(posttitle,summaryTitle) '...</b></a><br/>' removeHtmlTag(postcontent,summaryPost) '...<div class="botline"></div>';

	//document.write(trtd);
        salidainner  = trtd;

	j  ;
}

salida  = '<div class="featured">';
salida  = '<h3>'   labeltitle[contarlabels]   '</h3>';
salida  = salidainner;
salida  = '<b><a href="http://femininamagazine-btemplates.blogspot.com/search/label/'   labelname[contarlabels]   '?max-results=10">More '  labelname[contarlabels]  '</a></b>';
salida  = '</div>';
document.write(salida);
contarlabels   ;
}

//]]>
</script>

</div>

<script src='http://femininamagazine-btemplates.blogspot.com/feeds/posts/default/-/Beauty?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://femininamagazine-btemplates.blogspot.com/feeds/posts/default/-/Gastronomy?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://femininamagazine-btemplates.blogspot.com/feeds/posts/default/-/Fashion?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://femininamagazine-btemplates.blogspot.com/feeds/posts/default/-/Lorem 1?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

</b:if></b:if>

ยังไม่ได้ลองน่าจะเป็นตรงนี้ ครับ ^ ^ ลองดูละกัน !! อันนี้ครับบบบ น่าจะชัวร์ ส่วนเรื่อง CSS เดี๋ยวจะมาต่อให้ ^ ^ ลองฝึกๆหาไปก่อนจะได้ชำนาญ ^ ^

มาอธิบายต่อครับ เผื่อหลายๆคนจะงง

ต่อไปนี้ คือส่วนของการดึงเนื้อหานะครับ
labelname กับ
labeltitle
ส่วน ผมคิดว่าน่าจะเป็นการดึงมาจาก labelname ชื่ออะไร  กับ labeltitle น่าจะเป็นตัวที่แสดงโชว์บนเว็บของเรา ประมาณ Beauty แบบนี้ ^ ^ (ปล.งั้นนี้ไม่ได้แงะ)


 <script src="xxxx"> นั่นคือจะดึงเนื้อหามาจาก Feed ของบล็อกใดๆ ตามรูปแบบ URL แบบนั้นคือดึงมาจาก บล็อกเกอร์ครับ

อีกส่วน สีชมพู คือใช้ตั้งค่าต่างๆ มีคำอธิบายไว้อยู่แล้วครับ ลอง อ่านดู ^ ^   ไปก่อนละ !!


CSS

โค๊ด:

.featured {
float: left;
width:287px;
height: 340px;
margin: 3px 4px 4px 1px;
padding:8px 8px;
overflow: hidden;
text-shadow: 1px 1px 0 #FFFFFF;
}
.featured img {
background: #F8F8F8;
border: 1px solid #FFFFFF;
padding: 3px;
margin: 0px 10px 0px 0px;
float: left;
width:80px;
height:80px;
}

.featured img:hover{
-webkit-box-shadow: 0px 0px 4px #9e9c9e;
-moz-box-shadow: 0px 0px 4px #9e9c9e;
box-shadow: 0px 0px 4px #9e9c9e; 
}


.featured h3 {
color: #f8004c;
font-size: 12px;
font: normal normal 15px Vollkorn;
text-align: left;
text-transform: uppercase;
margin: 0px 0px 5px 0px;
padding: 7px 0px 3px 0px;
background: url(http://2.bp.blogspot.com/_5UzqrQjtYEQ/TX6XKN3ayJI/AAAAAAAAA0s/rN-7CZjFC8g/s000/line2.png)  repeat-x bottom left;text-shadow: 1px 1px 0 #FFFFFF;
 text-shadow: 1px 1px 0 #FFFFFF;
}

.botline {
border-bottom: 1px dotted #ccc;
padding: 0px 0px 10px;
margin-bottom: 10px;
clear: both;
}

ลองแล้วก็ น่าจะประมาณนี้ครับ ^ ^ เอามาโพสเผื่อคนอื่นจะได้ใช้ได้ 55

[ningnongkup]

โค๊ด:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='content'>

<script language='JavaScript'>
//<![CDATA[

imgr = new Array();
imgr[0] = "http://lh4.googleusercontent.com/_5UzqrQjtYEQ/TX6Y6j6b6FI/AAAAAAAAA1U/tNn1QGjsHMI/s000/nothumbnail[1].png";
showRandomImg = true;
aBold = true;
summaryPost = 60; // number character showed in blog post
summaryTitle = 25; // number of character showed in post title
numposts = 3; // number of post showed in each category

var contarlabels = 0;
labelname = new Array("Beauty","Gastronomy","Fashion","Lorem");
labeltitle = new Array("Beauty","Gastronomy","Fashion","Lorem");

function removeHtmlTag(strx,chop){
	var s = strx.split("<");
	for(var i=0;i<s.length;i  ){
		if(s[i].indexOf(">")!=-1){
			s[i] = s[i].substring(s[i].indexOf(">") 1,s[i].length);
		}
	}
	s =  s.join("");
	s = s.substring(0,chop-1);
	return s;
}

function showrecentposts(json) {

var salida = "";
var salidainner= "";

	j = (showRandomImg) ? Math.floor((imgr.length 1)*Math.random()) : 0;
	img  = new Array();

  	for (var i = 0; i < numposts; i  ) {
    	var entry = json.feed.entry[i];
    	var posttitle = entry.title.$t;
		var pcm;
    	var posturl;
    	if (i == json.feed.entry.length) break;
    	for (var k = 0; k < entry.link.length; k  ) {
      		if (entry.link[k].rel == 'alternate') {
        		posturl = entry.link[k].href;
        		break;
      		}
    	}
		
		for (var k = 0; k < entry.link.length; k  ) {
      		if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        		pcm = entry.link[k].title.split(" ")[0];
        		break;
      		}
    	}
		
    	if ("content" in entry) {
      		var postcontent = entry.content.$t;}
    	else
    	if ("summary" in entry) {
      		var postcontent = entry.summary.$t;}
    	else var postcontent = "";
    	
    	postdate = entry.published.$t;
	
	if(j>imgr.length-1) j=0;
	img[i] = imgr[j];
	
	s = postcontent	; a = s.indexOf("<img"); b = s.indexOf("src="",a); c = s.indexOf(""",b 5); d = s.substr(b 5,c-b-5);

	if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

	//cmtext = (text != 'no') ? '<i><font color="' acolor '">(' pcm ' ' text ')</font></i>' : '';


	var month = [1,2,3,4,5,6,7,8,9,10,11,12];
	var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

	var day = postdate.split("-")[2].substring(0,2);
	var m = postdate.split("-")[1];
	var y = postdate.split("-")[0];

	for(var u2=0;u2<month.length;u2  ){
		if(parseInt(m)==month[u2]) {
			m = month2[u2] ; break;
		}
	}

	//var daystr = (showPostDate) ? '<i><font color="' acolor '"> - (' day  ' '   m   ' '   y   ')</font></i>' : "";

posttitle = (aBold) ? "<b>" posttitle "</b>" : posttitle;

	var trtd = '<a href="' posturl '"><img src="' img[i] '"></a><a href="' posturl '"><b>' removeHtmlTag(posttitle,summaryTitle) '...</b></a><br/>' removeHtmlTag(postcontent,summaryPost) '...<div class="botline"></div>';

	//document.write(trtd);
        salidainner  = trtd;

	j  ;
}

salida  = '<div class="featured">';
salida  = '<h3>'   labeltitle[contarlabels]   '</h3>';
salida  = salidainner;
salida  = '<b><a href="http://femininamagazine-btemplates.blogspot.com/search/label/'   labelname[contarlabels]   '?max-results=10">More '  labelname[contarlabels]  '</a></b>';
salida  = '</div>';
document.write(salida);
contarlabels   ;
}

//]]>
</script>

</div>

<script src='http://femininamagazine-btemplates.blogspot.com/feeds/posts/default/-/Beauty?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://femininamagazine-btemplates.blogspot.com/feeds/posts/default/-/Gastronomy?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://femininamagazine-btemplates.blogspot.com/feeds/posts/default/-/Fashion?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://femininamagazine-btemplates.blogspot.com/feeds/posts/default/-/Lorem 1?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

</b:if></b:if>

ยังไม่ได้ลองน่าจะเป็นตรงนี้ ครับ ^ ^ ลองดูละกัน !! อันนี้ครับบบบ น่าจะชัวร์ ส่วนเรื่อง CSS เดี๋ยวจะมาต่อให้ ^ ^ ลองฝึกๆหาไปก่อนจะได้ชำนาญ ^ ^


CSS

โค๊ด:

.featured {
float: left;
width:287px;
height: 340px;
margin: 3px 4px 4px 1px;
padding:8px 8px;
overflow: hidden;
text-shadow: 1px 1px 0 #FFFFFF;
}
.featured img {
background: #F8F8F8;
border: 1px solid #FFFFFF;
padding: 3px;
margin: 0px 10px 0px 0px;
float: left;
width:80px;
height:80px;
}

.featured img:hover{
-webkit-box-shadow: 0px 0px 4px #9e9c9e;
-moz-box-shadow: 0px 0px 4px #9e9c9e;
box-shadow: 0px 0px 4px #9e9c9e; 
}


.featured h3 {
color: #f8004c;
font-size: 12px;
font: normal normal 15px Vollkorn;
text-align: left;
text-transform: uppercase;
margin: 0px 0px 5px 0px;
padding: 7px 0px 3px 0px;
background: url(http://2.bp.blogspot.com/_5UzqrQjtYEQ/TX6XKN3ayJI/AAAAAAAAA0s/rN-7CZjFC8g/s000/line2.png)  repeat-x bottom left;text-shadow: 1px 1px 0 #FFFFFF;
 text-shadow: 1px 1px 0 #FFFFFF;
}

.botline {
border-bottom: 1px dotted #ccc;
padding: 0px 0px 10px;
margin-bottom: 10px;
clear: both;
}

ลองแล้วก็ น่าจะประมาณนี้ครับ ^ ^ เอามาโพสเผื่อคนอื่นจะได้ใช้ได้ 55

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

[ningnongkup]

ลองแล้วครับ ยังไม่ได้ ไม่รู้ว่า ผมวางไว้ถูกที่หรือเปล่า ยังไงช่วยบอกทีครับ เอาไปวางไว้ใต้บรรทัดไหน หรือเอาไปลองกับ template ตัวไหน
ยังไงก็ขอบคุณครับ

[kinnon]

มาเอาใจช่วยนะผมก็เคยหาคนช่วยแบบนี้เหมือนกัน