Blogger Menubar Hình Tròn

  Với thanh menubar hình tròn sống động này trong blogger sẽ giúp cho users dễ dàng hơn trong việc tìm kiếm thông tin trên blog của bạn. Để thêm tính năng này vào blog, bạn làm theo những bước sau:

Bước 1: Goto >> dashboard >> design>> Page elements >> Add a Gadget >> html/javascript >> copy và paste đoạn code sau vào

 <ul id="circularMenu">
<li class="home"><a href="#"><b>HOME
back to the start</b></a></li>
<li class="chat"><a href="#"><b>CHAT
talk to friends in real time</b></a></li>
<li class="email"><a href="#"><b>EMAIL
send us your thought on an email</b></a></li>
<li class="shop"><a href="#"><b>SHOP
online shopping for all your needs</b></a></li>
<li class="delivery"><a href="#"><b>DELIVERY
track your deliveries</b></a></li>
<li class="search"><a href="#"><b>SEARCH
search our enormous site</b></a></li>
<li class="address"><a href="#"><b>ADDRESS
why not send us a letter</b></a></li>
<li class="upload"><a href="#"><b>UPLOAD
upload images to your web space</b></a></li>
</ul>
<style>
#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDs2mn6b2caoHtxqV9_fvERGZF6e8acPxB2kGknSGoBG8a5H56YQUW3sojUa4FY80Wr_H991k8Lm4WaoTgpBWyN-4EpGCNBPh4ib4rorMDe4oyIeenONEfzRjO9ddJaNBSRlYHfjG9Ig0/s1600/background.gif) no-repeat;}
#circularMenu li {display:block; width:60px; height:60px; position:absolute;}
#circularMenu li.home {left:120px; top:4px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNnSTetaAXf10-WdgSzwijR9CD1ouFmSYP8yoql20mobn0-A6RwZApAev554TlnRcV4i1VYaq448TEQZSQReNVCmWaeyPpGv9q5TY1cq8QaQ9rYGemxd1L7kAYw8QGHIHT2LfYoo7qAeS5/s1600/home.gif) no-repeat center center;}
#circularMenu li.chat {left:200px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvlHePBKP0IjSVMvqaH-txYUvVTt88lEzhDmYsEHVGXn79IfbWmyl_-FLae9hWZr7WrEyzhR0sGDnduDj5LEEjQ5ImWuq8ID0_N5_d7jxV20NrV_bVRIgNAOz8Gwg_-ahbu506vPsKCt5/s1600/chat.gif) no-repeat center center;}
#circularMenu li.upload {left:35px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBmH8gy0Bit3UiohAAcOeMZwW_RM_4_0CLDTVre9WppurX5KhavWi027Oy7dS4Bie5Kd_ZBO1jtPrQ7UuDz8_ub1QeU-69JRM2vV2_yVQuNHLDZtJ01PphE5PeCBwf8n32Vae3DuEG86Hr/s1600/photo.gif) no-repeat center center;}
#circularMenu li.email {left:230px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXcZ5Kdgz-6TS8ZUv4wPkfPwPZ2SBV9hbRZY1PTWFeLO6INqtlOU-BB22dCOVn15yEI0dp2aeDicfcY6iwIuo-EgwkLL4E5bZcXTvQWPzrWCyLkRooS9VxhNCjR92PtiMQV1zUPr4vKzv0/s1600/email.gif) no-repeat center center;}
#circularMenu li.address {left:5px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqCczHDtSgou5gHHtJ9YowLfaI94KXb-PMUWYl8UcpETcEuK6ciI6WoCCXbDsWR1yIIuc2KPxHasA1niCiszSBTKRYEdQC4e6pYRHEJ4Kh5U6J6Vj0GxJmP4GllJ1F_EA5S6FEre5EbMgM/s1600/address.gif) no-repeat center center;}
#circularMenu li.shop {left:200px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZ1a_zq6SKeAX1BNOfnK-NILNt2omm3HNxIJefHBJXjbhTv2Lf4VWhJXvrl9ybsfDSmxg5z9t_JPO_RN3vEOfgozIQQy5qCqANFNGUo3oEirRllv3q3KrSfnCAVIkkd4d9Zt86y5PpQNn/s1600/shop.gif) no-repeat center center;}
#circularMenu li.search {left:35px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXGfzhAVTatEexkr7m-UVWaIudaqeGqGR6cll1bvW60iExFe7xa4xGYBbbmOPSBManrexc7G97zjmptuazOYG2QYkwOZDUBIMvwMDbfW2BTlOGdJ9Aa02G49tyHDO_lkyFOI5QgfuakcN/s1600/search.gif) no-repeat center center;}
#circularMenu li.delivery {left:120px; top:225px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwTcW8uj82MOucgeQi9DZ4QPlUOwVeIo6G546BNMSw79-mgJGBLuUDyG9ZEG8SvqrpXRjKfd_1E0lpwS7DkbTWgqMT_F7Wk5qaQ5kZW6ZVvVFWz6KjmiwQGog-2Prf489odl6sh8kLIS7/s1600/delivery.gif) no-repeat center center;}

#circularMenu li a b {display:none;}
#circularMenu li a {display:block; width:60px; height:60px; text-align:center;}

#circularMenu li a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbiHX77_6Yf1wOqJBAp2oS66agEv_fBOmtpSQZ8MaUqRaGLt4Xhf97ODu6WaTU-l1ifvDT1swTIAxCi3W2-ZSDusJyhwEGwsBqT7Lj_OifJ2Mz0eWisDcDxArR6UEcQw5_NkcJ-SiIbGt/s320/circle.gif); text-decoration:none; font-family:georgia, serif;}
#circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;}
#circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;}

#circularMenu li.home a:hover b {left:-22px; top:100px;}
#circularMenu li.chat a:hover b  {left:-102px; top:64px;}
#circularMenu li.upload a:hover b  {left:63px; top:64px;}
#circularMenu li.email a:hover b  {left:-132px; top:-11px;}
#circularMenu li.address a:hover b  {left:93px; top:-11px;}
#circularMenu li.shop a:hover b  {left:-102px; top:-87px;}
#circularMenu li.search a:hover b  {left:63px; top:-87px;}
#circularMenu li.delivery a:hover b  {left:-22px; top:-121px;}
</style>

  Bước2: Bạn nhớ Chỉnh sửa/ Edit các đoạn code màu đỏ hình # với URL mà bạn sử dụng trong blog và save .