Thủ thuật tao táp Widget slice show blog

Lướt web thường xuyên, chắc các bạn cũng sẽ không ít lần gặp Slideshow Tab View . Widget này khá đẹp và có thể dùng để trang trí thêm cho blog, 1 blogger Indonesia - Kang Rohman có 1 bài viết hướng dẫn cách tạo widget này. Mời các bạn xem qua bài hướng dẫn đã được mình dịch lại bên dưới .
Để tạo widget, bạn làm theo các bước sau :
  1. Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
  2. Thêm đoạn code bên dưới vào ngày trên thẻ ]]></b:skin>

font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
.indentmenu ul li{
display: inline;
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
.indentmenu ul li a:hover{
.indentmenu ul li a:visited{
color: white;
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
@media print {
.tabcontent {
display:block !important;

3>copy toàn bộ đoạn code và dán vào trước thẻ</head>.

<script type='text/javascript'>


//** Tab Content script v2.0- © Dynamic Drive DHTML code library (

//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:

// -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected

// -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted

// -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)

// -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container

//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically

//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie:

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){

this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container

this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container


this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container

this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array

this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)

this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)

this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")



var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair

if (document.cookie.match(re)) //if cookie found

return document.cookie.match(re)[0].split("=")[1] //return its value

return ""


ddtabcontent.setCookie=function(name, value){

document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)



expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers

this.cancelautorun() //stop auto cycling of tabs (if running)

var tabref=""


if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr


else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr



catch(err){alert("Invalid Tab ID or position entered!")}

if (tabref!="") //if a valid tab is found based on function parameter

this.expandtab(tabref) //expand this tab


cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )

if (dir=="next"){

var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0


else if (dir=="prev"){

var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1


if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function

this.cancelautorun() //stop auto cycling of tabs (if running)



setpersist:function(bool){ //PUBLIC function to toggle persistence feature



setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")

this.selectedClassTarget=objstr || "link"


getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to

return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref



var RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL

return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index



var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand

//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through

var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""



for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"

this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""


if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers

ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)

this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array



for (var i=0; i<this.subcontentids.length; i++){

var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop) "block" : "none" //"show" or hide sub content based on matching id attr value




var allrevids=this.revcontentids

for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface

//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it

document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"



setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)

for (var i=0; i<this.hottabspositions.length; i++){

if (tabposition==this.hottabspositions[i]){






autorun:function(){ //function to auto cycle through and select tabs based on a set interval

this.cycleit('next', true)



if (typeof this.autoruntimer!="undefined")




var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)

var selectedtab=-1 //Currently selected tab index (-1 meaning none)

var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index

this.automodeperiod=automodeperiod || 0

for (var i=0; i<this.tabs.length; i++){

this.tabs[i].tabposition=i //remember position of tab relative to its peers

if (this.tabs[i].getAttribute("rel")){

var tabinstance=this

this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers

this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)



tabinstance.cancelautorun() //stop auto cycling of tabs (if running)

return false


if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element



if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){

selectedtab=i //Selected tab index, if found



} //END for loop

if (selectedtab!=-1) //if a valid default selected tab index is found

this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)

else //if no valid default selected index found

this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr

if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){

this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)


} //END int() function

} //END Prototype assignment



4>Save lại template, rồi chuyển sang tab Phần tử trang (Page Elements) . Tạo một widget HTML/Javascript với nội dung như sau :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">

<div id="pettabs" class="indentmenu">


<li><a href="#" class="selected" rel="tab1">1</a></li>

<li><a href="#" rel="tab2">2</a></li>

<li><a href="#" rel="tab3">3</a></li>

<li><a href="#" rel="tab4">4</a></li>


<br style="clear: left"/>


<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">

<div id="tab1" class="tabcontent">

<a href="">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="" height="152"/></a>

<p><h3><a href="">Mt s hình anime (13)</a></h3></p>


<div id="tab2" class="tabcontent">

<a href="">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="" height="152"/></a>

<p><h3><a href="">Convert video trc tuyến min phí vi CatchVideo</a></h3></p>

Thông thường, các video-clips được đăng ti trên các trang chia s video trc tuyến luôn mang định dng .flv . Định dng này không hp vi nhiu phn mm , thiết b nên vì thế người dùng hay convert (đổi định dng) chúng khi download v.[...]


<div id="tab3" class="tabcontent">

<a href="">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="" height="152"/></a>

<p><h3><a href="">10 th thut vi link Youtube mà bn nên biết</a></h3></p>

Youtube là 1 dch v chia s video trc tuyến hàng đầu thế gii vi s lượng video và thành viên rt đông. Để vic xem các clips trên Youtube 1 cách tin li hơn, thì bên dưới đây là 10 th thut v Youtube mà bn nên biết.



<div id="tab4" class="tabcontent">

<a href="">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="" height="152"/></a>

<p><h3><a href="">Mt s hiu ng cho nh trong Blogger (cp nht)</a></h3></p>

Như các bn đều biết, để 1 bài đăng tht s hiu qu, gây s chú ý ca người đọc thì hình nh minh ha là không th thiếu. Vì thế, hôm nay mình xin hướng dn cách to 1 s hiu ng l mt cho nh minh ha, góp phn làm sinh động cho bài viết.[...]

</div> </div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")





5> Chỉnh sửa lại nội dung của Bước 4 trên theo ý thích rồi save lại.

- Đầu tiên, bn cn thay nhng vùng text được tô màu đỏ thành nhng ni dung t Blog bn.

- Tiếp đến , bn lưu ý các đon <div style ...> , hiu chnh các yếu t như float ; margin ; padding ; height ; width ; text-align ; padding ; margin-bottom theo ý thích sao cho phù hp.

- Đồng thi, để thêm tab, bn ch vic copy các đon code liên quan đến tab và sa li các s th t ca tab cho phù hp (bn xem kĩ code s hiu được cơ cu).


Bài đăng gốc

In bài này
Next Post »

Bạn đọc hãy giúp chúng tôi xây dựng cộng đồng bằng cách để lại bình luận, chúng tôi luôn đón nhận mọi ý kiến của các bạn:
» Bình luận nghiêm túc và không chứa các liên kết quảng cáo.
» Vui lòng không Spam nhận xét với mọi hình thức.
» Rất mong bạn đề tên cho nhận xét của chính mình - Bằng cách chọn vào Tên/URL và điền tên bạn vào (Phần URL có thể bỏ trống ).

- Bạn có thể chèn Link nhạc (NCT), video(Youtube),Hình ảnh vào comment bằng cú pháp:
+ [youtube] Link video Youtube [/youtube].
+ [img] Link ảnh( định dạng PNG, JPG,GIF) [/img]
+Chèn link liên kết: <a href="LINK" rel="nofollow">Name</a>
-Bạn copy mã bên cạnh biểu tượng chèn vào nhận xét để bày tỏ cảm xúc!! ConversionConversion EmoticonEmoticon

       Mạch Khóa Số Điện Tử Mạch Đếm Sản Phẩm Mạch Đèn giao thông Ngã Tư Mạch Trái Tim Final Mạch Trái Tim Final Mạch Trái Tim I Love U


Code 8051 - ASM Code 8051 - C Code AVR - C Code led sao băng Code PIC - C Điện tử cơ bản điện tử viễn thông Đo Nhiệt Độ DS18B20 + LCD Đo Nhiệt Độ LM35 + LCD Đo Nhiệt Độ LM35 + Led 7 thanh Đo tốc độ động cơ Động cơ robo Ebook Đại Học ebook điện tử Ebook đồ án Học Orcad Học Protues Hồng ngoại Lập Trình 8051 Lập Trình AVR lập trình c++ Lập Trình Led Quảng Cáo lập trình PIC Lập trình Robot Lập trình VHDL Lcd16x2 Led Clock Led Quay Led RGB Mạch 7seg Mạch Amply.Mạch Loa Mạch Cảm Biến Mạch cube Mạch Đếm Sản Phẩm Mạch điện cơ bản Mạch điện hay Mạch Điện Ứng Dụng Mạch đọc file nhạc MP3 dùng Atmega 8 Mạch Động Cơ Mạch đồng hồ Mạch đồng hồ LCD Mạch đồng hồ Matrix Mạch giao thông Mạch in Mạch khóa số điện tử Mạch Led đơn Mạch Led Quảng Cáo Mạch Led Vumeter Mạch Ma trận Phím Mạch Matrix Mạch nạp Mạch nguồn Mạch Nút Bấm Mạch RS232 Mạch RS485 Mạch thu phát Mạch tổ hợp MSI Mạch trái tim Mạch truyền điện không dây Mạch Vi điều khiển Module Bluetooth Module Sim Module Sim548 Motor Nhiệt độ - Độ ẩm oscilloscope Phần mềm điện tử Phần Mềm Diệt Viruts Phần Mềm Hay Phần Mềm Led Quảng Cáo Phần mềm vi tính robocon Rule robocon Sạc Acquy Sản Phẩm Thương Mại Sáng tạo Smart Home Tài liệu Điện Tử Tranzitor Tụ điện TUT - 8051 - ASM TUT - 8051 - KeilC UART Ứng Dụng Led Quảng Cáo Ứng dụng USB USB TO COM Vi điều khiển - Ứng dụng Vi mạch số VOM Wifi ESP8266