Search Kindle
ALL
DOWNLOADED
10%
40%
2%
98%
100%
0%
85%
16%
100%
10%
75%
68%
97%
55%
97%
HOME
LIBRARY
DISCOVER
MORE
place within the <head> tags:
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.13.0/js/v4-shims.js"></script>
place within the <style> tags (leave credit intact):
/* kindle library --- coding @will */ @font-face{font-family: gotham book; src:url('https://dl.dropbox.com/s/on3xr32sawomm9b/Gotham-Book.otf')} .kindlebook{width:103px; height:155px; background-size: 103px 155px; background-repeat:no-repeat; position:relative; z-index:0;} .kindlemark{margin-top:-1px; margin-left:80px; width:20; height:40; text-align:center; position:relative; z-index:100; background-image:url('https://i.imgur.com/YJzFiYi.png'); background-repeat:no-repeat; background-size:20px; color:#fff; font-size:6px; font-weight:400; padding-top:5px}
place within your pop ups. make sure to change div id="" to the number of your popup and make the pop up width 340px:
<!-- THIS IS THE START OF KINDLE --> <div id="" class="popup_block" style="overflow-y:hidden; background:#f5f5f5; font-family:gotham book, helvetica neue, helvetica, arial, sans-serif; cursor:default"> <table width="100%" cellpadding="5" style="font-size:10px"><tr><td><i class="far fa-bell"></i></td><td width="90%" style="background:#eee; color:#8e8e92; padding:5px"><i class="fas fa-search"></i> Search Kindle</td></tr></table> <table width="100%" cellpadding="5" style="margin-top:10px; font-size:10px; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0" valign="middle"><tr><td><i color="#000" class="fas fa-sliders-h"></i></td><td align="center" style="font-weight:500"><font style="color:#3b76b4; padding-bottom:8px; border-bottom: 1px solid #3b76b4">ALL</font> DOWNLOADED</td><td align="right"><i class="fas fa-long-arrow-alt-up"></i><i class="fas fa-long-arrow-alt-down"></i></td></tr></table> <div style="width:100%; height:320px; overflow:auto; margin-top:10px; background:#f4f4f4"> <table width="100%" cellspacing="8"> <tr valign="top"><td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">10%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">40%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">2%</div></td> </tr> <tr valign="top"><td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">98%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">100%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">0%</div></td> </tr> <tr valign="top"><td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">85%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">16%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">100%</div></td> </tr> <tr valign="top"><td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">10%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">75%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">68%</div></td> </tr> <tr valign="top"><td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">97%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">55%</div></td> <td class="kindlebook" style="background-image:url('http://via.placeholder.com/103x155')"><div class="kindlemark">97%</div></td> </tr> </table></div> <div style="width:100%; border-top:1px solid #e0e0e0; z-level:100; position:relative"><table cellpadding="10" width="100%" style="font-size:8px; line-height:18px; text-align:center" valign="top"><tr><td width="20%"><i class="fas fa-home"></i><br>HOME</td><td width="20%"><font color="#3b76b4"><i class="fas fa-book-open"></i><br> LIBRARY</font></td><td width="20%"><center><div style="width:40px; height:55px; margin-top:-25px; background-size:30px; background-image:url('http://via.placeholder.com/40x55'); border:1px solid #e0e0e0; z-level: 1"><center></div></td><td width="20%"><i class="far fa-map"></i><br>DISCOVER</td><td width="20%"><i class="fas fa-list"></i><br>MORE</td></tr></table></div> </div> <!-- THIS IS THE END OF KINDLE -->