Gray sidebar long link list code

<div class="sidebar-widget-container" style="background-color: #444444; border-style: solid none none; border-top-color: rgb(68, 68, 68); border-width: 0px; box-sizing: border-box; color: white; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 11px; list-style: none;margin-top: 0px; margin-left: -5px; margin-right: -5px; outline: none; padding: 5px 0px;">

<h2 style="border-bottom-color: rgb(151, 149, 135); border-bottom-style: solid; border-bottom-width: 2px; color: #ffffff; font-family: Verdana, Georgia, &quot;Times New Roman&quot;, Times, serif; font-size: 18px; font-weight: normal; line-height: 1.5; margin-left: 20px;padding:3px;">
&nbsp;Why choose adclub ?</h2>

<ul style="border: 0px none; box-sizing: border-box; line-height: 1.2; list-style: none; margin: 20px; outline: none; padding: 0px;">

<li style="border-bottom-color: rgb(60, 60, 60); border-style: none none solid; border-width: 0px 0px 1px; box-sizing: border-box;letter-spacing:.2px; word-spacing:1.5px; line-height: 18px; list-style: none; margin: 0px; outline: none; overflow: hidden; padding: 12px 12px 6px 0px;">
<a href="http://www.adclubads.com/2017/03/no-investment.html" style="background-color: transparent; border: 0px none; box-sizing: border-box; color: #cccccc; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;">No upfront investment required in Adclub Program. &nbsp;</a>&nbsp;<span class="sidebar-list" style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"></span></li>


<li style="border-bottom-color: rgb(60, 60, 60); border-style: none none solid; border-width: 0px 0px 1px; box-sizing: border-box; line-height: 18px;letter-spacing:.2px; list-style: none; margin: 0px; outline: none; overflow: hidden; padding: 12px 12px 6px 0px;"><a href="http://www.adclubads.com/2017/03/direct-marketing.html" style="background-color: transparent; border: 0px none; box-sizing: border-box; color: #cccccc; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"> Effective Brand awareness in your city & Beyond through the most powerful route of Direct Marketing.</a></li>

<li style="border-bottom-color: rgb(60, 60, 60); border-style: none none solid; border-width: 0px 0px 1px; box-sizing: border-box; line-height: 18px;letter-spacing:.2px; list-style: none; margin: 0px; outline: none; overflow: hidden; padding: 12px 12px 6px 0px;"><a href="http://www.adclubads.com/2017/03/professional-representation-of-your.html" style="background-color: transparent; border: 0px none; box-sizing: border-box; color: #cccccc; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"> Professional Brand Representation through quality collateral and Expert Marketers.</a></li>

<li style="border-bottom-color: rgb(60, 60, 60); border-style: none none solid; border-width: 0px 0px 1px; box-sizing: border-box; line-height: 18px;letter-spacing:.2px; list-style: none; margin: 0px; outline: none; overflow: hidden; padding: 12px 12px 6px 0px;"><a href="http://www.adclubads.com/p/adclub-genrate-huge-customer-traffic-to.html" style="background-color: transparent; border: 0px none; box-sizing: border-box; color: #cccccc; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"> Build High customer traffic to your Business with immediacy of result.</a></li>

<li style="border-bottom-color: rgb(60, 60, 60); border-style: none none solid; border-width: 0px 0px 1px; box-sizing: border-box; line-height: 18px;letter-spacing:.2px; list-style: none; margin: 0px; outline: none; overflow: hidden; padding: 12px 12px 6px 0px;"><a href="http://www.adclubads.com/2017/03/guaranteed-business-growth.html" style="background-color: transparent; border: 0px none; box-sizing: border-box; color: #cccccc; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"> Assured Guaranteed Business through subscribed Loyal Member</a></li>

