/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;

5.   Klik Save Template / Simpan

Assalamualaiku wr.wb . Selamat datang bung di blog saya, kali ini saya mempunyai informasi yang menarik , yaitu saya akan memberi tahu bagaimana cara membuat Slideshow Image di Blog . Ikuti langkah langkah berikut :

1. Login ke blogger anda sendiri . Masuk ke Dashboard--> Design - -> Edit HTML.
2. Kemudian, cari kode </head>.
3. Copy kode di bawah ini dan paste di atas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

4. Simpan template anda.
5. Setelah itu klik Layout --> Page Elements. 
6. Klik 'Add a Gadget'
7. Pilih 'HTML/Javascript'. Kemudian, tambahkan kode di bawah ini:

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFM15CtnJnaOmEQeb_7vuAcvlrtT53aDuGTQ8B_YowEgjklwUuyoRY3ZuSkWkR6l_5uEUEw3K6uALcy0lAGNL0dwGsiJVl0HI4VdKwHTm4JDV3F4uKxrHniBwPQkmk8X6Wiw4vRJuEIZA/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-rwG3VKOvrRW2-XqHS-36iFnPxF0QDy-Do2JdVLadvO42wHfh-LQXi_wqJMq90rJc1-1tq_jVA4YH8z2M9RMG2pzER4BAMA0xu0kWz0uQbhmH231xtKiloR8V0bi5v43GiUXS2v4QQU/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlDg9Uq-GntOLe5K9diE6HdUkI_ARk31uzuqwtiCVHKeXU2lvaav649M7UPrg7R9D4-f8_l4uvWGBjS-GbbqFins9cHwrAkCmW5H3pU8znhuedz0sHq2D8kwLKLDOre8C9WjtU_uQW-fE/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEK39w_9rRUKi_I7cFlAsm6o82eFiWilClekFK0B3z2E_eF8kAr9BCz9Z-9vMC7zzj-k0C9CteACUw-XY0ZrxiJsgsb46KEyJUCIrf0BhjIgD_N2r0-xwfjg7qQ_ySfrEP8lI0A1w3Z9Y/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

Keterangan :  Ganti URL link (#), "This is featured post X title", "Replace This Text With Your Featured Post X Description", sesuaikan dengan keinginan anda. Rupanya cukup sekian tutorial dari saya apa bila ada yang di tanyakan , langsung saja di komen ....

1.Login to your dashboard--> layout- -> Edit HTML
2.Scroll down to till you see </head> tag.
3.Now copy and paste below code just before the </head> tag.

<script type='text/javascript'>
//<![CDATA[

//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
 //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
 //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
 //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
 //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
 //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
 try{
 page_request = new ActiveXObject("Microsoft.XMLHTTP")
 }
 catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
 setting.contentdivs.push(alldivs[i])
  alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
 phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
 if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
  pdivlinks[i].style.display="none" //hide this toc link
  continue
 }
 pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
 pdivlinks[i][setting.revealtype]=function(){
  featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
  return false
 }
 setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
 pdivlinks[i].onclick=function(){
  featuredcontentslider.turnpage(setting, this.className)
  return false
 }
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
 targetobject.filters[0].opacity=value*100
else //IE 5.5
 targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
 setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
 setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},

autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){
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 null
},

setCookie:function(name, value){
document.cookie = name+"="+value

},

init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}

}

//]]>
</script>

<style>
#slider4{
border: 2px solid #181818;
background: #ffffff;
margin-left: 9px;
}
#paginate-slider4{
border-color: #181818;
margin-left: 9px;
margin-top: 4px;
}
#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid #181818;
margin-top: 5px;
}
#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid #ffc04e;
}
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
width: 500px; /*width of featured content slider*/
height: 325px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 500px; /*width of content DIVs within slider. Total width should equal slider&#39;s inner width */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 500px; /*Width of pagination DIV. Total width should equal slider&#39;s outer width */
text-align: right;
background-color: #ffffff;
padding: 0px 5px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #181818;
background: #ffffff;
}
.pagination a:hover, .pagination a.selected{
color: #181818;
background-color: #ffffff;
}
</style>

Note : You can change width,height,... as you like.
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.

<div style="float:left;">

<div id="slider4" class="sliderwrapper">

<div style="background: url('IMAGE-1-LINK') center left no-repeat" class="contentdiv"></div>

<div style="background: url('IMAGE-2-LINK') center left no-repeat" class="contentdiv"></div>

