ash demo

Demo Javascript Stopwatch

00:00

List Forum Dofollow

Lanjutan dari artikel kemarin tentang Forum Pagerank Tinggi untuk Meningkatkan Backlink, Alexa dan Pagerank. Berikut list forum dofollow yang dapat anda manfaatkan umtuk mendapatkan backlink dan meningkatkan SEO blog.

Forum Dofollow

http://forum.kompas.com/
http://forum.detik.com/
http://forum.chip.co.id/
http://forum.antaranews.com/
http://www.rumah123.com/forum/
http://forum.hon.co.id/
http://forum.vibizportal.com/
http://www.videogamesindonesia.com/forum/
http://forum.tempo.co/

Buru register dan posting di forum tersebut. Don't forget tanam link blog anda di signaturenya...
Ciaoo...

Labels: SEO

Title otomatis pada popular post

Title otomatis pada popular post adalah salah satu usaha agar blog seo friendly.
Karena mesin pencari merambah link yang berada di sidebar kanan dan di butuhkan title atau deskripsi dari link tersebut.

Berikut cara membuat title otomatis pada popular post :

1. Masuk Akun Blogger
2. Pilih Template
3. Klik EDIT HTML
4. Cari Kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts'
5. Ganti Kode

<b:widget id='PopularPosts1' locked='false' title='Popular Posts'
bla...bla...bla ( sampai kode di bawah ini )
</b:includable>
</b:widget>

6. Ganti kode di atas dengan kode di bawah ini :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
<img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
<img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

6. Simpan Template.

Semoga tutorial nya bermanfaat. baca juga cara membuat title otomatis pada judul post.

Labels: SEO

Energy Saving Mode pada Blog

Seperti yang kita ketahui saat blogwalking, banyak sobat blogger memasang "energy saving mode" dengan berbagai macai tulisan dan gambar.

Manfaat dari Membuat Blog Hemat Energy adalah dengan menggunakan fitur ini sobat telah membantu untuk menghemat energi.

Setiap menitnya blog sobat yang dikunjungi per orang telah mengeluarkan rata-rata 1.2 kg ke atmosfer hanya untuk memuat data-data ataupun banner yang ada di blog/situs anda.

sobat tidak perlu repot2 upload js dan bla bla bla...

Simak cara sederhananya ya...

1. Login blog

2. Kemudian ke template

3. Letakkan kode di atas </head>

<script language='javascript' src='http://cybermig-screensaver.googlecode.com/files/cybermigscreensaver.js' type='text/javascript'/>

5. Simpan Template

Selanjutnya...

1. Masuk ke layout

2. Klik "Tambah Gadget"

3. Pilih "HTML/JavaScript"

4. Masukkan kode di bawah ini

<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(url gambar sobat) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>

5. Simpan dan lihat hasilnya!!

Mudah bukan?

Selamat mencoba dan semoga berguna tentang cara membuat energy saving mode dengan gambar pada blog

Labels: background

Background Slide pada Blog

Cara Membuat Background Slideshow pada Blog

Agar kelihatan atraktif para sobat blogger pasti tertarik dengan efek slide pada background.
Background tidak statis itu-itu saja tapi berganti gambar lain.

Jika sobat ingin mengetahui Cara Membuat Background Slideshow pada Blog simak yang berikut:

1. Siapkan 3 sampe 5 url wallpaper/background seukuran desktop
2. Load background dengan jquery dengan cara, letakkan kode berikut di atas </head>

<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'
type='text/javascript'></script>
<script
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'
type='text/javascript'></script>

3. Ubah css body minimal menjadi,

body {

background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4wvEmHDlUL09WxQuPyJHEvh63nBa1-sprNYVm0L_xL3-AAnLnSZHeWL89t4CF_iAYa5YwMnjTGy5lOk34nbn4sBtDN6gZ_FDWVUYFFjyKeUa3I-uDlssyxFL8SrUQHnGMdTrBzKklKI/s1600/eagle.jpg)
repeat-x fixed top
center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
background-size:100%;
}

3. Letakkan script berikut pada elemen layout "html/javascript"

