TERCELA: TUTORIAL BLOG

Showing posts with label TUTORIAL BLOG. Show all posts

Cara Buat Tulisan Jadi Unik Pada Cbox ( Chat Box )

))Membuat Tulisan Tebal

Caranya dengan meletakkan tulisan yang ingin di buat tebal diantara kode [b] dan [/b].

Contoh : [b] Moc Pekanbaru [/b]

Hasil  : Moc Pekanbaru

)) Membuat Tulisan Miring

Caranya dengan meletakkan tulisan yang ingin di buat miring diantara kode [i] dan [/i]

Contoh : [i] Moc Pekanbaru [/i]

Hasil  : Moc Pekanbaru 

)) Membuat Tulisan Bergaris Bawah

Caranya dengan membuat tulisan yang ingin dibuat bergaris bawah diantara kode [u] dan [/u]

Contoh : [u] Moc Pekanbaru [/u]

Hasil  : Moc Pekanbaru 

)) Membuat Teks Berukuran Besar

Caranya letakkan teks diantara kode [big] dan [/big]

Contoh : [big] Moc Pekanbaru [/big]

Hasil  : Moc Pekanbaru

)) Membuat Teks Berukuran Kecil

Caranya letakkan teks diantara kode [small] dan [/small]

Contoh : [small] Moc Pekanbaru [/small]

Hasil  : Moc Pekanbaru 

)) Membuat Link

Kodenya [url=http://moc-pekanbaru.blogspot.com/]Moc Pekanbaru [/url]

Contoh : [url=http://moc-pekanbaru.blogspot.com/]Moc Pekanbaru [/url]

Hasil  : Moc Pekanbaru 

)) Membuat Teks Berjalan (Marquee)

Letakkan tulisan diantara kode [scroll] dan [/scroll]

Contoh : [scroll] Moc Pekanbaru [/scroll]

Hasil  : 

TERCELA




)) Membuat Teks Rata Tengah ( Center )
Letakkan tulisan diantara kode [center] dan [/center]
Contoh : [center] Moc Pekanbaru [/center]
Hasil  :          Moc Pekanbaru 


)) Mengubah Warna Tulisan
Letakkan tulisan diantara kode dibawah ini :
[color=gold] Moc Pekanbaru[/color]
[color=silver]Moc Pekanbaru [/color]
[color=violet]Moc Pekanbaru [/color]
[color=hotpink]Moc Pekanbaru [/color]
[color=navyblue]Moc Pekanbaru [/color]
[color=tan]Moc Pekanbaru [/color]
[color=aqua]Moc Pekanbaru [/color]
[color=teal] Moc Pekanbaru[/color]
[color=lime]Moc Pekanbaru [/color]
[color=red]Moc Pekanbaru[/color]
[color=blue]Moc Pekanbaru [/color]
[color=green]Moc Pekanbaru [/color]
[color=yellow]Moc Pekanbaru [/color]
[color=pink]Moc Pekanbaru [/color]
[color=purple]Moc Pekanbaru [/color]
[color=brown]Moc Pekanbaru [/color]
[color=bronze]Moc Pekanbaru [/color]
[color=orange] Moc Pekanbaru[/color]
[color=black]Moc Pekanbaru [/color]
[color=white]Moc Pekanbaru [/color]

Yeach, kali ini tercela kembali membahas masalah tentang bagaimana membuat agar tampilan blog kita terkesan rapi dan tidak berantakkan dengan menggunakan scroll, dan tutorial kali ini yang akan tercela bahas ialah bagaimana cara membuat scroll untuk label seperti terlihat pada gambar di atas.

Caranya :

Klik Rancangan

Edit html

Cari Kode ]]></b:skin>

Setelah ketemu kode ]]></b:skin> copy dan paste kode di bawah ini

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Letakkan Kode diatas tepat diatas kode ]]></b:skin>

Ganti kode berwarna merah sesuai keinginan. Gimana ..?? mudah bukan.. semoga bermanfaat.

Cara Buat Scroll Box Untuk Widget Blog

Anda tentunya jenuh jika melihat tampilan blog penuh sesak dengan widget yang di buang sayang tapi di tampilkan malah bikin berat, bingung mau di hapus widgetnya apa blognya sekalian yang di hapus ya.. wkwkwkwk.. tercela punya ide ne.. di buat scroll box aja jadi kesan tampilannya tidak berserak kan.. caranya gampang kok, liat di bawah ini :

