Selamat datang di blog Gamer'z Blogging Tutorial! Semoga segala yang ada disini bermanfaat bagi blogger semua! Sharing is caring!

TRANSLATE THIS PAGE

Pasang Favicon Blogger

Apakah favicon itu? Untuk lebih gampangnya, lihat saja pada address bar perambah (browser) Sampeyan. Di sebelah kiri URI http://kang.kombor.com ada foto Kang Kombor. Itulah yang disebut favicon.

Masih burem? Lihat saja gambar di bawah ini:

Foto Kang Kombor yang ganteng itulah yang disebut favicon.

Apakah mudah bikinnya?

Mudah sekali. Kita tidak usah pusing-pusing pakai perangkat lunak yang canggih. Cukup gunakan saja pembuat favicon online yang disediakan oleh HTML Kit. Alamatnya di http://html-kit.com/favicon
Langkah-langkah memasang favicon untuk blog Sampeyan di Blogger.com:

1. Buka http://html-kit.com/favicon

2. Pada gambar seperti di bawah, ini klik browse untuk mencari gambar di hard disk Sampeyan yang akan dipakai sebagai favicon.

3. Setelah gambar dipilih, klik Generate.

4. Klik Download pada hasil Sampeyan meng-generate favicon. Simpan di hard disk.

5. Extract file yang didownload.

6. Upload file favicon.ico ke internet. Kang Kombor sarankan upload saja ke Geocities. Yang belum punya account di Geocities, kalau sampeyan punya YM atau email Yahoo, silakan daftar saja. Lalu upload favicon.ico ke Geocities pakai File Manager yang ada di sana atau Upload Tool-nya.

File favicon.ico itu juga bisa diupload ke Googlepages. Silakan daftar ke http://pages.google.com kalau belum punya. Di bawah ini tampilan upload file di Googlepages:

7. Setelah file diupload ke Geocities atau Googlepages, klik kanan pada favicon.ico dan klik Copy image location. Simpan URI favicon.ico tersebut ke notepad. Sampeyan akan membutuhkannya nanti. Di bawah ini tampilan setelah file diupload ke Googlepages:


Memasang Favicon pada Blog Sampeyan di Blogger

1. Login ke Blogger.com

2. Pada Dashboard, klik Layout

3. Klik pada Edit HTML

4. Masukkan kode di bawah ini pada kode template Sampeyan di antara <head> dan </head>



<link rel="shortcut icon" href="URL-alamat-file-favicon.ico"/>

Catatan, URL-alamat-file-favicon.ico itu diganti dengan alamat file favicon yang tadi sudah Sampeyan kopi ke notepad, pakai http ya sehingga jadi http://Username-Sampeyan.googlepages.com/favicon.ico . Sebagai contoh punya Kang Kombor alamat file favicon.ico adalah http://kombor.googlepages.com/favicon.ico

5. Setelah selesai, Klik Save.

6. Silakan cek blog Sampeyan. Mestinya blog Sampeyan sudah memiliki favicon yang barusan Sampeyan bikin.

Gampang kan ya?

Mohon maaf yang di WP.com, sebelum Matt kasih fitur itu, Sampeyan puwas-puwasin dulu pakai logo huruf W dalam lingkaran itu yah. :)

Mohon masukan

Apakah tutorial ini mudah Sampeyan pahami?

Thx To Kang Kombor Site
Baca Selengkapnya »
at 5:14 AM 0 comments
Labels:

Membuat Text/Image Berjalan

Teks atau gambar berjalan banyak digunakan oleh para blogger karena disamping dapat menghemat tempat juga menarik untuk dilihat. Program yang demikian dikenal dengan nama Marquee.
Program marquee selalu diawali dan diakhiri dengan kata marquee yang kodenya seperti ini :<marquee>...</marquee>.
Diantara kedua kode tersebut,dapat kita tambahkan beberapa kode lainnya, agar penampilannya lebih menarik, misalnya :

1. Bgcolor="warna" : untuk mengatur latar belakang teks.
2. Direction="left/right/up/down" : untuk mengatur arah gerakan dari teks.
3. Behavior="scroll/slide/alternate" : untuk mengatur perilaku gerakan.
Scroll = teks bergerak sambil berputar.
Slide = teks bergerak sekali lalu berhenti.
Alternate = teks bergerak bolak-balik kekiri dan kekanan.
4. Title="judul" : title akan muncul saat mouse diarahkan ke tulisan.
5. Scrollmount="angka" : untuk mengatur kecepatan dalam pixel, makin besar angkanya makin cepat gerakannya.
6. Scrolldellay="angka" = Untuk mengatur waktu tunda gerakan dalam mili detik.
7. Width="lebar" = Mengatur lebar blok teks dalam pixel atau persen.



