ब्लॉग साठी html कोडींग

आपल्या ब्लॉग ला आकर्षक इफेक्ट देण्यासाठी खाली click करा . 

या पुढील अपडेट्स साठी येथे click करा 

https://www.pkguruji.com

खालील माहितीच्या पुढील अपडेट माहिती या लिंकवर पाहायला मिळेल 

http://www.w3schools.com/jquery/tryit.asp… 


http://www.quackit.com/html/codes/ 

https://qhmit.com/



सर्व marquee कोड साठी येथे click करा .


  HTML चा वापर करून टेक्स्ट इफेक्ट देणे - हलणारी अक्षरे
फक्त खालील सुचनेनुसार प्रोसेस करा-
■ सुचना -
खाली अक्षरांना हलणारे इफेक्ट कसे द्यायचे याबाबत सोपे व जास्तीत जास्त वापर होणारे चार इफेक्ट दिलेले आहेत. हे इफेक्ट ब्लॉग वर अॅड केल्यावर आकर्षक ब्लाॅगरचना दिसते.
खाली प्रत्येक इफेक्ट व त्याचा कोड दिलेला आहे. आपण हा इफेक्ट आपल्या ब्लॉगवर Page किंवा Post मध्ये अॅड करु शकतो.
सर्वप्रथम जो इफेक्ट द्यायचा आहे , त्याचा कोड copy करा. तो तुमच्या colour note किंवा कोणत्याही ठिकाणी paste करून त्याठिकाणी Edit करा.
edit करताना 'गुरुमाऊली ' या शब्दाच्या ठिकाणी फक्त तुमचा मेसेज जो असेल तो टाईप करा. तुम्ही जो मेसेज टाईप केला आहे, त्या मेसेजलाच running effect दिसुन येतो.
तयार केलेला मेसेज copy करा. ज्या page ला अथवा post ला इफेक्ट द्यायचा आहे , ते पेज ओपन करा. त्यामध्ये compose च्या बाजुला HTML ला क्लिक करा. त्यामध्ये तुम्ही बनवलेला मेसेज paste करा. वरील Publish बटणवर क्लिक करा. इफेक्ट तयार होईल.
1. हलणारी अक्षरे(running text ) : डावीकडून उजवीकडे
● इफेक्ट पहा-
pradip kumbhar
● कोड ( code ) -
<marquee behavior="scroll" direction="right "> pradip kumbhar </marquee>
2. हलणारी अक्षरे ( running text ) : उजवीकडून डावीकडे
● इफेक्ट (effect) -
गुरुमाऊली
●कोड(code ) -
<marquee behavior="scroll" direction="left"> गुरुमाऊली </marquee>
3. हलणारी अक्षरे(running text ) : खालुन वर
● इफेक्ट ( effect ) -
गुरुमाऊली
● कोड ( code ) -
<marquee behavior="scroll" direction="up"> गुरुमाऊली </marquee>
4. हलणारी अक्षरे ( running text ) : वरुन खाली
● इफेक्ट ( effect ) -
गुरुमाऊली
● कोड ( code ) -
<marquee behavior="scroll" direction="down"> गुरुमाऊली </marquee>

■ HTML ने इमेज (image ) ला इफेक्ट देणे ■
■ सुचना -
post किंवा page मधील इमेज ला हलणारे इफेक्ट देणे सोपे आहे. . पुढील प्रोसेस करा....
सर्वप्रथम compose मध्ये असताना image च्या आयकॉन वर क्लिक करून इमेज घ्या. इमेज लोड झाल्यावर त्या इमेजला आपल्याला इफेक्ट द्यायचा आहे.
खाली कोड दिलेले आहेत. . त्यातील कोडचा पहिला भाग म्हणजे (इमेज च्या वरील) हा html ला क्लिक केल्यावर त्याच्यात जो कोड तयार आहे त्याच्या सुरवातीला पेस्ट करा... त्यानंतर कोडचा दुसरा भाग (इमेज च्या खालील ) सर्व कोड च्या शेवटी पेस्ट करा व सेव्ह करा. .... इफेक्ट तयार होईल. .
1.इमेज - डावीकडून उजवीकडे हलणारी ~
● कोड ( code ) -
<marquee behavior="scroll" direction="right">
इमेज
</marquee>
2 . इमेज - उजवीकडून डावीकडे हलणारी ~
● कोड ( code ) -
<marquee behavior="scroll" direction="left">
इमेज
</marquee>
3. इमेज - खालुन वर हलणारी ~
● कोड ( code ) -
<marquee behavior="scroll" direction="up">
इमेज
</marquee>
4. इमेज - वरुन खाली हलणारी ~
● कोड ( code ) -
<marquee behavior="scroll" direction="down">
इमेज
</marquee>
5. इमेज- डाव्या व उजव्या बाजूला सरकणारी(alternate ) ~
● कोड ( code ) -
<marquee behavior="alternate">
इमेज
</marquee>

आभार प्रविण  डाकरे 

HTML SCRIFT dropdown manu

<ul id="icbabdrop">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li>

    Menu 1

    <ul>

      <li><a href="#">Submenu 1</a></li>

      <li><a href="#">Submenu 2</a></li>

       <li><a href="#">Submenu 3</a></li>

      <li><a href="#">Submenu 4</a></li>

      <li><a href="#">Submenu 5</a></li>

    </ul>

  </li>

