Display Tags In A Dropdown Menu

People are increasingly using WordPress. Many are freash and know little about wordpress. Many are disappointed and many are previously blogger user but still people are looking for wordpress and its tools and tips and tricks. For new user it is difficult to understand CSS or to implement the CSS codes into wordpress. Don't worry here are some guidlines which if you follow you can easily implement these CSS codes into your wordpress. On the other side as a designers or developers (Experienced wordpress users), are really get in touch with WordPress coding. So here is an amazing CSS Code for them.
We recommend you to see related post to find more which you may don't have or may don't know about that. For more information just post in comment box below or feel free to contact us personaly


In theme folder, paste the following code to the functions.php file. If you don not have a functions.php file then first create this one.

<?php
function dropdown_tag_cloud( $args = '' ) {
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
'exclude' => '', 'include' => ''
);
$args = wp_parse_args( $args, $defaults );

$tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags

if ( empty($tags) )
return;

$return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
if ( is_wp_error( $return ) )
return false;
else
echo apply_filters( 'dropdown_tag_cloud', $return, $args );
}

function dropdown_generate_tag_cloud( $tags, $args = '' ) {
global $wp_rewrite;
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
);
$args = wp_parse_args( $args, $defaults );
extract($args);

if ( !$tags )
return;
$counts = $tag_links = array();
foreach ( (array) $tags as $tag ) {
$counts[$tag->name] = $tag->count;
$tag_links[$tag->name] = get_tag_link( $tag->term_id );
if ( is_wp_error( $tag_links[$tag->name] ) )
return $tag_links[$tag->name];
$tag_ids[$tag->name] = $tag->term_id;
}

$min_count = min($counts);
$spread = max($counts) - $min_count;
if ( $spread <= 0 )
$spread = 1;
$font_spread = $largest - $smallest;
if ( $font_spread <= 0 )
$font_spread = 1;
$font_step = $font_spread / $spread;

// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
if ( 'name' == $orderby )
uksort($counts, 'strnatcasecmp');
else
asort($counts);

if ( 'DESC' == $order )
$counts = array_reverse( $counts, true );

$a = array();

$rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';

foreach ( $counts as $tag => $count ) {
$tag_id = $tag_ids[$tag];
$tag_link = clean_url($tag_links[$tag]);
$tag = str_replace(' ', '&nbsp;', wp_specialchars( $tag ));
$a[] = "\t<option value='$tag_link'>$tag ($count)</option>";
}

switch ( $format ) :
case 'array' :
$return =& $a;
break;
case 'list' :
$return = "<ul class='wp-tag-cloud'>\n\t<li>";
$return .= join("</li>\n\t<li>", $a);
$return .= "</li>\n</ul>\n";
break;
default :
$return = join("\n", $a);
break;
endswitch;

return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );
}
?>

Now open the file where you want the list to be displayed and paste the following code:

<select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="#">Tags</option>
<?php dropdown_tag_cloud('number=0&order=asc'); ?>
</select>

You are done! Thank you.

CSS Code To Flip an Image

Here is the CSS code which helps you to flip the images. For example having only one graphic for an "arrow", but flipping it around to point in different directions.

Question related to this topic:

Can this trick be applied to background images?
The answer is Yes! It can be applied to background images.

Actually it can be applied to background images and it works fine with the following:
-Fire Fox
-Chrome
-IE

The problem related with IE is, When you will use the IE it will show the “ActiveX” bar at top of your page and asks you to allow the Blocked Content or otherwise it will only show the none-flipped background image. I know this is very annoying but this what it is.
So When it asks to allow you simply allow it.

Demo:

Unflipped Image:

Flipped Image:

Now here Comes the Code:

***---CSS---***

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

Bouncy Animated Loading Animation

This CSS trick is amzanig and i am sure you will like it. Just another coolest thing with CSS3 animations. If you are worried about super deep browser support, use a GIF file.
Well, I guess you are using a good browser. If i am wrong then please uninstall it and install and use a good/better one. Thank You!

***---HTML---***

<div class="loader">

    <span></span>

    <span></span>

    <span></span>

</div>

***---CSS---***

.loader {

    text-align: center;    

}

.loader span {

    display: inline-block;

    vertical-align: middle;

    width: 10px;

    height: 10px;

    margin: 50px auto;

    background: black;

    border-radius: 50px;

    -webkit-animation: loader 0.9s infinite alternate;

    -moz-animation: loader 0.9s infinite alternate;

}

.loader span:nth-of-type(2) {

    -webkit-animation-delay: 0.3s;

    -moz-animation-delay: 0.3s;

}

.loader span:nth-of-type(3) {

    -webkit-animation-delay: 0.6s;

    -moz-animation-delay: 0.6s;

}

@-webkit-keyframes loader {

  0% {

    width: 10px;

    height: 10px;

    opacity: 0.9;

    -webkit-transform: translateY(0);

  }

  100% {

    width: 24px;

    height: 24px;

    opacity: 0.1;

    -webkit-transform: translateY(-21px);

  }

}

@-moz-keyframes loader {

  0% {

    width: 10px;

    height: 10px;

    opacity: 0.9;

    -moz-transform: translateY(0);

  }

  100% {

    width: 24px;

    height: 24px;

    opacity: 0.1;

    -moz-transform: translateY(-21px);

  }

}

 Reference URL 

Make Blog In Two Steps

You can create a blog for free on blogger, wordpress, skyblog.. Here i show you how can you make a free blog on Blogger . But before you can make a blog you have to make a Google Account. Click on this: Make a Google Account  (If you already have a Google Account then you don't need to do this). 

Make Blog in just two steps:

Step 1: Click on this Link (to open blogger website direct to create a blog page)

Step 2: Enter the details.

1: Your desired title
2: Your desired blogger address
3: Select any Template
4: Click on Create Blog!

That's it. Thank You.

Please Like us on Facebook .

How To Change Blogger Template .

Awesome Professional Blogger Templates .