Cara Membuat Label dengan Flash

Salah satu cara untuk menampilkan label atau kategori baik di sidebar maupun footer bisa dengan cloud ataupun baris ke bawah. Pada kesempatan ini Julak akan memberikan bagaimana cara membuat label/kategori dengan alternatif lain yaitu dengan tampilan bergerak / flash. Seperti pada tampilan gambar di bawah.

Untuk melihat live demonya silakan buka http://japrasi.blogspot.com

Baiklah langsung saja kita ikuti tutorialnya berikut ini:
1. Pertama login ke dasbor> Rancangan > Edit HTML > centang Expand Template, jangan lupa back up template dulu.

2. Cari kode di bawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

3. Masukkan kode di bawah ini, tepat di bawah kode  no 2 diatas.

<b:widget id='Label786' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script src='http://bloggerblogwidgets.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Flash Labels by <a href='http://www.way2blogging.org'>Way2Blogging</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging_tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;250&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#FFFFFF&quot;);
so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x000000&quot;);
so.addVariable(&quot;hicolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Klik Pratinjau lalu save template. Selesai dan label dengan flash sudah jadi.

    Selamat Mencoba.  

Share Otomatis Posting Blog ke Facebok dan Twitter

Share Otomatis Posting Blog ke Facebok, Twitter  dan  Jejaring Sosial lain.
Agar  postingan blog kita bisa dibaca/dikunjungi teman via jejaring sosial sepertifacebook dan twitter, mungkin terkadang kita mengcopy paste link tautan ke Beranda Facebook dan twitter. Sebetulnya banyak aplikasi share otomatis posting blog ke jejaring sosial, jadi kita tidak perlu lagi copy paste link tautan posting blog kita, misalnya via rss Graffiti, twitterfeed, dlvr.it, maupun via Networkedblogs.
Pada kesempatan ini Julak mau posting berkaitan dengan judul di atas yaitu share otomatis posting blog ke facebook dan twitter via dlvr.it. 
Saya sengaja pilih dlvr.it karena biasanya langsung otomatis share, sesaat setelah kita publikasi posting blog di blogger. Pernah saya coba Networkedblogs, namun agak lambat sharenya dan mengharuskan kita memasang widgetnya ke blog kita, dimana akan membuat loading blog akan lebih berat. 

Oke kita ikuti cara-caranya seperti berikut ini.

1. Pertama kita masuk ke http://app.dlvr.it/

2. Kemudian masukkan alamat email n password kita kemudian klik sign up.
3. Pada step 1 masukkan url / nama lengkap alamat blog kita. 

3. Langkah step 2 pilih share via facebook or twitter, pilih akun jejaring sosial di mana Anda sedang login di sini Saya pilih twitter dulu. Lalu klik continue.

4. Akan muncul ucapan selamat datang, kemudian klik + add untuk menambah tujuan share posting via twitter.

5. Selesai, jangan lupa masuk ke akun email pendaftaran untuk konfirmasi dlvr.it. Lihat posting blog kita akan otomatis terposting ke akun FB n twitter kita. Untuk pengaturan selanjutnya terserah Anda, hehehe.


6. Untuk menambah akun facebook atau facebook page yang akan diatur sebagai share otomatis postingan blog. Sebelumnya pastikan Sobat blogger login di akun facebook sobat. Klik add seperti gbr di bawah,

pilih akun yang akan di share otomatis, klik new pada logo facebook.

tunggu beberapa saat, muncul pop up

tunggu beberapa saat, kemudian klik tanda panah, pilih akun yang ada facebook page atau akun pribadi. 
> closing window setelah itu muncul "account authorized" klik save. 

Cara Menghilangkan Label Posting Blogger

Source: http://www.bloggeries.com/forum/blogging-basics/6247-how-hide-labels-blog-post-footer.html Klik tab 'Tata Letak', klik sub-tab 'Edit HTML', klik 'Expand Widget Templates'. Jangan lupa backup template Anda. Cari kode berikut dan hapus:

<b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if>

Selamat mencoba.

Cara membuat icon twitter burung terbang mengikuti mouse

Widget ini berfungsi sebagai sarana umempermudah pengunjung blog untuk memfollow twiiter blog, Dengan menambahkan icon twiiter di blog agar twitter anda di follow berikut caranya
Caranya cukup mudah
1. Anda silahkan login ke blog anda
2. Menuju menu tambahkan widget edit HTML/javascript
3. Dan sekarang copy kode dibawah ini
dan paste pada kolom HTML/java script tadi.
 

<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>

<script type="text/javascript">

var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";

var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");

var twitterAccount = "http://twitter.com/techgyo";var tweetThisText
= "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();

</script>

<a id="theBird" href="http://twitter.com/akuntwittersobat"
target="_blank" style="display: block; position: absolute; width:
64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png);
background-attachment: initial; background-origin: initial; background-clip:
initial; background-color: transparent; z-index: 947; left: 0px; top: 587px;
background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a>

