*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
Blogger Tips and TricksLatest Tips And TricksBlogger Tricks
Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts

How to add three columns to your footer section

Adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design.
There are only four main steps to this tutorial, and I'm sure you'll agree that the overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.

Creating the new columns

Here are the four steps needed to transform the footer section of your blog template:
  1. Back up your existing blog template!

    Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.

    To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.
  2. Move all existing widgets from the existing footer section

    In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.
  3. Add extra code to your footer section.

    Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).

    Now you need to find this section in your template:
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
    Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in red.

    Replace the entire line highlighted in red with the code below:  It is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.
  4. Adding style for the new footer section

    Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "</b:skin>" tag, which is where the style section of your template ends.

    Immediately before this line, add the following lines of code:
    #footer-column-container {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }
    And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.
Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!
I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:
<hr align='center' color='#5d5d54' width='90%'/>
If you are unsure of the hex value for the color you prefer, you can refer to the Color Calculator in the tools section of this site.
If you would prefer to remove the line altogether, simply delete the whole line.
I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.
Read More »

How to Create Post Summaries in Blogger Layouts Blogs



Please note: This "selective expandable posts" hack was written for Blogger layouts blogs (those which use widgets). If you need to learn how to use such a technique for Classic Blogger templates, please refer to this post instead.

How the selective expandable posts hack works

This technique uses a combination of JavaScript and Blogger code to display your selected portion of a blog post on your main, archive and search pages. On item (post) pages, the full content of your post will be displayed.
This technique is very useful for bloggers who write long posts, or who prefer to provide a "teaser" of their full post on the main page, which would encourage readers to read the whole article on item pages instead.
Before installing the selective expandable posts hack to your blog, you should be aware of two things:
  • Only your future posts (and any previous posts you choose to edit) will feature a summarized version on the main pages of your blog. This is because you must use a post template to make the summaries appear. Those posts which do not include this template will not be summarized.
  • To ensure the summary hack works, you will find it necessary to edit your posts in HTML mode, rather than using the rich text editor. Again, this is due to the necessity of the post template; if you edit in compose mode, you will run the risk of accidentally deleting some code which is not visible in the rich text editor.
If these considerations are something you can live with, you're ready to install the "selective post summary" hack.

How to Install the Selective Post Summaries Hack

This isn't the easiest hack to install in a Blogger template. In fact, it took me a few attempts to get this right the first time I installed it! So I would advise you to remember two important things:

Back up your existing template before making any changes whatsoever!

You should always back up your blog template before making any changes to the template code. It is even more important to back-up before installing this hack, as we are dealing with the display of your blog posts, rather than a simple edit to your styling code!

Read each step fully, familiarize yourself with the code, and then read it again!

