Blogger 북마크 버튼 - CSS

by LiveBlogger

HTML

<script>
  //<![CDATA[
  var massgEmpty = ('저장된 글이 없습니다.'),
  articleLabel = ('모든 글 보기'),
  link_articleLabel = ('https://.blogspot.com/');
  (function ($) {
    "use strict";
    var OptionManager = (function () {
      var objToReturn = {};
      var defaultOptions = {
        bookmarkIcon: 'bookmarkIcon',
        bookmarkBadge: 'show-bookmark',
        articleQuantity: 'article-quantity',
        affixBookmarkIcon: true,
        showBookmarkModal: true,
        clickOnAddToBookmark: function($addTobookmark) { },
        clickOnbookmarkIcon: function($bookmarkIcon, konten ) { },
      };
      var getOptions = function (customOptions) {
        var options = $.extend({}, defaultOptions);
        if (typeof customOptions === 'object') {
          $.extend(options, customOptions);
        }
        return options;
      }
      objToReturn.getOptions = getOptions;
      return objToReturn;
    }());
    var articleManager = (function(){
      var objToReturn = {};
      localStorage.konten = localStorage.konten ? localStorage.konten : "";
      var getIndexOfarticle = function(id){
        var articleIndex = -1;
        var konten = getAllkonten();
        $.each(konten, function(index, value){
          if(value.id == id){
            articleIndex = index;
            return;
          }
        });
        return articleIndex;
      }
      var setAllkonten = function(konten){
        localStorage.konten = JSON.stringify(konten);
      }
      var addarticle = function(id, title, link, summary, quantity, borkimage) {
        var konten = getAllkonten();
        konten.push({
          id: id,
          title: title,
          link: link,
          summary: summary,
          quantity: quantity,
          borkimage: borkimage
        });
        setAllkonten(konten);
      }
      var getAllkonten = function(){
        try {
          var konten = JSON.parse(localStorage.konten);
          return konten;
        } catch (e) {
          return [];
        }
     ...

CSS

.show-bookmark{
  color:#fff;
  background-color:#007bff;
  position:relative;
  top:-20px;
  right:10px;
  font-size:50%;
  padding:.15em .3em;
  display:inline-block;
  padding:.25em .4em;
  font-size:75%;
  font-weight:700;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:50%;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.hartomy-bookmark-btn,.btn-outline-info{
  position:relative;
  display:inline-block;
  box-sizing:border-box;
  border:none;
  border-radius:4px;
  padding:0 16px;
  min-width:64px;
  height:36px;
  vertical-align:middle;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:uppercase;
  color:rgb(var(--pure-material-onprimary-rgb,255,255,255));
  background-color:rgb(var(--pure-material-primary-rgb,33,150,243));
  box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);
  font-family:var(--pure-material-font,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);
  font-size:14px;
  font-weight:500;
  line-height:36px;
  overflow:hidden;
  outline:none;
  cursor:pointer;
  transition:box-shadow 0.2s
}
.hartomy-bookmark-btn::-moz-focus-inner{
  border:none
}
.hartomy-bookmark-btn svg{
  vertical-align:middle
}
.hartomy-bookmark-btn{
  position: absolute;
  z-index: 9;
  right: 0;
  left: 0;
  width: unset;
  margin: 0 auto;
}
.list button:hover:after, .list button.fav:after{
  content: ' \2605';
  color: rgb(255, 203, 0);
}
.alert-warning{
  float:left;
  cursor:pointer;
  margin-top:10px;
  margin-left:10px;
}
.pop-area::-webkit-scrollbar{
  display:none
}
.pop-area{
  display:flex!important;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background:rgb(0 0 0 / 51%);
  visibility:hidden;
  opacity:0;
  transition:all 0.25s ease-in-out;
  z-index:9999;
  overflow-y:scroll
}
.pop-area.open{
  opacity:1;
 ...