<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/"
target="_blank" title="tweet this" style="position:
absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png);
background-attachment: initial; background-origin: initial; background-clip:
initial; background-color: transparent; width: 58px; height: 30px; z-index:
951; left: 49px; top: 583px; display: none; opacity: 0; background-position:
-64px 0px; background-repeat: no-repeat no-repeat; "></a>

<a id="theBirdLfollow" href="http://twitter.com/techgyo"
target="_blank" title="follow me" style="position:
absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png);
background-attachment: initial; background-origin: initial; background-clip:
initial; background-color: transparent; width: 58px; height: 20px; z-index:
952; left: 54px; top: 613px; display: none; opacity: 0; background-position:
-64px -30px; background-repeat: no-repeat no-repeat; "></a>

Ganti text yang berwarna hijau dengan URL twitter sobat blog dan setelah selesai sekarang save. Semoga bermanfaat tutorial ini semoga blog anda menjadi banyak pengunjung.

Membuat menu chating di blog dengan Envolve chat

Membuat menu chating di blog. Chating merupakan sarana berkomunikasi dengan banyak orang melalui pesan text seperti facebook ada fitur chatingnya. Tips berikut ini merupakan membuat menu chating di blog layaknya facebook. Untuk lebih jelas dan detailnya silahkan klik DEMO setelah anda klik demo pada blog tersebut pada bagian bawahnya terdapat menu chatingnya. Cara membuat menu chating di blog dengan Envolve chat sangat mudah. Caranya anda harus mendaftar dahulu di www.envolve.com dan klik sign up caranya mudah ikuti saja aturan pendaftarannya seperti pada gambar dibawah ini :

Setelah anda klik sign up akan muncul menu formulir pendaftarannya silahkan isi seperti pada gambar diatas dan bila sudah jangan lupa klik create.

Setelah anda klik create akan muncul menu selanjutnya nah disini silahkan pilih blog yang anda gunakan misalnya blogspot pilih atau arahkan pada other nantinya akan keluar kode script yang harus anda letakan pada blog anda. Bila sudah muncul kode script seperti gambar diatas silahkan copy kemudian login blog anda dan pilih menu edit HTML jangan lupa memberi tanda centang pada Expand template widget cari kode
dan letakan kode envolve tadi diatasnya. Selamat mencoba semoga bermanfaat

Cara menambahkan tanda tangan ke dalam postingan blog

Cara menambahkan tanda tangan ke dalam postingan blog. Cara ini dapat membuat blog anda menjadi lebih keren karena adanya tanda tangan didalam postingan jadi seolah-olah anda menambahkan tanda tangan di akhir postingan. Tips menambahkan tanda tangan ini dapat anda coba dengan cara:
1. Silahkan kunjungi http://mylivesignature.com
2. Klik menu proceed
3. Pilih menu Using the signature creation wizard
4. Masukan nama anda atau nama panggilan kemudian klik next seperti gambar dibawah ini.

5. Kemudian siliahkan pilih jenis tampilan tanda tangan yang ingin anda pergunakan pada halaman tersebut
    ada 1-120 pilihan tanda tangan. Jangan lupa klik next step