Klik rancangan

Klik tambah gadget

Pilih html/javascript

Copy kode di bawah ini dan pastekan dalam gadget tsb :

"Disini copy dan paste script widget anda, kalau gak mudeng komen ya friend tercela"

</ol></div>

Tulisan berwarna biru bisa kita atur tinggi/height nya sesuai selera sobat, gimana gak ribetkan..

Pada postingan sebelumnya tercela membahas masalah Cara Buat Efek Zoom Gambar Postingan dan sekarang tercela akan memberi tips bagaimana jika gambar terzoom dan berputar, caranya saat posting masukkan atau upload gambar dan tambahkan kode dibawah ini tapi ganti tampilan dari compose menjadi edit html.. Selamat mencoba.

<style type="text/css">
.post img { background:#aaa; border-radius:px; -moz-border-radius:px; -webkit-border-radius:px; -o-transition:all 1.2s ease-out; -moz-transition:all 1.2s ease-out; -webkit-transition:all 1.2s ease-out; } .post img:hover { z-index:99; background:#993300; border-color:#00000; -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px); -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px); }
</style>

Wah baru aja tercela coba ne, Begitu sukses langsung publish..mantap.

Berikut ini langkah-langkah nya :

Silahkan Anda login ke blogger Anda masing-masing
Masuk kebagian Rancangan, dan klik bagian Edit HTML, kemudian beri tanda centang pada bagian Expand Template Widget
Cari kode ]]></b:skin>, gunakan shortcut keyboard Ctrl + F
Setelah ketemu copy paste kode CSS berikut tepat diatas kode tadi

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

Setelah anda paste (ctrl+v) kan silahkan save template blog anda. Selesai, Semoga bermanfaat.

Cara pasang tools kode warna pada blog

Kode warna.. bagaimana cara memasang tools kode warna seperti terlihat pada postingan tercela diatas. Copy dan paste kode di bawah ini :

Buat Scroll Untuk Follower / Pengikut Blog

Kali ini saya akan memposting bagaimana caranya membuat scroll untuk widget follower / pengikut blog, buat para blogger yang pengikut blognya sudah banyak mungkin ingin membuat kesan rapi pada blog nya, gak ada salahnya mencoba tutorial ini.

Langkah - langkahnya :

Klik Rancangan / template

Klik Edit Html

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

Tambahkan Kode di bawah ini tepat di atas kode ]]></b:skin>

#Followers1 .widget-content{
height:100px;
width:auto;
overflow:auto;
}

Simpan.

Moga aja postingan tsb bermanfaat.

source : http://www.lovemoc.com/2012/02/buat-scroll-untuk-follower-pengikut.html

Cara Buat Ucapan Selamat Datang Di Blog

oke langsung TKP aja :

Klik rancangan

Klik Edit Html

Cari kode </Head>

Tambahkan kode dibawah ini diatas kode </Head>

<SCRIPT language='JavaScript'>alert("welcome in tercela ");</SCRIPT>

simpan.

Gampang kan..

Cara buat Link Nudging dengan css di blog

Link nudging adalah link yang apabila di sorot dengan mouse akan bergerak dan biasanya dipakai untuk menu Label.

Cara pasang link nudging :

Klik rancangan

Edit Html

Cari kode ]]></b:skin>

Letakkan kode dibawah ini diatas kode ]]></b:skin>

#animateList li a {

-moz-transition: all 0.26s ease-out; /* FF4+ */

-o-transition: all 0.26s ease-out; /* Opera 10.5+ */

-webkit-transition: all 0.26s ease-out; /* Saf3.2+, Chrome */

-ms-transition: all 0.26s ease-out; /* IE10? */

-moz-transition-duration: 1s;}

#animateList li a:hover {

padding-left: 100px;

}

Simpan kemudian ikuti langkah di bawah ini :

Klik rancangan

Tata Letak

Tambah gadget Html/Javascript

Letakkan kode dibawah ini di dalam Gadget tsb :

<div id="animateList">

<li><a href="http://tercela.blogspot.com/#">Tercela</a></li>

<li><a href="http://www.lovemoc.com/#">Love Moc</a></li>

</div>

