Hello anh em, thì lâu rồi mình cũng chưa đăng bài nhỉ?. Tranh thủ hôm nay rảnh mình lại ra bài mới đây. Anh em đọc nhan đề chắc cũng đã biết mình sẽ làm gì trong bài viết này rồi nhỉ. Cái widget này mình cũng mới chế ra vừa mới đây thôi thấy cũng tạm được đem share cho anh em xài. Thì cái widget này được mình tổng hợp từ các widget khác nhau cho ra cái widget này.
Ảnh demo
<style type="text/css">#findXdate {background-color: #00a2ff;border: 1px solid #00a2ff;margin: 0 auto;padding: 5px 0 5px;text-align: center;width: 287px;}#findXdate select { background-color: #fff; border: none; color: #000; font-size: 11px; height: 30px; width: 60px;}#findXdate input { background-color: #fff; border: none; color: #000; font-size: 11px; height: 30px; width: 60px;}</style>
<script type="text/javascript">home_page = "https://blogsharewithlove.blogspot.com/";timezone = "+07:00";function submitdate(){year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone;tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone;tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20";if(year=="" || month=="" || day=="") {alert("Vui lòng chọn ngày chính xác!"); return false;} else {self.location.href=tlink;}}</script><form id="findXdate" name="selectdate"><select name="day"><option value="" selected />Ngày<option value="01" />1<option value="02" />2<option value="03" />3<option value="04" />4<option value="05" />5<option value="06" />6<option value="07" />7<option value="08" />8<option value="09" />9<option value="10" />10<option value="11" />11<option value="12" />12<option value="13" />13<option value="14" />14<option value="15" />15<option value="16" />16<option value="17" />17<option value="18" />18<option value="19" />19<option value="20" />20<option value="21" />21<option value="22" />22<option value="23" />23<option value="24" />24<option value="25" />25<option value="26" />26<option value="27" />27<option value="28" />28<option value="29" />29<option value="30" />30<option value="31" />31</select> <select name="month"><option value="" selected />Tháng<option value="01" />01<option value="02" />02<option value="03" />03<option value="04" />04<option value="05" />05<option value="06" />06<option value="07" />07<option value="08" />08<option value="09" />09<option value="10" />10<option value="11" />11<option value="12" />12</select> <select name="year"><option value="" selected />Năm<option value="2019" />2019<option value="2018" />2018</select> <input type="button" onclick="submitdate()" value="TÌM"/></form><style><!-- Có thể lấy widget của DuyPhuongBlog nếu thích =)) -->/*------- CSS Tooltip -------*/.pc-tooltip { position: relative; display: inline-block }.pc-tooltip:before, .pc-tooltip:after { position: absolute; opacity: 0; z-index: 1000; pointer-events: none }.pc-tooltip:hover:before, .pc-tooltip:hover:after { opacity: 1 }.pc-tooltip:before { content: ''; position: absolute; background: transparent; border: 4px solid transparent; position: absolute }.pc-tooltip:after { content: attr(data-pc-tooltip) !important; background: #2a2a2a; color: #fff; padding: 6px 8px; font-size: 14px !important;white-space: nowrap; border-radius: 2px; -webkit-backface-visibility: hidden; margin-left: initial }.pc-tooltip-top:before { bottom: 140%; left: 10%; margin: 0 0 -9px 0; border-top-color: #494158 }.pc-tooltip-top:after { bottom: 125%; left: 10%; margin: 0 0 3px -10px !important }.flaticon-posts:before,.flaticon-comments:before,.flaticon-heart:before,.flaticon-authors:before,.flaticon-location:before,.flaticon-email:before,.flaticon-link:before{font-family:FontAwesome;font-style:normal;font-size:1.5em}.flaticon-posts:before{content:'\f044';color:brown}.flaticon-comments:before{content:'\f0e6';color:green}.flaticon-heart:before{content:'\f004';color:red}.flaticon-authors:before{content:'\f234';color:blue}.flaticon-location:before{content:'\f041'}.flaticon-email:before{content:'\f0e0'}.flaticon-link:before{content:'\f015'}.user-card{width:100%;display:block;position:relative;background-color:#fff;border-radius:4px;text-align:center;margin-bottom:2em;font-size:16px;padding-top:1px}.user-card:last-child{margin-right:0}.user-card .profile-picture.avatar{display:block;width:120px;height:120px;box-shadow:0 0 12px #b3b3b3;background-color:#fff;border-radius:100%;overflow:hidden;background-size:100%;border:6pxsolid #fff;position:relative;margin:1emauto}.user-card .profile-picture .avatarimg{max-width:100%;max-height:100%;position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);border-radius:100%}.user-card .profile-picture .avatarlabel{opacity:0;width:50%;height:50%;color:#333;cursor:pointer;background:white;display:block;border-radius:0 3em 0 1em;z-index:1;position:absolute;top: -1px;right: -1px;display:block;-webkit-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-moz-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-o-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-ms-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22)}.user-card .profile-picture .avatar label:before{font-size:1.4em;margin-top:15px;margin-right:5px;display:inline-block}@media screen and (max-width: 880px){.user-card .profile-picture .avatarlabel{opacity:1}}.user-card .profile-picture .avatar:hoverlabel{opacity:1}.user-card .profile-picture.username{color:#7577a9;display:block;padding:01em;word-wrap:break-word}.user-card .profile-picture .real-name{color:#333;display:block;font-size: .9em;padding:01em;word-wrap:break-word}.user-card .profile-picture.about{color:#333;word-wrap:break-word;padding:01em;margin-top: .5em;font-size:0.9em}.user-card.ranking{border-radius:20px;color:#fff;padding: .1em .5em;font-weight:bold;background-color:#f05f5c;position:absolute;margin-top: -3em;font-size:1em;margin-left:2em;cursor:default}.user-card .ranking:hover{background-color:#f05f5c}.user-card.stats{border-top:1px solid #f5f8f9}.user-card .stats::after{clear:both;content:"";display:table}.user-card .stats a, .user-card .statsdiv{color:#333;float:left;width:28%;display:block;padding: .5em;margin:0;text-decoration:none;border-right:1px solid #f5f8f9;font-size:0.9em}.user-card .stats a b, .user-card .stats divb{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.user-card .stats a i, .user-card .stats divi{font-size:1em;display:block}.user-card .stats a i:before, .user-card .stats div i:before{font-size:1em;line-height:1.5em;margin:0}.user-card .stats a:last-child{border:none}.user-card .stats a:hoverspan{color:#333}.user-card .stats a span, .user-card .stats divspan{color:#a6a9ac;display:block}.user-card.links{padding:0.5em;text-align:left;border-top:1px solid #f5f8f9}.user-card .linksa{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;display:block;color:dimgray;font-size: .9em;line-height:2em}.user-card .links a:before{margin:0;margin-right: .8em;display:inline-block;width:22px;text-align:center;font-size:1.4em;vertical-align:middle}.user-card .links a:hover{color:#333}.user-card .user-social{margin:0;padding:0.5em;border-top:1px solid #f5f8f9}.user-card .user-socialul{margin:0;padding:0}.user-card .user-social ulli{display:inline-block}.user-card .user-social ul lia{display:block;top:0;position:relative;-webkit-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)}.user-card .user-social ul li a:hover{top: -3px;text-decoration:none}.user-card .user-social ul li a:before{font-size:1.4em;margin:0}@media screen and (max-width: 880px){.user-card .user-social ul li a:before{font-size:2.3em}}.user-card.badges{padding:0.5em;border-top:1px solid #f5f8f9}.user-card .badgesul{padding:0;margin:0}.user-card .badges ulli{display:inline-block;margin:02px}.user-card .badges ul liimg{max-width:30px;max-height:30px}.user-card .btn-holder{padding-top:25px;border-top:1px solid #f5f8f9}.user-card .btn-holder.btn{width:100%}.btn-follow{background-color:#286ebb;padding:1em;color:#fff !important;text-align:center;cursor:pointer;font-size:1em;border-radius:4px}.btn-follow:hover{background-color:#3476d9;text-decoration:none}.user-card .more-info{border:none;background:none;outline:none;cursor:pointer;display:block;width:100%;text-align:center;border-top:1px solid #f5f8f9;padding:5px;color:#333}.user-card .more-info:hover{color:#a6a9ac}.user-card .more-info span:nth-child(2){display:none}.user-card .card-hidden{overflow:hidden;padding:00.5em;height:0;border:none;-webkit-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.user-card.expanded .card-hidden{overflow:visible;padding:0.5em;height:auto;border-top:1px solid #f5f8f9}.user-card.expanded .more-info span:nth-child(1){display:none}.user-card.expanded .more-info span:nth-child(2){display:block}.fa-google-plus-square:before{color:red}.fa-facebook-square:before{color:blue}.fa-twitter-square:before{color:darkturquoise}.fa-instagram:before{color:brown}</style><section class="user-card"><div class="boxProfile-fields profile-picture"><style>.about-widget {text-align: center;padding-bottom: 10px;}.about-widget p {font-size: 15px;line-height: 1.4}.about-widget-social {text-align: center;padding: 15px;margin: 15px -15px -15px;border-top: 1px solid #e2e2e2}.about-widget-social a i {font-size: 18px;margin: 0px 7px;color: #191b28;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}.about-widget-social span {display: none}.about-widget-img {box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 3px 3px rgba(0,0,0,.05);border: 3px solid #fff;transition: all 0.5s ease-in-out;display: block;height: 120px;margin: -85px auto 0;overflow: hidden;display: inline-block;max-width: 120px;max-height: 120px;line-height: 120px}.about-widget-img:hover{border-radius: 100%;transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(0deg)} .widget-info-sibenit {border-top: 1px solid #ededed;}.widget-info-sibenit .content-w{margin-top: 10px;}.widget-info-sibenit .content-w>p{text-align:center;padding:10px;padding-top:0;border-bottom:1px solid #ededed;margin-bottom:10px;margin: 0px;}.widget-info-sibenit .content-w>p a{color:#3b5992}.widget-info-sibenit .content-w ul li{padding: 5px;border-bottom:none;}.widget-info-sibenit .content-w ul li p{color:#333;font-size:14px;margin:0px}.widget-info-sibenit .content-w ul li p .fa{width:20px;color:#868686}.widget-info-sibenit .content-w ul li p .fa.fa-home{font-size:16px}.widget-info-sibenit .content-w ul li p .fa.fa-map-marker{font-size:18px}.widget-info-sibenit .content-w ul li p a{color:#3a5795;font-weight: 700;}.cover { height: 105px; overflow: hidden; border-radius: 4px 4px 0 0;}</style><div class="about-widget">
<br /><br /><br /><br /><div class="about-widget-img"><img alt="blogger template" height="120" src="//graph.facebook.com/100002251455018/picture?type=large" width="120" /></div><p class="about">Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!</p></div>
<div class="stats"><a href='/'><span class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Tổng bài viết"><span id='Stats1_totalPosts1' style='color:#333;font-weight:bold'></span>
<i class="flaticon-posts"></i></span> </a>
<a href='/binhluan'><span class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Tổng bình luận"><span id='Stats1_totalComments1' style='color:#333;font-weight:bold'></span>
<i class="flaticon-comments"></i></span></a>
<a href='#'> <span class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Tổng tác giả"><b style='color:#333'>01</b>
<i class="flaticon-authors"></i></span></a>
</div>
<div class="links card-hidden"><a href="http://maps.google.com/maps?q=DakLak" class="flaticon-location" target="_blank">Đak Lak</a> <a href="mailto:2018.net.vn@gmail.com" class="user-url flaticon-email">2018.net.vn@gmail.com</a><a href="/" class="user-website flaticon-link">https://blogsharewithlove.blogspot.com/</a> </div>
<div class="user-social card-hidden"><ul><li><a href="https://plus.google.com/" class="fa fa-google-plus-square" target="_blank" rel="nofollow"></a></li> <li><a href="http://fb.com/DuyPhuong.Account" class="fa fa-facebook-square" target="_blank" rel="nofollow"></a></li> <li><a href="http://twitter.com/" class="fa fa-twitter-square" target="_blank" rel="nofollow"></a></li> <li><a href="http://instagram.com/ins.duyphuong" class="fa fa-instagram" target="_blank" rel="nofollow"></a></li> </ul></div>
<button class="more-info"><span>+ Thêm thông tin</span><span>- Thu gọn</span></button>
<script type="text/javascript">$('.more-info').on('click', function () { $('section.user-card').toggleClass('expanded'); });</script>
<div class="btn-holder" id="gr_following_23"><a href="https://www.blogger.com/follow.g?blogID=3891271056391904491" data-id="23" data-type="10" class="btn btn-follow gr-follow-23 gr_following" target='_blank'>Đăng kí thành viên</a></div></div></section><style type="text/css">form#_bcd_141013_search_form{text-align:center;position:relative;display:block;clear:both;float:none;border:1px dashed #dcdcdc;padding:3px;font-size:13px;background-color:#fff;width:90%;margin:auto}input#_bcd_141013_search_text{text-align:center!important;width:90%;border:none;margin:0;padding:0;line-height:2em;height:2em;outline:none;background:transparent;color:#000;}button#_bcd_141013_search_submit:hover{color:#000}button#_bcd_141013_search_submit{width:auto;padding:0 3px;margin:0;position:absolute;right:3px;top:3px;line-height:2em;height:2em;text-align:center;cursor:pointer;border:none;color:#666;background:#fff;box-shadow:none}html[dir="rtl"] button#_bcd_141013_search_submit{right:auto;left:3px}</style><form action='/search' id='_bcd_141013_search_form' method='get'><input id='_bcd_141013_search_text' name='q' placeholder="Nhập từ khóa cần tìm kiếm..." type='text'/><input type="hidden" name="max-results" value="6"/><button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button></form><br /><script type="text/javascript">function trk_uc(event) { ga('send', 'event', 'user-card', 'phucuongblogger', event); }</script><script type='text/javascript'>//<![CDATA[function totalPosts1(json){document.getElementById('Stats1_totalPosts1').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments1(json){document.getElementById('Stats1_totalComments1').innerHTML=json.feed.openSearch$totalResults.$t};function totalTS(json){document.getElementById('Stats1_totalTS').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts1\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments1\"><\/script><script type=\"text/javascript\" src=\"/feeds/posts/default/-/Tâm%20sự?alt=json-in-script&max-results=0&callback=totalTS\"><\/script>');//]]></script>
Rất đơn giản anh em chỉ cần mở phần bố cục trên Blogger -> Thêm Tiện ích -> HTML/Java Script rồi paste đoạn code trên vào là được
Chúc Các bạn Thành Công !
Chúc Các bạn Thành Công !
Загрузка...
