CSS Bootstrap_V.5.1

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

Code HTML Bootstrap_V.5.1

<div class="card">
<div class="card-header h3">Example Blogger License</div>
<div class="card-body">
<label for="basic-url" class="form-label">Input ID Blogger<span class="badge rounded-pill bg-primary ms-2">e.g : 7530070329880720440</span></label>   
<div class="input-group mb-3">
<span class="input-group-text"><i class="fa-brands fa-blogger-b text-warning"></i></span>
<input id="idBlog" type="text" value="" class="form-control" placeholder="e.g : 7530070329880720440"/>
<button type="button" id="generate" class="btn btn-outline-primary">Get License</button>
</div>    
<div class="input-group mb-3">
<span class="input-group-text">Result License</span>
<input readonly id="hasil" type="text" value="" class="form-control bg-white"/>
</div>
</div>
</div>

Links CDN Library jquery by Google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Code JavaScript or jQuery

$("#generate").click(function(){
var myID = $('#idBlog').val();
var idGenerate = btoa(myID);
$('#hasil').val(idGenerate);
console.log(idGenerate);
});

Code Widget License

<b:section id='license' name='License' showaddelement='false'>
<b:widget id='HTML55' locked='true' title='License' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>Input License</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div id='license-code'><data:content/></div>
</b:includable>
</b:widget>
</b:section>

<div id='myIdBlog'><data:blog.blogId/></div>

Kode jQuery Simpan Di Bagian body

$(document).ready(function () {
var license = $('#license-code').text(),
myLicense = atob(license),
tpllc = $('#myIdBlog').text(),
second = 10;
console.log(myLicense);
if (myLicense == tpllc) {
return false
} else {
$('body').append('<style>body{background:#000!important;overflow:hidden}#peringatan span{font-size:50px}#peringatan{z-index:999999999;position:fixed;top:0;right:0;left:0;padding:20% 0;height:100%;text-align:center;background:rgba(248,40,40,0.97);color:#fff}}</style><div id="peringatan"><h4>Activated Themes</h4><p>Please Contact <b>anigrabber.web.id</b> To Get Blogger Themes license</p><span id="Activated">'+second+'</span></div>');
setInterval(function () {
second <= 1 ? window.location.href = "https://anigrabber.web.id" : $('#aktivasi').text(--second);
}, 1e3)
}
});