பிளாக்கருக்கான அழகிய மெனுபார்கள் -(பிளாக்கர் டிப்ஸ்)

Views:

“பிளாக்கரில் அழகிய Navigation Menu Bar  ஒன்றிளை எவ்வாறு இணைப்பது என்பதற்கான ஒரு பதிவு”


அநேக இணையத்தளங்களில் பல பிரிவுகளாக பிரித்து பக்கங்கள் காணப்படும். அந்தந்த பக்கங்களுக்கு செல்ல அந்த இணையப்பக்கத்தின் மேற்பகுதியில் அந்த பிரிவுகளை உள்ளடக்கிய மெனுக்கள் காணப்படும் ( உதாரணமாக : HOME, Contract me, video Etc)


இதனைப்போன்று உங்கள் பிளாக்கிலும் ஒவ்வொரு category க்கும் தனித்தனி மெனுக்களை கொண்டு வர முடியும். (என் பிளாக்கில் மேற்பகுதியில் முகப்பக்கம்,  தொழில்நுட்பம், பிளாக்கர் டிப்ஸ் என மெனுக்கள் இருப்பதை காணலாம்)

இதே போன்று கீழ் உள்ள படிமுறைகளை செய்வதன் மூலம் உங்கள் பிளாக்கிலும்  மெனுக்களை கொண்டு வரலாம்.


  1. உங்கள் பிளாக்கரை Login செய்து கொள்ளுங்கள்.
  2. Dashboardல் design > Edit HTML சென்று Expand your Widget Templates என்பதன் முன்னால் உள்ள பெட்டியில் டிக் அடையாளத்தை உறுதிப்படுத்தவும்.
  3. பின் கீழுள்ள HTML நிரலில்
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    என்பதை கண்டுபிடித்து அதனை கீழ் உள்ளவாறு மாற்றி விடுங்கள்.
    <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
  4. பின் HTML நிரலில்,
    ]]></b:skin>
    என்பதனை கண்டுபிடித்து  , கீழுள்ள CSS Code களில் உங்களுக்கு பிடித்த மெனுவுக்கான  CSS Code களில் ஒன்றை அதற்கு மேல் பகுதியில்  பிரதி செய்யுங்கள்.


    CSS CODE - 01 (Black & White)

                         [படத்தை பெரிதாக்க படத்தின் மீது அழுத்தவும்]
    /* Farhacool Navi-Menubar(farhacool.blogspot.com)
    ----------------------------------------------- */

    #farhcool-menu {
        height:36px;
        display:block;
        overflow:hidden;
        margin:0;
        background:url(http://1.bp.blogspot.com/-ha0hDdiq65o/TYcjcYDmbOI/AAAAAAAAB54/dIUd7lBNwDc/s1600/nav-bg.png) left top repeat-x;
        -moz-border-radius:10px 10px 10px 10px;
        -khtml-border-radius:10px 10px 10px 10px;
        -webkit-border-radius:10px 10px 10px 10px;
        border-radius:10px 10px 10px 10px;
    }


    #farhcool-menu .current-cat a {
        background:url(http://2.bp.blogspot.com/-lhGQUp8goAE/TYcjnlDusTI/AAAAAAAAB6A/0rDGpDOA52I/s1600/nav-hover.png) left top repeat-x;
        color:#FFF;
        -moz-border-radius:10px 0 0 10px;
        -khtml-border-radius:10px 0 0 10px;
        -webkit-border-radius:10px 0 0 10px;
        border-radius:10px 0 0 10px;
    }


    #farhacool-nav a, {
        text-decoration:none;
        display:block;
    }

    #farhacool-nav a {
        margin:0 1px 0 0;
        float:left;
        padding:16px 16px;
        text-transform:uppercase;
        color:#1C334A;
        font-weight:bold;
        font-size:12px;
    }


    #farhacool-nav li a:hover, #farhacool-nav li a:focus {
        background:url(http://2.bp.blogspot.com/-lhGQUp8goAE/TYcjnlDusTI/AAAAAAAAB6A/0rDGpDOA52I/s1600/nav-hover.png) left top repeat-x;
        color:#FFF;
    }


    #farhacool-nav, #farhacool-nav ul, #farhacool-nav ol {
        padding:0;
        margin:0;
        list-style:none;
        line-height:1em;
    }


    #farhacool-nav ol, #farhacool-nav ul {
        background:none;
        left:0;
    }


    #farhacool-nav li {
        background:url(http://3.bp.blogspot.com/-0SdypigBIfk/TYcjnpuve7I/AAAAAAAAB6I/ZVmZkYfc7FY/s1600/nav-separator.png) right center no-repeat;
        cursor:pointer;
        float:left;
        margin:0 2px 0 0;
        padding:0 2px 0 0;
        height:36px;
        display:inline;
    }


    #farhacool-nav {
        margin:0 auto;
        clear:both;
        overflow:hidden;
        font-size:12px;
        display:block;
    }

    CSS CODE - 02 (Green)

                         [படத்தை பெரிதாக்க படத்தின் மீது அழுத்தவும்]
    /* Farhacool Navi-Menubar-green(farhacool.blogspot.com)
    ----------------------------------------------- */
    #farhcool-menu {
        height:40px;
        display:block;
        overflow:hidden;
        border-bottom:6px solid #4AAE14;
        padding-left:10px;
    }


    #farhcool-menu .current-cat a {
        color:#FFF;
        background:url(http://1.bp.blogspot.com/-3hRo19GAlDE/TX8cdHZHYoI/AAAAAAAABh8/SGWFbG9QHyA/s1600/nav-hover.png) left top repeat-x;
        -moz-border-radius:5px 5px 0 0;
        -khtml-border-radius:5px 5px 0 0;
        -webkit-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }


    #farhacool-nav a, {
        text-decoration:none;
        display:block;
    }


    #farhacool-nav a {
        margin:0 3px 0 0;
        float:left;
        padding:16px 14px;
        text-transform:uppercase;
        color:#000;
        font-weight:bold;
        font-size:12px;
    }


    #farhacool-nav li li a {
        font-size:12px;
        text-align:left;
        background-color:#4AAE14;
        padding:6px 24px;
        color:#FFF;
        text-shadow:none;
    }


    #farhacool-nav li a:hover, #farhacool-nav li a:focus {
        background:url(http://1.bp.blogspot.com/-3hRo19GAlDE/TX8cdHZHYoI/AAAAAAAABh8/SGWFbG9QHyA/s1600/nav-hover.png) left top repeat-x;
        color:#FFF;
        -moz-border-radius:5px 5px 0 0;
        -khtml-border-radius:5px 5px 0 0;
        -webkit-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
    }


    #farhacool-nav, #farhacool-nav ul, #farhacool-nav ol {
        padding:0;
        margin:0;
        list-style:none;
        line-height:1em;
    }


    #farhacool-nav ol, #farhacool-nav ul {
        background:none;
        left:0;
    }


    #farhacool-nav li {
        cursor:pointer;
        float:left;
        margin:0 4px 0 0;
        padding:0 2px 0 0;
        height:40px;
        display:inline;
        background:url(http://1.bp.blogspot.com/-H_l6QI7Q0YE/TX8ckzO0H0I/AAAAAAAABiE/x7CCzCwcTco/s1600/nav-seperator.png) right center no-repeat;
    }


    #farhacool-nav {
        margin:0 auto;
        clear:both;
        overflow:hidden;
        font-size:12px;
        display:block;
    }

  5. உங்கள் டெம்ளேட்டை சேவ் செய்யுங்கள்.
  6.  பின் Page Elements பகுதிக்கு சென்று அதில், Add A Gatget என்பதை அழுத்தி வருவதில் HTML/JavaScript என்பதை அழுத்தி அந்த பெட்டியில் கீழ் உள்ளதை உள்ளிடவும்

                         [படத்தை பெரிதாக்க படத்தின் மீது அழுத்தவும்]
    <div id='farhcool-menu'>
    <ul id='farhacool-nav'>

    <li class='current-cat'><a expr:href='data:blog.homepageurl'>Home</a></li>

    <li><a href='#'>Category 1</a></li>

    <li><a href='#'>Category 2</a></li>

    <li><a href='#'>Category 3</a></li>
    <li><a href='#'>Category 4</a></li>
    <li><a href='#'>Category 5</a></li>
    <li><a href='#'>Category 6</a></li>

    </ul>
    </div>

    ----------செய்ய வேண்டிய மாற்றங்கள் ----------
    1.Category - என்பதற்கு பதிலாக ஒவ்வொரு மெனுவுக்கான தலைப்பையும் உள்ளிடவும்

    # - என்பதற்கு பதிலாக மெனுவுக்கான URL முகவரியினை உள்ளிடவும்.

    உதாரணம் :
    <li><a href='http://farhacool.blogspot.com/search/label/தொழில்நுட்பம்'>தொழில்நுட்பம்</a></li>



    பிந்தைய முக்கிய குறிப்பு :
    நீங்கள் Add செய்ய Gatget ஐ  உங்கள் Header Gatget ன் கீழ் இழுத்துவிட்டுவிட்டு 
    செய்த மாற்றத்தை சேவ் செய்து கொள்ளுங்கள்

    இனி உங்கள் பிளாக்கில் அழகிய மெனுபார் காட்சியளிக்கும்.

    -Farhath Mohamed Farook-