It is important to pay attention to detail when installing this, otherwise you may place code in the wrong place and get that dreaded "Your template could not be parsed" message.
Also, there may be slight differences to the code which you will be looking for in your template. I will point this out where appropriate, along with the alternatives which may be present in your template.
Here is my step by step guide to installing the selective post summary hack in your blog template:
  1. Back up your existing template code!

    To do this, go to Layout>Edit HTML in your Blogger dashboard, and click on the link which says "Download full template". This will allow you to save a copy of your existing template in XML format which you can use to restore your blog if ever your template edits go awry.
  2. Choose to create a new post. On this page, click on the "Edit HTML" tab so this becomes highlighted. Then in the content box below, paste this entire section of code, exactly how this is written here:
    This is the summary
    
    <span id="fullpost">
    
    This is the rest of the post
    
    </span>
    Then save this post.

    This will only be a temporary post, to help you understand if the following edits you make are working. Once you have installed this hack into your template, you can delete this post.
  3. Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box.
  4. We now need to add the required JavaScript code to the head section of your blog template.

    This is the easy part of the installation! Simply copy all of the code on this page to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).

    Next, locate this line in your blog template:
    </head>
    Paste the code from your clipboard directly before this line.
  5. Here comes the tricky part...

    In your blog template, you will need to locate the DIV section which contains this line:
    <p><data:post.body/></p>
    In many templates, this section will look something like this:
    <div class='post-body>
    
    <p><data:post.body/></p>
    
    <div style='clear: both;'/> <!-- clear for photos floats -->
    
       </div>
    However, the class of the containing DIV section may be called something different, such as:
    div class='post'
    
    div class='entry'
    
    div class='post-body entry-content
    In the case of third party templates, this could well be something else entirely!

    The best way to locate this is to search for <data:post.body/> using the CTRL+F function in your browser, then take a look at the surrounding code to work out where you need to edit.
  6. Once you have found this section of code, take a look at the code below. I've added some code in red, which is what you will need to add in your own template. As I have explained, the <div class='post-body'> section may be named differently in your own blog template, so do bear this in mind!
    <div class='post-body'  expr:id='"post-" + data:post.id' >
    
         <b:if cond='data:blog.pageType == "item"'>
            <style>#fullpost{display:inline;}</style>
            <p><data:post.body/></p>
         <b:else/>
            <style>#fullpost{display:none;}</style>
            <p><data:post.body/></p>
    
           <span id='showlink'>
            <a expr:href='data:post.url'>Read More......</a>
           </span>
           <script type='text/javascript'>
             checkFull("post-" + "<data:post.id/>");
           </script>
         </b:if>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>
    Before you attempt to save your template, I would advise you to preview your blog.

    If you have pasted the code correctly, you will see the test post you created earlier will now feature only the summary, followed by the "Read more..." link, like this:



    If you have pasted the code incorrectly, one of two things will happen: you will either be unable to preview, or your test post will appear in full, rather than as a summary.

    In either case, you should clear all edits you have made, and start again from the top: it's a far better idea to begin the process again, paying attention to every detail, than to try and edit the code!
  7. After you have successfully made the changes outlined above, you can proceed to save your template.
  8. The final step is to add a post template in your blog settings.

    This is the same code we used to add the content to our test post, though this time we will add this as a permanent template which will appear in your post editor each time you write a post.

    Go to Settings>Formatting in your Blogger dashboard, and scroll right down near the bottom of this page where you will see a text box for your post template.

    Inside this box, you must paste the following section of code:
    This is the summary
    
    <span id="fullpost">
    
    This is the rest of the post
    
    </span>
    Be sure to copy and paste this code exactly as you see it here. If you accidentally insert any extra spaces, extra characters or line breaks by typing this manually, you run the risk of breaking the operation of the script.

    Finally, save these settings, and enjoy the convenience of selectively summarizing your blog posts!

Using the Selective Expandable Posts Hack

For me, Ramani's selective post summaries hack has been the most effective method of summarizing my posts. However, when using this hack you may need to change the manner of your blogging habits slightly, and learn how best this can be used.
Here are some tips which I have learned through using this hack on a regular basis, which will probably be useful for you too:
  • You must create and edit your posts in Edit HTML mode. The <span> tags which are included in your new post template will only be visible in Edit HTML mode. If you use the regular "Compose" mode, you may accidentally delete some of the required code, which will cause your posts to be displayed improperly.
  • If you do not want to summarize a post, simply delete all of the post template when creating your post! In this case, there will be no "Read more" link beneath the post, and your complete post will appear on the main pages (ideal for short posts).
  • If you are used to writing your posts in paragraphs using appropriate paragraph code, like this:
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
    you will need to wrap all of your content in paragraphs, and may need to add the appropriate paragraph tags to the lines in your post template too.
  • When using this hack, you can easily implement Google AdSense code to appear in your post pages only, and can choose to display this within the body of the post itself, as well as above/below your post content.
As I mentioned earlier, this hack will only work for posts which you create after installing the required code and post template. Your existing posts will not be summarized unless you edit them to add the required code inside the post.
If you have a great many posts, I would advise you only to edit the posts which appear on your front page. So if you display seven posts on your home page, you would only need to edit the previous seven posts, if you would like these to be summarized. The reason I advise this is because in my experience, fewer people browse through your archives using the "newer/older posts" links than would search through using the blog search function. This means that your readers' experience would suffer little disruption from seeing older posts in their full form.

Troubleshooting

If ever you notice a "summarized" posts appears strangely, or other posts seem to disappear from beneath this on your main pages, the problem is most likely that you have accidentally deleted the closing </span> tag from the very bottom of your post. Don't worry if this happens, it is easily solved by adding that line right at the very end of your post!
Another possible problem Ramani has noted is that sometimes the "read more" link will appear on archive pages, even for those posts which have not been summarized. This issue is not yet resolved, though if I come across a definitive solution I will be sure to update this post

Final thoughts