<script type='text/javascript'>
var ssBG={
gbr:[
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH6yYBSXDMeBs6UYOqY1su569lr7H7r1RPUOVoYIqKKhuF382uIJrYyd_QvaiEY7Ks6_kQrVKyij4WjHQEkKnClgsPMG2hKczzLSdRU3cuhfW4AaLItFS9MailKrSKDa_zyuLSAd7Z3s8/s1600/eagle1.jpg"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjluijbStXMbb4QXHoI3hbefmBwP0d_JqLvHdp28vNTosRHnzKbzcCSXgbF-czBQTLH55HLHL34Vln0-3XHHzyVn0gz6mXOmLjxG74GHb5YR_ktuioskSzwIjYCQalsdow28nfSoLgoBA/s1600/eagle2.jpg",

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRUMQoaed9Vd5BO8q8Y2FVEussi4fqNLAxnX5IvMVWSGbQ_qG5NF14YfPmPX8ea6cL5n9km2X74DyvEejEDMhUhCYNIp_Cb2gNMZq87MaB5X0TJwHMsglRqkjWmXy-DPR7v2RXcwG0n8/s1600/eagle3.jpg"
],
now:0,
SlideMyBG:function(list,style,speed,bgPos,bgSize,bgRep){
if(!ssBG.SlideMyBG.hasRun){ssBG.SlideMyBG.hasRun=true;
if(list==null||list==''){list=ssBG.gbr}else{if(typeof
list!='object'){list=ssBG.gbr}}
if(style==null||style==''){style='random'}
if(speed==null||speed==''){speed=5000}
if(bgPos==null||bgPos==''){bgPos='top
center'}
if(bgSize==null||bgSize==''){bgSize='100%'}
if(bgRep==null||bgRep==''){bgRep='repeat'}
ssBG.gaya=style;ssBG.jeda=speed;ssBG.gbr=list;ssBG.pos=bgPos;ssBG.size=bgSize;ssBG.rep=bgRep;
ssBG.opt={'background-attachment':'fixed','background-repeat':ssBG.rep,'-moz-background-size':ssBG.size,'background-size':ssBG.size};
}
if(ssBG.gaya=='random'){ssBG.gbr=ssBG.gbr.sort(function(){return
0.5-Math.random()})}
var img=new Image();var
brp=ssBG.gbr.length;if(ssBG.now>=brp){ssBG.now=0}
var
gbrSkrng=ssBG.gbr[ssBG.now];ssBG.now++;
if($('#bg-fader').length==0){$('body').prepend('<div
id="bg-fader"
style="opacity:0.0;top:0;left:0;width:100%;height:100%;background-color:'+$('body').css('background-color')+'"></div>');$('#bg-fader').css(ssBG.opt);$('body').css(ssBG.opt)}
$(img).load(function(){
$('#bg-fader').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos}).animate({opacity:1.0},'slow','linear',function(){
$('body').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos});
$(this).animate({opacity:0.0},'slow','linear');
setTimeout("ssBG.SlideMyBG()",ssBG.jeda);
});
}).attr('src',gbrSkrng).error(function(huh){ssBG.SlideMyBG()});
}
};
</script>
<script
type='text/javascript'>$(window).load(function(){ssBG.SlideMyBG()})</script>

4. Langkah terakhir save dan lihat hasilnya.

Tambahan: agar background blog terlihat tidak kabur, pasanglah background
seukuran wallpaper desktop.

Labels: background

Blockquote Neon

Blockquote dapat di modifikasi bermacam2. Pada postingan yang akan saya berikan kali ini yaitu blockquote efek neon.

Cara:

1. Login blog
2. Template > Edit html
3. Letakkan kode css di dalam/bawah kode .post blockquote {

color:#ccc;background:transparent;box-shadow:#fff 0px 0px 4px, #fff 0px 0px 6px, #fff 0px 0px 10px, #fff 0px 0px 20px;

sehingga menjadi kode nya seperti ini,

.post blockquote {
color:#ccc;background:transparent;box-shadow:#fff 0px 0px 4px, #fff 0px 0px 6px, #fff 0px 0px 10px, #fff 0px 0px 20px;
}

4. selanjutnya, letakkan kode css di dalam/bawah kode .post blockquote:hover {

color:#ccc;
background:transparent;box-shadow:rgb(5, 213, 255) 0px 0px 4px, rgb(5, 213, 255) 0px 0px 6px, rgb(5, 213, 255) 0px 0px 10px, rgb(5, 213, 255) 0px 0px 20px;

sehingga menjadi kode nya seperti ini,

.post blockquote:hover {
color:#ccc;
background:transparent;box-shadow:rgb(5, 213, 255) 0px 0px 4px, rgb(5, 213, 255) 0px 0px 6px, rgb(5, 213, 255) 0px 0px 10px, rgb(5, 213, 255) 0px 0px 20px;
}

5. save template

Labels: blockquote

Efek blockquote Bergoyang

Blockquote adalah kutipan dari artikel yang dianggap penting atau memiliki arti khusus.
Tanda yang digunakan untuk menandai suatu tulisan yang penting, sehingga tampak berbeda dari tulisan yang lainnya.

CARA:
1. login blog
2. template > edit html
3. cari .post blockquote {
4. gantikan dengan kode

.post blockquote {
-webkit-user-select:text;
-moz-user-select:text;
-webkit-animation-name: shake;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background:#424242;
padding:15px;
border-top:3px solid #3c98e8;
border-bottom:5px double #366dbb;
border-right:1px dashed #3659a8;
border-left:1px dashed #3880d2;
color:#D1D1D1;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

5. cari post blockquote:hover atau blockquote a{ , di setiap template dapat berbeda kodenya. dan gantikan dengan kode css berikut:

blockquote:hover{
-webkit-animation-name: none;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
color:#fff;}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

6. Simpan template dan selesai.

Demikian cara membuat efek blockquote bergoyang pada blog.

Semoga tutorialnya bermanfaat.

Labels: blockquote

ash demo

Tuesday, October 14, 2014

Demo Javascript Stopwatch

Saturday, February 15, 2014

List Forum Dofollow

Title otomatis pada popular post

Friday, February 14, 2014

Energy Saving Mode pada Blog

Background Slide pada Blog

Thursday, February 13, 2014

Blockquote Neon

Efek blockquote Bergoyang

About Me

Links

Previous Posts

Archives