तुमच्या अनुदिनीवर 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

धन्यवाद :-)