<div style="background: url('IMAGE-3-LINK') center left no-repeat" class="contentdiv"></div>

<div style="background: url('IMAGE-4-LINK') center left no-repeat" class="contentdiv"></div>

<div style="background: url('IMAGE-5-LINK') center left no-repeat" class="contentdiv"></div>

</div>

<div id="paginate-slider4">

<a href="#" class="toc"><img alt="IMAGE-1" src="IMAGE-1-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-2" src="IMAGE-2-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-3" src="IMAGE-3-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-4" src="IMAGE-4-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-5" src="IMAGE-5-THUMBNAIL-LINK"/></a>

</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

</div>

Note : Replace IMAGE-X-LINKs and IMAGE-X-THUMBNAIL-LINKs with your image links.

Now you are done.Look at the,
DEMO of Featured Images Slideshow+Slider

Membuat postingan di home page menjadi 2 kolom suatu cara untuk merubah tampilan default bloger dengan cara membagi jadi 2 bagian yaitu sebelah kiri dan kanan.


Kustomisasi halaman posting ini tentu saja bermanfaat untuk memanfaatkan ruang blog yang terbatas menjadi maksimal, karena lebar halaman posting yang defaultnya 1 buah kini bisa menjadi 2 buah, tentu saja dengan konsekuensi tampilan lebar halaman posting di home page menjadi kecil karena ruangnya dibagi menjadi 2 kolom,akan tetapi hal ini tidak berlaku pada halamam page atau pada saat menampilkan url artikel anda, maka halaman posting akan kembali default dengan lebar yang normal.

berikut cara membuat postingan di home page menjadi 2 kolom:

1. Login ke blogger dengan ID anda.
2. Klik Rancangan. 
3. Klik tab Edit HTML. 
4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
5. Cari kode css .post{ ( masing-masing template kadang berbeda) cari yang seperti ini :

.post{background:#fff;
margin:0.5em 0.5em;
border:0px solid #ccc;}
padding:0.5em;

6. Jika anda sudah temukan kode tersebut perhatikan perhatikan margin:0.5em 0.5em; kamu tinggal menyisipkan auto pada margin tersebut, sehingga menjadiseperti ini :

.post{background:#fff;
margin:0.5em auto 0.5em;
border:0px solid #ccc;}
padding:0.5em;

7. Kemudian carilah kode ]]></b:skin>, copy lalu paste kode berikut persis dibawah kode]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style>