Untuk lebih jelasnya perhatikan contoh dibawah ini :

Efek marquee yang bergerak dari kiri kekanan :


<marquee align="center" direction="left" height="100" scrollamount="2" width="75%">
Selamat Datang di Gamer'z Blogging Tutorial
</marquee>kata left bisa anda ganti dengan right, up atau down sesuai dengan keinginan anda.


Untuk Melihat Efeknya Kami Sarankan anda ke http://www.gamerz-maniac.blogspot.com/

Efek marquee dengan perilaku gerakan :

<marquee align="center" direction="right" height="100" scrollamount="3" width="100%" behavior="alternate">
Selamat Datang di EPG Studio
</marquee>


Efek marquee dengan warna pada latar belakang :


<div align="left"><font face="georgia" color="yellow"><b><marquee bgcolor="blue" width="100%" scrollamount="3" behavior="alternate">
Selamat Datang di EPG Studio
</marquee></b></font></div>


Setelah anda memahami kode-kode diatas, sekarang anda dapat mengganti huruf dengan gambar/image.

Contoh :
<marquee align="center" direction="left" height="200" scrollamount="3" width="100%" >
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-010.jpg" target="_blank"><img width="150"src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-010.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-011.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-011.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-012.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-012.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-015.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-015.jpg" border="0" alt="Photobucket"></a>
</marquee>

kode-kode diatas terlihat seperti ini


Lihatlah pada http://www.gamerz-maniac.blogspot.com/


Perhatikan sederetan banner yang dipasang pada EPG Studio. Coba arahkan mouse pada gambar yang sedang berjalan.