6. Sekarang memilih ukuran tampilannya bila sudah klik next step
7. Nah sekarang mengatur warna untuk kode warna bisa anda lihat disini bila sudah klik next step.
8. Kemudian memilih gaya penulisannya ada yang miring ada yang standart bila sudah klik next step.
9. Hampir selesai sekarang klik menu Want to use this signature?.
10. Pilih Generate HTML code terus Generate a code for my handwritten signature.
11. Sekarang copy kodenya dan letakan disetiap akhir postingan.

Sekedar tips:
Bila gambar di klik agar selalu ke halaman blog anda silahkan ganti url http://www.mylivesignature.com dengan alamat blog anda misalnya seperti dibawah ini

http://www.mylivesignature.com/" target="_blank">

menjadi

http://madiuncool.blogspot.com/" target="_blank">

Selamat mencoba semoga bermanfaat.

Kode script membuat efek baground blog menjadi bergerak

Kode script membuat efek baground blog menjadi bergerak, Membuat efek baground blog menjadi bergerak. Bingung juga memberi nama judul posting kali ini yang penting intinya seperti itu. Utuk lebih detailnya bisa anda lihat DEMO Bagaimana? Sudah paham dengan yang saya maksud?? 

Caranya mudah ikuti langkahnya dibawah ini:

1. Login blog kemudian menuju menu edit tata letak
2. Pilih menu tambahkan widget
3. Pilih menu HTML/javascript kemudian copy kode dibawah ini dan paste kan pada HTML/javascript tadi.

<script type="text/javascript">
// <![CDATA[
var border=50; // how wide is each border
var effects=3; // how many of the effect are on the page
var speed=50; // how fast is the animation (lower is faster)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)


var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}

var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}

function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}

function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script><script type="text/javascript">
// <![CDATA[
var border=50; // how wide is each border
var effects=3; // how many of the effect are on the page
var speed=50; // how fast is the animation (lower is faster)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)


var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}

var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}

function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}

function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>

Setelah selesai jangan lupa simpan atau save. Untuk mengetahui hasilnya silahkan klik DEMO. Selamat mencoba semoga menambah pengetahuan anda.

Cara menambahkan musik mp3 atau lagu kesayangan di blog

Cara menambahkan musik mp3 atau lagu kesayangan di blog. Ada yang mengatakan hidup tanpa musik jadi hampa pastinya yang berkata demikian suka sekali mendengarkan musik. Apalagi yang kita dengarkan musik kesayangan. Wah jadi betah neh pengunjung blog hehehe...amin. Ok langsung saja tips kali ini membahas tentang cara menambahkan musik mp3 atau lagu kesayangan di blog. Misalkan lagu Dear God dari Avenged sevenfold dibawah ini sobat blog dapat memainkan atau memutar lagu dengan menekan tombol play.

Now Playing: Avenged sevenfold - Dear God.mp3

Bagaimana menurut anda mantap kan. Untuk cara menambahkannya pada blog yaitu. Copy kode dibawah ini dan letakan pada menu widget HTML/javascript.

Avenged sevenfold - Dear God.mp3">Now Playing: Avenged sevenfold - Dear God.mp3

http://www.4shared.com/embed/245582117/606875e7" width="250" height="22" allowfullscreen="true" allowscriptaccess="always">

Ket:
Warna hijau: Ganti dengan judul lagu yang sobat ingin
Warna pink: Ganti dengan url lagu sobat di 4shared caranya
Silahkan sobat blog cari atau upload lagu di 4shared
Pada menu download silahkan klik Embed nya seperti gambar berikut.

Kemudian copy code tetapi hanya url nya saja misalnya
http://www.4shared.com/embed/245582117/606875e7
kemudian simpan. Semoga tips cara menambahkan musik atau lagu kesayangan di blog ini bermanfaat.

Cara menghilangkan langgan entri atom

Cara menghilangkan langgan entri atom. Pada dasarnya langgan entri atom disediakan google yang memiliki fungsi yaitu mempermudah pengunjung berlangganan feed artikel postingan blog anda. Namun kadang lokasinya sedikit menggangu bagi sebagian bloger dan menghapusnya.

