Ciel Designer

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>/*------- 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 !

Загрузка...

Xem Tiếp

Để tăng thêm phần sinh động cho Blogspot mình sẽ giới thiệu đến các bạn một thủ thuật với chức năng tương tự, đó là Gắn tem phân biệt Admin – Visitor cho Comments.

Gắn Tem phân biệt Admin – Visitor cho Comments của blogger

Hình minh họa

Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Chọn Mở rộng tiện ích mẫu (Expand Template Widgets)
4- Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

.authortem{font-size:10px;font-weight:700;line-height:1em;color:#FFF;float:left;margin:0;padding:1px;border:1px solid #ddd} 
.admintem{background:#F60;margin:0;padding:2px} 
.visitortem{background:#06F;margin:0;padding:2px}

5- Tìm đoạn code sau trong template :

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

Hoặc:

<p class='comment-body' style='padding-right:10px;'><data:comment.body/></p>

và chèn đoạn code bên dưới vào phía trên nó :

<div class='authortem'>     
<b:if cond='data:comment.author == data:post.author'>      
<div class='admintem'>ADMINISTRATOR</div>      
<b:else/>      
<div class='visitortem'>VISITOR</div>      
</b:if>      
</div>      
<div style='clear:both'/>

Khi đó, sẽ trông giống thế này :

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>     
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>      
          <b:loop values='data:post.comments' var='comment'>      
<div class='authortem'>         
<b:if cond='data:comment.author == data:post.author'>          
<div class='admintem'>ADMINISTRATOR</div>          
<b:else/>          
<div class='visitortem'>VISITOR</div>          
</b:if>          
</div>          
<div style='clear:both'/>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>         <b:if cond='data:comment.isDeleted'>      
    <span class='deleted-comment'><data:comment.body/></span>      
  <b:else/>      
    <p><data:comment.body/></p>      
  </b:if>      
</dd>
          </b:loop>     
        </dl>      
      </div>

* Lưu ý : nếu bạn không thể tìm được đoạn code ở bước 3 thì có thể tìm đoạn code giống bên dưới :

<data:commentPostedByMsg/>
</dt>

và chèn code của thủ thuật phía dưới nó.

Chúc các bạn thành công !

Загрузка...

Xem Tiếp

Ciel Designer

Thursday, February 28, 2019

Share PSD Yêu Em Dại Khờ - Lou Hoàng

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

Gắn Tem phân biệt Admin – Visitor cho Comments của blogger

Cách tiến hành:

[Share] Template Blogspot của Phim 12G Bản Đẹp New 2019 Uplated

Share Template Blogspot của Phim 12G Bản Đẹp New 2019 Uplated

PSD - Cuộc Sống

Wednesday, February 27, 2019

Share PSD ảnh bìa typography Vô Tình

[PSD] We Are Just Friends & Đôi lời tâm sự

Hoàng Anh Tuấn

"Muốn thành công. Chúng ta phải nổ lực không ngừng!"

Hoàng Anh Tuấn

21k

10k

35

[Share] PSD - Yêu Một Người Vô Tâm x Mr.Siro

[Share] Trả Lại Những Gì Thuộc Về Em !