.post {

width:285px;

height:400px;

margin-right:5px;

overflow:hidden;

float:right;

border:3px double #808080;

}.post-body{color:#555;margin: 5px 10px 5px 10px;padding:0;font-family:&#39;tahoma&#39;,Helvetica,Sans-serif;font-size:11px;line-height:16px;text-align:justify} </style></b:if>

Jika sudah selesai, silahkan di preview dulu, jika tidak terjadi masalah , jangan ragu-ragu silahkan save template.
silahkan atur ketinggian dan lebar sesuaikan dengan lebar postingan template anda, lihat yang berwarna biru.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang membuat postingan di home page menjadi 2 kolom kali ini, semoga bermanfaat bagi Anda.

Google Code adalah web milik google yang memberikan jasa hosting atau penyimpanan data di internet dengan gratis. Salah satunya ialah penyimpanan javascript, Cara menyimpan java script sangat mudah sekali sobat. Tinggal mengikuti langkah langkah di bawah ini insyaallah akan membantu sobat Ok dech langsung aja penjelasannya. Untuk cara menyimpan file javascript di google code ikuti langkah-langkah berikut ini:

• Buka Situs Google Code
• Klik New Project Seperti Gambar dibawah ini.

  

• Lalu isilah Kotak yang kosong untuk membuat Rincian Javascipt kamu baru, jika sudah klik "Creating Project" Sesuai keinginan kamu seperti pada gambar di bawah ini.

• Masih Belum selesai kawan.lalu anda akan masuk ke halaman google code yang baru saja kita buat. Untuk mengupload file java script, silakan menuju ke menu Download.

• Pada menu Download Klik New Download seperti gambar dibawah.

• Isi form tentang keterangan atau nama file java script yang akan kita upload. Apabila selesai, klik "Submit File".

• File Java Script telah selesai diupload. Untuk mendapatkan alamat url java script klik saja pada nama file.Seperti pada gambar di bawah ini

• Setelah anda mengklik pada nama file seperti diatas kemudian Anda akan menemui halaman seperti berikut, dan klik kanan pada file lalu pilih Copy link address/Location.

Simpan kodenya dengan format Seperti ini :

<script src='ALAMAT LINK FILE JAVA SCRIPT ' type='text/javascript'/>

• Selesai Sobat telah berhasil mengupload Java Script di Google Code.

mudah sekali asalkan sobat cermat dan teliti.

Situs Penyedia Ilmu Programming Gratis

Merekomendasikan situs-situs di bawah ini untuk media pembelajaran,karena mudah dipahami,akurat dan lengkap,terutama untuk pemula.

#1 Belajar CSS

Anda bisa kunjungi :

• http://www.w3schools.com/css/
• http://www.learn-css-tutorial.com/
• http://csseasy.com/

---

#2 Belajar PHP

Anda bisa kunjungi :

• http://www.learnphp.org/
• http://www.phpbuddy.com/
• http://www.scripts.com/php-scripts/

---

#3 Belajar HTML

Anda bisa kunjungi :

• http://www.w3schools.com/html/DEFAULT.asp
• http://www.davesite.com/webstation/html/
• http://www.html.net/

---

#4 Belajar Javascript

Anda bisa kunjungi :

• http://userscripts.org/
• http://www.w3schools.com/JS/default.asp

---

#5 Belajar ASP

Anda bisa kunjungi :

• http://www.asp.net/
• http://www.w3schools.com/asp/default.ASP
• http://www.learnasp.com/learnasp/

---

**uNTUK YaNg LaIn,gOOGLInG aJa Ya..

Semoga bermanfaat..
**bocoran artikel selanjutnya.."Membuat Dropcaps Pada Artikel di Blog",tapi rencana..khan bisa berubah,so..update truz yach..

Dropdown adalah salah satu cara untuk mempermudah pengunjung melihat lihat posting anda karena dengan cara satu ini lah pengunjung akan dibuat efektif karenanya karena dapat melihat blog anda dengan bebas mungkin contoh gambar dropdown seperti ini.



Home Daftar isi Test JS My Slidesow   

Feature Slide show bisa kita gunakan untuk menampilkan gambar dan link produk, jasa dari web/blog kita.


Untuk membuatnya mari kita ikuti tutorial berikut ini :

1. Login ke Blogger

2. Pilih tab Design > Edit HTML > Centang tanda Expand Widget Templates

3. Cari kode ]]></b:skin>

4. Copy code di bawah ini lalu pastekan tepat di bawah code ]]></b:skin>

<style type='text/css'> /* Featured */ #featured{ float:left; width:620px; height:292px; padding:0; margin-bottom:20px; position:relative; overflow:hidden; } #featured ul.ui-tabs-nav{ position:absolute; top:0; left:415px; list-style:none; padding:0; margin:0; width:205px; height:292px; overflow:auto; overflow-x:hidden; z-index:100; } #featured ul.ui-tabs-nav li{ padding:0 0 0 15px; } #featured ul.ui-tabs-nav li img{ float:left; margin:0 5px 0 0; background:#fff; padding:3px; width:70px !important; height: 57px !important; } #featured ul.ui-tabs-nav li span{ position:relative; left:0; top:13%; line-height:1.3em; } #featured li.ui-tabs-nav-item a{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pUaGBD6l_D7Ew3gvIs_a9vbqaxQfMDEPnvhgVTdptNlYK38l7iqwrX-V7pl4SfYi9BA08Q1RunJxQawd4jTWbzCM1xwPBBMRQDgBeAERck6rCFCla3aUCO31bEfEjOaTh2UhhY5jqkU/s1600/panel-bg.jpg) no-repeat; color:#fff; display:block; padding:5px; height:63px; text-decoration:none; line-height:1.2em; outline:none; } #featured li.ui-tabs-selected{ background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_M8vRGrVxXqmgxHUAJ6jPN_aFNBogY7rcV2eeSLbrWIRRkvu3o0y2cKIR952EbUeHtM93muDdi1i-0TN1k6_8gvnmxeQ26Cj8V6edxx32fzgWjNQVxlaTGzvffubsZl_OANSUTSlEdiY/s1600/arrow.png&#39;) center left no-repeat; z-index:100; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#f8ac00; color:#333 } #featured .ui-tabs-panel{ width:430px; height:292px; position:relative; padding:0; margin:0; z-index:50; } #featured .ui-tabs-panel img{ width:430px !important; height:290px !important; z-index:50; } #featured .ui-tabs-panel .info{ position:absolute; padding:5px 10px; bottom:0; left:0; overflow:hidden; height:63px; width:410px; background:#111; opacity:0.85; filter:alpha(opacity=85); .width: 100%; /* IE */ z-index:50; } #featured .info h3{ font-size:20px; padding:0; margin:0; overflow:hidden } #featured .info p{ margin:0; line-height:1.4em; color:#fff } #featured .info a, #featured .info a:visited{ text-decoration:none; color:#f8ac00 } #featured .info a:hover{ text-decoration:underline; } #featured .ui-tabs-hide{ display:none } </style>