Untuk membuat kode marquee seperti contoh diatas ( image/tulisan akan berhenti ketika mouse diarahkan diatasnya. Anda hanya perlu menambah kode ini onmouseover="this.stop()" dan kode onmouseout="this.start()"

Perhatikan contoh dibawah ini (kode dari banner di atas).


<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200" align="center">

<script src="epg-studio.blogspot.com"></script> <img border="0" width="220" src="http://1.bp.blogspot.com/_1j80TgNqd_8/SaESR56aNhI/AAAAAAAAAnY/3YSBhu-aHLU/S220/LOGO+EPG+1.jpg" height="40" />
<br/>
<a href="http://smpn1cbr.blogspot.com/"><img border="0" width="220" alt="Photobucket" src="http://i662.photobucket.com/albums/uu349/m4ns/smpn-1.gif" height="60" /></a><a target="_blank" href="http://gustihana.blogspot.com/">
<br/>
<img border="0" width="220" alt="Photobucket" src="http://i639.photobucket.com/albums/uu118/gustihana/melove-3-1.jpg" height="40" /></a><a href="http://budidhan.blogspot.com/" target="_blank"> <img border="0" width="220" alt="guru ganteng" src="http://i555.photobucket.com/albums/jj463/guruganteng/c495709ec87313.gif" height="40" /></a>
<br/>
<a target="_blank" href="http://agusfauzy.co.cc/"><img border="0" width="220" alt="mm" src="http://www.wargabisnis.com/image/agus03.gif" height="60" /></a><a href="http://anakwisma.blogspot.com/" target="_blank">
<br/>
<img border="0" width="220" alt="Gerobak Anak Wisma " src="http://i366.photobucket.com/albums/oo104/isdarmady/rpx.jpg" height="40" /></a><a href="http://tukeranlink.blogspot.com/" target="_blank">
<br/>
<img border="0" width="220" alt="Tukar Link" src="http://i184.photobucket.com/albums/x311/tukeranlink/Tukeranlink.gif" height="40" />
<br/>
</a><a target="_blank" href="http://www.gdpermana.blogspot.com/"><img border="0" width="220" alt="gd's blog" src="http://i381.photobucket.com/albums/oo253/gdpermana/cooltext415876826.jpg" height="40" /></a>

</marquee>


Selamat mencoba...!!

Baca Selengkapnya »
at 3:25 AM 0 comments
Labels:

Membuat Link Pelangi

* Sign ke Blogger dengan ID anda.
* Pilih Tata Letak.
* Pilih Elemen Halaman.
* Cari kode </head>.

<script src="http://h1.ripway.com/ades40/rainbow.js"/>


* Copy kode di atas dan paste tepat di bawah kode </head>




* Klik tombol Simpan Template...Lihat hasilnya.
Baca Selengkapnya »
at 3:14 AM 0 comments
Labels:

Membuat Kursor Bertabur Bintang

Kursor bertabur bintang...? Maksudenya kursor pada blog anda akan mengeluarkan bintang-bintang dan lebih asik lagi apabila korsor bergerak maka bintangnya akan bertaburan.
Terdapat 4 piliha warna bintang (biru, merah, hijau, putih dan ungu, pilihlah salah satu warna yang paling cocok dengan blog anda.
Ini caranya memasukan kedalam blog anda.

1. Sign ke Blogger.
2. Pilih Tata Letak.
3. Pilih Elemen Halaman.
4. Pilih HTML JavaScript. (klik tanda +)
5. Copy salah satu kode dibawah ini kemudian paste kedalam kotak HTML JavaScript.
6. Klik tombol Simpan.




KODE WARNA BINTANG:



* Bintang warna putih :


<script src="http://h1.ripway.com/ades40/bintangputih.js" type="text/javascript"></script>


* Bintang Warna Biru:


<script src="http://h1.ripway.com/ades40/bintangbiru.js" type="text/javascript"></script>




* Bintang Warna Merah:


<script src="http://h1.ripway.com/ades40/bintangmerah.js" type="text/javascript"></script>




* Bintang Warna Ungu:


<script src="http://h1.ripway.com/ades40/bintangungu.js" type="text/javascript"></script>



* Bintang Warna Hijau:


<script src="http://h1.ripway.com/ades40/bintanghijau.js" type="text/javascript"></script>



Mudah bukan....Silahkan anda coba...!!

Baca Selengkapnya »
at 3:11 AM 0 comments
Labels:

Membuat Navigation Halaman/Page Number

Widget ini berfungsi untuk membuka halaman belakang pada sebuah blog. Cara kerjanya praktis, anda tidak perlu membuka halaman demi halaman secara urut untuk menuju halaman akhir, cukup dengan melihat angka halaman, klik...maka halaman tersebut akan terbuka.
Mari...kita lihat cara menerapkannya...!!Lihat contoh dibawah ini :






* Sign ke Blogger dengan ID anda.
* Pilih Tata Letak.
* Pilih Elemen Halaman.
* Pilih Tambah Gadget.
* Pilih HTML/JavaScript.
* Copy kode dibawah ini kemudian masukan pada kolom konten.
* Klik tombol Simpan.
* Letakan widget dibagian bawah postingan blog
* Selesai.




KODE YANG HARUS ANDA COPY



<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

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

</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 = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



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="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" 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;"> <a href="http://hermanblogtips.blogspot.com">Grab this Widget ~ Navigasi Halaman</a></div>



Kode yang berwarna merah dapat anda ganti sesuai dengan kehendak anda :

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



Selamat mencoba...!!!
Baca Selengkapnya »
at 3:08 AM 0 comments
Labels:

Cara Membuat Read More Pada Postingan

Read more atau baca selanjutnya atau apapun sebutannya, yang penting postingan yang anda buat hanya tampil sebagian dan selengkapnya baru akan tampil jika anda atau pengunjung mengklik read more.
Membuat read more terdiri dari dua langkah utama yang keduanya berbeda satu sama linnya.
Ikuti langkah-langkahnya.
Sebelum anda melakukan pengeditan pada kode HTML, lakukan backup templat terlebih dahulu, agar jika terjadi kegagalan, anda telah memiliki simpanan Template yang dapat anda kembalikan.



A. Langkah Pertama


1. Login ke Blogger.
2. Pilih Tata Letak.
3. Pilih Pengaturan.
4. Pilih Format.
5. Pada bagian bawah pada menu : Template Posting terdapat sebuah kotak kosong. Anda isi dengan kode seperti ini.


<span class="fullpost">

</span>



6. Klik Simpan Pengaturan




B. Langkah Kedua


1. Pilih Tata Letak.

2. Pilih Edit HTML

3. Jangan lupa beri tanda contreng pada Expand Template Widget

4. Cari kode </head> kemudian copy seluruh kode dibawah ini dan letakan tepat diatas kode tadi


<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>



5. Cari kode<data:post.body/> kemudian copy seluruh kode dibawah ini dan letakan tepat dibawah kode tadi.
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>



Kata read more dapat anda ganti dengan kata yang anda sukai, misalnya : selengkapnya klik disini, baca kelanjutannya dll.



6. Klik Simpan Template. Selesai.




Cara Posting Artikel


Ketika akan membuat postingan, anda harus membukanya pada Edit HTML (bukan pada Compose), maka pada halaman postingan akan muncul kode seperti di bawah ini :


<span class="fullpost">

</span>



Ketiklah isi dari dari artikel anda yang akan ditampilkan pada halaman muka, diatas kode ini :


<span class="fullpost">



Sedangkan sisa artikelnya anda ketik setelah kode tadi atau tepat diatas kode ini :


</span>




Baca Selengkapnya »
at 3:08 AM 0 comments
Labels:

Menu Melayang Bisa Di Kiri dan di Kanan

Menampilkan menu melayang merupakan usaha peblogger untuk menghemat ruang blog, terutama yang isi dari blog sudah sangat banyak, baik label maupun post.
Menu melayang ini dapat kita tampilkan di bagian kiri maupun di bagian kanan blog, tinggal anda memilih mana yang lebih cocok untuk blog anda.
Post kali ini dikhususkan bagi anda yang ingin menampilkan menu melayang di sebelah kiri blog, sementara untuk menampilkan menu melayang akan dibuat pada post yang berbeda.
Ikuti langkah-langkahnya....

1. Masuk ke Blogger dengan ID anda.
2. Pilih Tata Letak kemudian klik Edit HTML.
3. Back up template dulu, kalau takut gagal.
4. Cari kode ini : </head> pada template anda.
5. Copy Seluruh kode dibawah ini, kemudian paste tepat diatas kode tadi :


<style>

#menu1 a {color:white;background-color:#3D81EE;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:white;text-decoration:none;}
#menu1 a:hover {color:brown;background-color:#0066CC}
#menu1 a:visited {color:yellow;text-decoration:none;}
</style>
<script language='JavaScript1.2' src='http://www.geocities.com/adestd40/mmenu.js'/>
<script>
resizereinit=true;

menu[1] = {
id:'menu1',
bartext:'MENU BLOG',
menupos:'left',
barbgcolor:"#003366",
barcolor:"WHITE",
barfontweight:"bold",
barfontsize:'100%',
bordercolor:'#000000',
fontsize:'100%',
linkheight:20 ,
hdingwidth:210 ,

menuItems:[
["Home", "http://epg-studio.blogspot.com", "_self"],
["Profil", "http://www.blogger.com/profile/14536802221205706514",""],
["Tutorial Blogger", "http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER", ""],
["Asesoris Blog", "http://epg-studio.blogspot.com/search/label/ASESORIS%20BLOG", ""],
["Traffic Blog", "http://epg-studio.blogspot.com/search/label/TRAFFIC%20BLOG", ""],
["Free Template", "http://epg-studio.blogspot.com/search/label/FREE%20TEMPLATE", ""],
["Free Download", "http://epg-studio.blogspot.com/search/label/FREE%20DOWNLOAD", ""],
["Anti Virus", "http://epg-studio.blogspot.com/search/label/ANTIVIRUS", ""],
["Informasi", "http://epg-studio.blogspot.com/search/label/INFORMASI", ""],
["Tukeran Link", "http://epg-studio.blogspot.com/2009/04/berita-bocornya-un-sma-2009.html", ""],
["Selingan", "http://epg-studio.blogspot.com/search/label/SELINGAN", ""],
["Bac To Top", "#", ""] //pada akhir entry jangan dikasih koma
]};
make_menus();
</script>



6. Data-data diatas merupakan data yang ditampilkan dalam menu melayang EPG Studio.
7. Gantilah yang bercetak merah dengan data-data yang ingin anda tampilkan.
8. Setelah selesai Klik Simpan Template.
9. Lihat Blog anda sekarang.
10. Selamat mencoba, semoga bermanfaat...!!!




Menu melayang diatas terletak di sebelah kiri, jika anda ingin mengubahnya jadi di sebelah kanan, ubahlah kata ini menupos:'left', menjadi begini menupos:'right'
Baca Selengkapnya »
at 2:50 AM 0 comments
Labels:

Menghilangkan Icon Quick Edit(Tang dan Obeng)

Icon tang dan obeng mrupakan icon yang berfungsi untuk pengeditan widget secara langsung dari blog tanpa harus masuk ke Elemen Halaman. Sebenarnya icon itu untuk memudahkan anda dalam melakukan pengeditan/memanage blog. Bentuknya seperti dibawah ini :


Mungkin diantara anda ada yang merasa kurang enak jika pada blog mucul icon tersebut pada setiap Elemen Halaman. Bagi anda yang berpandangan seperti itu ada solusi untuk menghilangkannya.
Silahkan anda simak :


* Sign ke Blogger.
* Pilih Tata Letak.
* Pilih Edit HTML.
* Backup dulu templatenya, untuk menjaga jika terjadi kegagalan.
* Beri tanda contreng pada Expand Widgets Templates.
* Cari kode <b:include name='quickedit'/>
* Hapus/delete kode tersebut.
* Kode <b:include name='quickedit'/> lebih dari satu, jadi anda harus mencari yang lainnya kemudian hapus/delete.
* Setelah selesai ,klik tombol Simpan Template. Lihat hasilnya.
* Jika masih ada yang muncul icon tang dan obengnya, berarti anda belum menghapus seluruh kode <b:include name='quickedit'/>
* Lakukan langkah seperti diatas untuk mencari kode <b:include name='quickedit'/> yang belum terhapus. Hapus semuanya.



TIPS PENCARIAN KODE SECARA CEPAT


* Klik meu Edit pada menu Browser atau tekan Ctrl + F. Muncul kotak Find seperti ini :



* Copy kode yang akan dicari kemudian paste pada kotak Cari yang tersedia.
* Klik tombol Find Next.
Baca Selengkapnya »
at 2:47 AM 0 comments
Labels:

Menambah Sidebar Menjadi (6 Buah)

Postingan ini dikhususkan untuk blog yang selama ini mengikuti postingan EPG Studio dan yang telah memiliki tiga sidebar yaitu sidebar atas dan yang duanya ada dibawah sidebar atas.
Jika anda belum melengkapi dengan ketiga sidebar tersebut silahkan kunjungi postingan ini untuk membuatnya :

* MENAMBAH SIDEBAR JADI DUA
* TAMBAH LAGI SIDEBAR BLOG ANDA JADI 3 BUAH


Setelah sidebar anda menjadi tiga, barulah anda lanjutkan baca postingan ini.

Tiga sidebar yang dimiliki EPG Studio diberi nama : Sidebar-wrapper, Sidebarbaru-wrapper dan Sidebaratas-wrapper.
Tiga sidebar yang akan ditambahkan harus memiliki ukuran yang sama dengan ketiga sidebar diatas dan penamaannya harus berbeda dengan nama sidebar yang telah ada.
Nama sidebar yang ditambahkan di blog EPG Studio diberi nama sebagai berikut :

1. Sidebartengah-wrapper : memiliki ukuran sama dengan sidebar atas wrapper.
2. Sidebarbawah-wrapper : memiliki ukura yang sama dengan sidebar-wrapper.
3. Sidebarbawahbaru-wrapper : memiliki ukuran yang sama dengan sidebarbaru-wrapper.


Setelah siap dengan nama ketiga sidebar yang akan ditambahkan, ikuti langkah-langkah berikut ini :

1. Masuk ke Edit HTML.
2. Back up dulu templatenya kalau takut gagal.
3. Cari kode ini :
#sidebarbaru-wrapper {
width: 230px;
float: right;background:#0066CC; border:0px solid $bordercolor;white;
padding:5px 5px .25em;
padding-left:5px;
word-wrap: break-word;
overflow: hidden;
}
(mungkin pada sebagian template memiliki istilah yang berbeda).
4. Copy kode dibawah ini kemudian paste tepat dibawah kode tadi :
#sidebartengah-wrapper {
border: 0px solid #0066CC;
background:#3D81EE;
width:470px;
float:right;
padding:5px;
margin-bottom:5px;
}