This is by no means the only method you could use to summarize your posts (Jackbook has discovered seven different methods), though for most bloggers the selective method will be the most effective and easily maintained choice.
I hope that my explanation of Ramani's excellent hack will help you implement this version of post summaries in your Blogger layouts blog.
If you have any more hints or suggestions for using this hack, please feel free to leave your comments below.
Read More »

The easy way to make a great blog header!

If you take a look at the Blogger Template Design blog now, you'll see the bare bones of a header beginning to take shape. The title and description for this blog are now featured in the left-hand section, while on the right you can find a search box, and a simple navigation bar:
The search box and navigation links are actually widgets which can be edited through the layouts section, rather than being built into the template itself. This is by far the easiest way to change elements of the header section, and it's really easy to install this in your own blog template!

How to add more elements to your header section

In this tutorial, there are only three essential steps needed to add these extra elements to your own blog:
  1. Copy and paste a section of code in the header section of the template.
  2. Add some styling code to the CSS portion of the template
  3. And finally...
  4. Add some widgets to your newly created widget sections!
Trust me when I tell you that this is a really easy hack. You can be up and running with a new, more interactive header in no time at all, and once the basic structure is in place, you can begin styling each section to best suit your needs.

Step by step instructions

  1. Go to Template>Edit HTML in your Blogger dashboard, and find this section of code:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Your blog title will appear here (Header)' type='Header'/>
    </b:section>
    </div>
    Highlight this entire section of code, and replace it with this instead:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/>
    </b:section>
    <div id='header-right'>
    <b:section class='header' id='header-right-top' showaddelement='yes'>
    </b:section>
    </div>
    <div id='header-right-bottom'>
    <b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
    </b:section>
    </div>
    </div>
  2. Next we need to change some of the style in the <b:skin> section. So find this entire section of code:
    #header-wrapper {
    border: 1px solid #000000;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    clear: both;
    word-wrap: break-word;
    overflow: hidden;
    }

    #header-inner {
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    }

    #header { 
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }
    Note: the code which appears in your own template may have slightly different styling attributes to the example above. The important thing here is to replace the #header-wrapper, #header-inner and #header sections, and add some extra styling code.

    Once you have found this section, highlight it and replace it with the following section of code:
    #header-wrapper {
    width: 950px;
    border: 1px solid #000000;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    clear: both;
    word-wrap: break-word;
    overflow: hidden;
    }

    #header-inner {
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    }

    #header { 
    width: 500px;
    float: left;
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

    #header-right {
    width: 400px;
    float: right;
    border: 1px solid $bordercolor;
    color: $pagetitlecolor;
    margin: 5px;
    }
    #header-right-top {
    padding: 0 5px 10px;
    }

    #header-right-bottom-section {
    padding: 0 5px 10px;
    }

    #header-right ul {
    margin: 0;
    padding: 5px;
    }

    #header-right ul li {
    display: inline;
    padding: 5px;
    }

    #header-right-bottom {
    width: 400px;
    float: right;
    border: 1px solid $bordercolor;
    color: $pagetitlecolor;
    margin: 5px;
    }

    #header-right-bottom ul {
    margin: 0;
    padding: 5px;
    }

    #header-right-bottom ul li {
    display: inline;
    padding: 5px;
    }
    Note: if your own blog template is narrower than 950px, you may want to make some alterations to the styling code above. Change the width of the #header-wrapper to match the width of your outer-wrapper, so that it will not disrupt the overall width of your blog. You may also want to lessen the widths of the #header section, and the #header-right and #header-right-bottom sections too. 

    If you preview your template you will see that the title and description are now aligned to the left, with space on the right for you to add your new widgets. So save your template, and let's add some widgets to these new sections!
  3. Adding widgets to these new sections is the easiest part of this tutorial. Simply go to Template>Page Elements and add your widgets in the new sections which have appeared beside your header!

    Both of these sections now have styling for list items, so if you want to add a navigation bar, choose to add a "Links List" page element. Add your links as required and save. When you preview your template, you'll see that this display inline (horizontally) rather than in a long list.

    To add a search box to your header, you could either choose to add a Google Custom search widget, or use asimple blog search widget instead.
Width these extra widget sections in place, there are endless possibilities for what you may add to your header section! I used a search box and navigation links as an example, but you could easily substitute these for a description, feed links or anything else you choose instead.

Your blog logo/custom header image

As before, you can still add your custom logo or header image to the header widget. This will be resized to the new width of your header section (in the example above, this is 500px wide), so for best results you should upload an image of the same size.
If your image is wider than this, you should check the "Shrink to fit" box inside the widget editing box to ensure the header doesn't overshadow the other widgets on the page.
Read More »

