Bài đăng mới nhất :
Recent Post
Grid List
Hiển thị các bài đăng có nhãn Thủ thuật Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ thuật Blogger. Hiển thị tất cả bài đăng

Code tạo các nút share trượt dọc - Sticky Sidebar






MuaReDucKien.com xin chia sẻ bài viết về cách tạo các nút share lên mạng xã hội theo chiều dọc cùng với hiệu ứng trượt dọc mỗi khi cuộn chuột (scrollbar) xuống phía dưới, giúp làm tăng trafic cho web / blog.


1. Cách 1: Không dùng Javascript

Chèn đoạn code bên dưới vào widget HTML / Javascript
<style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box_namkna {
position: fixed;
top: 10%;
right: 0;
border: 3px solid #00EE00;
padding: 5px 5px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #F0FFFF;
width: 60px;
min-height: 345px;
}
.sharing_box_namkna .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:55px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box_namkna'>
<div style='text-align:center; margin-top:5px'>
<img alt='Share Emphasis' height='46px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLe4ARbKIEsZWISjNZ65llYTdTuv7xhY9UnjsepkuMITGcHpCitPgHgKAv5RYX7aRv_dpvMlE39tuUs_xc97Px8fpfwnMUQVTL8oCtMb5UxhuWGIYH7t8kfsICRlWJ4bE-2TdQ2ZWwniiA/s1600/obtenir-par-poste-icone-5533-48-+-namkna-blogspot-com.png' width='56px'/>
</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:3px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>

<!-- FACEBOOK -->
<div class='item' style='margin-left:3px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
<div id='fb-root'></div>
</div>
<!-- G+ -->
<div class='item' style='margin-left:5px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'></g:plusone>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:5px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
      li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- AddThis Button END -->

Chèn tiếp đoạn code bên dưới vào trước thẻ </head>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
Lưu lại và thưởng thức nào!

2. Cách 2: dùng JQuery

Chọn mở rộng tiện ích (Expand Widget Templates) và chèn đoạn code bên dưới vào sau thẻ <head>

<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/stickysidebar.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#share-buttons').stickySidebar({speed: 300, constrain: true})
});
</script>

<style>
#share-buttons {
background:  #fff;
border: 1px solid #ccc;
margin-left: -82px;
padding: 8px;
position: absolute;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;
}
</style>
Tìm đoạn code này:
<div class='post-header-line-1'/>
và chèn code bên dưới vào sau đoạn code vừa tìm được ở trên

<div id='share-buttons'>
<div class='twitter scount'>
<a
 class='twitter-share-button' data-count='vertical' data-text='List Only
 Post Titles On Blogger Labels Pages' 
data-url='http://www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html'
 data-via='paulcrowepro' 
href='http://twitter.com/share'>Tweet</a><script 
src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

<div class='facebook scount'>
<fb:like
 font='' 
href='http://www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html'
 layout='box_count' send='false' show_faces='false' width='50'/>
</div>

<div class='stumble scount'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>

<div class='gplus scount'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/>
</div>
</div>
Chúc bạn thành công!
Nguồn: Namkna
Read more »
Nhãn:

Code viền khung một nội dung trong bài viết

 

Khi bạn muốn làm nổi bật một nội dung nào đó trong bài viết của mình, hãy sử dụng code viền khung nội dung bài viết bên dưới nhé!
<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;">NỘI_DUNG</div>
Điều đặc biệt của code này đó là có thể điều chỉnh được độ rộng của khung theo ý mình mong muốn ^^

Demo từ bài viết mình đã áp dụng:

Chúc các bạn thành công!
by Đức Kiên Computer
Read more »
Nhãn:

Code BookMark nhanh tới 1 vị trí trong bài đăng


Giống như khi đang đọc một cuốn sách dày, khi bạn muốn lưu lại vị trí đang đọc, để khi cần đọc tiếp hay đọc lại nội dung đó bạn chỉ việc bookmark tới đó thật nhanh chóng. Bookmark này cũng vậy, trong một bài viết dài, bạn muốn làm mục lục cho những vị trí quan trọng, những chỉ mục... bạn chỉ cần add code này vào, thế là xong.

Trong code bên dưới, Tên_gán_cho_vị_trí không được dùng khoảng trắng mà phải dùng shift gạch. Đặt dòng code đầu tiên tại vị trí cần bookmark (ví dụ Mục lục đầu trang), đặt dòng code thứ 2 tại vị trí bookmark đến.

Ví dụ mình đã áp dụng trong bài đăng sau: Tai nghe BlueTooth Gblue Q65, trong mục "Xem hướng dẫn sử dụng tại đây".



