५००च्या आसपास लेख असल्यामुळे विभागवार नोंदी शोधण्यासाठी अनुक्रमणिकेचा वापर करा (जुन्या पोस्टमधील adf.ly लिंक्स उघडत नसतील तर त्या लिंक उघडण्यासाठी http:// ऐवजी https:// वापरा.उदा. https://adf.ly )

तुमच्या अनुदिनीवर Horizontal Menu कसा समाविष्ट कराल?


मंडळी आज आपण तुमच्या अनुदिनीवर Horizontal Menu कसा समाविष्ट करायचा याची माहिती करून घेणार आहोत. असे केल्याने तुम्ही एखाद्या वेबसाईट सारखे विविध विभाग तुमच्या ब्लॉगवर समाविष्ट करू शकाल. आता पर्यंत ब्लॉगिंगचे तंत्र-मंत्र वापरुन तुम्ही तुमचा ब्लॉग तयार केला असेलच.

हे कसे कराल?
१)प्रथम तुमच्या ब्लॉगर खात्यावर लॉग-इन व्हा.
त्यासाठी http://draft.blogger.com या दुव्याचा वापर करा



२)या नंतर तुमच्या ब्लॉगच्या नावा समोर जे घराच्या आकाराचे चिन्ह दिसते आहे त्यावर टिचकी द्या आणि Template पर्यांयाची निवड करा.

३)या नंतर जे पान उघडेल त्यावर असलेल्या Edit Template पर्यांयावर टिचकी द्या. मग Expand Widget Templates समोरील चौकोनात टिचकी द्यायला विसरू नका.

४)आता ctrl+f चा वापर करून
 </head>
टॅगचा शोध घ्या.

५)त्या टॅगच्या वर तुम्हाला खाली दिलेला कोड कॉपी(ctrl+c) करून पेस्ट(ctrl+v)करायचा आहे.
<style type='text/css'>
#tabs20 {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabs20 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs20 li {
display:inline;
margin:0;
padding:0;
}
#tabs20 a {
float:left;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6k6gz0sIWnns6tRa0S3AD1959UJHO5vWM6W1mDsSLzlQ4a_eJDDbHzccVp7GrYoF6XnJEzWNedkDADVjf2l0ryEud5lZo5I6J_KihL2eE-OyaHfM1w_-cYQfGwdGpKPtrRCArtKn7opd/s1600/left.gif&quot;) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs20 a span {
float:left;
display:block;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOuDPjm18sY-4aQeAS0-60Z8QQfiB6aC4nki7a5C6CubG6su0-1doXSqsdOGp_kGSDi_5QiU9zSET9GcExV-qp_iNH-QOIo1wn9fNxJCI1hIMqLuG_EEgLFs55g91_GF0WDYPamTnrLpCY/s1600/right.gif&quot;) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

#tabs20 a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabs20 a:hover {
background-position:0% -42px;
}
#tabs20 a:hover span {
background-position:100% -42px;
}
</style>
६)यानंतर केलेले बदल सेव्ह करायला विसरू नका.


७)आता Layout पर्यांयावर टिचकी देवून Add a Gaget वर टिचकी द्या आणि HTML/JavaScript ची निवड करा.

८)यानंतर खाली दिलेला कोड तुम्हाला त्याठिकाणी कॉपी(ctrl+c) करून पेस्ट(ctrl+v)करायचा आहे.

<div id="tabs20">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="http://prashantredkarsobat.blogspot.com"><span>prashantredkar</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>
९)असे करून झाल्यावर # च्या जागी तुम्हाला हवा असलेला विभाग आणि त्या समोर त्या विभागाचे नाव असा बदल करायला विसरू नका

१०)शेवेटी केलेले बदल सेव्ह करा.
११)प्रात्यक्षिक पाहण्यासाठी खाली दिलेला दुवा पहा.
http://prashant-testing.blogspot.com/

धन्यवाद, 
तुमचा मित्र, 
प्रशांत दा. रेडकर
गुगलप्लसवर शेअर करा

About प्रशांत दा.रेडकर

नमस्कार,

मी प्रशांत दामोदर रेडकर.मी इलेक्ट्रॉनिक इंजिनिअर आहे.

1)मनात माझ्या २)स्पर्श नवा ही माझी दोन चारोळ्यांची पुस्तक प्रकाशित झालेली आहेत.

**तुमच्या सर्वांच्या प्रेमामुळे बुकगंगा विश्वसाहित्य संमेलन २०१२ मध्ये मला आवडता ब्लॉगर हा पुरकार मिळालेला आहे.**ABP माझाच्या "ब्लॉग माझा २०१५"च्या स्पर्धेमध्ये माझ्या या ब्लॉगला "दुस-या क्रमांकाचे" पारितोषिक मिळाले आहे.

**गायक सुबोध साठे यांनी त्याच्या "अजूनही कळेचना" या अल्बममध्ये मी लिहिलेले "तू गेलीस तेव्हा" हे गाणे गायलेले आहे.

कोडींग करणे हा माझा छंद आहे..त्याच छंदामुळे मी सध्या दोन मराठी सोशल नेट्वर्किंग साईटच्या निर्मिती मध्ये गुंतलो आहे.1)marathifanbook.com मराठी सोशल नेटवर्क 2)chivchivat.com मराठी सोशल नेटवर्क ३)marathimy.comमराठी विवाह संबंधित वेबसाईट

४)माझी मैत्रीण आणि गायिका सावनी रवींद्र हिची वेबसाईट आणि Android App सुद्धा मी डिजाईन केली आहे

