Multimedia Tutorials

Making A Blog In Magazine Style Template

Since WordPress Theme with Magazine Style Theme appeared, e.g;Mimbo Theme, Revolution Theme, Arthemia Theme and many more, it seems that there is a new trend in making theme or template, that isadopting Magazine Style Theme or Magazine Style Template. One of the real victims is Kang Rohman himself, in the latest two templates that I released; I named them magazine template, though they are not 100 % adopted from Magazine Style Template.

The special characteristic of magazine style template is that there is a column or blog content that can be disappeared when we are reading the whole text or even there is a column that can appear and disappear.

Can blogger template use this kind of system? Yes, we can. Take a look the sample in http://magazine-1.blogspot.com and pay attention all widget available, then click Read Full story button and see what happens. Some widgets dissapper and some widget which first disappear, now appear (bottom sidebar)

It uses very simple technique; you only add additional code into the widget you want them to disappear or opposite. Below is its additional code;

Make a widget appear into disappear

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Widget you want dissappear

</b:if>

Make a widget disappear into appear:

<b:if cond='data:blog.pageType == "item"'>

Widget you want appear

</b:if>

For example, please look at your template code. You will see the code the similar code like below;

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
<b:widget id='HTML7' locked='false' title='Get Update Via Email' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label2' locked='false' title='Browse by Categories' type='Label'/>
<b:widget id='HTML2' locked='false' title='Site Info' type='HTML'/>
</b:section>
</div>

One widget code like;

<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>

The code above means representative of one widget or gadget that we put in sidebar or footer. The widgets will appear in the front page of your blog. In ordinary template, if we click on read more, the widgets will always appear. And now, if you add the code I have written above, the widgets will disappear. Example ;

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>

</b:if>

That’s for only one widget, if you have many widgets at the bottom and want to hide them, then you should add the code like below;

<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>
</div>

The code above will make the widgets appear into disappear. To make widgets appear into disappear a little difficult because you have to open your blog expand template first by giving a mark next Expand Template Widget. Example, if you haven’t opened the expand widget template, the widget code will look like below:

<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>

And after the expand is marked, the code will be like below (pay attention to the widget tiles)

<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

If the widgets do not appear in the front page, and you want them to appear when you come to article page, you should add the code below;

<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>
</b:includable>
</b:widget>

Don’t forget to click SAVE TEMPLATE button and enjoy your blog in Magazine style Template.

I am confused and confused…, kang Rohman likes making people confused and never make a full or complete tutor

. Wait the minute and cool brothers….I have finished the articles yet. Ok, if you are still confused with the articles above, you can read the steps below:

Make widget appear into disappear

Log in into blogger with your ID
Click Layout
Click Edit HTML tab
Please click Download full template. Please back up the template first (important)
Find this code which is similar to your template code :
<div id='sidebar'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
<b:widget id='HTML7' locked='false' title='Get Update Via Email' type='HTML'/> <<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label2' locked='false' title='Browse by Categories' type='Label'/>
<b:widget id='HTML2' locked='false' title='Site Info' type='HTML'/>
</b:section>
</div>
Choose the widgets you want hide and add the code, example;
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'/>
</b:if>
Click SAVE TEMPLATE.
Finished

Make widget disappear into appear

Log in into blogger with your ID
Click Layout
Click Edit HTML tab
Give a mark in Expand Template Widget, wait until the process finish
Find the code widget that you want to modify, example:
<b:widget id='HTML8' locked='false' title='Blogging Tutorial For Beginner' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Click SAVE TEMPLATE
Finished

I hope it is easier to understand and happy blogging

http://www.blogspottutorial.com/2008/11/making-blog-in-magazine-style-template.html

Would you like to be a Web designer? If the answer is yes, then you should master the basics of programming, such as; CSS,HTML, PHP, MySQL and others. Besides mastering them, you should understand the software to manage the pictures, such as; adobe Photoshop, Corel draw, Macromedia flash playerand others.

If you want to try to study about them, try to study about HTML program or PHP.

In order to make you easier to study, use the supporting software, for example PHP editor or HTML editor. You can buy this software in software seller, but if you want to get the free software, you can get it, too. Kang Rohman has tried free software called PHP editor, even though it is free but they are good enough. We can not only use it for editing PHP editor, but also for editing HTML.

