Header Ads

Share Widget giới thiệu cực kì đẹp


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 thêm code bên trên vào phần Bố Cục là được.
Cảm ơn anh em đã theo dõi bài viết.

Facebook comments

Bình Luận (13):

  1. Thay temp ko thêm liên kết mình luôn :D

    Trả lờiXóa
  2. ok lắm mà cho thêm cái demo live vẫn ngon hơn nha

    Trả lờiXóa
  3. Chúc A Phương Năm Mới Vui Vẻ Nhé !

    Trả lờiXóa
  4. Nhân dịp năm mới, tôi xin gửi đến các bạn một lời chào mong một ngày may mắn. Một lới nhắn nhủ mong bạn thành công. Một lời chúc mong bạn ấm lòng. Một nụ cười để vượt qua tất cả. Một ý chí để đập tan vất vả, lo âu. Một năm mới tràn đầy niềm vui và hạnh phúc.

    Trả lờiXóa