Articles by "blogger"

Showing posts with label blogger. Show all posts

January 25, 2014
To hide images/pictures from our blogger posts and to make them appear only in homepage, we will have to add just a small piece of CSS code in our template and then use the class "hidepic" each time we want to hide an image.

Just follow the next steps:


Step 1. Go to Dashboard - Template - Edit HTML ( click on Proceed button )




Step 2. Select "Expand Widget Template" (make a backup)

 Step 3. Find (CTRL + F) this code in your template:

    }]]></b:skin>
Step 4. Copy and paste the following code just below it
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.hidepic{
display: none;
}
</style>
</b:if>
Step 5. Save the Template.
Now everytime you create a post, firstly add the pic you want to hide and then switch to HTML tab where you'll see the HTML code of the image you have added that will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSrsmzF3_PgxFWkXcG40R9kKbajGjGcNjSs5PccplsSz31Hxwmg_1tI4IHQxmtTjgX-91Tety16BM0QFs1HOR0gDGj1Kf_4k_fn86LyRtey46YXhQlib1_DuV62obmDs9lxq3WG3esvY/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSrsmzF3_PgxFWkXcG40R9kKbajGjGcNjSs5PccplsSz31Hxwmg_1tI4IHQxmtTjgX-91Tety16BM0QFs1HOR0gDGj1Kf_4k_fn86LyRtey46YXhQlib1_DuV62obmDs9lxq3WG3esvY/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Note: it should be at the exact location where your image has been added 
(if the image is at the middle of the text, then the code should be found at the middle)

Step 6. Replace "separator" with "hidepic" - see the screenshot below:

Read more »

April 23, 2013

HOW TO MODIFY "NEWER/OLDER POSTS" NAVIGATION BECOME PAGE NUMBERS

as default, pages move navigation in blogger use link by anchor "older posts" or "newer posts". it is not like wordpress that use page number to move to other pages so allows the visitors to jump to other pages either newer or older without need pass pages one by one. surely, it is less interesting. but, i have a tricks to modify "newer/older posts" navigation become page numbers like wordpress.

pages number

that is simple. you only must to follow and practice the steps below :

1. log in to your dashboard
2. go to "template" menu
3. choose "edit html" >> Proceed
4. find </body> code and place the code below before it.


<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->


5. to style, you can use css code below. place it on before of  ]]></b:skin> code..


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


*you can modify css/style code up to you.

6. Save and Finish. Just see the result.

That's it. if you have any problems. just ask me on the comment box below. hope useful and happy Blogging :)

reference : http://trik-tips.blogspot.com
Read more »

April 21, 2013


Here are the steps to create a drop down menu in Blogger:

  1.  In the Blogger dashboard, go to Layout


  2.  Click on Add a Gadget




  3.  Select HTML/JavaScript



  4.  Under Content, paste the following code


  <div id='menubar'>
    <ul id='menus'>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
        <ul>
          <li><a href='#'>SubMenuItem</a></li>
          <li><a href='#'>SubMenuItem</a></li>
          <li><a href='#'>SubMenuItem</a></li>
        </ul>
      </li>
    </ul>
  </div>
  5.  Replace MenuItem with the appropriate menu label

  6.  Replace SubMenuItem with the appropriate sub menu label
  7.  Replace # with the appropriate URL
  8.  Click Save
  9.  Move the HTML/Javascript object to where you want the menu to appear
  10.  Click Save arrangement


  11.  Click on Template


  12.  Click Edit HTML


  13.  Click Proceed


  14.  Search for the following line:
          ]]></b:skin>

  15.  Paste the following code directly above that line



/*-------- Begin Drop Down Menu -------*/

#menubar {
    background: #8E8E8E;
    width: 840px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #B2FFFF;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #1A6680;
        border-right:1px solid #1A6680;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #130000; /* Menu hover */
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;      
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #B3B3B3; /* drop down background color */
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #130000; /* Drop down hover */
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/

  16.  Click Save Template, then Close


The following video demonstrates how to create a drop down menu in Blogger:
Read more »
Subscribe to: Posts (Atom)

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.