5. Kemudian cari lagi code <div id='main-wrapper'>

6. Copy code dibawah ini dan pastekan tepat di bawah code <div id='main-wrapper'>

<!-- Featured Content Started --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div id='featured'> <ul class='ui-tabs-nav'> <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src=' URL Gambar artikel 1 ' width='80'/><span>Judul Artikel 1</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src=' URL Gambar artikel 2' width='80'/><span>Judul Artikel 2</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src=' URL Gambar artikel 3' width='80'/><span>Judul Artikel 3</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='URL Gambar artikel 4' width='80'/><span>Judul Artikel 4</span></a></li> </ul> <!-- First Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> <img alt='testing' height='290' src=' URL Gambar artikel 1' width='430'/> <div class='info'> <h3><a href='URL Artikel 1'>Judul Artikel 1</a></h3> <p>Isi keterangan artikel 1</p> </div> </div> <!-- Second Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> <img alt='testing' height='290' src='URL Gambar artikel 2' width='430'/> <div class='info'> <h3><a href='URL Artikel 2'>Judul Artikel 2</a></h3> <p>Isi keterangan artikel 2</p> </div> </div> <!-- Third Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> <img alt='testing' height='290' src='URL Gambar artikel 3' width='430'/> <div class='info'> <h3><a href='URL Artikel 3'>Judul Artikel 3</a></h3> <p>Isi keterangan artikel 3</p> </div> </div> <!-- Fourth Content --> <div class='ui-tabs-panel' id='fragment-1' style=''> <img alt='testing' height='290' src='URL Gambar artikel 4' width='430'/> <div class='info'> <h3><a href='URL Artikel 4'>Judul Artikel 4</a></h3> <p>Isi keterangan artikel 4</p> </div> </div> </div> </b:if> </b:if> <!-- Ends of Featured content--> <div class='clear'>&#160;</div>

7. Cari code </body>

8. Copy code di bawah ini dan pastekan di atas code </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true); }); </script> <script src='http://dl.dropbox.com/u/14915514/JavaScript/codejquery-1.2.6.min.js' type='text/javascript'/> type='text/javascript'/>

9. Ganti tulisan URL Gambar dengan gambar artikel

Ganti tulisan Judul artikel dengan judul artikel yang ingin kamu tampilkan

Ganti URL artikerl dengan url artikel yang ingin kamu tampilkan

10. Setelah selesai simpan template dan lihat hasilnya.

Selesai sudah tutorial Cara Membuat Featured Slide Show, selamat mencoba, semoga berhasil dan bermanfaat.

Slide Show ini lebih sederhana ketimbang cara membuat sliding feature post yang sebelum pernah saya posting. Tampilannya tidak kalah menarik dan di jamin tidak lelet ditempatkan di blog anda. Sekarang mari kita bahas cara membuat simple slide show ini, ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-slideshow.js' type='text/javascript'/>
<style type='text/css'>
ul.slideshow{list-style:none; width:400px; height:200px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; }
ul.slideshow li{position:absolute; left:0; right:0}
ul.slideshow li.show{z-index:500}
ul img{width:400px; height:250px; border:none}
#slideshow-caption{width:500px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500}
#slideshow-caption .slideshow-caption-container{padding:5px 10px; z-index:1000}
#slideshow-caption h3{margin:0; padding:0; font-size:16px}
#slideshow-caption p{margin:5px 0 0 0; padding:0}
</style>

Klik Simpan Template
Selanjutnya klik Rancangan lagi
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<ul class="slideshow">
<li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQi3bsrgNx2QZlW8usp1hLNhHTexySlZn65LYL0Q9jcq49f1nR9" title="judul gambar 1"
alt="deskripsi gambar 1" /></a></li>

