Cara Menambah Elemen Baru Dibawah Header

Waktu blog walking or silaturahim dibeberapa blog teman, diantara beberapa blog teman saya liat dibawah headernya sebelum postingan banyak aksesoris blognya, ragam widget salam sapa tuk pengunjunglah, bannerlah, iklanlah dan lah lah lainnya deh. Bermula dari awal ketertarikan itulah (lah lagi?), timbul hasrat saya tuk exsperimen kecil. Saya penasaran kok di template saya ngga ada dibagian elemen halaman kolom untuk menambah  gadget dibawah header ya?
Maka mulailah saya selancar dengan browsing, nanya kepaman google. Akhirnya nemu deh caranya, dipraktekkanpun langsung jadi karena rupanya tidak terlalu sulit, hanya butuh ketelitian dan kesabaran dikit ja…Alhamdulillah hasilnya dah tengokkan salam sebelum postingan blog ni?
Nah ni saya bagi tutorialnya buat teman teman.

 Bagaimana menambah elemen halaman tepat dibawah header…

• Anda mesti dalam keadaan log in ke blogger.
• Masuk menu tata letak=>Edit HTML. Untuk mengantisipasi hal yang tidak anda inginkan, baiknya download lengkap dulu (backup) dulu template anda. Kalau saya langsung aja, he2.
• Jangan lupa untuk mencentang kotak kecil Expand Template Widget.
• Copi kode warna merah berikut, paste diatas kode ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:100%;
}

• Cari kode seperti ini:

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
    </div>

• Paste kode warna merah berikut dibawah kode tadi

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

• Langkah terakhir tinggal save template.

Coba sekarang lihat ke elemen halaman udah ada laman atau kolom untuk tambah gadgetnya apa belum? Kalau belum mungkin ada yang keliru, coba lagi! 

Read More

Pasang iklan/banner

Pasang iklan/banner anda di sini secara gratiss atau free secara 2 bulan buat sobat blogger yang ingin harap mengisi data data seperti begini :

Nama:

url blog/wordpress sobat:

url yang mau di passang iklan/banner bersama url gambar sobat:

(ex:http://www.rifqijhs51.blogspot.com gambar : http://i1102.photobucket.com/albums/g457/rifqirafifakbar/oj.png)

setelah itu post disini atau bisa juga pesan di bawah ini :

-Facebook : http://www.facebook.com/rifqirafif.akbar

-Yahoo massenger : rifqi.avamaker 

buruan slot cuman 4 ajah..

setelah masa berlaku habis sobat bisa melakukan lagi kalau mau tetap di promosikan  secara membayar dengan berbayar :

1 bulan : $.2.5 /Rp.20.000,-

3 bulan : $.6 /Rp.48.000,-

5 bulan : $8 /Rp.64.000,-

untuk via transfer harap menghubungi saya ke facebook maupun yahoo...

via transfer:

-Bca

-Paypal

Read More

Membuat Read More di Blogspot II

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk keEdit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
• Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin>seperti dibawah ini :
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
• Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template anda dan tambahkan kode berikut tepat dibawahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
• Nah supaya terpotong, setiap kali anda menulis artikel posting, klik pada bagian artikel dimana anda  pengen tulisan Read More.. muncul, lalu  ketik <span class=”fullpost”> kemudian lanjutkan sisa artikel  sampai selesai, akhiri dengan mengetik  </span>.  Untuk menmbahkan kode ini, ketika menulis artikel, anda harus dalam mode Edit HTML bukan Compose
• Tulisan Read More.. seperti yang berwarna merah pada kode diatas, bisa anda ganti dengan tulisan lain seperti Baca Selengkapnya.. atau Lanjut Baca..

Read More

cara mengganti Cursorr II

 Sahabat blogger anda bosen cursornya standar??ga usah kawatir saya akan memberikan tips mengubah cursor :D lebih keren dan lebih pantes buat blogger para sahabat

pertama tama:
-Masuk ke edit HTML
-cari kode <head> dengan menggunakan CTRL+F
-setelah itu copy cursor di bawah ini yang kalian suka

<style type="text/css"> HTML,BODY{cursor: url("http://lh4.googleusercontent.com/-PH9siQclQYs/Tf9BxpZe5ZI/AAAAAAAAAT4/QEYG7liEf14/aku-punya-com-Firefox-Icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh5.googleusercontent.com/-qZgkC9kdPNM/Tf9B0GRZwPI/AAAAAAAAAT8/D5HJa-gE_YQ/aku-punya-com-Google-Icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh5.googleusercontent.com/-pa1J0pN_ExU/Tf9B3no_g6I/AAAAAAAAAUA/E8xon1wrELo/aku-punya-com-Help-Icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh5.googleusercontent.com/-Au3iq3_ZKlU/Tf9B5tKn7aI/AAAAAAAAAUE/DLAzbXjMuig/aku-punya-com-Major-Grade-1.gif"), default;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://lh3.googleusercontent.com/-iRQgyu8GhR0/Tf9B8OsDg4I/AAAAAAAAAUI/fPnsOLmTP-o/aku-punya-com-Point-Blank-Icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMmTeL8U8GcGQMlyxl7kV8tKmKhlw1J1zL8LTtYkojrOxzJFudBPQxTyW_f1RUDlg0sOEepX_1Z41Dkc1cjSvzawbnTfrZBbQYOC4KTNWlpySP8VWZrPa8n1sBhL6VpgL5ObpKRbz21E/s400/aku-punya-com-PB-cursor.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicp7RSHTjc7H0nZi2QGH7sE8qDP_iOW4-YX9jlsHF3XG8dZf3zIKv1aRG_GUD22nfxiDW8BFjLOMhVRJQ7XDYu1JjZRajr8bB4DmTC-94WB3MstvfTP9O06eU0idMBJktoi37hWjNZNHE/s400/aku-punya-com-Bold-Arrow.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT020oPanyIpcaBu0iHYI1HwSOodJTgagedn87yhZmkxuHELKMgAkSo8Bhf4bjk8H03h3yBCiqXl6Sj9CrCN3p2WpN8qZndfSGOXvlmsGLGTp1Z6u-tG6R8oMAGs7if5PmF1LcxwL8x0s/s400/aku-punya-com-Bold-Cross.gif"), default;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://lh3.googleusercontent.com/-m9GqBYU4psY/TiKLC4WtEGI/AAAAAAAAAWw/9LBui7i_ub8/aku-punya-com-Pulpen-icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh6.googleusercontent.com/-V7NWUix4UF8/TiKOwRr-BxI/AAAAAAAAAW0/0EPfsRcGwcg/aku-punya-com-Jam-Pasir-icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh6.googleusercontent.com/-SyjetbDmyCA/TigVjqn_m2I/AAAAAAAAAXA/PymY76reN9o/aku-punya-com-Chrome-Icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh5.googleusercontent.com/-w4gUbxLgVxE/TigVoQEziqI/AAAAAAAAAXE/lIDQ70MjuZ8/aku-punya-com-Daur-Ulang-icon.gif"), default;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://lh4.googleusercontent.com/-0gI5HI_4ic4/TigVrMV7izI/AAAAAAAAAXI/-14Gn3tf4zQ/aku-punya-com-Tempat-Sampah-icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh5.googleusercontent.com/-jg-qPZR1FHk/TigVtRofMdI/AAAAAAAAAXM/6LEGBP--xcI/aku-punya-com-Spatula-icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh6.googleusercontent.com/-FMyM0Mv_Lbg/TigaLsgTHiI/AAAAAAAAAXY/8Tlv8kAvFRQ/aku-punya-com-Gmail-Icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh6.googleusercontent.com/-nxAlEn8TuOQ/TiuxM72T5jI/AAAAAAAAAX4/3ks5MCIYnuo/aku-punya-com-Kunai-icon.gif"), default;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://lh3.googleusercontent.com/-5dwqhWze3tc/TjgELUNRQjI/AAAAAAAAAaI/mOk2oaCdiqQ/aku-punya-com-Android-icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh3.googleusercontent.com/-M6Mhb_LKEKk/TjgENTKZ2dI/AAAAAAAAAaM/MfdJFdLNOtU/aku-punya-com-CocaCola-can.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh4.googleusercontent.com/-mDjV9O05_HI/TjgEQtmhSmI/AAAAAAAAAaQ/0Z5x_9vmm5k/aku-punya-com-Search-icon.gif"), default;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://lh5.googleusercontent.com/-ZdJLqH3s9n8/TjgIUmheGcI/AAAAAAAAAag/tQduvgxQhAg/aku-punya-com-Shaun-icon.gif"), default;} </style>

<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/ddrarrowpink.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/ddrarrowpink.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/aliendance.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/monkeyani.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/sparklepink.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/sparklepink.gif"), auto;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/spongebob-ani.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/spongebob-ani.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/appletm.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/apple-tm.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/volcomstoneani.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/volcomstoneani.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/bigboo.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/bigboo.gif"), auto;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/blackjack.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/blackjack.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/frog26workinginbackground.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/frog26workinginbackground.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/babyrollani.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/baby-roll-ani.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/bullseye-ani.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif"), auto;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/earth2.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/earth2.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/drool.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/drool.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/eye.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/eye.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/flameorange.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/flameorange.gif"), auto;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/guitarflash.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/guitarflash.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/indonesia.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/indonesia.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/monkeydance3.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/monkeydance3.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/orbit04.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/orbit04.gif"), auto;} </style>
<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/playboybunnieani.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/playboybunny-ani.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/rainbow-ani.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/rainbow-ani.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/rabbitdance.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/rabbitdance.gif"), auto;} </style>	<style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/sleepani.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/sleepani.gif"), auto;} </style>

