Showing posts with label Blog Design. Show all posts
Showing posts with label Blog Design. Show all posts

Facebook Style Blogger Template–Free Download

While surfing throughout the internet I found the most interesting blogger template released by Dapinder Singh of Windroidclub.com. He has designed this very beautifully and in a clean manner with 6 features in it.


facebookstyle25

Features of facebook style blogger template

  • Floating Header.
  • Automatic Post Summaries
  • Custom Fonts
  • Custom popular posts
  • Custom labels
  • Floating Share buttons

Add An Expandable Search Box to Blogger

Blogger has its own widget style for its blogspot sites. But it is not necessary that you implement the same widget on your site too. These search box designs are applicable to almost any type of blog design. Adding these search boxes to your blog  is like a breeze, you just need to copy and paste the code on your blog without any modifications in it.

Is it necessary to add search box in our blog?

Yes, it is very important to add search box in our blog. By using search box blog visitors can search any post in our blog`s archive without any effort. Suppose you have a large blog with thousands of posts then it is very difficult for your blog visitors to find any specific article in your blog by going through the complete archive of your blog posts. If you have search box installed on your blog then visitors can directly search any post by using it. In this way search box helps blog visitors to easily navigate through your blog and get their required information.
search-box

Add Search box widget to blogger blog

  • Login to your blogger dashboard
  • Select your desired blog that you wish to add this widget.
  • Select Layout option.
  • Select Add a gadget option.
  • Select HTML/JavaScript widget.
  • In the HTML/JavaScript widget paste code of the search box widget and save the widget.
See the live demo by going to the link given below.


Here is the code
<style>
#mbt-searchexpandbox1
{
padding:10px;
}
#mbt-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#mbt-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='mbt-searchexpand1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchexpandbox1">
            <input name='search' id='mbt-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
      </div>

PureX Responsive Free Premium Blogger Template

purex-responsive-blogger-template

a responsive premium yet free blogger template which is highly customizable in terms of colors so that it suits each and every blog and gives way for innovative color combinations. PureX is built on the same base grid but this is a Gallery styled template. It offers everything that PureZ offers in a Gallery style view of the posts. Below is the full details about features and editing necessities.
PureX Responsive Blogger Template Being responsive as well as fluidic means it will fit into screen of any size without horizontal scrolls. May it be a desktop, laptop, tablet, smartphone, anything with a screen, it will fit into it. With its single click site-wide color change feature, you can set your own color for the blog with a total of 9 color combinations which covers the entire site. The Gallery style makes it look even more eye catching for certain niche blogs. If you need a normal list type version of this template then go and download the PureZ blogger template.
Tags : responsive, minimalistic, elegant, multi-color, fluid-width, 2-column, right-sidebar, 4-column-footer, premium, free, search-engine-optimized, html5

PureX Features

  • Gallery Style View
  • Fully Responsive (till 320px) as well as Fluidic Design
  • Minimalistic and Elegant in nature
  • Single Click Color change to your Choice of color
  • SEO Optimized
  • 2 Colum Design
  • 300px Wide Right Sidebar
  • 4 Column Footer
  • Admin Comment Highlight
  • Auto Page Menu at the bottom
  • Header AD Banner
  • Minimalistic yet Professional Look

PureX Technical Aspects

  • HTML5 coded with CSS3
  • Full Compatibility across all latest web browsers
  • Opengraph integrated
  • Share buttons already included

Necessary Editings

Menu Bar
Go to Template page and click Edit HTML. Search for <nav> tag around line 377. You will have
<li><a href='YOUR-LINK-HERE'>Category 1</a></li>

and similar lines. Change the name of menu and change the link of all the items and press Save Template.
Changing the color


In the Template Page, click Customise and select the Advanced tab in the graphical editor. You will be presented with a list of changeable colors. Select and change accordingly. Press Apply to Blog after changing the colors.


Click here if you don't know how to install blogger templates.

 

 

 

Author of this Template : Karthik M’lore

How to Install Blogger Template

It is very important to Blogger templates whenever you are playing/editing with your template’s HTML codes. we may need to back-up an existing template before making significant changes to an exiting templates so that i would be restored later.

How to Download an Existing template for Backup
  • Login to your Blogger Dashboard.
  • Go to Template –> click on Backup / Restore button in the top right corner of the page.
121
  • A window opens like this.
backup-restore-2
  • Click on Download Full Template and allow it download.
How to Restore/Upload New Blogger template
  • Login to your Blogger Dashboard.
  • Go to Template –> click on Backup / Restore button in the top right corner of the page.
  • Click on Browse –> Choose the downloaded file –> Click on Upload button.
we
Once the file has uploaded, you'll receive a message saying that your template upload was successful and can preview your design on the Template page.
Drawbacks when uploading a New Template

When uploading a new template, any gadgets which were not present in the new template would be deleted. Blogger's new interface ensures that all gadgets will be retained, though they may appear in different sections of your layout.
You can easily rearrange the location of your gadgets through the Layout section of your Blogger dashboard if required.

Awesome New Latest Tweets Twitter Widget For Blogger

Now days social sharing has become most powerful way to increase traffic on your blog. Twitter is best way to share your blog posts. Here is a awesome new twitter gadget developed by way2blogging.org. I am sharing this with you. Installation is so easy,Just follow my steps.
btsnts-twitter-birdwidget
How To Awesome New Latest Tweets Twitter Widget For Blogger
  • Copy this code.
  • Paste this code in your notepad.
  • Replace all bloggingtechnix with your twitter username & follow below image instruction.
  • Log in to Blogger Dashboard  --> Edit Layout.
  • Select Add a Gadget --> Html/JavaScript.


    • <style type="text/css">ul#twitter_update_list{list-style:none;margin:20px 0;background:none;}ul#twitter_update_list li{list-style:none;background:url(http://3.bp.blogspot.com/-EOVUNHdEphQ/ThL4DoMu7sI/AAAAAAAABDo/_7SaXVPFzPo/s26/w2b_twit_bullet.png) no-repeat scroll left 6px transparent;padding:2px 0 2px 30px;margin:0 0 5px;display:block;}ul#twitter_update_list li a{display:inline;background:none;}.tfoot{position:relative;background:url(http://4.bp.blogspot.com/-SPrPCoDdEDk/ThMAJKJl1aI/AAAAAAAABDs/LrzS00Ve49g/s1600/mttwitterbird.png) no-repeat scroll left 6px transparent;padding:15px 0 15px 50px;display:block;}</style><ul id="twitter_update_list"></ul><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/bloggingtechnix.json?callback=twitterCallback2&count=5"></script><div class="tfoot" style="clear:both;">Follow me <a href="http://twitter.com/bloggingtechnix" target="_blank">@bloggingtechnix</a></div>

      Live Demo ▼



        Follow me @bloggingtechnix


        Auto Read More Button With Image Thumbnails For Blogger

        Auto read more functions automatically shorten your post and create a thumbnail of an image which is present in the post.It also helps to load page faster.It also shows and image thumbnails which helps to attract the readers.I have also added the auto read more to my blog.You just have to add two codes to blog no need jquery or css.Now lets see how to add auto read more with thumbnails for blogger.
        btsnts-autoread-moreithumbnail

        How To Add Auto Read More With Thumbnails For Blogger

        • Go to Blogger Dashboard -->  --> Edit HTML.
        • Now find </head> tag
        • Place below code just before/above </head> tag.
        <script type='text/javascript'>var thumbnail_mode = "no-float" ;
        summary_noimg = 430;
        summary_img = 340;
        img_thumb_height = 100;
        img_thumb_width = 120;
        </script>
        <script type='text/javascript'>
        //<![CDATA[
        function removeHtmlTag(strx,chop){
        if(strx.indexOf("<")!=-1)
        {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
        s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
        }
        strx = s.join("");
        }
        chop = (chop < strx.length-1) ? chop : strx.length-2;
        while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
        strx = strx.substring(0,chop-1);
        return strx+'...';
        }
        
        function createSummaryAndThumb(pID){
        var div = document.getElementById(pID);
        var imgtag = "";
        var img = div.getElementsByTagName("img");
        var summ = summary_noimg;
        if(img.length>=1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;">
        <img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>
        </span>';
        summ = summary_img;
        }
        
        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
        div.innerHTML = summary;
        }
        
        //]]>
        </script>

        If you want to change image thumbnail size then find these numbers 100 and 120.

        • Now find   <data:post.body/>  and replace it with below code.

        <b:if cond='data:blog.pageType == "item"'>
        <data:post.body/>
        <b:else/>
        <b:if cond='data:blog.pageType == "static_page"'>
        <data:post.body/>
        <b:else/>
        <div expr:id='"summary" + data:post.id'><data:post.body/></div>
        <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
        </script>
        <a class='more' expr:href='data:post.url'>Read more ...</a>
        </b:if>
        </b:if>

        Now save it.
        If it doesn't works for you then mention it in comments. I'll glad to help you.



        How To Shift Blogger Sidebar To Right Or Left?

        Today we are sharing another simple CSS trick which can change the whole layout of your blog.This is the for those who change positions of t heir blog's sidebar wrapper and main wrapper.To apply this trick you just have to find and edit some words in your template.But don't forgot to backup your full template before editing your template.If you want to change positions of your Sidebar Wrapper and Main Wrapper then go though the simple tutorial below.
        1

        How To Change Position Of Sidebar/Main Wrapper?

        1. Go to your Blogger Dashboard –> Edit HTML.
        2. Download a copy of your template.
        3. Now search for below code or similar code in your template using Ctrl + F
        #main-wrapper {
        float: left;
        width: 600px;
        margin: 0;
        padding: 0;
        }

        Now change float: left to float: right
        Now you have to shift the sidebar from right to left.To do this find below code or similar to this code in your template.
        #sidebar-wrapper {
        float: right;
        width: 320px;
        margin: 0;
        padding: 0 20px 10px;
        display: inline;
        }

        Now change float: right to float: left
        Take a preview of your template you will noticed that your sidebar has been moved right to left.
        Now save your templateand you are done...

        5 Handwritten Style Google Web Fonts for your Blog

        Hello folks, long time since last post. Today in this modern world many people come into blogging for money and they try their hard to monetize and design their blog. A good web font is very hard to find in the internet. So today I am going to give you the latest and best 5 Handwritten like style Google web fonts for your blog.
        Handwriten Google Webfont

        With this post, you can skip the work of sorting through the crap and cut straight to the awesome web fonts that are readable, attractive and perfect for your site.
        All of the fonts are shown with a unique CSS treatment and provided with code for your instant implementation. They’re also all served up with Google Web Fonts so you’ll be up and running with a quick copy and paste, no downloads required to implement it on your blog.

        1) Oleo Script

        A nice thick script web font with good readability and interesting letter shapes. Perfect for headlines.
        Oleo Script
        Go Here
         

        2) Lobster Two

        Lobster needs no introduction, it has become one of the most ubiquitous scripts on the planet in the last few years. Version two gives you the choice between bold and thin versions.
        Lobster Two
        Go Here

        3) Berkshire Swash

        I really love the ornamental nature of this typeface, the letters are big, bold and beautifully curvy. Use this if you want to convey an old world feel.
        Berkshire
        Go Here

        4) Merienda One

        Merienda isn’t my favorite but it certainly has its uses. The letters have a brushed feeling with sharp directionality that conveys motion well. Merienda
        Go Here

        5) Pacifico

        Pacifico is just a great, round and loopy script that really has a unique feel to it. It’s hard to find a thick script with such nice curves and so much character so be sure to bookmark this one. Pacifico
        Go Here
        More Handwritten Google Web fonts

        There you have it, five awesome hand written fonts served up and ready to implement. The Google Web Font library has well over a hundred of these but so many of them really aren’t worth using at all so hopefully this article will help you.









        To Sidebar or to Not? Important Questions about Website Navigation Answered

        Hello Folks, long time since i last posted an article on my website.Today our Guest Author Anny Solway has taken some of her precious time to write for us. It is a very helpful topic that can help you improve your Website's navigation to gain more impressions on every view and also See how to become an Guest Author in My Blogging Techniques.


        One of the biggest problems you could find when you are trying to put together a web presence can be determining layout. When you begin delving into Professional WordPress themes , you will find that you have a wide variety of options. You need to make choices, not based on your own preference, but instead based on what will work best for your customers and potential customers.
        One of the most important choices to make will have to do with navigation. An easily navigated site will be one that keeps potential customers logged on for much longer and will have the best chance for turning potentials into real customers. You need to answers to important questions so that you can build your website the right way.

        Do I Need a Sidebar?

        When you begin building your website, you will find that you have a couple of key navigation options: the sidebar and the drop-down menu. In most cases, you will find it advantageous to always include drop-down menus as this will be the first place customers will look in order to navigate your site. The sidebar, on the other hand, is a different matter.
        You will have to think carefully about your site. What would you include in that sidebar? This can be a great way to guide readers to specific pages if you need to highlight them. It can also be a great way to link your site to social media. If these things matter, then you do need sidebars.

        Should I Include Flash on My Site?

        Flash has become a very popular novelty for including slideshows and other dynamic content. This can be an option that you are considering for your site. It will certainly make an impression from the very beginning! You can choose to use Flash on your site, but there is one rule you need to keep in mind. Keep it to a minimum. If you include one Flash element on your home page, stick with just the one. One eye-catching element is enough. Including any more could lead to a busy and unprofessional site.

        How Many Subpages Do I Need?

        When customers navigate your site, they do not need to get lost. If you make things too confusing with dozens of different pages, then they will give up. Yes, you do need subpages to provide helpful information, but do not include any more than are absolutely required, and ensure navigation from one to the next is easy.
        Making the right decisions for your website navigation is a must. This can make the difference in turning a potential customer into a real customer. 



        About author

        Anny Solway is an original writer at  ThemeFuse.com - a leader in the premium  WordPress themes industry. She is fond of sharing Online Marketing and Blogging ideas.
         

        How To Add Windows 8 Tiles Style Social Media Widget

        Hello bloggers, hope everyone are doing good. We all know that there are unlimited benefits available in social media platforms for promoting our blog/ website. Today we will learn and add an unique social media widget in our blogger blog which is looks like windows 8 titles. In this widget you can link up your social media profiles. (RSS feed, Facebook, Twitter, Google Plus, LinkedIn, YouTube, StumbleUpon and Pinterest.) This is an extra colorful attraction to concentrate your readers for subscribing. I have already applied it to our test blog. So, before you apply it on your blog, you can simply watch a demo.
        windows-8-style-social-widget

        How To Add Windows 8 Tiles Style Social Media Widget

        • Sign in to Blogger blog
        • Click Layout from left side menu
        • Choose a suitable widget position and click Add a Gadget
        • Select HTML/JavaScript.
        • Now simply paste the below codes in the box.

        <style>
        /*---My Blogging Techniques Windows 8 Style Social Widget---*/
        .sm-win-eight-social{
        background: transparent;
        width:300px;
        }
        .sm-win-eight-social li{
        position:relative;
        cursor:pointer;
        padding:0px;
        list-style:none;
        }
        .sm-win-eight-social .smrss,.smfacebook,.smtwitter,.smgoogleplus,.smlinkedin,.smyoutube,.smstumble,.smpinterest {
        z-index:8;
        float:left;
        margin:2px;
        display:block;
        position:relative;
        }
        .sm-win-eight-social .smrss{
        background: #F98509 url(http://2.bp.blogspot.com/-ZUphGkq3UNM/UdCaXGDHWYI/AAAAAAAAEH8/RtTu5Ow9b_8/s60/shinemat-rss-feed-icon-n.png) no-repeat center;
        width:140px;
        height:143px;
        }
        .sm-win-eight-social .smfacebook{
        background: #2E89F2 url(http://2.bp.blogspot.com/-w78SGkj0S4g/UdCaVC8jGyI/AAAAAAAAEHw/Kc5L0NbsE10/s37/shinemat-facebook-icon-h.png) no-repeat center;
        width:68px;
        height:70px;
        }
        .sm-win-eight-social .smtwitter{
        background: #6EB921 url(http://2.bp.blogspot.com/-hDccFupO26Q/UdCaavsEC7I/AAAAAAAAEIU/lVESKdBJsWk/s50/shinemat-twitter-icon-n.png) no-repeat center;
        width:69px;
        height:70px;
        }
        .sm-win-eight-social .smgoogleplus{
        background: #5533AE url(http://1.bp.blogspot.com/-kE_-sK9FpEE/UdCaUjFdUuI/AAAAAAAAEHk/JULJosvEAfU/s40/shinemat-googleplus-icon-n.png) no-repeat center;
        width:68px;
        height:69px;
        }
        .sm-win-eight-social .smlinkedin{
        background: #0097BD url(http://1.bp.blogspot.com/-qSTYsuxhK2Y/UdCaU8K3ncI/AAAAAAAAEHs/dzrr30FjEEQ/s30/shinemat-linkedin-icon-n.png) no-repeat center;
        width:69px;
        height:69px;
        }
        .sm-win-eight-social .smyoutube{
        background: #e64a41 url(http://4.bp.blogspot.com/-KWF7QiEHOl8/UdCabQTUkcI/AAAAAAAAEIc/P9rS5Fe_h3Q/s80/shinemat-youtube-icon-n.png) no-repeat center;
        width:285px;
        height:69px;
        }
        .sm-win-eight-social .smstumble{
        background: #FA05EC url(http://4.bp.blogspot.com/-TlprUIB_GvA/UdCaX8PyhTI/AAAAAAAAEIM/DXimB7E-x0o/s50/shinemat-stumbleupon-icon-n.png) no-repeat center;
        width:141px;
        height:69px;
        }
        .sm-win-eight-social .smpinterest{
        background: #0B54A9 url(http://4.bp.blogspot.com/-n6OJ4lHESvE/UdCaXd7eD9I/AAAAAAAAEIA/l_9v7SUd2YY/s38/shinemat-pinterest-icon-n.png) no-repeat center;
        width:141px;
        height:69px;
        }
        .sm-win-eight-social li:hover .smrss{
        background: #F98509 url(http://1.bp.blogspot.com/-qyPyojUEMi8/UdCW2H-k6lI/AAAAAAAAEG8/8DqJq5atouU/s70/shinemat-rss-feed-icon.png) no-repeat center;
        }
        .sm-win-eight-social li:hover .smfacebook{
        background: #2E89F2 url(http://1.bp.blogspot.com/-gGtzAVHcW44/UdCWwttlLHI/AAAAAAAAEGc/AFmwcosgvZw/s56/shinemat-facebook-icon.png) no-repeat center;
        }
        .sm-win-eight-social li:hover .smtwitter{
        background: #6EB921 url(http://2.bp.blogspot.com/-sc_qxC0Mmfo/UdCW6v2hW5I/AAAAAAAAEHM/MXXPV1bHoBU/s60/shinemat-twitter-icon.png) no-repeat center;
        }
        .sm-win-eight-social li:hover .smgoogleplus{
        background: #5533AE url(http://4.bp.blogspot.com/-JyK9dFzixBg/UdCWxPpigiI/AAAAAAAAEGk/jr5Aozqw-4Y/s50/shinemat-googleplus-icon.png) no-repeat center;
        }
        .sm-win-eight-social li:hover .smlinkedin{
        background: #0097BD url(http://2.bp.blogspot.com/-Tvs-yuw7vvA/UdCWxYRBPKI/AAAAAAAAEGo/jffPCC9TgQA/s40/shinemat-linkedin-icon.png) no-repeat center;
        }
        .sm-win-eight-social li:hover .smyoutube{
        background: #e64a41 url(http://3.bp.blogspot.com/-_Tfex556WOw/UdCW7nHj8nI/AAAAAAAAEHU/eCKq6j8ZL24/s100/shinemat-youtube-icon.png) no-repeat center;
        }
        .sm-win-eight-social li:hover .smstumble{
        background: #FA05EC url(http://3.bp.blogspot.com/-czu-X4tuiQ0/UdCW3B8tzqI/AAAAAAAAEHE/s8AbDK_f9JA/s60/shinemat-stumbleupon-icon.png) no-repeat center;
        }
        .sm-win-eight-social li:hover .smpinterest{
        background: #0B54A9 url(http://4.bp.blogspot.com/-JcV5ObMAkJs/UdCW1NOIETI/AAAAAAAAEG0/3ro_lw7KHvk/s51/shinemat-pinterest-icon.png) no-repeat center;
        }
        </style>
        
        <div class="sm-win-eight-social">
        
        <li><a class="smrss" href="http://feeds.feedburner.com/RSS-USERNAME"></a></li>
        <li><a class="smfacebook" href="http://www.facebook.com/FACEBOOK-USERNAME"></a></li>
        <li><a class="smtwitter" href="http://twitter.com/TWITTER-USERNAME"></a></li>
        <li><a class="smgoogleplus" href="https://plus.google.com/G+PROFILE-ID"></a></li>
        <li><a class="smlinkedin" href="https://www.linkedin.com/LINKEDIN-USERNAME"></a></li>
        <li><a class="smyoutube" href="http://www.youtube.com/YOUTUBE-USERNAME"></a></li>
        <li><a class="smstumble" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME"></a></li>
        <li><a class="smpinterest" href="http://pinterest.com/PINTEREST-USERNAME"></a></li>
        
        </div>


        • Replace the following areas with your own details...


          • Replace RSS-USERNAME with your blog's RSS feed link.

          • Replace FACEBOOK-USERNAME with your Facebook username.

          • Replace TWITTER-USERNAME with your own Twitter username

          • Replace G+PROFILE-ID with your Google Plus profile ID.

          • Replace LINKEDIN-USERNAME with your LinkedIn username.

          • Replace YOUTUBE-USERNAME with your Youtube username.

          • Replace STUMBLEUPON-USERNAME with your Stumbleupon username.

          • Replace PINTEREST-USERNAME with your Pinterest username..

        • Now click Save button to done everything.
          Reload your blog to see this nice widget is working on your blog.
          If any problem you will face please do not late to let me know. I will assist you with smiles.

        How To Change Mouse Cursor On Blogger Blog

        As a smart blogger or site designer you always want to decorate with new style to your blogger blog or site. Is not it? I know you are very careful to change the look of every part of the blog. One of my friend asked me about changing the mouse pointer on his blogger blog. You know, its very easy to do. So Lets do it now.
        blogger-mouse-pointer-change-by-saimoom-shinemark
        • Log in to Blogger Blog.
        • Go to Design, click Edit HTML (Don't forget to backup your template)
        • Find the following code  by pressing Ctrl+F
        ]]></b:skin>
        • Now simply paste the below code before/ above ]]></b:skin>
        /*------- Mouse pointer style start www.mybloggingtechniques.com --------*/
        body, a, a:hover {cursor: url(ADD CURSOR URL HERE), progress;}
        /*------- Mouse pointer style end www.mybloggingtechniques.com --------*/


        • Click Save Template and you are done.

        Note: Change the red link with your own selected pointer link. Here are 2 websites link where you can get huge mouse pointer.


        1.  Cursors-4U.com

        2. Totally Free Cursors


        If you still having problem just let me know. Have a good day. :-)

        CSS : Text Shadow In 3D Effect

        Hello Friends Today we are discuss Text-Shadow With CSS.this Word Firefox,safari,Chrome and Internet explorer Is Not Working . The CSS 2 property text-shadow is supported in Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Google Chrome since version 2, Konqueror and iCab. In fact, text-shadow is supported by all browsers that are based on WebKit, the rendering engine behind Safari and Chrome. Internet Explorer 8 does not support such text shadows (except for some DirectX image transform filters).

        CSS-3D-Text-Shadow2
        Today I am Sharing How to 3D Text Shadow With CSS.

        CSS :

        h1.tg-sha { font-size:200%;margin:10px 0 0;padding:0;color: #ffffff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15); font-weight: bold;}

        HTML :

        <h1 class="tg-sha"> Text Here </h1>

        Text CSS-3D

        Using This Blog Title h1 tag <h1> </h1>

        How To Add Breadcrumbs Navigation Widget For Blogger

        Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title. breadcrumb-navigation-for-blogger.png

        Add Breadcrumbs Navigation To Blogger

      • Login to your Blogger Dashboard –> Template
      • As always download a copy of your template
      • Click on Edit HTML.
      • Now find below code,
      • ]]></b:skin>

        add below CSS code just above it,

        .breadcrumbs {

        background: #F7F7F7;

        float: left;

        border: 1px solid #E6E6E6;

        width: 575px;

        font-size: 11px;

        margin: 10px 10px 10px 10px;

        padding: 5px 10px 5px 10px;

        }

      • Now find below code,
      • <b:include data='top' name='status-message'/>

        just above it copy and paste below code,

        <b:include data='posts' name='breadcrumb'/>

        Now find below code (if you find two occurrences of this, then locate the second one)

        <b:includable id='main' var='top'>

        just above it paste below code,

        <b:includable id='breadcrumb' var='posts'>

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

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

        <div class='breadcrumbs'>

        <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>

        </div>

        <b:else/>

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

        <!-- breadcrumb for the post page -->

        <b:loop values='data:posts' var='post'>

        <b:if cond='data:post.labels'>

        <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">

        <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>

        <b:loop values='data:post.labels' var='label'>

        <b:if cond='data:label.isLast == "true"'>

        » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

        </b:if>

        </b:loop>

        » <span><data:post.title/></span>

        </div>

        <b:else/>

        <div class='breadcrumbs'>

        <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>

        </div>

        </b:if>

        </b:loop>

        <b:else/>

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

        <!-- breadcrumb for the label archive page and search pages.. -->

        <div class='breadcrumbs'>

        <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>

        </div>

        <b:else/>

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

        <div class='breadcrumbs'>

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

        <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

        <b:else/>

        <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>

        </b:if>

        </div>

        </b:if>

        </b:if>

        </b:if>

        </b:if>

        </b:if>

        </b:includable>

        How To Add Breadcrumbs Navigation Widget For Blogger

        Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title. breadcrumb-navigation-for-blogger.png

        Add Breadcrumbs Navigation To Blogger

      • Login to your Blogger Dashboard –> Template
      • As always download a copy of your template
      • Click on Edit HTML.
      • Now find below code,
      • ]]></b:skin>

        add below CSS code just above it,

        .breadcrumbs {

        background: #F7F7F7;

        float: left;

        border: 1px solid #E6E6E6;

        width: 575px;

        font-size: 11px;

        margin: 10px 10px 10px 10px;

        padding: 5px 10px 5px 10px;

        }

      • Now find below code,
      • <b:include data='top' name='status-message'/>

        just above it copy and paste below code,

        <b:include data='posts' name='breadcrumb'/>

        Now find below code (if you find two occurrences of this, then locate the second one)

        <b:includable id='main' var='top'>

        just above it paste below code,

        <b:includable id='breadcrumb' var='posts'>

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

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

        <div class='breadcrumbs'>

        <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>

        </div>

        <b:else/>

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

        <!-- breadcrumb for the post page -->

        <b:loop values='data:posts' var='post'>

        <b:if cond='data:post.labels'>

        <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">

        <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>

        <b:loop values='data:post.labels' var='label'>

        <b:if cond='data:label.isLast == "true"'>

        » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

        </b:if>

        </b:loop>

        » <span><data:post.title/></span>

        </div>

        <b:else/>

        <div class='breadcrumbs'>

        <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>

        </div>

        </b:if>

        </b:loop>

        <b:else/>

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

        <!-- breadcrumb for the label archive page and search pages.. -->

        <div class='breadcrumbs'>

        <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>

        </div>

        <b:else/>

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

        <div class='breadcrumbs'>

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

        <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

        <b:else/>

        <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>

        </b:if>

        </div>

        </b:if>

        </b:if>

        </b:if>

        </b:if>

        </b:if>

        </b:includable>

        How To Add a Breadcrumb Trail to your Blogger Post

        Have you ever experienced after searching and googling to a comprehensive website, then lose track of where you are, and what you are really looking for? I did, many times. To quote a page on the Yahoo's Design Pattern Library: "When the page displayed is within a hierarchy of pages and is not the topmost page," the reader needs some sort of "understanding of where she is in relation to the rest of the site."
        The breadcrumb trail at the top of a post provides a nice solution to this problem. In a breadcrumb, you can always click on the label/category before it, or click the "Home" link to go back to the front page. More importantly, the user knows where she is, something that other navigation widgets such as the out-of-the box label, or my previous "tab hack" are not able to address (yet.)

        bc

         

        Below are two easy steps to install the "Breadcrumbs Hack"

        Step1: Embedding Function Definition and Function Call.
        Go to Template->Edit HTML, then check the Expand Widget Templates checkbox.
        Look for the Blog1 widget (<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">), then locate the main includable:
        Put the below code right in front of the highlighted text:

        bc1

        <b:includable id='breadcrumbs' var='post'>
        <!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
          <b:if cond='data:blog.pageType == "item"'>
              <p class='breadcrumbs'>
              <span class='post-labels'>
                <b:if cond='data:post.labels'>
                  You are here:
                  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
                  <b:loop values='data:post.labels' var='label'>
                    <b:if cond='data:label.isLast == "true"'>
                      <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
                    </b:if>
                  </b:loop>
                  <b:if cond='data:post.title'>
        &gt;  <b><data:post.title/></b>
                  </b:if>
                </b:if>
              </span>
              </p>
          </b:if>
        <!-- End of Breadcrums Hack -->
        </b:includable>

        Next, add this line:

        <b:include data='post' name='breadcrumbs'/>


        right in front of the line <b:if cond='data:post.dateHeader'>. (Since you're already located the line <b:includable id='main' var='top'>, once you add this new line, it is now part of blog1 widget.)

        bc2

         

        Step 2: Add CSS code
        Add this code at the end of the CSS portion (between the pair skin tags (see picture)


        .breadcrumbs {
        border-bottom:1px dotted #000;
        margin:2em 0 0.5em;
        padding:0 0 0.5em;
        }


        (Feel free to modify the first & third parameters of the last two lines (in bold) to expand/shorten the top & bottom heights.)

        Save your editing, and you should see the breadcrumb only when you view an item page.

        bc4

        Proudly powered by Blogger