Nah cara mudah menghilangkan langgan entri atom adalah sebagai berikut:
1. Login blog anda
2. Menuju menu edit HTML
3. Beri tanda centang pada Expand widget template
4. Cari kode dibawah ini dengan menekan F3 atau CTRL+F pada keyboard anda.

]]>

5. Bila kode sudah ditemukan sekarang copy kode dibawah ini dan letakan diatas kode no 4 tadi.

.feed-links{

display:none;

}

Bila sudah selesai simpan template anda dan silahkan di cek. Selamat mencoba semoga bermanfaat.

Cara membuat page navigasi dibawah postingan pada blog

&lt;p&gt;Your browser does not support iframes.&lt;/p&gt; Cara membuat page navigasi dibawah postingan pada blog. Seperti pada gambar tersebut merupakan navigasi page pada blog. Navigasi blog itu sendiri memudahkan kita dan pengunjung blog menelusuri setiap halaman postingan. Kebanyakan template download secara gratis di luar sana menggunakan navigasi page. bila blog anda ingin seperti ini cukup mudah. Silahkan login blog anda kemudian menuju menu design. Tambahkan widget HTML/javascript.

Copy kode script dibawah ini

<style>
.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"></div>

Setelah anda copy letakan pada widget HTML/javascript tadi jangan lupa save. Sekarang silahkan di cek sudah berhasil apa belum. bila belum berhasil mungkin ada kode yang terlewatkan sa'at di copy tadi. Semoga bermanfaat tutorial ini jangan lupa tinggalkan komentar anda.

Cara Memasang Gambar di Sebelah Kiri Halaman Blog (Floating Image)

Postingan yang kali ini sobat blogger baca adalah tentang cara memasang gambar di sebelah kiri halaman blog. Postingan ini Rinjani Lovers publikasikan karena kebetulan salah seorang dari rekan sesama blogger sempat bertanya melalui kolom komentar.
“gimana, cara menampilkan foto seperti gambar sampean n langsung terhubung ke facebook”
Sebenarnya, ada beberapa alasan sehingga blog ini memasang gambar tersebut di sebelah kiri :

• Pertama, karena saya ingin blog ini terlihat beda dengan blog-blog yang lain (Bukan mau pamer muka).
• Kedua, supaya pengunjung blog bisa berinteraksi secara langsung dengan saya melalui situs jejaring sosial Facebook. 

Untuk membuat gambar tampil di sebelah kiri halaman blog, sudah pasti sobat blogger harus memiliki foto atau gambar yang akan ditampilkan.
Kalau sobat blogger sudah memiliki gambar, sobat Upload gambar tersebut ke PhotoBucket misalnya atau ke website-website penyimpanan gambar yang lain.
Kalau kedua hal itu sudah siap, ikuti langkan di bawah ini.

Cara menampilkan gambar di sebelah kiri halaman blog :

• Sobat Login dulu di blog sobat
• Pilih tata letak lalu klik Edit HTML
• Kasih tanda centang pada Expand Widget Template
• Copy kode berikut :

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }

• Paste kode tersebut sebelum kode ]]></b:skin>
• Selanjutnya, copy kode berikut :

<div id="trik_pojok"><br /><a href="http://www.facebook.com/januarisahpratamasiagian"><br /><img src="URL GAMBAR" border="0" /></a><br /></div>

• Paste kode tersebut sebelum kode </body>
• Simpan Template sobat

Tambahan :
http://www.facebook.com/januarisahpratamasiagian bisa di ganti dengan URL Facebook, URL Twitter, atau URL Blog sobat
Ganti URL GAMBAR dengan URL gambar sobat

Kalau sobat blogger mengalami kesulitan dalam membuat gambar di sebelah kiri halaman blog, silahkan sobat blogger bertanya melalui kolom komentar. Dengan senang hati Januarisah Pratama siagian akan jawab.

Cara Membuat Contact Us