Ganti link berwarna biru dan tulisan berwarna merah dengan link label atau link apapun yang akan kamu arahkan bila nantinya di klik.

Semoga berhasil.

Cara hilangkan Navbar Blogspot

Wah buat yang menggunakan template bawaan blogspot terus pengen hilangkan navbar tapi bingung, tercela mempersembahkan caranya, oia apa itu navbar..?? navbar adalah menu tambahan bawaan blogspot. lihat gambar di bawah :

Cara hilangkan navbar :

Buka rancangan

Klik Edit Html

Cari code ini ]]></b:skin> (gunakan ctrl+f)

Pastekan code di bawah ini tepat di atas code ]]></b:skin>

#navbar-iframe {
display: none !important;
}

Save

Selamat mencoba

Script Buat Scroll pada kotak komentar

Wah, gak rugi ne pagi dah blogwalking, gak sengaja ketemu script buat scroll pada kotak komentar, pas di uji coba yach makyusss langsung prikitiewww... Mesti di sebar deh buat bagi² ilmu.

Caranya :

Klik rancangan

Klik Edit Html

Cari kode #comments-block { atau #comments-block{

Tambahkan kode :

max-height:250px;
border:1px solid #eee;
overflow:auto;

letak kan di bawah kode : #comments-block {

Maka hasilnya :

#comments-block {
max-height:250px;
border:1px solid #eee;
overflow:auto;
etc…
}

Simpan dan lihat hasil.

Contoh gambar hasil di tercela.blogspot.com

source : http://imanarsyad.blogspot.com/2012/02/membuat-scroll-pada-kotak-komentar.html

Open New Tab ( Script Tutorial Blog )

Kali ini tercela mencoba berbagi script tentang " membuat semua judul menjadi open new tab bila di klik " walau hampir semua para blogger mengetahui cara ini namun tak ada salahnya kan jika tercela juga nimbrung dalam menyebarkan tutorial ini .. Moga aja tutorial nya bermanfaat buat para blogger

Rancangan

Edit Html
Cari Kode <head> dan tambahkan kode <base target='_blank' /> di bawahnya,terus simpan dan lihat hasilnya.. oke kan..

Nanti jadi spt di bawah :

<head>
<base target='_blank' />

source

Cara Membuat Tombol Next Page Pada Blog

wew.. akhirnya tercela.blogspot.com pasang tombol next page ,, ya setidaknya memudahkan pembaca yang masih bingung mencari halaman-halaman yang tertimpa walaupun sudah ada archive.. kan tidak menutup kemungkinan pembaca cuma ngerti baca walau kawan² sudah pada ngerti ,, moga aja yang lain jadi gak bingungkan.. mm.. bagi yang ingin memasang tombol next page di blognya,, ne caranya :

Pertama : Login ID Blog Anda

Kedua : Silahkan anda cari kode ]]></b:skin>

Ketiga : Copy kode yang ada dibawah ini kemudian paste di atas kode ]]></b:skin>

Ne Kode nya :

.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #FF0000;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #0000FF;background-color:#FF1493;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #7FFF00;background: #7FFF00;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #0000FF;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#008000;}

Keempat : Kemudian cari kode </body>

Kelima : Copy kode yang ada dibawah ini dan paste kan diatas kode </body>

Ne Kode Nya :

Keenam : Simpan dan lihat hasilnya,,

semoga berhasil dan makasih sudah berkunjung.. :)

source : http://termanja.blogspot.com/2011/12/cara-membuat-tombol-next-page-pada-blog.html

Cara Menggunakan mypagerank / membantu traffic rank

Selain melaporkan URL postingan terbaru ke Webmaster Google agar Postingan Blog cepat terindex/terbaca Google. ada cara mudah untuk Optimasi Postingan Blog yang lebih efisien supaya Search engine Google cepat mengindex Halaman artikel yang baru kita Update di blog. cara tersebut adalah menggunakan jasa Google Ping. dengan "Mypagerank.net" kita dapat memberitahukan Search Engine Gogle adanya URL postingan terbaru di blog kita.

Tercela pribadi sering melakukan trik optimasi postingan blog ini sehabis mengupdate Postingan terbaru. terbukti setelah melakukan ping menggunakan Mypagerank.net dalam waktu paling lambat 24 jam artikel sudah terindex search engine Google. Ping dalam artian sebenarnya adalah Bersiul, namun dalam pengertian di dunia Website/Blog ping dapat diartikan suatu cara memanggil Search Engine untuk datang menjelajahi blog kita.