#sidebarbawah-wrapper {
width: 230px;
float: $endSide;background:#0066CC; border:0px solid $bordercolor;white;
padding:2.5px 2.5px 2.5px .5em;
word-wrap: break-word;
overflow: hidden;
}
#sidebarbawahbaru-wrapper {
width: 230px;
float: $endSide;background:#0066CC; border:0px solid $bordercolor;white;
padding:5px 5px .25em;
word-wrap: break-word;
overflow: hidden;
}

5. Selanjutnya cari kode ini :
<div id="sidebarbaru-wrapper">
<b:section class="sidebar" id="sidebarbaru" preferred="yes"></div><lu>

Copy kode dibawah ini kemudian paste tepat diatas kode tadi.


<div id='sidebarbawahbaru-wrapper'>
<b:section class='sidebarbawahbaru-wrapper' id='sidebarbarubawah-wrapper' showaddelement='yes'>
</b:section>
</div>

<div id='sidebarbawah-wrapper'>
<b:section class='sidebarbawah-wrapper' id='sidebarbawah-wrapper' showaddelement='yes'>
</b:section>
</div>

<div id='sidebartengah-wrapper'>
<b:section class='sidebaratas' id='sidebartengah' showaddelement='yes'>
</b:section>
</div>


6. Klik tombol Simpan template