Create Extra Columns in your Blogger Layout - Magazine Style!

One of the newest (and popular) trends of blog design is the magazine style layout. As the name suggests, this design style presents content in magazine format where extra columns and content are featured on the home page, offering readers an overview of the entire site.

At present, Blogger Buster's home page features a magazine style layout. Rather than display a list of recent posts in typical blog style, the home page summarizes the most recent post, followed by links to other articles by category, and additional information about the site.

Many readers have requested a tutorial to create a similar layout for their own Blogger powered blogs, so in this tutorial I'll explain how you can add extra columns and widget sections on your blog's home page to create a magazine style layout of your own.



How Magazine Style Layouts Work in Blogger

In this template (and also in the Blue Steel template), I have added extra widget sections beneath the main posts column. This allows me to add (or change) the content displayed on the home page from the Page Elements section of my dashboard, without having to manually change my template code.

Also, I have used the b:if function to prevent these widgets from being displayed on post and archive pages (where they are not required).

To create a magazine style for your own blog, you will need to make two main changes to your template:
Insert the code required for your new widget sections
Add relevant styling code to the <b:skin> section of your template to change how these widget sections appear.


In this tutorial, I will explain the simplest method of creating a magazine style front page. This involves adding two columns for widgets (to appear side by side) beneath the main posts section of your blog. Once you have added these sections, you can add widgets and change the settings for your blog to alter the appearance and overall look for your template.

Be sure to back up your existing template before making any changes! Then if you change your mind about your design (or make mistakes during the process) you can easily restore your template.

To make a back-up of your existing template, go to Layout>Edit HTML in your blog's dashboard and click on the "Download full template" link. This will save your template as an XML file to your computer.



Add new widget sections below your posts

To add new columns for widgets below your posts, we will need to add some code to the main posts section of your blog.

Go to Layout>Edit HTML in your blog template, and do not check the "expand widget templates" box. Then search for this section of code in your template:

     <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

In your own template, this section may look a little different. For example, you may find <div id='main'> or <div id='content'> instead of <div id='main-wrapper'>.

If you are having problems locating this section, use your browser's search function to locate the phrase "blog posts" or "Blog1", and be aware of the surrounding b:section and div tags.

Once you have found this section in your template, you will need to copy and paste the following code just after the closing </b:section> tag and before the closing </div> 


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' > 
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/> 
</b:section> 

<b:section class='sidebar' id='magazine-right' showaddelement='yes' > 
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/> 
</b:section> 

<div style="clear: both;"></div>
</b:if>
By adding this code, we have inserted two extra widget areas which contain a "dummy" text widget so you can preview their appearance. These sections are also contained in <b:if> tags, which determine they are only seen on your blog's home page.

At this stage, you can preview your template and will see these dummy widgets appear below your posts section. However, as we have not yet styled these sections, they will appear beneath each other rather than side by side.


Adding style to your new widget sections

Now that we've added the code required for our new widget sections, we need to add some styling code to ensure they appear side by side.


For this, locate the closing </b:skin> tag in your blog's template. Just before this tag, you should paste the following section of code:


#magazine-left {
  width: 45%;
  float: left;
}
#magazine-right {
  width: 45%;
  float: right;
}

Then preview your template. Now you should see your the titles for the dummy widgets appear side by side with a gap between them. These titles should have similar styling to your sidebar headings and match the overall theme of your template.

Once you are sure everything looks okay, you can proceed to save your template.

If you do receive an error when attempting to preview or save these customizations, click the "Clear edits" button and begin adding your code from the beginning, being extra careful when copying and pasting this code.



Adding widgets and styling your home page

Now that you have added the required code for your magazine style front page, you may want to remove the dummy text widgets and replace them with your widgets of choice.

Simply go to Layout>Page elements in your Blogger dashboard, where you will see your new widgets appear below the Blog Posts section like this:



Click on the edit link for the existing "Test Title 1/2" widgets, and choose to remove these if you prefer. Then add new page elements of your choice to customize the appearance of your blog's home page.

You may also prefer to limit how many posts are displayed on your blog's home page so that your new widgets will feature higher up on your blog's home page.

To change the number of posts which are displayed, go to Settings>Formatting and choose the number of posts to display using the first option on this page:



In many magazine style blogs, only one post is displayed on the home page, but if your posts are short, it should be acceptable to post more than one without affecting the overall look and style of your design.
Read More »

ব্লগের Header অংশটিকে কিভাবে দুটি ভাগে বিভক্ত করতে হয়?

প্রত্যেক ব্লগার ব্লগের Header অংশটি সাধারণত একটি ভাগে বিভক্ত থাকে। ব্লগার Layout অংশটি হতে Widget হিসেবে ব্যবহার করে এ অংশটিতে সাধারণত ব্লগের Logo বা Title এবং এর সাথে কিছু বর্ণনাও দেয়া হয়ে থাকে। সাধারণত ব্লগের Header অংশটির ঐ টাইটেল ব্লগের বামে কিংবা মধ্যখানে থাকে। তাছাড়া বাকী Header অংশটি ফাঁকা অবস্থায় পড়ে থাকে। আপনি ইচ্ছে করলে Header অংশটিকে দুটি ভাগে বিভক্ত করে ফাঁকা জায়গাটা কাজে লাগাতে পারেন। ঐ অংশটিতে গুগল এ্যাডসেন্স কিংবা যে কোন ধরনের বিজ্ঞাপন শো করাতে পারেন। ব্লগের এই সামান্য অংশটি আপনার ব্লগের প্রফিট বাড়ানোর সাথে সাথে সুন্দর্যও বৃদ্ধি করবে।
ব্লগের Header অংশটিকে কিভাবে দুটি ভাগে বিভক্ত করতে হয়?
উপরের চিত্রে টাইটেলের ডান দিকে আরেকটি “এ্যাডসেন্স বিজ্ঞাপন” নামে অংশ দেখতে পাচ্ছেন। এ অংশটি সাধারণত ব্লগে থাকে না। এই অতিরিক্ত অংশটি যার যার প্রয়োজনে যুক্ত করে নিতে হয়। আজকের পোষ্টে আপনাদের দেখাব এই অতিরিক্ত Widget টি কিভাবে আপনার ব্লগে যুক্ত করবেন?
সকল পোষ্ট দেখুন

 যে ভাবে যুক্ত করতে হবেঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
ব্লগের Header অংশটিকে কিভাবে দুটি ভাগে বিভক্ত করতে হয়?
  • কিবোর্ড হতে Ctrl+F চেপে <b:section class='header' অংশটি সার্চ করলে নিচের চিত্রের মত লাইনটি দেখতে পাবেন।
ব্লগের Header অংশটিকে কিভাবে দুটি ভাগে বিভক্ত করতে হয়?
  • উপরের লাইনটি যদি হুবহু দেখতে না পান বা তীর চিহ্নিত ঐ ছোট আইকনটি দেখতে না পান তাহলে তীর চিহ্নিত ফাঁকা জায়গায় ক্লিক করলেই লাইনটি হুবহু দেখতে পাবেন।
  • এখন উপরের লাইনটির ঠিক পরেই নিচের কোডগুলি যুক্ত করুন।
<b:section id='header-right' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
  • এবার পুনরায় কিবোর্ড হতে Ctrl+F চেপে <b:skin> অংশটি সার্চ করুন।
ব্লগের Header অংশটিকে কিভাবে দুটি ভাগে বিভক্ত করতে হয়?
  • এখন নিচের কোডগুলি উপরের চিত্রের যে স্থানে লাল চিহ্ন দ্বারা মার্ক করা হয়েছে ঠিক সেই জায়গায় পেষ্ট করুন।
 It is good.
 #header, body#layout #header {width:35%;display:inline-block;float:left;padding:5px;}
#header-right, body#layout #header-right  {width:60%;display:inline-block;float:right;padding:0px;}

Or
IT is None good.
#header {float:left; margin:0; width:30%}
#header-right {float:right; margin:0; width:65%}

  • সবশেষে Save Template এ ক্লিক করে টেমপ্লেট Save করে বেরিয়ে আসুন। তারপর Layout এ গেলে নিচের চিত্রেরমত নতুন Widget টি দেখতে পাবেন।
ব্লগের Header অংশটিকে কিভাবে দুটি ভাগে বিভক্ত করতে হয়?
  • সবকিছু ঠিকঠাক মত করার পরও যদি উপরের চিত্রেরমত দেখতে না পান তাহলে পেজটি Refresh করে নিবেন। তাহলে অবশ্যই দেখতে পাবেন।
Read More »

Badiuzzaman ( Rubel )