<li><a href="#"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSC4hhV85L6rR8E_4orJuFFmgMQAGEkLahRizLN0TLLLFofgQdy" title="judul gambar 2" alt="deskripsi gambar 2" /></a></li>

<li><a href="#"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTUulXmOmQfig52BbjbWnVHc76_hGioRxQqVZesUgv6vM2BP2D8" title="judul gambar 3" alt="deskripsi gambar 3" /></a></li>

<li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRIZzxTcdcqZdBKIXR5_p7c4xMloe9wnf5sbJ6FU7fSkV-_K3qO" title="judul gambar 4" alt="deskripsi gambar 4" /></a></li>
</ul>

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

Untuk membuatnya silahkan ikuti panduan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

</head> dan taruh Script Javascript dibawah ini tepat sebelum atau diatasnya:

<script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {
// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});
// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});
// Switch buttons from &quot;Log In | Register&quot; to &quot;Close Panel&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});
});
</script>

Atau jika script tersebut tidak berfungsi disana, anda bisa meletakkannya sebelum atau diatas kode</body>

5. Beralihlah dan cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
background: url(http://i785.photobucket.com/albums/yy131/djnand/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(http://i785.photobucket.com/albums/yy131/djnand/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(http://i785.photobucket.com/albums/yy131/djnand/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://i785.photobucket.com/albums/yy131/djnand/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #15ADFF;
}
.tab ul.login li a:hover {
color: white;
}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open {background: url(http://i785.photobucket.com/albums/yy131/djnand/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://i785.photobucket.com/albums/yy131/djnand/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i785.photobucket.com/albums/yy131/djnand/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i785.photobucket.com/albums/yy131/djnand/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_login {
width: 74px;
background: transparent url(http://i785.photobucket.com/albums/yy131/djnand/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://i785.photobucket.com/albums/yy131/djnand/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

6. Jika sudah, anda bisa meletakkan HTML dibawah ini setelah kode <body> di edit HTML ,
kemudian letakkan kode di bawah ini tepat diatasnya :

<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome In DJ Note</h1>
<h2>Contoh Sliding Login Dengan JQuery</h2>
<p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
<h2>Tutorial</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://www.z33s.co.cc/2010/08/sliding-login-panel-with-jquery.html' title='Download'>KLIK DISINI</a></p>
</div>
<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>
</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>
</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello Guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Log In | Register</a>
<a class='close' href='#' id='close' style='display: none;'>Close Panel</a>
</li>
<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->

7. Save Template anda...

Pernahkah kalian membayangkan bagaimana cara membuat sebuah slideshow pada suatu halaman web? Tentu caranya sangat sulit, tapi tentu saja kita perlu mengetahui dasar-dasarnya terlebih dahulu. Nah di Tutorial Yodey kali ini, kita akan membahas sedikit ilmu mengenai slideshow dengan menggunakan javascript. Sebagai contoh awal kita pakai saja sebuah tag SELECT untuk membuat slideshow tersebut.

Contoh Demo :

gambar1 gambar2 gambar3 gambar4


Langkah awal yang harus perbuat adalah membuat file HTML dengan nama slideshow.html, kemudian taruh juga 4 buah gambar dengan format .jpg dan letakkan gambar-gambar tersebut di satu folder dengan file slideshow.html ini. Lalu buat sebuah tag SELECT dan tag DIV untuk menampilkan gambar dengan script HTML. Ini tidaklah sulit, tapi jika ada diantara kalian yang belum paham, kalian bisa melihat contoh dibawah ini:

<select id="pilihgambar" onchange="slideShow()">
 <option value="1">gambar1</option>
 <option value="2">gambar2</option>
 <option value="3">gambar3</option>
 <option value="4">gambar4</option>
</select>

<div id="slideshow"></div>

<script type="text/javascript">
function slideShow(){
 var nilai = document.getElementById("pilihgambar").value;
 if(nilai==1){
 document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-black.png'>";
 }
 if(nilai==2){
 document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-white.png'>";
 }
 if(nilai == 3){
 document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-4.png'>";
 }
 if(nilai == 4){
 document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-3.png'>";
 }
}
</script>

• Login ke Akun Bloger anda.
• Masuk kerancangan HTML
• Tambah Gatget pilih HTML/Java Script dan Simpan Slesai broo..

Slamat mencoba, "Salam Blogger Indonesia"
Semoga Bermanfaat...............

Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung membesar.

Login Ke Akun Blogger Anda
Pilih Rancangan → Tambah Gadget → HTML/Java Script
Copy semua Kode Dibawah ini dan Simpan :

<style type="text/css">
#zoomimage div {
height:100px;
width:100px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;}
#zoomimage div:hover {
padding-top:0;
padding-left:0;
padding-top:0;
padding-right:0;
-webkit-transform:scale(3,3);
-moz-transform:scale(3,3);}
#zoomimage img {
border: 3px solid #D8D8D8;
border-style:double;
}
</style>
<center>
<div id="zoomimage">
<div class="hover"><a href=" http://cheatart.blogspot.com/ " target="_blank"><img src="http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/cc.png" width="100" height="100"/></a>
</div></div></center>

Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung berputar.














