Hi, please teach me how can I create expandable post summaries in this template. I try the way blogger help provide, but it didn't work. Please help me, thanks... Template code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* ----------------------------------------------- Name: xxxxx Designer: xxxxx URL: xxxxx Type: Free Blogger Beta XML Skin ----------------------------------------------- */ /* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#333333"> <Variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333"> <Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#333333"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#cc0000"> <Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#cc0000"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal bold 200% Verdana, sans-serif"> <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> */ /* Use this with templates/template-xxxxx.html */ body { background:#333333; margin:0; padding:0; font:12px Arial, Sans-erif; text-align: center; color:#000; } a:link { color:#000000; text-decoration:none; } a:visited { color:#000000; text-decoration:none; } a:hover { color:#cc0000; text-decoration:underline; } #main .post-body a { color:#cc0000; text-decoration:underline; } #sidebar-wrapper a { color:#000000; } a img { border-width:0; } .post-body img { margin:5px; border:1px solid #cc0000; } /* Header ----------------------------------------------- */ #header-wrapper { background: url("http://xxxxx") no-repeat; width:980px; height:150px; margin:0; padding:0; text-align:left; color:#CCC; border-top:4px ridge #67a1cf; border-bottom:6px ridge #67a1cf; } #header { height:40px; margin:0; padding:0; } #header h1 { margin:0; padding:5px 0 0 10px; font-size: 150%; font-weight:bold; line-height: 1.2em; letter-spacing:.1em; font-style:italic; color:#FFFFFF; } #header a { color:#CCC; text-decoration:none; } #header a:hover { color:#777; text-decoration:underline; } .descriptionwrapper p { margin:0; padding:0 0 0 10px; line-height: 1.3em; font-style: italic; font-weight:bold; font-size:90%; letter-spacing:.1em; color: #FFFFFF; } #header-wrapper .top-nav a { background:#000000; margin:0; padding:2px 10px 3px; border-top:1px solid #666; border-left:1px solid #555; border-right:1px solid #333; text-decoration:none; color:#FFFFFF; } #header-wrapper .top-nav a:hover { background:#387cb3; text-decoration:none; } .top-nav ul { margin:0; padding:40px 10px 0; list-style:none; float:right; } .top-nav li { margin:0; padding:0; display:inline; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { background:#FFFFFF; width: 980px; margin:0 auto; padding:0; text-align:left; } #main-wrapper { width: 510px; float: left; margin:0; padding:0 0 20px 15px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 410px; float: right; margin:0; padding:0 15px 20px 0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } .ad-box { margin:0; padding:8px 0 0; } .sidebar-left { width:195px; float:left; margin:0; padding:0 15px 0 0; } .sidebar-right { width:190px; margin:0; padding:0; float:right; } br { clear:both; } /* Headings ----------------------------------------------- */ #sidebar-wrapper h2 { margin:.6em 0 .6em; padding:0; font-size:11px; font-weight:bold; line-height: 1.4em; text-transform:uppercase; color:#000000; border-bottom:1px solid #777; } /* Posts ----------------------------------------------- */ h2.date-header { margin:.5em 0 0; padding:0; font-size:75%; color:#777; } .post { margin:.5em 0 1em; padding-bottom:1em; } .post h3 { margin:.5em 0; padding:0 0 0; font-size:130%; font-weight:bold; line-height:1.3em; color:#000000; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; font-size:130%; text-decoration:none; color:#000000; font-weight:bold; } .post h3 strong, .post h3 a:hover { color:#cc0000; text-decoration:underline; } .post { margin:0 0 .75em; line-height:1.2em; } .post-body, .post-body p { margin:0; padding:0; line-height:1.3em; } .post-footer { margin: .75em 0 0px; color:#777; letter-spacing:.1em; font-size:70% line-height: 1.4em; border-bottom:1px solid #444; } .post-body { margin-top:0; } .comment-link { margin-left:.6em; } .post img { margin:8px; padding:0; border:3.5px solid #ffff00; } .post blockquote { margin:1em 12px; padding-left:15px; border-left:3px solid #ccc; } .post blockquote p { margin:.75em 0; padding-left:15px; border-left:3px solid #ccc; } p.post-footer-line-3 { margin:0 auto; padding:0; } /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font-size:16px; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:#333; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } .feed-links { clear: both; line-height: 2.5em; } /* Sidebar Content ----------------------------------------------- */ #sidebar-wrapper ul { list-style-type:none; } #sidebar-wrapper p { padding-left:12px; } #sidebar-wrapper { color:#3366cc; line-height: 1.3em; } #sidebar-wrapper ul { list-style:none; margin:0 0 0; padding:0 0 8px; } #sidebar-wrapper li { margin:0; padding:0 0 .25em 8px; line-height:1.2em; } #sidebar-wrapper .widget, .main .widget { margin:0 0 1.5em; padding:0 0 1.5em; } .sidebar section { margin:0; padding:0; } .main .Blog { border-bottom-width: 0; } #ArchiveList { padding-left:10px; } .widget-content { } /* Profile ----------------------------------------------- */ .profile-img { float: left; margin: 0 5px 5px 0; padding: 2px; border: 2px solid #444; } .profile-data { margin:0; letter-spacing:.1em; font-size:90%; font-weight: bold; line-height: 1.4em; } .profile-datablock { margin:.5em 0 .5em .5em; } .profile-textblock { margin: 0.5em; line-height: 1.6em; } .profile-link { font-size:90%; letter-spacing: .1em; margin: 0 0 1em .5em; } /* Footer ----------------------------------------------- */ #footer-wrapper { background:#000000; width:980px; clear:both; margin:0 auto; text-align:center; padding:0; border-top:4px solid #67a1cf; border-bottom:4px solid #67a1cf; } #footer-wrapper a { color:#000000; text-decoration:none; } #footer { margin:0 auto; padding:12px 20px; clear:both; line-height: 1.2em; letter-spacing:.1em; text-align: center; color:#000000; } .credits { margin:0; padding:8px 0 0; font-size:75%; } /** Page structure xxxxx for layout editor wireframe */ body#layout #header { margin-left: 0px; margin-right: 0px; } ]]></b:skin> </head> <body> <div id='outer-wrapper' style='margin-top:5px;'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='xxxxx (Header)' type='Header'/> </b:section> <div class='top-nav'> <ul class='nav'> <!-- add or modify your links below using the examples, replace the # with your actual link --> <li><a href='xxxxx'>Home</a></li> <li><a href='xxxxx'>Contact Me</a></li> <li><a href='xxxxx'>link</a></li> <li><a href='xxxxx'>link</a></li> </ul> </div> </div><!-- end header-wrapper --> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='HTML1' locked='false' title='' type='HTML'/> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> <div id='sidebar-wrapper'> <b:section class='ad-box' id='ad-box' preferred='yes'> <b:widget id='HTML2' locked='false' title='' type='HTML'/> </b:section> <div class='sidebar-left'> <b:section class='sidebar-left' id='sidebar-left' preferred='yes'> <b:widget id='Label1' locked='false' title='Nice Car:' type='Label'/> </b:section> </div><!-- end sidebar-left --> <div class='sidebar-right'> <b:section class='sidebar-right' id='sidebar-right' preferred='yes'> <b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/> </b:section> </div><!-- end sidebar-right --> </div><!-- end sidebar-wrapper --> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> <br/> <!-- clear fix do not remove --> </div></div> <!-- end outer-wrapper --> <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div><!-- end footer-wrapper --> <br/> </body> </html>
hi , this test. <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* ----------------------------------------------- Name: xxxxx Designer: xxxxx URL: xxxxx Type: Free Blogger Beta XML Skin ----------------------------------------------- */ /* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#333333"> <Variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333"> <Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#333333"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#cc0000"> <Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#cc0000"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal bold 200% Verdana, sans-serif"> <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> */ /* Use this with templates/template-xxxxx.html */ body { background:#333333; margin:0; padding:0; font:12px Arial, Sans-erif; text-align: center; color:#000; } a:link { color:#000000; text-decoration:none; } a:visited { color:#000000; text-decoration:none; } a:hover { color:#cc0000; text-decoration:underline; } #main .post-body a { color:#cc0000; text-decoration:underline; } #sidebar-wrapper a { color:#000000; } a img { border-width:0; } .post-body img { margin:5px; border:1px solid #cc0000; } /* Header ----------------------------------------------- */ #header-wrapper { background: url("http://xxxxx") no-repeat; width:980px; height:150px; margin:0; padding:0; text-align:left; color:#CCC; border-top:4px ridge #67a1cf; border-bottom:6px ridge #67a1cf; } #header { height:40px; margin:0; padding:0; } #header h1 { margin:0; padding:5px 0 0 10px; font-size: 150%; font-weight:bold; line-height: 1.2em; letter-spacing:.1em; font-style:italic; color:#FFFFFF; } #header a { color:#CCC; text-decoration:none; } #header a:hover { color:#777; text-decoration:underline; } .descriptionwrapper p { margin:0; padding:0 0 0 10px; line-height: 1.3em; font-style: italic; font-weight:bold; font-size:90%; letter-spacing:.1em; color: #FFFFFF; } #header-wrapper .top-nav a { background:#000000; margin:0; padding:2px 10px 3px; border-top:1px solid #666; border-left:1px solid #555; border-right:1px solid #333; text-decoration:none; color:#FFFFFF; } #header-wrapper .top-nav a:hover { background:#387cb3; text-decoration:none; } .top-nav ul { margin:0; padding:40px 10px 0; list-style:none; float:right; } .top-nav li { margin:0; padding:0; display:inline; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { background:#FFFFFF; width: 980px; margin:0 auto; padding:0; text-align:left; } #main-wrapper { width: 510px; float: left; margin:0; padding:0 0 20px 15px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 410px; float: right; margin:0; padding:0 15px 20px 0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } .ad-box { margin:0; padding:8px 0 0; } .sidebar-left { width:195px; float:left; margin:0; padding:0 15px 0 0; } .sidebar-right { width:190px; margin:0; padding:0; float:right; } br { clear:both; } /* Headings ----------------------------------------------- */ #sidebar-wrapper h2 { margin:.6em 0 .6em; padding:0; font-size:11px; font-weight:bold; line-height: 1.4em; text-transform:uppercase; color:#000000; border-bottom:1px solid #777; } /* Posts ----------------------------------------------- */ h2.date-header { margin:.5em 0 0; padding:0; font-size:75%; color:#777; } .post { margin:.5em 0 1em; padding-bottom:1em; } .post h3 { margin:.5em 0; padding:0 0 0; font-size:130%; font-weight:bold; line-height:1.3em; color:#000000; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; font-size:130%; text-decoration:none; color:#000000; font-weight:bold; } .post h3 strong, .post h3 a:hover { color:#cc0000; text-decoration:underline; } .post { margin:0 0 .75em; line-height:1.2em; } .post-body, .post-body p { margin:0; padding:0; line-height:1.3em; } .post-footer { margin: .75em 0 0px; color:#777; letter-spacing:.1em; font-size:70% line-height: 1.4em; border-bottom:1px solid #444; } .post-body { margin-top:0; } .comment-link { margin-left:.6em; } .post img { margin:8px; padding:0; border:3.5px solid #ffff00; } .post blockquote { margin:1em 12px; padding-left:15px; border-left:3px solid #ccc; } .post blockquote p { margin:.75em 0; padding-left:15px; border-left:3px solid #ccc; } p.post-footer-line-3 { margin:0 auto; padding:0; } /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font-size:16px; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:#333; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } .feed-links { clear: both; line-height: 2.5em; } /* Sidebar Content ----------------------------------------------- */ #sidebar-wrapper ul { list-style-type:none; } #sidebar-wrapper p { padding-left:12px; } #sidebar-wrapper { color:#3366cc; line-height: 1.3em; } #sidebar-wrapper ul { list-style:none; margin:0 0 0; padding:0 0 8px; } #sidebar-wrapper li { margin:0; padding:0 0 .25em 8px; line-height:1.2em; } #sidebar-wrapper .widget, .main .widget { margin:0 0 1.5em; padding:0 0 1.5em; } .sidebar section { margin:0; padding:0; } .main .Blog { border-bottom-width: 0; } #ArchiveList { padding-left:10px; } .widget-content { } /* Profile ----------------------------------------------- */ .profile-img { float: left; margin: 0 5px 5px 0; padding: 2px; border: 2px solid #444; } .profile-data { margin:0; letter-spacing:.1em; font-size:90%; font-weight: bold; line-height: 1.4em; } .profile-datablock { margin:.5em 0 .5em .5em; } .profile-textblock { margin: 0.5em; line-height: 1.6em; } .profile-link { font-size:90%; letter-spacing: .1em; margin: 0 0 1em .5em; } /* Footer ----------------------------------------------- */ #footer-wrapper { background:#000000; width:980px; clear:both; margin:0 auto; text-align:center; padding:0; border-top:4px solid #67a1cf; border-bottom:4px solid #67a1cf; } #footer-wrapper a { color:#000000; text-decoration:none; } #footer { margin:0 auto; padding:12px 20px; clear:both; line-height: 1.2em; letter-spacing:.1em; text-align: center; color:#000000; } .credits { margin:0; padding:8px 0 0; font-size:75%; } /** Page structure xxxxx for layout editor wireframe */ body#layout #header { margin-left: 0px; margin-right: 0px; } ]]></b:skin> </head> <body> <div id='outer-wrapper' style='margin-top:5px;'> <div id='wrap2' style="width: 876; height: 507"> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='xxxxx (Header)' type='Header'/> </b:section> <div class='top-nav'> <ul class='nav'> <!-- add or modify your links below using the examples, replace the # with your actual link --> <li><a href='xxxxx'>Home</a></li> <li><a href='xxxxx'>Contact Me</a></li> <li><a href='xxxxx'>link</a></li> <li><a href='xxxxx'>link</a></li> </ul> </div> </div><!-- end header-wrapper --> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='HTML1' locked='false' title='' type='HTML'/> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> <div id='sidebar-wrapper'> <b:section class='ad-box' id='ad-box' preferred='yes'> <b:widget id='HTML2' locked='false' title='' type='HTML'/> </b:section> <div class='sidebar-left'> <b:section class='sidebar-left' id='sidebar-left' preferred='yes'> <b:widget id='Label1' locked='false' title='Nice Car:' type='Label'/> </b:section> </div><!-- end sidebar-left --> <div class='sidebar-right'> <b:section class='sidebar-right' id='sidebar-right' preferred='yes'> <b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/> </b:section> </div><!-- end sidebar-right --> </div><!-- end sidebar-wrapper --> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> <br/> <!-- clear fix do not remove --> </div></div> <!-- end outer-wrapper --> <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div><!-- end footer-wrapper --> <br/> </body> </html>
Which code i need to add, where to add it? Please teach me, thanks... (Article from Blogger Help) Conditional CSS We're going to use conditional tags to change how posts display on different pages. Add the following code to your style sheet, depending on what kind of template you have: (for classic templates) <MainOrArchivePage> span.fullpost {display:none;} </MainOrArchivePage> <ItemPage> span.fullpost {display:inline;} </ItemPage> (for layouts) <b:if cond='data:blog.pageType == "item"'> span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;} </b:if> "Read More" Links Add the following code to your template, somewhere after the <$BlogItemBody$> or <dataost.body/> tag: (for classic templates) <MainOrArchivePage><br /> <a href="<$BlogItemPermalinkURL$>">Read more!</a> </MainOrArchivePage> (for layouts) <b:if cond='data:blog.pageType != "item"'><br /> <a expr:href='dataost.url'>Read more!</a> </b:if>