caranya mudah :
klik : Mypagerank.net
klik : Ping service sebelah kanan seperti terlihat pada gambar dan isi seperti pada gambar diatas sesuai url blog anda dan terakhir klik ping update sites di bawah..

sumber

Cara Pasang Energy Saving Mode pada Blog

Pada kesempatan kali ini, mari kita belajar tentang cara memasang “Energy Saving Mode” pada blogger. Kalo sobat masih asing dengan hal ini, bisa sobat coba pada blog saya ini. Jika blog ini sedang idle (tidak melakukan aktivitas apapun), maka kemudian akan muncul halaman baru (semacam screensaver) yang berwarna gelap dan bertuliskan “Energy saving mode”. Untuk lebih jelasnya penampakannya dibawah ini:

Tertarik untuk mencobanya? Langsung saja langkah-langkahnya sebagai berikut:

1. Login ke akun blogger sobat.

2. Klik “Design”

3. Kemudian klik “Edit HTML”

4. Jangan lupa centang “Expand Widget Template”

5. Temukan kode </head> (bisa memanfaatkan ctrl+f)

6. Letakkan script berikut diatas kode </head>

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script>

7. Simpan template sobat.

8. Lihat perbedaannya sekarang.

sumber

Mau buat label flash seperti terlihat pada gambar di atas .. ikuti cara di bawah :

Buka Rancangan..

Tambah Gadget Blog..

Copy paste Kode di bawah dan Ganti alamat Link label dengan Link Label sobat²..

<center><div class='widget-content'>
<div align="center" style="padding:0px;border:0px solid #555;">
<div class="www.japarus.com" style="background:#999; width:180px; background:transparent url(http://japaruspunya.xtgem.com/other/bgswf.png) center no-repeat;border:4px solid #020b00;padding:0 0px">
<div class="www.japarus.com" style="background:none; width:170px; background:transparent url(http://japaruspunya.xtgem.com/other/joget.gif) center no-repeat;border:2px solid #020b00;padding:0 0px">

<script type="text/javascript" src="http://japaruspunya.xtgem.com/other/swf.js"></script>
<div id="japarusswfconter">japarus</div>
<script type="text/javascript">
var so = new
SWFObject("http://www.swfcabin.com/swf-files/1314874205.swf ",'tagcloud',
'170', '250', '10', '#9b7d5f');
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x000000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "120");
so.addVariable("tagcloud", "<tags><a href='http://termakan.blogspot.com/search/label/PENGETAHUAN' style='8' color='0xFFff00' hicolor='0xfb3f20'>PENGETAHUAN</a><a href='http://termakan.blogspot.com/search/label/TUTORIAL%20BLOG' style='8' color='0x00ff00' hicolor='0xfbacac'>TUTORIAL BLOG</a><a href='http://termakan.blogspot.com/search/label/BERITA%20NAKAL' style='8' color='0x00ffff' hicolor='0xf978fb'>BERITA NAKAL</a><a href='http://termakan.blogspot.com/search/label/SERBA%20SEPULUH' style='8' color='0x0000ff' hicolor='0xfd8ff1'>SERBA SEPULUH</a><a href='http://termakan.blogspot.com/search/label/ADA%20ADA%20SAJA' style='8' color='0xFF00ff' hicolor='0xb4acfb'>ADA ADA SAJA</a><a href='http://termakan.blogspot.com/search/label/KESEHATAN' style='8' color='0xFF0000' hicolor='0x78fbf9'>KESEHATAN</a><a href='http://termakan.blogspot.com/search/label/GAMBAR' style='8' color='0xFFff00' hicolor='0xfbc878'>GAMBAR</a><a href='http://termakan.blogspot.com/search/label/TIPS' style='8' color='0x00ff00' hicolor='0x14eefc'>TIPS</a><a href='http://termakan.blogspot.com/search/label/SEXS' style='8' color='0x00ff00' hicolor='0x16de01'>SEX</a><a href='http://termakan.blogspot.com/search/label/LAKALANTAS' style='11' color='0x00ffff' hicolor='0xfa9cfb'>LAKALANTAS</a></tags>");
so.addParam("allowScriptAccess", "always");
so.write("japarusswfconter");
</script></div></div></div>
</div>
<div class='clear'></div></center>