Are you interested in trying PHP editor software? Just click the banner below:

Remember that, this software is not created by Kang Rohman, so for you who want to install this software into your computer, all the risk belongs to you.

Have a nice studying and I hope that you become an expert in web designer

http://www.blogspottutorial.com/2008/10/free-software-php-and-html-editor.html

How To Modify The Comment Form

After reading some messages in shoutbox, inbox and e-mails, I can say that many readers like the comment form that Kang Rohman uses in this blog.

As usual, if many readers like something from Kang Rohman’s posting, there will be many questions from the readers. The questions are all about the tutorial on how to make the comment form above. Well, in order to fulfill what the readers want, I made this special tutorial on how to make the comment form.

Remember that every code in the template is different one another but they could be the same. If thistutorial is different with the code of your template, I just say “I am sorry” and it means that you are not lucky. As an example, I use the code of Minima template.

Ok…Readers, let’s go directly to the tutorial,

1. Log in into blogger with your ID

2. Click Layout

3. Click Edit HTML

4. Click Download full template. Please back up the template first (important).

5. Give a check in Expand Template Widget

6. Wait for a few second until the process is complete

7. Find the following CSS code:

#comments h4 { 
  margin:1em 0; 
  font-weight: bold; 
  line-height: 1.4em; 
  text-transform:uppercase; 
  letter-spacing:.2em; 
  color: $sidebarcolor; 
  }
#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; 
  }

8. Erase the code above and change with the code below

#comments h4 { 
  margin:0; 
  font-weight: bold; 
  line-height: 1.4em; 
  text-transform:uppercase; 
  letter-spacing:.2em; 
  color: #000; 
  }
#bg_commentblock { 
    width: 548px; 
    background: #ffffff; 
    float: left; 
    padding:20px; 
    margin:0 0 10px 0; 
    border:1px solid #C0C0C0; 
    }
#commentblock { 
    width: 510px; 
    background: #E8E8E8; 
    text-align:left; 
    padding: 20px 20px 10px 20px; 
    margin: 10px 0px 0px 0px; 
    border-top: 2px solid #333333; 
    border-bottom: 1px solid #333333; 
    } 
#commentblock ol { 
    list-style-type: square; 
    margin: 0px 0px 0px 10px; 
    padding: 0px 0px 10px 0px; 
    } 
.commentdate { 
    font-size: 12px; 
    padding-left: 0px; 
    } 
#commentlist li p { 
    margin-bottom: 8px; 
    line-height: 20px; 
    padding: 0px; 
    }
.commentname { 
    color: #333333; 
    margin: 0px; 
    padding: 5px 5px 5px 0px; 
    }
.commentinfo{ 
    clear: both; 
    }
.commenttext { 
    clear: both; 
    margin: 3px 0px 10px 0px; 
    padding: 20px 10px 5px 10px; 
    width: 490px;    
background: #FFFFFF url(http://lh4.ggpht.com/kangrohman/SMZb-VqQlYI/AAAAAAAAAOM/RpT6fNN3M88/commentgray_thumb%5B1%5D.gif?imgmax=800) no-repeat top left; 
    }
.commenttext-admin { 
    clear: both; 
    margin: 3px 0px 10px 0px; 
    padding: 20px 10px 5px 10px; 
    width: 490px;  
   background: #FFFFFF url(http://lh4.ggpht.com/kangrohman/SMZb-VqQlYI/AAAAAAAAAOM/RpT6fNN3M88/commentgray_thumb%5B1%5D.gif?imgmax=800) no-repeat top left; 
    }

9. Find the following codes:

<b:includable id='comments' var='post'>  
<div class='comments' id='comments'>  
<a name='comments'/>  
<b:if cond='data:post.allowComments'>  
<h4>  
<b:if cond='data:post.numComments == 1'>  
          1<data:commentLabel/>: 
        <b:else/> 
          <data:post.numComments/> <data:commentLabelPlural/>: 
        </b:if> 
      </h4>
      <b:if cond='data:post.commentPagingRequired'> 
        <span class='paging-control-container'> 
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a> 
          &#160; 
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> 
          &#160; 
          <data:post.commentRangeText/> 
          &#160; 
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> 
          &#160; 
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> 
        </span> 
      </b:if>
      <dl id='comments-block'> 
        <b:loop values='data:post.comments' var='comment'> 
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'> 
            <a expr:name='data:comment.anchorName'/> 
            <b:if cond='data:comment.authorUrl'> 
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> 
            <b:else/> 
              <data:comment.author/> 
            </b:if> 
            <data:commentPostedByMsg/> 
          </dt> 
          <dd class='comment-body'> 
            <b:if cond='data:comment.isDeleted'> 
              <span class='deleted-comment'><data:comment.body/></span> 
            <b:else/> 
              <p><data:comment.body/></p> 
            </b:if> 
          </dd> 
          <dd class='comment-footer'> 
            <span class='comment-timestamp'> 
              <a expr:href='data:comment.url' title='comment permalink'> 
                <data:comment.timestamp/> 
              </a> 
              <b:include data='comment' name='commentDeleteIcon'/> 
            </span> 
          </dd> 
        </b:loop> 
      </dl>
      <b:if cond='data:post.commentPagingRequired'> 
        <span class='paging-control-container'> 
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> 
            <data:post.oldestLinkText/> 
          </a> 
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> 
            <data:post.olderLinkText/> 
          </a> 
          &#160; 
          <data:post.commentRangeText/> 
          &#160; 
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> 
            <data:post.newerLinkText/> 
          </a> 
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> 
            <data:post.newestLinkText/> 
          </a> 
        </span> 
      </b:if>
      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'> 
          <b:include data='post' name='comment-form'/> 
        <b:else/> 
          <b:if cond='data:post.allowComments'> 
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> 
          </b:if> 
        </b:if>
      </p> 
    </b:if>

10. Erase the code above and change with the code below

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'> 
    <a name='comments'/> 
    <b:if cond='data:post.allowComments'>
<div id='bg_commentblock'>
<h4>
Comments :
   </h4>
   <div id='commentblock'><!--commentblock-->
<b:if cond='data:post.numComments == 1'>1 
        <b:else/> 
           <strong><data:post.numComments/> <data:commentLabelPlural/>  to &#8220; <data:post.title/> &#8221;</strong> 
        </b:if>
      <dl class='commentlist'> 
        <b:loop values='data:post.comments' var='comment'> 
          <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
            <a expr:name='data:comment.anchorName'/> 
            <b:if cond='data:comment.authorUrl'> 
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> 
            <b:else/> 
              <data:comment.author/> 
            </b:if> 
            <data:commentPostedByMsg/> 
          </dt> on &#160;<dd class='comment-footer' style='display:inline; margin:0px'> 
            <span class='comment-timestamp'> 
              <a expr:href='data:comment.url' title='comment permalink'> 
                <data:comment.timestamp/> 
              </a> 
              <b:include data='comment' name='commentDeleteIcon'/> 
            </span> 
          </dd></span> 
          <dd class='commenttext'> 
            <b:if cond='data:comment.isDeleted'> 
              <span class='deleted-comment'><data:comment.body/></span> 
            <b:else/> 
              <p><data:comment.body/></p> 
            </b:if> 
          </dd> 
        </b:loop> 
      </dl> 
      <b:if cond='data:post.commentPagingRequired'> 
        <span class='paging-control-container'> 
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> 
            <data:post.oldestLinkText/> 
          </a> 
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> 
            <data:post.olderLinkText/> 
          </a> 
          &#160; 
          <data:post.commentRangeText/> 
          &#160; 
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> 
            <data:post.newerLinkText/> 
          </a> 
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> 
            <data:post.newestLinkText/> 
          </a> 
        </span> 
      </b:if>
      <p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p> 
    </div><!--end commentblock-->
</div> 
    </b:if>

10. Save Template

11. Finish and see the result.

The code above is not an absolute code. If you are familiar with CSS, you will be able to do any creation. Especially, at the width of the comment form because you have to match the width of comment form with the width of your template.

To change the width of the comment form above, you only need to change the value of its width, example;width: 548px is changed into 500px or the value which matches with your template.

Well, that’s the short tutorial that you have been looking for months. Hopefully it can recover your annoying so far.

Good luck!

http://www.blogspottutorial.com/2008/09/how-to-modify-comment-form.html

Multimedia Tutorials

Making A Blog In Magazine Style Template

Free Software: PHP And HTML Editor

How To Modify The Comment Form

Labels

Popular Posts

Template Information

Template Information

Test Footer 2