ब्लाग को वेबसाईट का लुक देने से विजीटर तो अट्रैक्ट होते ही हैं और अगर साथ मे ब्लाग मे मेन्यु भी हो तो और अच्छा रहता है, ईससे आप अपने अन्य साईटों पर या पोस्ट पर जा सकते हैं।
एक स्क्रिन साट देखें:(डिमो आप मेरे ब्लाग मे उप्पर Header के पास देख सकते हैं)
आप ईस मेन्यु को कहीं भी लगा सकते हैं, चाहे वो ब्लाग हो या साईट।
सबसे पहले हम HTML मे लगाना सिखेंगे:
अपने कंप्युटर मे कही एक फोल्डर बनाएं जैसे डेस्कटाप पर भी बना सकते हैं और उस फोल्डर का नाम दे दें “experiment” या कुछ भी।
उस फोल्डर मे एक index.html नाम का फाईल बनाएं और उसमे ये कोड डाल दें और उसे सेव कर दें(अगर index.html को खोलने पर नही खुले तो तो नोटपैड मे ये कोड डाल के index.html नाम से सेव कर दें)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title>KunnuBlog.Blogspot.com</title>
<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1″>
<meta name=”author” content=”Kunnu Singh”>
<meta name=”description” content=”HTML CSS Tutorial – Kunnu Singh”>
<meta name=”keywords” content=”HTML Tutorial, Hindi HTML CSS Tutorial,etc”>
<meta name=”generator” content=”KunnuBlog”><style type=”text/css”>
/* ————————————————————–
HTML CSS – Button – Blogger…etc..
————————————————————– */input.button,input.buttongo,input.buttonwarn {
margin:0 7px 0 0;
background-color:#E8E7E7;
border:1px solid #F6F6F6;
border-top:1px solid #eee;
border-left:1px solid #eee;
line-height:120%;
text-decoration:none;
font-weight:bold;
color:#7F9079;
cursor:pointer;
width:auto;
overflow:visible;
padding:4px 7px 3px 7px;
}
input.button:hover{
background-color:#C0E8FD;
border:1px solid #ADDCF1;
color:#5197DE;
}
input.buttongo:hover{
background-color:#E6EFC2;
border:1px solid #D5F35E;
color:#529214;
}</style>
</head>
<body>
<p>
<input name=”Button” type=”button” class=”buttongo” onclick=”window.location=’http://kunnublog.blogspot.com/home‘” value=”Home”/>
<input value=”About us” onclick=”window.location=’http://kunnublog.blogspot.com/home‘” class=”buttongo” type=”button”/>
<input value=”About Blog” onclick=”window.location=’http://kunnublog.blogspot.com/home‘” class=”buttongo” type=”button”/>
<input value=”About me” onclick=”window.location=’http://kunnublog.blogspot.com/home‘” class=”buttongo” type=”button”/></p>
</body></html>
ईसमे CSS ईन्टरनल है यानी की बटन के होवर आदी सब ईसी कोड मे है, आप अपने साईट का URL या मेन्यु का नाम कोड के अंत मे बदल सकते हैं।
ब्लाग के Dashboard मे जाएं फिर Design >> Edit HTML >> अब उसमे #header img या #header खोजें और उस कोड के अंत मे ये CSS code पेस्ट कर दें।
CSS Code:
input.button,input.buttongo,input.buttonwarn { margin:0 7px 0 0; background-color:#E8E7E7; border:1px solid #F6F6F6; border-top:1px solid #eee; border-left:1px solid #eee; line-height:120%; text-decoration:none; font-weight:bold; color:#7F9079; cursor:pointer; width:auto; overflow:visible; padding:4px 7px 3px 7px; } input.button:hover{ background-color:#C0E8FD; border:1px solid #ADDCF1; color:#5197DE; } input.buttongo:hover{ background-color:#E6EFC2; border:1px solid #D5F35E; color:#529214; }
स्क्रिन साट:
अब ये कोड खोजें <ul id=’nav’> और ईसके निचे ये कोड डाल दें(ईसमे दिये लिंक और मेन्यु के नाम को बदलना नही भुलें)
<a href='http://dewlance.com/'><input class='buttongo' type='button' value='Home'/></a> <a href='http://dewlance.com/'><input class='buttongo' type='button' value='Home Page'/></a> <a href='http://dewlance.com/'><input class='buttongo' type='button' value='Home Page 4'/></a> <a href='http://dewlance.com/'><input class='buttongo' type='button' value='Dewlance Hindi'/></a> <a href='http://dewlance.com/'><input class='buttongo' type='button' value='Indian Host'/></a> <a href='http://dewlance.com/'><input class='buttongo' type='button' value='Home'/></a>
स्क्रिन साट:
और अब टेम्पलेट सेव कर दें फिर अपने ब्लाग को खोलें अगर काम करें तो फिर मजे करीए 🙂
कुन्नु जी नमस्कार!
सबसे पहले मैं यह कहना चाहूँगा की
आपने जो यह पोस्ट लिखी है वह बहुत
ही उपयोगी है,लेकिन इसमें दाहिने तरफ
का कुछ वर्ड मिट गया है,इसलिए मेरी
आपसे यह गुजारिश है कि आप उसे पुनः
सही करके पोस्ट करें,मैं आपके पोस्ट का इंतज़ार
करूँगा|
कुन्नु जी नमस्कार!
सबसे पहले मैं यह कहना चाहूँगा की
आपने जो यह पोस्ट लिखी है वह बहुत
ही उपयोगी है,लेकिन इसमें दाहिने तरफ
का कुछ वर्ड मिट गया है,इसलिए मेरी
आपसे यह गुजारिश है कि आप उसे पुनः
सही करके पोस्ट करें,मैं आपके पोस्ट का इंतज़ार
करूँगा|
कोड को स्लेक्ट करने पर पुरा कोड कापी हो जा रहा है।
कुन्नू जी, आपने इतनी बढि़या जानकारी कहां से सीखी. क्या आप मुझको बेबसाइट बनाना बता सकते हैं.