Code:
<a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội dung cần bookmark</a>
<a name="Tên_gán_cho_vị_trí ">Nội dung bookmark đến</a>

Chúc các bạn thành công!
by Đức Kiên Computer
Read more »
Nhãn:

Code Facebook FanPage Popup Hiển thị một lần


MuaReDucKien.com xin chia sẻ Code Facebook FanPage Popup Hiển thị một lần. Code này dùng để tạo popup hiển thị Facebook FanPage ở mặt trên web khi vừa vào blog / web blog. Đặc biệt nó chỉ hiển thị một lần duy nhất, tránh làm mất công tắt đi tắt lại nhiều lần, tạo cảm giác khó chịu cho người xem khi xem trang.

Chép toàn bộ code bên dưới vào widget HTML/Javascript

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepeAoGiApxFDYFUVWgLOxfdgWqIBTUIzTsmxZq3Z3I-hoPOaW1X1bbePj_hx0y6vVKgR7WIl4TYrRCoZLDBIWwam1eSw28BsSQ8czt3_97RP22W9T2vXYbfVOICvkmmagyM-dPwQDzriy/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWiNDUg8o_rHd_lnL0Sv9uksVYEpnL9jVqQ1eQAgAfIFHUrNbMrvKw1OY6c8blXKRoJpLEGC20f7xGVc35paGhDdrQO6WDqu3WZ3JwWzIYr4DnPw4Gzu9vZFpZ5-glI_uUuIbgDwk9uZjP/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepeAoGiApxFDYFUVWgLOxfdgWqIBTUIzTsmxZq3Z3I-hoPOaW1X1bbePj_hx0y6vVKgR7WIl4TYrRCoZLDBIWwam1eSw28BsSQ8czt3_97RP22W9T2vXYbfVOICvkmmagyM-dPwQDzriy/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepeAoGiApxFDYFUVWgLOxfdgWqIBTUIzTsmxZq3Z3I-hoPOaW1X1bbePj_hx0y6vVKgR7WIl4TYrRCoZLDBIWwam1eSw28BsSQ8czt3_97RP22W9T2vXYbfVOICvkmmagyM-dPwQDzriy/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWiNDUg8o_rHd_lnL0Sv9uksVYEpnL9jVqQ1eQAgAfIFHUrNbMrvKw1OY6c8blXKRoJpLEGC20f7xGVc35paGhDdrQO6WDqu3WZ3JwWzIYr4DnPw4Gzu9vZFpZ5-glI_uUuIbgDwk9uZjP/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepeAoGiApxFDYFUVWgLOxfdgWqIBTUIzTsmxZq3Z3I-hoPOaW1X1bbePj_hx0y6vVKgR7WIl4TYrRCoZLDBIWwam1eSw28BsSQ8czt3_97RP22W9T2vXYbfVOICvkmmagyM-dPwQDzriy/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepeAoGiApxFDYFUVWgLOxfdgWqIBTUIzTsmxZq3Z3I-hoPOaW1X1bbePj_hx0y6vVKgR7WIl4TYrRCoZLDBIWwam1eSw28BsSQ8czt3_97RP22W9T2vXYbfVOICvkmmagyM-dPwQDzriy/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepeAoGiApxFDYFUVWgLOxfdgWqIBTUIzTsmxZq3Z3I-hoPOaW1X1bbePj_hx0y6vVKgR7WIl4TYrRCoZLDBIWwam1eSw28BsSQ8czt3_97RP22W9T2vXYbfVOICvkmmagyM-dPwQDzriy/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC6db2QXIVsqtdYKaTQVG9ocfaIp7ab0Yr9No3cqy20WEPHclVd9MMkVylusuEMMSPLIhh7IENl5gnlIXTEm5tGAuXZHdMLyplDFSDxSP_jZkBvlQ6dNWOyW9_n8SNnyY1L6UwKVgygZHy/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKKYUn8OuB6MXCDYQpIEozBI04TWC8SGq_e6HpyxsIgnDoK8i5-vvjmZ75_CHpOUWjdLwrCaHnbCLT2bh3-5q4TwzlZGNgjLuyUXe_0vzTsJHp_o_GwoJGWMxWzWHiPCEYvQgVTmLDMlpm/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjepeAoGiApxFDYFUVWgLOxfdgWqIBTUIzTsmxZq3Z3I-hoPOaW1X1bbePj_hx0y6vVKgR7WIl4TYrRCoZLDBIWwam1eSw28BsSQ8czt3_97RP22W9T2vXYbfVOICvkmmagyM-dPwQDzriy/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMuaReDucKien&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.spiceupyourblog.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>
Read more »
Nhãn:
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. asd111 - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Free Blogger Template
back to top