Read More

Teks Mengikuti Cursor

sesuai judul saya akan memberikan tips bagaimana teks mengikuti Cursor

Login Jangan Lupa
Masuk ke Rancangan >> Element Halaman
Tambah Gedget >> HTML/JavaScript
Masukin Code Berikut :

<script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='Belajar sambil online';//ganti message-nya

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-15; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=20; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#FF0000"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-100;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-100);
moveid(txtA[i],0,-100);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}

</script>

Ganti Teks Yang bewarna Merah Dengan nama anda atau yang laen ...

Last > Klik Simpan ..
:D 

Read More

Cara membuat popular post di blogspot

Sesuai judul, kali ini kita belajar membuat widget popular post di blogspot. nanti widget ini bisa kita tampilkan di sidebar blog sobat masing-masing. fungsinya adalah untuk menampilkan postingan paling populer menurut jumlah comment terbanyak.

lho bukanya semua udah tahu cara buat widget popular post. emang iya sih, tapi kali ini kita mau belajar buat popular post versi terbaru karena yang lama saya rasa terkadang tidak dapat berfungsi dengan baik. ya udah langsung aja yuk kita simak cara bikinnya. gampang kok.

Pertama. masuk dulu dong ke account blogger sobat masing-masing.

kedua. cari menu rancangan - elemen laman

ketiga. silahkan sobat mau ditempatkan sidebar mana, terserah sobat. klik menu tambah gadget-html/javascript.

keempat. silahkan copy script dibawah lalu paste-kan di gadget html tersebut.

<script language='javascript'>

aBold = false;

numposts=200;

maxshowresult=7;

home_page = "http://Blogsobat.blogspot.com/";

</script>

<script type='text/javascript'>

//<![CDATA[

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>

</script>

Keterangan untuk yang cetak merah
(abold= false;)        = bisa dirubah menjadi true jika ingin tulisanya menjadi cetak tebal.
(numposts=200;)    = hasil dari penelusuran 200 postingan
(maxshowresult=7;)= jumlah popular post yang ingin ditampilkan
home_page            = rubah dengan URL blog sobat


kelima. klik simpan, Selesai
silahkan lihat hasilnya.

Read More