Blogger widget creat youtube card

creat youtube tool

CHANNEL IMAGE URL :

CHANNEL URL :

YOUR YOUTUBE ID :

CHANNEL NAME :

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.author-par {padding: 10px;background: #FFFFFF;text-align: center;margin-bottom: 15px;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 5px 0 rgba(0, 0, 0, .23);}

.c5-author-img {background: url(https://pbs.twimg.com/profile_background_images/451389902429491200/Rrlh09IC.png);padding: 10px;border-radius: 2px;background-size: cover;margin-bottom: 5px;position: relative;}

.c5-author-data a {font-family: Neo;margin-right: 5px;color: #ff7f00;}

p.c5-user-description {font-family: Neo;font-size: 16px;color: #333;line-height: 30px;}

.c5-author-data .fa {color: #ff7f00;}

img.avatar-photo {width: 100px;height: 100px;border-radius: 50%;background: linear-gradient(215deg,#FFC107 0%,#ff7f00 100%);padding: 3px;border: none;z-index: 99;position: relative;}

.c5-author-img:after {background: linear-gradient(135deg, #000,#fff);display: block;pointer-events: none;position: absolute;content: '';width: 100%;opacity: 0.7;z-index: 9;height: 100%;left: 0;top: 0;vertical-align: top;transition: 0.4s;}

</style>

<style>

.btn-group-lg > .btn, .btn-lg {

    padding: 10px 16px;

    font-size: 18px;

    line-height: 1.3333333;

    border-radius: 5px;

    width: auto;

    background-color: #4caf50;

.card {

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

  max-width: 300px;

  margin: auto;

  text-align: center;

  font-family: arial;

.title {

  color: grey;

  font-size: 18px;

button {

  border: none;

  outline: 0;

  display: inline-block;

  padding: 8px;

  color: white;

  background-color: #000;

  text-align: center;

  cursor: pointer;

  width: 100%;

  font-size: 18px;

a {

  text-decoration: none;

  font-size: 22px;

  color: black;

button:hover, a:hover {

  opacity: 0.7;

</style>

</head>

<body>

<div class="container">

  <div class="modal fade" id="myModal" role="dialog">

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-body">

<div class="card">

<script type='text/javascript'>

$(function(){

$( ".author-par" ).appendTo( ".append-author" );

});

</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='author-par'>

<div class='c5-author-img'>

<img class='avatar-photo' src=









 




 






 





 height='auto' itemprop='image' width='100'/>


</div>
<div class='c5-author-data'>
<div >
<div >
<a href=











 







 target="_blank">

<script src="https://apis.google.com/js/platform.js"></script>
<script>
  function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
      // Add code to handle subscribe event.
    } else if (payload.eventType == 'unsubscribe') {
      // Add code to handle unsubscribe event.
    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>
<div class="g-ytsubscribe" data-channelid=














 






 data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
?
</a>
</div>
</div>
<button href='#' target="_blank" ><strong herf="#">






</strong></button>
<p></div>
</div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

u4code

No comments:

Post a Comment