Yang berwarna merah contoh yang di ganti selanjutnya utak atik sendiri Yach..

sumber

Export Import postingan blog

Bila kita mempunyai artikel yang sudah banyak di sebuah blog. Lalu kita juga membuat blog baru dengan nama yang berbeda tentunya.Kita bisa mengcopy postingan kita tersebut ke blog yang baru tanpa menghilangkan blog lama. Hal ini mungkin berguna bagi para blogger yang mempunyai banyak nama blog tapi kurang aktif ngeblog sehingga artikel yang dibuat tidak begitu banyak. Nah, berikut cara melakukan impor dan ekspor postingan sebuah blog. Cara yang baru aku lakukan adalah dari blogger ke blogger, kalau dari layanan blog lainnya belum dicoba.

Buka blog sumber yaitu blog yang berisi postingan yang akan kita ambil/ekspor, yaitu masuk atau login blog anda, dan pilih bagian dashbor

Kemudian pilih Pengaturan, dan pilih Ekspor blog

Lalu pilih Unduh Blog, dan simpan postingan tersebut menjadi sebuah file. File tersebut menjadi jenis xml

Kemudian Buka juga Dasbor baru anda, cara mudahnya tekan ctrl-T untuk membuka tab baru internet.

Lalu ketik di address internet www.blogger.com, maka akan langsung tampil ke menu dashbor anda.

Lalu pilih jenis blog anda yang lain yaitu blog untuk menerima postingan anda.

Plih pengaturan dan pilih impor blog, silahkan kli Browse untuk mengambil postingan anda.

Masukkan kode yang tertera, dan jika ingin semua postingan tampil, cek list "Terbitkan semua entri yang diimpor secara otomatis" dan klik Impor Blog

Tunggu proses hingga agak lama dan semoga berhasil.

sumber

Selain melaporkan URL postingan terbaru ke Webmaster Google agar Postingan Blog cepat terindex/terbaca Google seperti yang pernah dibahas dalam artikel "Mempercepat Postingan Terbaca Google". ada cara mudah untuk Optimasi Postingan Blog yang lebih efisien supaya Search engine Google cepat mengindex Halaman artikel yang baru kita Update di blog. cara tersebut adalah menggunakan jasa Google Ping. dengan "Google Ping" kita dapat memberitahukan Search Engine Gogle adanya URL postingan terbaru di blog kita.

Tercela pribadi sering melakukan trik optimasi postingan blog ini sehabis mengupdate Postingan terbaru. terbukti setelah melakukan ping menggunakan Google Ping dalam waktu paling lambat 24 jam artikel sudah terindex search engine Google. Ping dalam artian sebenarnya adalah Bersiul, namun dalam pengertian di dunia Website/Blog ping dapat diartikan suatu cara memanggil Search Engine untuk datang menjelajahi blog kita.

Untuk Tutorial bagaimana cara menggunakan Google Ping, sobat Tercela dapat mengikuti cara berikut:

1. Buka halaman Google Ping alamatnya www.googleping.com atau klik "Google Ping"

2. Setelah Halaman Google Ping terbuka isi kolom "Blog Details" seperti ini:

Blog Name: Tercela

Blog Home Page: http://tercela.blogspot.com/

RSS URL (optional): http://tercela.blogspot.com/feeds/posts/default

Email (required for some): celaluadja@gmail.com

Keterangan:

Tercela ganti dengan Nama Blog anda

http://tercela.blogspot.com/ ganti dengan URL Home Page Blog anda

celaluadja@gmail.com ganti dengan Email anda

3. Setelah mengisi Blog Details, anda tinggal mencentang "Service To Ping". klik tulisan "Cek All" untuk mencentang semuanya.

4. Setelah semuanya selesai dicentang, klik tulisan "Send Pings" yang letaknya paling bawah.

sumber

cara buat auto readmore

Anda tertarik memasang auto readmore di blog agar postingan terlihat rapi.. caranya :

Login ID
Pilih Design >> Edit Html
Centang Expand Widget Templates
Klik ctrl + F
Cari kode </head>
Copy Kode dibawah ini dan letakkan di atas kode </head>

Masih pada halaman Edit Html, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>