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

“பிளாக்கரில் அழகிய 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6qItlQCxXY5Jz0Pu_NCX8VCMM5O38Q8T0ygVraNqyueTsdyP1YBrmUx4kL6mYff3aJ_pvEfhnSkXDWuimOO4Hp_INEy-CeyyHhQkmBVIeQdtmRvDColIIoCDGl6NtYdT6O5XZP7hwSwZ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOLU0HGls2Cf7Q-sfCvDVMs9qvay-oJ_dWLrkbzeyhOP0VszngudzH1Hn4KCdywNB46M3z7aci7uBjz_nsTSw_xDdLY4OmG_49gxuL7PCH3owQ2sB374D-EEBV1kFqdkpFjKJzdGi7hZvX/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOLU0HGls2Cf7Q-sfCvDVMs9qvay-oJ_dWLrkbzeyhOP0VszngudzH1Hn4KCdywNB46M3z7aci7uBjz_nsTSw_xDdLY4OmG_49gxuL7PCH3owQ2sB374D-EEBV1kFqdkpFjKJzdGi7hZvX/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHXm084BpeR77kZU8gpt01QSOuif3OmSSCgy4VqjyUv55LZjG4Aq26YDGVeBxOSPMTu5GFHYzMICLA03cK3OG6P17Vn48mfrSgS2-aN2raBgQHVEuzGZlAXIk-V_lUtdlroAMdpSfwz45S/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjiAbf-8TUUHNJ8ijT5OzOaURT-7otdmJHLbBKiWqBiQJ1EQ-5IYbUJAPhHzqZv6VCOheXJWtPTw0ATvRRRkbT5_idTBUhhkW4uQJJDT8kk46cqG2OhqFKU7yhB9CX6hniTaL9nTppHs0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjiAbf-8TUUHNJ8ijT5OzOaURT-7otdmJHLbBKiWqBiQJ1EQ-5IYbUJAPhHzqZv6VCOheXJWtPTw0ATvRRRkbT5_idTBUhhkW4uQJJDT8kk46cqG2OhqFKU7yhB9CX6hniTaL9nTppHs0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYotQ7ucqsocprQW6BytxbbEhXqR-cKnQZeEEXrVuhYQSM9UvPx_NpYJ23n4shYYeEC_aSC0ED0KtwROxkg50c0uPqjdWawenO1MHNHW-9paATeDt8Vx2_sAdzfXm9qMKb4hh5qULPZ_Q/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-