<li style="border-bottom-color: rgb(60, 60, 60); border-style: none none solid; border-width: 0px 0px 1px; box-sizing: border-box; line-height: 18px;letter-spacing:.2px; list-style: none; margin: 0px; outline: none; overflow: hidden; padding: 12px 12px 6px 0px;"><a href="http://www.adclubads.com/2017/03/value-of-relationship.html" style="background-color: transparent; border: 0px none; box-sizing: border-box; color: #cccccc; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;">Each client & Each customer is Special. -Value of Relationship.</a></li>



</ul>
</div>

old gray adclub menu code

<!doctype html>

<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #333333;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 80px;
    padding-bottom: 70px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 14px;
    color: #818181;
    display: block;
    transition: 0.3s

box-sizing: border-box;
border-bottom-color: rgb(60, 60, 60);
border-bottom-style: solid;
border-bottom-width: 1px;
color: #eeeeee;
font-family: Verdana, Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 14px;
font-weight: normal;
line-height: 2.5;
margin-left: 13px;
padding:3px;
letter-spacing: 2px;
text-align: left;
text-transform: uppercase
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
   
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 70px;}
  .sidenav a {font-size: 14px;}
}
</style>


<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

 <a href="http://www.adclubads.com/p/hompage.html">home</a>
  <a href="http://www.adclubads.com/p/about-us.html">about us </a>
  <a href="http://www.adclubads.com/p/services.html">services</a>

  <a href="http://www.adclubads.com/p/why-us.html">why chhose us ? </a>
  <a href="http://www.adclubads.com/p/concept.html">How to organize ?</a>

 <a href="http://www.adclubads.com/2017/03/how-to-promote.html">How to promote ?</a>

  <a href="http://www.adclubads.com/p/contact-us.html">Contact us</a>

</div>


<span style="font-size:30px;cursor:pointer" onclick="openNav()"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKNOxGbMLnjHkiCvonc_TVigd-8TqkXsOe3cgQkjza3gmyNyP5ZKPX9WAJrkOE6p-JILr4x1_1YrCVackuckp4hcOuwY0kzJPYfDY-l90QXtDQYYPrrUEWLCufidAzaDASfJjwMUW0Giq/s1600/navmenu.png"  style="float:right;width:50px;height:50px;margin-right:25px;margin-top:35px" />


</span>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>
   

</!doctype>

Bullet Button

			12/11
12/11	9/11	9/11	9/11
			9/11

text box

Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.
The document.execCommand() method is not supported in IE9 and earlier.

slide show with linked image code

<!doctype html>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitSgVPyZLz-russ22tliV4H2ED3kyxg-u8erxSk63n-8dAdmth_nJAOIeF5xDAM3Mddmx_J_0DpbuUbVbrw0-988iSZ21eoHp5InAPjm3mSBa2QAsDtPXW3bYoPOkCDx6T4q8J-7toQi3-/s1600/shagun+textile.png" alt="shagun textile" style="float:left;width:170px;height:90px;margin-left:0px;margin-bottom:10px;margin-top:0px ;" />


<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
<style>
.mySlides {display:none;}
</style>

<div class="w3-content w3-section" style="max-width:800px;  margin-top:0px; margin-left:230px;">

<a href="https://makemybloggers.blogspot.in/2017/03/resize-bloggers-templete-width.html">
<img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivT-B23TFC2a63UncTUOL6Cl-YGd239DvCNiOedHX3qiIBC73oJ2xMWRQU7kRqXu1sTAO_TD_uBjhIViB8R7SgRYo7dt0w3mZha0ypzBcLoxvwr0_lf6En-nuliu0NfcUfwLsoDlTM6Pw0/s1600/522.png" style="height:90px;width:100%;margin-left:0px;margin-top:0px; margin-bottom:-20px;" /></a>


<a href="https://makemybloggers.blogspot.in/2017/03/resize-bloggers-templete-width.html">
<img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-0i1t5ys1tfCdSht3qK0Ra7PxX9n9iVFJ9FQzlqCjGkMQMRkCH_yphWODuzJ52-QnEPXcXOUAunQgcjmbShgeA9-yMAiLI2j7cqlQshfbF5NxXuH5eGSzj9Zoe-2zV9cO9OrwswfVV6f/s1600/523.png" style="height:90px;width:100%;margin-left:0px;margin-top:0px ; margin-bottom:-20px;" /></a>
 

