Hand Picked Widgets

How to add these Hand Picked Widgets to blogger :

1. Go to blogger
2. Paste the code of the needed widget in the place where you wanted, Like inside your post or in the widget place etc.
3. Easy step just copy paste.

Image Thumbnail Widget :

<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.9);
}
</style>
<center>
<a target="_blank" href="paris.jpg">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGXwLzgQKXwDy-9MJaFT8dOl5U4ZkfNhJsTh5fJqLM5Q0rv-F6iI5-rccIUMhPuMxlIGIvR5nACY3x-nZ6CvQyqYrxx5JIpHJqLHW_OLf3-u5tSzUba1Nov_mzQK6KUOm4Un2rMWC78VQ/s640/welcome-to-codes-easy.png" alt="image" style="width:50%">
</a>
</center>

Alert Dialog Box : 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="alert alert-success alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Hai!</strong> Your Message here
  </div>
</div>