Login Ke Akun Blogger Anda
Pilih Rancangan → Tambah Gadget → HTML/Java Script
Copy semua Kode Dibawah ini dan Simpan :

<style>#tejahtcganteng{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#tejahtcganteng:hover{ -o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);}#ganteng a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}</style>
<div style="text-align: center;">
<div id="tejahtcganteng">
<a href=" http://cheatart.blogspot.com/ " target="_blank" title="^_^"><img height="203" src="http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-white.png" style="border: 0px;" width="200" /></a></div></div><br/>

Oc.....!!!

Cara Membuat social bookmarking Animasi Untuk blogger atau pengguna blogspot akan kita bahas pada postingan kali ini.
Dalam posting ini kita memiliki gadget bookmark sosial, tetapi kali ini tidak akan berbentuk hati melainkan telur ovel telur pangsa shape.
penempatan widget seperti ini biasanya di bawah kiri body blog Anda .
Ada Fungsi On yang membuat telur slide terbuka otomatis untuk memperlihatkan tombol bookmark untuk pembaca seperti Facebook, Twitter, Google, Blogger, LinkedIn, Stumble Upon, Email dll.
Berikut ini contoh gambarnya.
dan Untuk DEMO silahkan ke halaman berikut ini :

DEMO Slide

"Lihat di kiri bawah blog,ada telur yang belum pecah..hahaha".

ok kita mulai cara membuat social bookmarking keren di blogspot.
1. Rancangan/desain >> Edit HTML.
cari kode </head>
2. setelah ketemu,pastekan kode di bawah ini tepat di atas atau sebelum kode </head> tadi.

<!-- Kode Awal Social Bookmarking http://thizan.blogspot.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- Kode Awal Social Bookmarking http://thizan.blogspot.com/ -->

3. Selanjutnya Cari Kode </body>
4. Lalu pastekan kode di bawah ini sebelum atau di atas kode tadi </body>

<!-- Start Heart Share Code From http://thizan.blogspot.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://thizan.blogspot.com/">Blogger Wordpress Gadgets</a><!-- End Heart Share Code From http://cheatart.blogspot.com/ -->

    Catatan: Ubah kode warna merah sesuai selera anda , itu untuk posisi widget.
5. Setelah semuanya selesai , silahkan simpan template anda dan lihat hasilnya.

Selamat mencoba dan salam blogging untuk sahabat blogger indonesia.
Beri komentar ya ..

Penasaran? Copy kode dibawah ini..

<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>

<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" />
<img class="image2" src="URL GAMBAR 2" /></a></center>

Ket:
URL GAMBAR 1 : ganti dengan url gambar pertama anda
URL GAMBAR 2 : ganti dengan url gambar kedua anda.
LINK TUJUAN JIKA GAMBAR DIKLIK : isi dengan link yang akan di tuju

Letakkan cursor anda pada gambar dibawah ini, lihat perubahan pada gambar :)





Bisa diletakkan di sidebar atau postingan. Selamat mencoba...

<script type="text/javascript">
function printPage() { print(document); }
</script><img onclick="printPage()" style="cursor:pointer;" title="Klik Untuk Mencetak Halaman" src="printer.png" alt="printer" width="16" height="16" />

Cara Membuat textarea terblok otomatis by Gank Zone Blog Tutorial Web Design, PHP, CSS, Panduan Sukses Blogger

<div style="text-align: center;">
<textarea onclick="this.select()" style="padding:10px; border:thin #666666 solid; background: #E2E2E2;" name="text" cols="30" rows="2" readonly="readonly" id="text">Isi text yang ingin Anda masukkan di sini</textarea>
</div>