savaniravindra.com वेबसाईटला अवश्य भेट द्या आणि app डाउनलोड करण्यासाठी हि लिंक वापरा com.savani.ravindra

धन्यवाद :-)

    Blogger Comment
    Facebook Comment

9 comments:

  1. या माहितीबद्दल धन्यवाद!
    ह्या मेनूबारचा कोड मी माझ्या एका प्रयोगापुरत्या वापरल्या जाणार्‍या ब्लॉगच्या टेम्प्लेटवर टाकून पाहिला (http://logicandshocks.blogspot.com/), आणि तो मेनूबार व्यवस्थित दिसत आहे, आता हा मेनूबार मला माझ्या मुख्य ब्लॉगवर लावायचा आहे(http://swingsofmind.blogspot.com/) आणि काळ्या रंगाच्या ऐवजी, ब्लॉगच्या कलर थीमशी मॅच होईल अशा कॉफी कलरचा वापर मेनूबारमध्ये करायचा आहे.... त्यासाठीचे कलर कोड नंबर कुठून सिलेक्ट करायचे आणि तुम्ही दिलेल्या कोडमध्ये नेमका कुठे बदल करून ते टाकायचे याची माहिती दिलीत, तर मला हा मेनूबार वापरता येईल.

    तसेच ह्या मेनूबारमध्ये आपण जास्तीत जास्त किती लिंक्स ठेवू शकतो आणि त्यापेक्षा जास्त लिंक्स मेनूबारमध्ये टाकायच्या असतील तर कोडमध्ये काय बदल करावा लागेल, हेही सांगितल्यास फारच उपयुक्त ठरेल.

    ReplyDelete
  2. त्यासाठी तुम्हाला कोड मध्ये "background:url(चित्राचा दुवा)" जे चित्रांचे २ दुवे आहेत ते बदलावे लागतील :-)

    ReplyDelete
  3. धन्यवाद प्रशांतजी,
    मी तुम्ही सांगितल्याप्रमाणे दोन बटणांच्या जेपीजी इमेजेस अपलोड करून त्या माझ्या http://logicandshocks.blogspot.com/ या ब्लॉगमध्ये वापरण्याचा प्रयत्न केला पण ते जमलं नाही. बटणांच्या लिंक्स http://i834.photobucket.com/albums/zz261/deokardeoyani/banner/Menubar/4d21343e.jpg आणि http://i834.photobucket.com/albums/zz261/deokardeoyani/banner/Menubar/dd39762e.jpg
    जिथे टेक्स्ट जास्त होते तिथे दोन रंगाची वेगळी बटणे दिसत आहेत. मी या दोन बटणांची जीआयएफ इमेजही तयार केली, पण ती एकच असल्याने त्याचा युआरएल दोन इमेजचे यूआरएल रिप्लेस करण्यासाठी वापरता येणार नाही, शिवाय तुमच्या युआरएलमध्ये राईट इमेज आणि लेफ्ट इमेज असे दोन इमेजचे यूआरएल दिले आहेत आता तुमच्याप्रमाणे जीआयएफ इमेज बनवून वापरायची असेल, तर ते कसे करायचे? की दोन्ही इमेज मध्ये क्रॉप करून त्याच्या चार इमेज बनवून मग लेफ्ट आणि राइट साईडसाठी दोन जीआयएफ इमेजेस तयार करायच्या? मी तुम्हांला पुन्हा पुन्हा तसदी देत आहे, पण मला एचटीएमएल बद्दल विशेष माहिती नाही, पण मी प्रयोग करूनच ब्लॉगच्या टेम्प्लेटमध्ये बदल करण्याचा प्रयत्न करत आहे. तरी कृपया मला मार्गदर्शन करावे, ही विनंती.
    तसदीबद्दल क्षमस्व!

    ReplyDelete
  4. मी तुमच्या ब्लॉगचे कोड पाहिले त्यात एक चुक झाली आहे..दोन्ही इमेज एकाच साइजच्या झाल्या आहेत.
    १)http://3.bp.blogspot.com/-rR67j2wDyf4/TnHNiWfq4GI/AAAAAAAABb4/tCWdUyN5T1o/s1600/right.gif

    २)http://3.bp.blogspot.com/-rUXvLWr-9LU/TnHT_D_0FnI/AAAAAAAABb8/_5GGlnluzt8/s1600/left.gif

    कोड मधील हे दोन्ही दुवे जर तुम्ही ब्राऊजर मध्ये उघडून पाहिलेत तर दोन्ही चित्रांची साइज किती असावी याचा तुम्हाला अंदाज येईल...त्या आकारामध्येच दोन्ही चित्रे करून ती अपलोड करा आणि आधीच्या दुव्यांसोबत बदला असे केल्याने तुमच्या समस्येचे समाधान होईल.

    ReplyDelete
  5. धन्यवाद प्रशांतजी,
    आता हा मेनूबार व्यवस्थित दिसत आहे.
    Thanks a lot, it really helped! :)

    ReplyDelete
  6. पुढेही कधी काही मदत लागली तर नक्की कळवा :-)

    ReplyDelete
  7. This menu is good, but it does not show change in font colour or in background image when the link is actually visited. If I want to show visited link with underlined font then how to do it? or if I want to give different font colours for active link, visited link, link with cursor then how to change the colour of font?
    Sudhir

    ReplyDelete
  8. तसे जर करायचे असेल तर साधे html कोड वापरावे लागतील..तरच कोणी एखाद्या दुव्यावर टिचकी दिली तर त्या दुव्याचा रंग बदलेल..बाकी बदल करण्यासाठी, css कोड मध्ये बदल करावे लागतील.

    ReplyDelete