Jika ingin sidebar yang baru kita tambahkan tampil dalan bentuk kotak-kotak, lakukanlah langkah-langkah berikut.

1. Masih di Edit HTML.
2. Cari kode ini .sidebaratas .widget{ untuk menempatkan sidebartengah .widget
3. Copy seluruh kode dibawah ini kemudian paste tepat dibawahnya.


.sidebartengah {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebartengah ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebartengah li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebartengah .widget{
background:#3D81EE;
border:2px solid #66B5FF;
margin:0 0 0em;
padding:0.5em;
}



4. Cari kode ini .sidebar .widget{ untuk meletakan .sidebarbawah-wrapper .widget{ dan .sidebarbawahbaru-wrapper .widget{
5. Copy seluruh kode dibawah ini dan paste tepat diatas kode .sidebar .widget{


.sidebarbawah-wrapper .widget{
background:#3D81EE;
border:2px solid #66B5FF;
margin:0 0 0.5em;
padding:0.5em;
}

.sidebarbawahbaru-wrapper .widget{
background:#3D81EE;
border:2px solid #66B5FF;
margin:0 0 0.5em;
padding:0.5em;
}

6. Warna yang digunakan pada tips ini semuanya merupakan warna yang digunakan pada EPG Studio. Silahkan anda ganti sesuai dengan warna kesukaan anda.
7. Setelah selsai pengeditan klik Tombol Simpan Template.
8. Isilah sidebar baru dengan sesuatu yang bermanfaat bagi blog anda.
9. Selamat mencoba, semoga berhasil dan bermanfaat...!!!
Baca Selengkapnya »
at 8:42 AM 0 comments
Labels:

Membuat Menu Melayang Kiri dan Kanan

Kali ini , saya memposkan tampilan ada dua menu melayang dibagian kiri dan kanan. Coba anda lihat contoh tersebut di blog saya... saya menggunakan yang kiri.... coba anda lihat: http://www.gamerz-maniac.blogspot.com/
Saya sengaja mempostkan ini karena banyak dari para blogger ingin membuat blog mereka lebih indah, dengan blog yang pernah mereka lihat. Untuk keperluan itulah, post menu melayang dijadikan dua versi dan versi yang lain saya akan poskan sebentar lagii... sehingga anda mempunyai pilihan, mana yang ingin ditampilkan pada blog masing-masing.
Ingin menampilkan menu melayang dikiri dan kanan blog....??Ikuti langkah-langkahnya...!!!

1. Masuk ke Blogger dengan ID anda.
2. Pilih Tata Letak kemudian Klik menu Edit HTML.
3. Back up dulu template anda, jika takut gagal.
4. Cari kode ini : </head> pada template anda.
5. Copy Seluruh kode dibawah ini, kemudian paste tepat diatas kode tadi :



<style>

#menu1 a {color:white;background-color:#3D81EE;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:white;text-decoration:none;}
#menu1 a:hover {color:brown;background-color:#0066CC}
#menu1 a:visited {color:yellow;text-decoration:none;}


#menu3 a { /*Menu3 Links*/
color:black;
background-color:#3D81EE;
text-decoration:none;
text-indent:1ex;
}
#menu3 a:hover {
color:white;background-color:#99C9FF;
}
#menu3 a:active {color:black;text-decoration:none;}
#menu3 a:visited {color:yellow;text-decoration:none;}

</style>
<script language='JavaScript1.2' src='http://www.geocities.com/adestd40/mmenu.js'/>
<script>
resizereinit=true;

menu[1] = {
id:'menu1',
bartext:'MENU BLOG',
barbgcolor:"#003366",
barcolor:"WHITE",
barfontweight:"bold",
barfontsize:'100%',
bordercolor:'#000000',
fontsize:'100%',
linkheight:20 ,
hdingwidth:210 ,

menuItems:[
["Home", "http://epg-studio.blogspot.com", "_self"],
["Profil", "http://www.blogger.com/profile/14536802221205706514",""],
["Tutorial Blogger", "http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER", ""],
["Asesoris Blog", "http://epg-studio.blogspot.com/search/label/ASESORIS%20BLOG", ""],
["Traffic Blog", "http://epg-studio.blogspot.com/search/label/TRAFFIC%20BLOG", ""],
["Free Template", "http://epg-studio.blogspot.com/search/label/FREE%20TEMPLATE", ""],
["Free Download", "http://epg-studio.blogspot.com/search/label/FREE%20DOWNLOAD", ""],
["Anti Virus", "http://epg-studio.blogspot.com/search/label/ANTIVIRUS", ""],
["Informasi", "http://epg-studio.blogspot.com/search/label/INFORMASI", ""],
["Tukeran Link", "http://epg-studio.blogspot.com/2009/04/berita-bocornya-un-sma-2009.html", ""],
["Selingan", "http://epg-studio.blogspot.com/search/label/SELINGAN", ""],
["Back To Top", "#", ""] //pada akhir entry jangan dikasih koma
]};

menu[3] = {
id:'menu3',
bartext:'MENU BLOG',
menupos:'right',
kviewtype:'fixed',
barbgcolor:"#003366",
barcolor:"white",
barfontweight:";bold",
bordercolor:'#000000',
hdingbgcolor:"#ffffff",
fontsize:'100%',
linkheight:20 ,
hdingwidth:210 ,

menuItems:[
["Home", "http://epg-studio.blogspot.com", "_self"],
["Profil", "http://www.blogger.com/profile/14536802221205706514",""],
["Tutorial Blogger", "http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER", ""],
["Asesoris Blog", "http://epg-studio.blogspot.com/search/label/ASESORIS%20BLOG", ""],
["Traffic Blog", "http://epg-studio.blogspot.com/search/label/TRAFFIC%20BLOG", ""],
["Free Template", "http://epg-studio.blogspot.com/search/label/FREE%20TEMPLATE", ""],
["Free Download", "http://epg-studio.blogspot.com/search/label/FREE%20DOWNLOAD", ""],
["Anti Virus", "http://epg-studio.blogspot.com/search/label/ANTIVIRUS", ""],
["Informasi", "http://epg-studio.blogspot.com/search/label/INFORMASI", ""],
["Tukeran Link", "http://epg-studio.blogspot.com/2009/04/berita-bocornya-un-sma-2009.html", ""],
["Selingan", "http://epg-studio.blogspot.com/search/label/SELINGAN", ""],
["Bach To Top", "#", ""] //pada akhir entry jangan dikasih koma
]};

make_menus();
</script >



6. Data-data diatas merupakan data yang ditampilkan dalam menu melayang EPG Studio.
7. Gantilah yang bercetak merah dengan data-data yang ingin anda tampilkan.
8. Setelah selesai Klik Simpan Template.
9. Lihat Blog anda sekarang.
10. Selamat mencoba, semoga bermanfaat...!!!
Baca Selengkapnya »
at 8:39 AM 0 comments
Labels:

Membuat Label Berputar (Label Clouds)

Lain ladang lain belalang. Begitu juga dalam pemasangan label blog ada yang menampilkan dalam bentuk deretan menu horizontal, menu vertikal, berdasarkan alphabet, berdasarkan tanggal dan yang lainnya. Untuk melengkapi keinginan para peblogger dalam menampilkan label, dalam post kali ini akan dibahas tentang label yang penampilannya selalu berputar atau lebih dikenal dengan nama label clouds.

Bagi yang ingin menampilkan label dam bentuk berputar (label clouds), silahkan anda ikuti langkah-langkah dibawah ini.

* Masuk ke Blogger dengan ID anda
* Pilih Tata Letak
* Pilih Edit HTML
* Kasi tanda contreng pada Expand Template Widget
* Back up dulu template kalau takut gagal
* Cari kode ini : <b:section class='sidebar' id='sidebar' preferred='yes'>
* Copy seluruh kode dibawah ini, kemudian paste tepat dibawah kode tadi.


<b:widget id='Label129' 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://h1.ripway.com/ades40/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.marewa.info'>marewa</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "100", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xfffffff");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='24'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
* Gantilah tulisan yang berwarna merah dengan tulisan yang ingin anda tampilkan

1. Angka 180 dan 100 merupakan width dan height dari label clouds, ganti oleh anda sesuai dengan ukuran lebar sidebar blog anda
2. Kode warna #000000 merupakan kode dari warna hitam yaitu warna dari lay out label clouds, gantilah dengan warna pilihan anda
3. Kode fffffff merupakan kode warna putih dari tulisan yang akan muncul, ganti kode warna tersebut dengan warna pilihan anda.
4. Angka 100 merupakan kecepatan perputarantulisan dalam label clouds, semakin besar angkanya semakin cepat berputarnya tulisan dalam label clouds, begitu juga sebaliknya bila angkanya makin kecil semakin lambat tulisannya berputar.
5. Angka 24 merupakan ukuran tulisan yang akan muncul di dalam label clouds, semakin besar angkanya semakin besar tulisan yang muncul, begitu juga sebaliknya semakin kecil angkanya semakin kecil pula tulisan yang muncul di dalam kabel clouds.
* Setelah selesai pengeditan klik tombol Simpan template.
* Lihat blog anda sekarang...!!!
Baca Selengkapnya »
at 8:38 AM 0 comments
Labels:

Widget Pengatur Halaman Kembali Ke Atas

Salah satu kesulitan membuat Tips Untuk Blogger Pemula adalah menampilkan judul postingan agar sewaktu dibaca oleh pengunjung langsung dipahami maksud dari tulisan judul tersebut. Tapi kalau hanya merenung lama untuk memikirkan judul post, Tips Untuk Blogger Pemula tidak akan selesai. Akhirnya jadilah judul seperti diatas dengan harapan anda tetap memahami maksudnya.
Tips kali ini membahas tentang sebuah tombol/widget yang apabila anda klik maka halaman postingan akan kembali ke bagian atas.
Cara menampilkannya, anda baca dibawah ini.

* Masuk ke Blogger
* Pilih tata letak
* Pilih Edit HTML
* Copy kode dibawah ini, kemudian paste tepat dibawah kode </body>


<a href='#' style='display:scroll;position:fixed;bottom:10px;right:10px;' title='Back to Top'><img src='isi dengan alamat gambar/image pada tabel dibawah'/></a>

* Ganti tulisan yang berwarna kuning dengan alamat image dibawah ini.
* Klik Simpan Template setelah selesai mengganti alamat gambar/image yang anda sukai



GAMBAR/IMAGE BESERTA KODE, SILAHKAN ANDA PILIH


(Panah Atas Berwarna Merah) http://i708.photobucket.com/albums/ww86/andiskapati/atasmerah.png
(Panah Atas Berwarna Hitam) http://i708.photobucket.com/albums/ww86/andiskapati/atashitam.png
(Panah Atas Berwarna Hijau) http://i708.photobucket.com/albums/ww86/andiskapati/atashijau.png
(Panah Atas Berwarna Biru Muda) http://i708.photobucket.com/albums/ww86/andiskapati/topbirumuda.png
(Panah Atas Berwarna Biru Tua) http://i708.photobucket.com/albums/ww86/andiskapati/topbirutua.png
(Panah Atas Berwarna Hijau) http://i708.photobucket.com/albums/ww86/andiskapati/tophijau.png
(Panah Atas Berwarna Merah Muda) http://i708.photobucket.com/albums/ww86/andiskapati/topmerahmuda.png
Baca Selengkapnya »
at 8:01 AM 0 comments
Labels:

Kisah Pertama

Halloo para gamerz... disini,lebih tepatnya di blog ini, saya pertama kalinya menyajikan informasi-informasi seputar tutorial blogging... sebenarnya,saya tidak tahu menahu bagaimana menjadi blogger... dulu saya adalah blogger yg sangat payah.. tetapi,saya ingin belajar dan teruz belajar...saya mengerti kelemahan saya sebagai blogger... oleh karena itu saya akan truz belajar dan belajar... mari kita meningkatkan wawasan kita sebagai blogger....
Baca Selengkapnya »
at 3:22 AM 0 comments
Labels:
Subscribe to: Posts (Atom)