Cara membuat Contact Us Blogspot dan Wordpress menggunakan HTML, contohnya anda bisa lihat disini. Kali ini saya akan memberikan tutorial cara membuat Contact Us di blogspot atau wordpress dengan bantuan situs pembuat kode html contact form. Saya rasa semua blogger pasti memberikan menu contact us pada blog mereka, mungkin ada sebagian yang kesulitan dalam membuat menu contact us.

Bagaimana Cara membuat menu Contact Us ?

Pertanyaan yang sering saya dengar sampai saat ini. Sebenarnya cara membuat contact Us tidak terlalu sulit. Ok langsung saja, dari pada capek basa-basi silahkan ikuti langkah-langkah cara membuat contact us dibawah ini.

Langkah-langkah cara membuat Contact Us :

• Siapkan email anda untuk proses pendaftaran.
• Kunjungi www.123contactform.com dan lakukan pendaftaran disana, ingat pilihlah yang gartis. Kalau ada $$ lebih bagus lagi pilih yang berbayar ( fiturnya lebih lengkap )
• Setelah melakukan pendaftaran silahkan cek email anda untuk verifikasi pendaftaran.
• Login akun anda dan Creat New Form pilih Contact Form setelah itu beri judul Formnya (tidak pakai judul juga tidak apa-apa)
• Disininah kemampuan anda mendesain form tersebut ( bebas yang anda suka )
• Apabila sudah selesai klik Continue dan anda akan menemui hal seperti dibawah ini

• No 1 adalah email yang akan menerima pesan apabila ada yang menghubungi anda lewat form tersebut. Jadi anda haru centang disebelah email. Anda juga bisa menambh email yang akan menerima pesannya dengan cara klik add notification diatas email tsb. Maaf g masuk SS hehe.
• No 2 adalah pesan yang akan tampil setelah pesan terkirim. Anda bisa mengubahnya sesuai keinginan anda, misalnya " Terima kasih sudah menghubungi kami " dll.
• Kalau sudah anda bisa klik continue dibagian kanan atas.
• Sekarang anda tinggal pilih form tersebut ingin di pasang dimana dan beberapa pilihan kode. lihat gambar dibawah ini.

• Silahkan dipilih sesuai yang anda inginkan dan anda akan di suguhi kode. langkah selanjutnya copy kodenya dan paste di halaman contact Us anda. Untuk wordpress anda hanya diberikan kode formnya.

Cara membuat Contact Us semacam ini mirip sekali dengan Emailme Form. Kelebihan cara membuat Contact Us ini yaitu pada waktu redirect akan tetap pada halaman blog, ada pilihan untuk mengganti Layout atau tema belakang. Dan desain contact us ini bagus dan mudah. Sampai disini dan semoga artikel cara membuat contact us ini bermanfaat bagi anda yang membutuhkan.

Cara Membuat Read More Otomatis di Blog

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?

Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

Langkah-langkah cara membuat Read More Otomatis di Blogspot

• Login ke Blog anda
• Buka halaman design > Edit HTML > centang Expand template widget
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
• Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :

1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

Membuat Navigasi Nomer Halaman Blog untuk blogger / blogspot

Navigasi nomer halaman blogger ini intinya sebagai pengganti dari blog pager. Tentunya navigasi halaman bernomer ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada. Lihat contohnya di bawah ini.

Lihat juga contohnya pada blog Template Blogger, nah kalau yang ini beda lagi desainnya hehe. Buat anda yang sudah bisa edit css, bisa langsung edit sendiri tampilannya. Tapi tanpa di edit sudah bagus kok, terlihat lebih profesional dari pada tampilan "Older Post" atau "Posting Sebelumnya" dll. Bagaimana cara membuat navigasi nomer halaman blog di blogger? yoi lanjut baca tutorialnya di bawah ini.

Cara Membuat Navigasi Nomer Halaman Blogger

• Login ke blog anda  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
• Cari kode ]]> lalu paste Css di bawah ini tepat di atas kode ]]>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Langkah selanjutnya anda cari kode , kalau sudah ketemu paste kode berikut ini tepat di atas kode