<a href="https://makemybloggers.blogspot.in/2017/03/resize-bloggers-templete-width.html">
<img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGAOcKl0P0psfSZut0clx67_cHbhc773zSGABlQPNpUBzL2spREtQi1c4tDyvHJqVL67II5Y6QA0YrwF3mHq8hiaxyl4QHcQGlYwGCGOvfGeS6VQv6V0YU5Uq1XsZIjwPjk5z36AK1L2uh/s1600/524.png" style="height:90px;width:100%;margin-left:0px;margin-top:0px; margin-bottom:-20px;" /></a>


<a href="https://makemybloggers.blogspot.in/2017/03/resize-bloggers-templete-width.html">
<img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-0i1t5ys1tfCdSht3qK0Ra7PxX9n9iVFJ9FQzlqCjGkMQMRkCH_yphWODuzJ52-QnEPXcXOUAunQgcjmbShgeA9-yMAiLI2j7cqlQshfbF5NxXuH5eGSzj9Zoe-2zV9cO9OrwswfVV6f/s1600/523.png" style="height:90px;width:100%;margin-left:0px;margin-top:0px; margin-bottom:-20px;" /></a>


</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 6000); // Change image every 60 seconds
}
</script>


</!doctype>

Image HTML Code

Hey guys , would you like to post your stored image on your page , here is the html code for image.

To use your image in your webpage , the image which is stored on other page or server , just copy and paste the following code and change the highlited color with your own choice.


<img src="Image link goes here " alt="image name for google search robot" style="float:right; width:auto;height:35px;margin-right:20px;img-align: center; margin-top: 5px;margin-bottom:5px;" />



To use image as a link on your webpage just copy and paste the following code and change the yellow highlighted color with your own choice.


<a href="Target Webpage Link goes here "><img src="Image Link goes here" alt="image name for google search robot" style=" float:right; width:auto;height:35px;margin-right:30px;margin-top: 5px;margin-bottom: 5px;" /></a>

simple Tab menu code with right sided Attractive Button

<tab>

<style>
.tabs .widget li, .tabs .widget li {display: inline-block; float: none; margin-left:5px; margin-top:5px; text-align: center;}

</style>

<ul>
  <li><a href="#home">HOME </a></li>
 
<li><a href="http://shaguntextile.blogspot.in/p/about-us.html">ABOUT US </a></li>

  <li><a href="#contact">SPA & PARLOUR</a></li>
  <li><a href="#about">WATER PARK</a></li>
  <li><a href="http://shaguntextile.blogspot.in/p/how-ot-order.html">HOW TO ORDER </a></li>

  <li><a href="http://shaguntextile.blogspot.in/p/how-ot-order.html">CONTACT US </a></li>

<a href="https://www.w3schools.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0y_9-blZJczN9vJXiKs1fWlog3byG1PmaqsEtmA9PZrQDE0R0z9gq6tCcGzG4JcX9OeZ4XYo5YAp7c8wJQOTZ1uOVptLx1xC2TxqQTRqERK8Fs3dSONKAVNB11MpAFNQm837au7x7ux8/s1600/105.png" alt="W3Schools.com" style="float:right; width:auto;height:35px;margin-right:20px;img-align: center; margin-top: 5px;margin-bottom:5px;" /></a>

<a href="https://www.w3schools.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLL9zayqHSuA05sHsVNgarA1JsD9KZKLAHDZtLFTi7tlKCdPTgIiLVLVu2H92r3xx2ULasmGT4T3-om0WV_bDwm63GcJfhefwm7It7kztCw-kWiprMDi17uXWJ9f0EfzYCkxnIfuIw9KY/s1600/106.png" alt="W3Schools.com" style=" float:right; width:auto;height:35px;margin-right:30px;margin-top: 5px;margin-bottom: 5px;" /></a>




</ul></tab>