Ticker

6/recent/ticker-posts

How to add Social follow icon button's in blogger tamil 2024

<div class="Social_follow_icons">

  <!--Facebook-->

  <a href="https://www.facebook.com/profile.php?id=100087290467649">

    <div class="Social-icons">

      <svg width="800px" height="800px" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#1877F2" d="M15 8a7 7 0 00-7-7 7 7 0 00-1.094 13.915v-4.892H5.13V8h1.777V6.458c0-1.754 1.045-2.724 2.644-2.724.766 0 1.567.137 1.567.137v1.723h-.883c-.87 0-1.14.54-1.14 1.093V8h1.941l-.31 2.023H9.094v4.892A7.001 7.001 0 0015 8z"/><path fill="#ffffff" d="M10.725 10.023L11.035 8H9.094V6.687c0-.553.27-1.093 1.14-1.093h.883V3.87s-.801-.137-1.567-.137c-1.6 0-2.644.97-2.644 2.724V8H5.13v2.023h1.777v4.892a7.037 7.037 0 002.188 0v-4.892h1.63z"/></path></path></svg>

    </div>

    <div class="name"><h5>Facebook</h5></div>

  </a>


    <!--Instagram-->

  <a href="https://www.instagram.com/nadaipazhagu_tamizhaa">

    <div class="Social-icons">

     <svg xmlns="http://www.w3.org/2000/svg" width="1279.997" height="1279.997" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewbox="0 0 13333.33 13333.33" id="instagram">

  <defs>

    <lineargradient id="a" x1="9425.49" x2="3907.84" y1="1689.61" y2="11643.72" gradientunits="userSpaceOnUse">

      <stop offset="0" stop-color="#4845a2"></stop>

      <stop offset=".278" stop-color="#a844a1"></stop>

      <stop offset=".302" stop-color="#a844a1"></stop>

      <stop offset=".38" stop-color="#a844a1"></stop>

      <stop offset=".6" stop-color="#d7233e"></stop>

      <stop offset=".6" stop-color="#d7233e"></stop>

      <stop offset=".871" stop-color="#f8a325"></stop>

      <stop offset="1" stop-color="#f8dd25"></stop>

    </lineargradient>

  </defs>

  <rect width="13333.33" height="13333.33" fill="none"></rect>

  <path fill="url(#a)" d="M4365.91 2471.84l4601.52 0c1029.13,0 1869.24,842.02 1869.24,1869.25l0 4649.24c0,1029.14 -840.11,1871.15 -1869.24,1871.15l-4601.52 0c-1027.22,0 -1869.24,-842.02 -1869.24,-1871.15l0 -4649.24c0,-1027.23 842.02,-1869.25 1869.24,-1869.25z"></path>

  <path fill="#fff" d="M8196.04 3877.12l-3058.76 0c-683.54,0 -1242.98,559.44 -1242.98,1242.98l0 3091.22c0,683.55 559.43,1242.98 1242.98,1242.98l3058.76 0c683.55,0 1242.98,-559.44 1242.98,-1242.98l0 -3091.22c0,-683.55 -559.44,-1242.98 -1242.98,-1242.98zm729.37 4047.8l0 0c0,555.62 -456.33,1011.95 -1011.95,1011.95l-2491.69 0c-557.53,0 -1011.95,-456.33 -1011.95,-1011.95l0 -2516.51c0,-557.53 454.42,-1011.95 1011.95,-1011.95l2491.69 0c555.62,0 1011.95,454.42 1011.95,1011.95l0 2516.51z"></path>

  <path fill="#fff" fill-rule="nonzero" d="M6666.67 5290.03c-758.01,0 -1374.73,618.63 -1374.73,1376.63 0,758.01 616.72,1374.73 1374.73,1374.73 758.01,0 1376.63,-616.72 1376.63,-1374.73 0,-758.01 -618.62,-1376.63 -1376.63,-1376.63zm0 2287.39l0 0c-502.16,0 -910.76,-408.6 -910.76,-910.76 0,-502.16 408.6,-910.75 910.76,-910.75 502.15,0 910.75,408.59 910.75,910.75 0,502.16 -408.6,910.76 -910.75,910.76z"></path>

  <path fill="#fff" d="M9436.86 3868.69c156.57,0 282.58,-126.02 282.58,-280.67 0,-156.56 -126.02,-282.58 -282.58,-282.58 -154.66,0 -280.67,126.02 -280.67,282.58 0,154.66 126.02,280.67 280.67,280.67z"></path>

</svg>

    </div>

    <div class="name"><h5>Instagram</h5></div>

  </a>


      <!--Telegram-->

  <a href="t.me/nadaipazhagutamizha">

    <div class="Social-icons">

     <svg width="800px" height="800px" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

<circle cx="16" cy="16" r="14" fill="url(#paint0_linear_87_7225)"/>

<path d="M22.9866 10.2088C23.1112 9.40332 22.3454 8.76755 21.6292 9.082L7.36482 15.3448C6.85123 15.5703 6.8888 16.3483 7.42147 16.5179L10.3631 17.4547C10.9246 17.6335 11.5325 17.541 12.0228 17.2023L18.655 12.6203C18.855 12.4821 19.073 12.7665 18.9021 12.9426L14.1281 17.8646C13.665 18.3421 13.7569 19.1512 14.314 19.5005L19.659 22.8523C20.2585 23.2282 21.0297 22.8506 21.1418 22.1261L22.9866 10.2088Z" fill="white"/>

<defs>

<lineargradient id="paint0_linear_87_7225" x1="16" y1="2" x2="16" y2="30" gradientunits="userSpaceOnUse">

<stop stop-color="#37BBFE"/>

<stop offset="1" stop-color="#007DBB"/>

</stop></stop></lineargradient>

</defs>

</path></circle></svg>

    </div>

    <div class="name"><h5>Telegram</h5></div>

  </a>


    <!--Youtube-->

  <a href="https://www.youtube.com/@nadaipazhagutamizhaa">

    <div class="Social-icons">

      <svg viewbox="0 0 24 24"><path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" /></path></svg>

    </div>

    <div class="name"><h5>YouTube</h5></div>

  </a>

</div>


<style>

.Social_follow_icons svg {

width: 22px;

height: 22px;

fill: black;

}

.Social_follow_icons {

display: flex;

gap: 15px;

font-family: "Roboto", sans-serif;

margin: 32px 0;

justify-content: center;

}


.Social-icons {

margin: 8px;

}

.Social_follow_icons a {

display: flex;

gap: 8px;

font-size: 50px;

text-decoration: none;

align-items: center;

width: 40px;

height: 40px;

line-height: 0;

overflow: hidden;

box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2);

transition: all 400ms ease;

border: 1px solid;

}

.Social_follow_icons a:hover {

width: 138px;

}

.Social_follow_icons a .name {

font-size: 16px;

font-weight: bold;

}

.Social_follow_icons a:nth-of-type(1) {

color: #4267b2;

}

.Social_follow_icons a:nth-of-type(2) {

color: #1da1f2;

}

.Social_follow_icons a:nth-of-type(3) {

color: #e1306c;

}

.Social_follow_icons a:nth-of-type(4) {

color: #ff0000;

}

</style>

Post a Comment

0 Comments