<li>

    Menu 2

    <ul>

      <li><a href="#">Submenu 2.1</a></li>

      <li><a href="#">Submenu 2.2</a></li>

      <li><a href="#">Submenu 2.3</a></li>

      <li><a href="#">Submenu 2.4</a></li>

      <li><a href="#">Submenu 2.5</a></li>

    </ul>

  </li>

 <li><a href="#">Menu 3</a></li>

  <li><a href="#">Menu 4</a></li>

</ul>

===============================================================

 CSS  code 1

 

.tabs-inner .widget ul#icbabdrop {

  text-align: left;

  display: inline;

  margin: 0;

  padding: 15px 4px 17px 0;

  list-style: none;

  border: none;

}

.tabs-inner .widget ul#icbabdrop li {

  font-size: 14px;

  color: #50230e;

  font-weight: bolder;

  font-family: sans-serif; /* Font for the menu */

  border:2px solid darkred;

  border-bottom-left-radius: 30px;

  border-top-right-radius: 20px;

  display: inline-block;

  margin-right: -4px;

  position: relative;

  padding: 15px 20px;

  background: pink; /* background colour of the main menu */

  float:none;

  cursor: pointer;

  -webkit-transition: all 0.2s;

  -moz-transition: all 0.2s;

  -ms-transition: all 0.2s;

  -o-transition: all 0.2s;

  transition: all 0.2s;

}

.tabs-inner .widget ul#icbabdrop li a {

padding:0;

font-family: sans-serif; /* Font for the menu links */

border:0;

}

.tabs-inner .widget ul#icbabdrop li:hover {

  background: red; /* background colour when you roll over a menu title */

  color: #fff; /* font colour when you roll over a menu title */

}

.tabs-inner .widget ul#icbabdrop li:hover a {

  background: transparent;

  color: #fff; /* font colour when you roll over a menu title link */

}

.tabs-inner .widget ul#icbabdrop li ul {

  z-index:1000;

  border:none;

  padding: 0;

  position: absolute;

  top: 45px;

  left: 30px;

  float:none;

  width: 150px;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  display: none;

  opacity: 0;

  visibility: hidden;

  -webkit-transiton: opacity 0.2s;

  -moz-transition: opacity 0.2s;

  -ms-transition: opacity 0.2s;

  -o-transition: opacity 0.2s;

  -transition: opacity 0.2s;

}

.tabs-inner .widget ul#icbabdrop li ul li {

  background: blue; /* background colour of the sub menu items */

  display: block;

  color: yellow; /* font colour of the sub menu items */

  text-shadow: 0 -1px 0 #000;

}

ul#icbabdrop li ul li a{

  color:#fff  /* link colour of the sub menu items */

}

.tabs-inner .widget ul#icbabdrop li ul li:hover {

  background: #666; /* background colour when you roll over sub menu items */

}

.tabs-inner .widget ul#icbabdrop li:hover ul {

  display: block;

  opacity: 1;

  visibility: visible;

}

 =============================================================

CSS  code 2

/* DROPDOWN MENU BY HIGHTECH TEACHER*/

.tabs-inner .widget ul#icbabdrop {

  text-align: left;

  display: inline;

  margin: 0;

  padding: 15px 4px 17px 0;

  list-style: none;

  border:none;

}

.tabs-inner .widget ul#icbabdrop li {

  font-size: 12px/18px;

  font-family: sans-serif; /* Font for the menu */

  display: inline-block;

  margin-right: -4px;

  position: relative;

  padding: 15px 20px;

  background: #fff; /* background colour of the main menu */

  float:none;

  cursor: pointer;

  -webkit-transition: all 0.2s;

  -moz-transition: all 0.2s;

  -ms-transition: all 0.2s;

  -o-transition: all 0.2s;

  transition: all 0.2s;

}

.tabs-inner .widget ul#icbabdrop li a {

padding:0;

font-family: sans-serif; /* Font for the menu links */

border:0;

}

.tabs-inner .widget ul#icbabdrop li:hover {

  background: #555; /* background colour when you roll over a menu title */

  color: #fff; /* font colour when you roll over a menu title */

}

.tabs-inner .widget ul#icbabdrop li:hover a {

  background: transparent;

  color: #fff; /* font colour when you roll over a menu title link */

}

.tabs-inner .widget ul#icbabdrop li ul {

  z-index:1000;

  border:none;

  padding: 0;

  position: absolute;

  top: 45px;

  left: 30px;

  float:none;

  width: 150px;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  display: none;

  opacity: 0;

  visibility: hidden;

  -webkit-transiton: opacity 0.2s;

  -moz-transition: opacity 0.2s;

  -ms-transition: opacity 0.2s;

  -o-transition: opacity 0.2s;

  -transition: opacity 0.2s;

}

.tabs-inner .widget ul#icbabdrop li ul li {

  background: #555; /* background colour of the sub menu items */

  display: block;

  color: #fff; /* font colour of the sub menu items */

  text-shadow: 0 -1px 0 #000;

}

ul#icbabdrop li ul li a{

  color:#fff  /* link colour of the sub menu items */

}

.tabs-inner .widget ul#icbabdrop li ul li:hover {

  background: #666; /* background colour when you roll over sub menu items */

}

.tabs-inner .widget ul#icbabdrop li:hover ul {

  display: block;

  opacity: 1;

  visibility: visible;

}