Tags:

31 கருத்துகள்:

  1. நல்ல தகவலை பகிர்ந்தமைக்கு நன்றி

    பதிலளிநீக்கு
  2. @Chitraநன்றி உங்கள் வருகைக்கும் கருத்துக்கும்

    பதிலளிநீக்கு
  3. நன்றி நன்றி இதைத் தான் எமது ஆலயத் தளத்திற்கு தேடித்திரிந்தேன் நன்றி... ஒரு சந்தேகம்.. இந்தத் தலைப்பு நாம் இடும் லேபிளுக்கு ஏற்றத போலே வருமா ? உதாரணமாக categary 1 என்பதற்கள் வரவேண்டும் என்றால் எமது லேபிளையும் அதே பெயரில் இட்டால் சரியா ?

    பதிலளிநீக்கு
  4. Very useful post . . Pls visit and give your suggestion about my blog www.kingraja.co.nr

    பதிலளிநீக்கு
  5. @♔ம.தி.சுதா♔--//இந்தத் தலைப்பு நாம் இடும் லேபிளுக்கு ஏற்றத போலே வருமா ? உதாரணமாக categary 1 என்பதற்கள் வரவேண்டும் என்றால் எமது லேபிளையும் அதே பெயரில் இட்டால் சரியா ?///

    ஆம் சுதா நீங்கள் இலக்கியம் என்ற பெயரில் பல Postகளுக்கு லேபல் இட்டிருப்பீர்களாயின் அந்த மெனுவை கிளிக் செய்ய இலக்கியம் என்று நீங்கள் லேபல் இட்ட அனைத்து இழுகைகளும் அதன் கீழ் காட்டப்படும்

    பதிலளிநீக்கு
  6. சகோதரர் பர்ஹத் அவர்களுக்கு.......
    உங்கள் வலைப்பக்கத்தை காண கிடைத்தது.அருமை.வாழ்த்துக்கள்.
    நீங்கள் சொன்ன வழி முறைகளை பின் பற்றி முயற்சி செய்தேன். சரியான தோற்றத்தில் அமையவில்லை.
    உங்கள் ஆலோசனைகளை எதிர் பார்க்கிறேன்.
    நன்றி,
    அன்புடன்
    அபூஅனு.
    http://abuanu.blogspot.com/#

    பதிலளிநீக்கு
  7. @abuanu

    உங்கள் பிளாக்கரில் மெனு பாரினை இணைப்பதில் எத்தகைய பிரச்சினைகளை காண்பிக்கிறது என்பதனை தெரிவியுங்கள் அல்லது அதனை ஒரு screenshot எடுத்து எனது மின்னஞ்சல் முகவரிக்கு அனுப்பவும்..
    farhacoo123@gmail.com

    பதிலளிநீக்கு
  8. இந்த மெனுவினை பயன்படுத்தும் அனைவருக்கும் ஒரு முக்கிய குறிப்பு..

    நீங்கள் Add செய்யும் Gatget ஐ உங்கள் Header Gatget க்கு கீழே இழுத்து விட்டுவிட்டு Save செய்யுங்கள்

    பதிலளிநீக்கு
  9. நல்ல தகவல் நண்பரே்...
    வாழ்க வளமுடன்.
    வேலன்.

    பதிலளிநீக்கு
  10. @வேலன். - உங்கள் பிளாக்குகளை பார்த்த பின்னரே நானும் பிளாக் எழுத வேண்டும் என ஆர்வம் ஏற்பட்டது...

    பதிலளிநீக்கு
  11. வணக்கம்
    1.எனது ப்ளாக்கில் social network subscribe me பட்டனை வைக்க விரும்புகிறேன்.அதற்கு
    http://widgetsforfree.blogspot.com
    ப்ளாக்கின் சைடுபாரில் உள்ள twitter,facebook..........முதலிய பட்டன்களை அதே அளவில் அதைப்போலவே வைக்க விரும்புகிறேன்.அதில் உள்ளதை விட மேலும் சில தளங்களை இணைத்து ஒரே விஜ்ஜெட் டாக வைக்க விரும்புகிறேன்.எனக்கு தொழில்நுட்பம் பற்றி அதிகம் தெரியாததால் இதற்கான html கோட்டிங்கை யும் எங்கெல்லாம் எனது url ஐ உள்ளீடு செய்யவேண்டும் என்று கூறமுடியுமா?எனக்கு தனியாக கூறினாலும் சரி,இதையே ஒரு பதிவாக போட்டாலும் சரி.தயவு செய்து உதவவும்.

    நான் வைக்கவிரும்பும் பட்டன்கள்:
    1.Follow us on twitter
    2.Follow us on google buzz
    3.subscribe via RSS Feed
    4.subscribe via Email
    5.subscribe us on YOUTUBE
    6.Subscribe us on facebook


    ஆகிய 6 தளங்களின் லோகோவுடன் கூடிய பட்டன்களை(http://widgetsforfree.blogspot.com)தளத்தின் சைட் பாரில் உள்ள அதே அளவில் அதேபோல் லோகோவில் ஒரே விஜ்ஜெட்டாக அமைக்க உதவும் html கோடிங்கை அளிக்க உதவுமாறு தங்களை வேண்டி கேட்டுக்கொள்கிறேன்.

    பதிலை tvetsi@gmail.com க்கு அனுப்பமுடியுமா?

    பதிலளிநீக்கு
  12. இந்த கருத்து ஆசிரியரால் அகற்றப்பட்டது.

    பதிலளிநீக்கு
  13. உங்களுக்கான subscribe widget ஐ உருவாக்கி விட்டேன் இப்போதே உங்கள் முகவரிக்கு அனுப்புகிறேன்..

    பதிலளிநீக்கு
  14. மிக்க நன்றி.
    ஒரு சுயநலம் இல்லாத தொழில்நுட்ப பதிவர் கிடைத்தது எனது பாக்கியமே

    பதிலளிநீக்கு
  15. "அஸ்ஸலாமு அலைக்கும்" இந்த மெனு பாறை என்னுடைய தளத்தில் இணைத்தேன் (அதுவும் மூன்று நிரலாக ) நன்றாக இருக்கிறது . உங்களுடைய்ய பதிவுக்கு நன்றி

    பதிலளிநீக்கு
  16. சகோதரர் பர்ஹத் அவர்களுக்கு.......
    உங்கள் வலைப்பக்கத்தை காண கிடைத்தது.அருமை.வாழ்த்துக்கள்.
    நீங்கள் சொன்ன வழி முறைகளை பின் பற்றி முயற்சி செய்தேன். சரி
    உங்கள் ஆலோசனைகளை எதிர் பார்க்கிறேன்.

    பதிலளிநீக்கு
  17. அன்பு இளவலே! மிகவும் எளிமையான மொழி நடை! நிறைய பதிவிடுங்கள். வாழ்த்துக்கள்.

    பதிலளிநீக்கு
  18. உள்ளத்தில் அன்பையும், உதவிடும் எண்ணங்களைகயும் கொண்டு,கணினி சேவை செய்திடும் எந்தன் இளவலுக்கு நன்றி! எல்லாப் புகழும் இறைவனுக்கே என தொடர் பணி மேற்கொள்ளும் இளவலுக்கு நன்றி!

    பதிலளிநீக்கு
  19. எவ்வளவு எழிமையான விளக்கம். நன்றி நன்றி.

    பதிலளிநீக்கு
  20. சும்மா பிச்சு உதரிட்டீங்க போங்க...கம்ப்யூட்டர்ல..கீ போர்டு மவுசு கூட தெரியாதெ எனக்கும் கூட புரியும் படியா விளக்கிட்டீங்க...இத என்னோட ஃபிளாக்லயும் அப்டியே யூஸ் பண்ணிக்கிட்டேன்..ரொம்போ ரெம்போ நன்றிங்கோ......http://taanaksvnr.blogspot.in/

    பதிலளிநீக்கு
  21. எல்லாம் பண்ணிட்டேன்..ஆனா...லேபிளை க்கிளிக் பண்ணினா நம்ம போஸ்ட் எப்படி வர வைக்குறதுனு தெரியல நண்பரே...சொல்லுங்க ப்ளீஸ்...

    பதிலளிநீக்கு
  22. உங்களுடைய தனித்துவமான தன்மை கொண்ட பதிவுகளால் கவரப் பட்டவர்களில் நானும் ஒருவன் ...........எனக்கும் ”ஆகமக்கடல்1 ஏப்ரல், 2011 10:43 pm ” அவர்கள் பதிவிட்ட........
    “வணக்கம்
    1.எனது ப்ளாக்கில் social network subscribe me பட்டனை வைக்க விரும்புகிறேன்.அதற்கு
    http://widgetsforfree.blogspot.com
    ப்ளாக்கின் சைடுபாரில் உள்ள twitter,facebook..........முதலிய பட்டன்களை............”

    எனத் தொடரும் பதிவுக்கான உங்களுடைய உதவியை எதிர் பார்க்கிறேன்....

    பதிலளிநீக்கு
  23. அருமை. ஆனால் எனது பிளாக்யில் இது சரியாக வரவில்லை ஏன் என்று தெரியவில்லை

    பதிலளிநீக்கு

இந்த பதிவு பற்றிய உங்கள் கருத்து
உங்கள் சந்தேகங்களை தனிப்பட்ட முறையில் கேட்க விரும்பினால் மெனுபாரில் உள்ள Contact me என்பதை அழுத்தி உங்கள் சந்தேகங்களை கேட்கலாம்..