ฉันได้ใช้ร่วมกันสองเมนู jQuery ใน BloggerLeaders จนถึงคนแรกคือเรียบ jQuery เมนูแบบเลื่อนลงรุ่น 1 และคนที่สองเป็นช่วงเวลาเวอร์ชัน 2.This ฉันแบ่งปันเมนูที่น่าตื่นตาตื่นใจ CSS3 และ jQuery lavalamp และเป็นที่กล่าวถึงในชื่อมันทำงานร่วมกับ CSS3 และ jQuery.You สามารถใช้เมนูนี้ใน 6 สีโดยเพียงแค่เปลี่ยนคำในเมนู HTML code.This รับการออกแบบโดย Insidesigns และฉันได้ bloggerized มันจะทำงานอย่างสมบูรณ์แบบด้วยกับบล็อคใหม่ blog.Now ไปดูวิธีการทำและดูเมนูเพื่อ blogger บล็อกนี้?
เพื่อความเข้าใจที่ง่ายผมแบ่งการกวดวิชาในสามส่วนและพวกเขาจะเป็นด้านล่าง
- การเพิ่มสคริปต์
- การเพิ่มรูปแบบ
- การเพิ่มเมนู
1. การเพิ่มสคริปต์
- ไปที่ กระดานข้อมูล Blogger> แม่แบบ
- คลิกที่ แก้ไข HTML
- กด ดำเนินการต่อ
- สามารถตรวจสอบรหัสในแม่แบบของคุณ
</head>เพิ่มโค้ดด้านล่างเพียงข้างต้นนั้น (ถ้าคุณได้เพิ่มห้องสมุด jQuery เพื่อบล็อกของคุณแล้วลบรหัสที่ไฮไลต์)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>
2. การเพิ่มรูปแบบ
ตอนนี้สามารถตรวจสอบรหัส
]]></b:skin>
เพิ่มด้านล่างโค้ด CSS ทันทีก่อนที่มันจะ
/*LAVALAMP MENU BY http://bloggerleaders.blogspot.com/ START*/ .lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri;} .magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144; } .cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893; } .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f; } .orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11; } .dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727; } .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); } .lavalamp a { text-decoration: none; color: #262626; line-height: 20px;} .lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute;} .lavalamp ul li { list-style: none; float:left; text-align: center; } .lavalamp ul li a { padding: 0 20px; text-align: center; } .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out;} /*LAVALAMP MENU BY http://bloggerleaders.blogspot.com/ END*/
ตอนนี้บันทึกแม่แบบของคุณ
3. การเพิ่มเมนู
ตอนนี้มาเค้าโครงหน้ากระดาษ
- ตอนนี้มาเค้าโครงหน้ากระดาษ
- คลิกที่ เพิ่ม Gadget (ด้านล่างส่วนหัว)
- เลือก HTML / JavaScript
- คัดลอกและวางโค้ดด้านล่างภายในนั้น
<div class="lavalamp dark"> <ul> <li class="active"><a href="">Home</a></li> <li><a href=" <li><a href="#">About</a></li> <li><a href=" <li><a href="#">Blog</a></li> <li><a href=" <li><a href="#">Services</a></li> <li><a href=" <li><a href="#">Portfolio</a></li> <li><a href=" <li><a href="#">Contacts</a></li> <li><a href=" <li><a href="#">Back to Article</a></li> <li><<a href=" <li><<a href="#">How it Works?</a></li> </ul> <div class="floatr"></div> </div> </ul> <div class="floatr"></div></div>
- แทนที่ # ด้วยการเชื่อมโยง
- แทนที่ หน้าแรกเกี่ยวกับบล็อก . ฯลฯ ที่มีข้อความเชื่อมโยงของคุณที่คุณต้องการให้ปรากฏบนเมนู .
- ถ้าคุณต้องการที่จะเปลี่ยนสีพื้นหลังของเมนูแล้วแทนที่ <div class="lavalamp dark"> กับหนึ่งในรหัสข้างล่างนี้
| <div class="lavalamp"> |  |
| <div class="lavalamp magenta"> |  |
| <div class="lavalamp cyan"> |  |
| <div class="lavalamp yellow"> |  |
| <div class="lavalamp orange"> |  |
| <div class="lavalamp dark"> |  |
ขอคุณข้อมูลดีๆจาก :http://www.bloggerleader.com/
ไม่มีความคิดเห็น :
แสดงความคิดเห็น