Cara Mengganti Template Blogspot

Cara Mengganti Template Blogspot - Cara mengubah/merubah template/thema blog di blogger/blogspot - Setelah kemarin update artikel untuk pemula berjudul cara mengganti favicon blog, di kesempatan ini saya akan update artikel untuk newbie juga berjudul cara mengganti template blogspot. Template memang bisa menjadi kebanggaan tersendiri bagi setiap blogger. Blogger yang suka fashion pasti akan suka menggonta-ganti templatenya dengan template-template terbaru dan pastinya penuh fashion juga. Blogger yang suka musik pasti akan memasang template dengan tema musik dan masih banyak lagi. Tapi kebanyakan blogger yang masih newbie banyak yang bingung jika mereka ingin mengganti template nya, padahal itu sangat mudah untuk dilakukan. Oke langsung saja, berikut ini cara mengubah template blog di blogspot, silahkan diikuti dengan cermat:

1. Masuk ke dashbor blog sobat.

2. Klik Template.
3. Setelah itu silahkan sorot pada template yang sobat suka >> klik tulisan Terapkan Ke Blog di bawah template pilihan sobat.
4. Tungu hingga prosesnya selesai.

Tapi sobat, dengan langkah-langkah di atas, sobat hanya bisa mengganti template sobat dengan template default blogger. Lalu bagaimana jika ingin menggantinya dengan template selain dari blogger. Gampang! Silahkan ikuti langkah-langkah di bawah:

1. Download aneka bentuk template yang sobat inginkan di berbagai situs penyedia template gratis, salah satunya di BTemplates. Silahkan menuju ke sini http://www.btemplates.com/.

2. Setelah mendownload template nya (biasanya berupa zip file) silahkan extract file yang berkahiran extensi .xml terlebih dahulu di penyimpanan komputer sobat.

3. Setelah di extract, silahkan buka file nya dengan notepad kemudian blok kodenya dan copy.

4. Login ke akun blog sobat.

5. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget) >> Blok semua kode template nya.

6. Klik Delete di keyboard komputer lalu pastekan kode template yang dicopy awal tadi di tempat tersebut.

7. Klik Simpan Template.

Catatan: Bila muncul peringatan ketidaksesuaian template lama dengan template baru sobat, silahkan klik saja Pertahankan Widget.

8. Selesai.

Nah, bagaimana sobat? Mudah kan? Oke, saya kira cukup tutorial mengenai cara mengganti template blogspot kali ini. Semoga bermanfaat buat sobat semua.

Source: http://www.amronbadriza.com/2012/07/cara-mengganti-template-blogspot.html#ixzz2HCXvd3ns

readmore »»  

Cara Mengganti Background Blog Dengan Gambar

Pada template blog,khususnya template blogger atau blogspot, warna background pada blog dapat kita ganti dengan sangat mudah sesui dengan gambar yang kita inginkan. nah bagaimana cara mengganti background blog dengan gambar?



Disini kita mengambil contoh pada background body di tamplate blog kita, cari kode body { Nah di sana terdapat kode background,

body{
background:#ded8c0;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}

Setiap blog rada berbeda sih Backgroundnya, nah untuk mengganti backborund misal dengan background / gambar ini

http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg

Maka kalian cukup menambahkan url(http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg) repeat-x; pada background tersebut.
Jadi :

body{
background:#ded8c0 url(http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg) repeat-x;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}

Gambar Background kamu juga bisa tetap walaupun scroll mouse kamu gerakkan ke atas atau kebawah. Tinggal kamu ganti repeat-x; menjadi repeat-x top left fixed;
Atau yang paling saya suka adalah menggunakan gambar kecil namun bisa menjadi besar dan tetap. Yakni kamu cari dulu gambar kecil, setelah itu seperti biasa, tinggal kamu rubah repeat-x; menjadi repeat scroll 0 0;
Nah demikian cara mengganti background blog dengan gambar, semoga bermanfaat.

http://infonetmu.blogspot.com/2012/01/cara-mengganti-background-blog-dengan.html

readmore »»  

Cara Membuat Buku Tamu Melayang Di Sisi Kanan Blog

Cara Membuat Buku Tamu Melayang Di Sisi Kanan Blog

Di postingan ini saya akan berbagi
cara membuat buku tamu  melayang di kanan blog

1. Langkah Pertama  pergi ke Cbox
2. Lalu masuk akun Cbox atau jika belum punya daftar ke Sign Up Cbox
3. Jika Sudah mendaftar Cbox lalu pemirsa disuruh masuk Cbox
4. Setelah sudah masuk edit sendiri Cbox anda sendiri

dan Langkah berikutnya Copy-Paste HTML dibawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBwCnsSJtDNhyphenhyphenKZc7vk8ioO7g_M5sNAIZ_IU7XkoDsnQib7e26aobFyrfa_36V0NDQqeVuPwvMt2bYQ9SSH751T1q4-Q2_hXTDyNfm0wVeJrGLC9QDmYYE4ATqvja8f8hbaZlC4L_Qmc/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

<div style="text-align:right">
<a href="http://abelavriyanno.blogspot.com/2012/04/cara-membuat-buku-tamu-melayang-di-sisi.html">[get this widget]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Cara menaruh html di atas

1. Masuk akun blogger siapa ajah boleh
2. Ke tata letak
3. Add gadget atau Tambah gadget
4. Edit html/javascript
5. Masukan html di atas
6. Selesai

dan ganti tulisan yang biru dengan html/javascript Cbox/buku tamu
yang tadi

sekian postingan kali ini smga bermamfaat!!!

Sumber: Abel Blog's: Cara Membuat Buku Tamu Melayang Di Sisi Kanan Blog

readmore »»  

Cara Membuat kotak komentar di blog

Cara Membuat kotak komentar di blog

Cara membuat kotak komentar di blog
Kali ini aku akan membahas cara menampilkan kotak komentar di bawah postingan, tanpa kotak komentar hampa hati terasa blog kita.
Semuanya sich uda ada, tapi harus klik comment this post, cara itu kayaknya terlalu ribet dan biasanya para blog malas komentar klw kayak gitu, ayoo jo kita ganti.

Ikuti caranya :

1. Masuk ke akun blogger

2. Lalu klik Setting -> Comments

3. Pada bagian "comment from placement" pilih embedded below post. lalu save

4. Lalu klik lah judul (jika blog anda tanpa read more) postingan anda, jika sudah muncul SELAMAT, jika belum muncul kasihan de loo lanjut ke tahap berikut

1. Klik menu layout -> Edit HTML

2. Beri tanda centang pada "Expand Widget templates"

3. Cari kode berikut :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

4. Jika sudah ketemu, maka hapuslah kode tersebut, ganti dengan kode di bawah ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if></b:if> </p> </b:if>

Sumber: http://pengertian-computer.blogspot.com/2012/12/cara-membuat-kotak-komentar-di-blog.html

readmore »»  

Membuat Kata dan Kalimat Berkedip

Membuat Kata dan Kalimat Berkedip

Klo kita sering liat web atau blog yang ditampilannya terdapat kata atau kalimat yg berkelap kelip misalnya seperti kata ini yg sedang kelap kelip, mungkin buat yang belum tau, pasti kita sedikit heran..gimana y caranya..?

dulu juga sy kaya gtu, bingung banget, kq bisa y...tp ternyata setelah ditelusuri lebih lanjut..gampang banget, kita cuma tinggal sisipkan aja kode HTML di dalam kata atau kalimat yang mau kita kelap kelipkan..

kode HTML nya seperti ini.....

<blink>(Kata yang ingin anda kelap kelipkan)</blink>

contoh kalimat yg mau kita kelap kelipkan :

"ternyata gampang sekali y untuk mengkelap kelipkan kata itu"

caranya kita tinggal sisipkan aja kode HTML diantara kalimat tersebut menjadi :

<blink>"ternyata gampang sekali y untuk mengkelap kelipkan kata itu"</blink>

maka hasilnya akan seperti ini :

"ternyata gampang sekali y untuk mengkelap kelipkan kata itu"

Mudah Kan..
Jangan lupa, trik ini cuma bisa kita pake buat yang mendukung HTML aja, contohnya klo di blogger, masuk ke "ADD GADGET"---->"HTML/ Java Script". klo yang ngga ngedukung HTML sih jangan digunakan not mach

http://trik-blog-nyaman.blogspot.com/2009/04/klo-kita-sering-liat-web-atau-blog-yang.html

readmore »»  

Text Berjalan di Bar menu

Text Berjalan di Bar menu

Teman blogger beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat
2. Klik menu Template
3. klik menu Edit HTML

Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula

Copy kode berikut ini lalu paste di atas kode </head>

<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>

6. Klik tombol Save Template Changes
7. Selesai.

Cara ke dua ini untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger

2. Klik menu Layout

3. Klik menu Edit HTML
4. Klik tulisan Download Full Template, lalu save data tersebut.
Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk
memberi tanda centang.
Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
6. Tunggu beberapa saat sampai proses selesai

7. Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah
sebelum kode </html>

<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>


8. Klik tombol SAVE TEMPLATE

9. Selesai

sedikit CATATAN, pada kode diatas ada tulisan yang saya buat kuning , nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.


http://trik-blog-nyaman.blogspot.com/2009/05/teman-blogger-beberapa-hari-yang-lalu_19.html

readmore »»  

Cara Membuat Read More Pada Blog, Blogspot, Blogger

 Cara Membuat Read More Pada Blog, Blogspot, Blogger

Cara membuat read more pada blog, blogspot, Blogger ini sangat mudah sekali, karena hanya tinggal mengcopykan script code yang ada ke template blogspot anda, dan Berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger seperti halnya yang digunakan pada Blog. sebelum anda memulai membuat read more pada blog, blogspot, blogger yang harus anda lakukan adalah sebagai berikut :

► Silahkan Login dan masuk di akun blogger anda
► lalu klik Rancangan dan klik Edit HTML
► Centang Expand Template Widget
► Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
► Cari kode </head> dan kalau sudah ketemu
► Lalu silahkan Tambahkan kode dibawah ini tepatnya diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>


Bila anda ingin merubah ukuran Read More Pada Blog, Blogspot, Blogger anda, ubah aja di bagian-bagian kode di bawah ini, dan Ubah angka nya sesuai kebutuhan:

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

► langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah 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'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


► dan untuk kata " READ MORE " bisa diganti sesuai dengan selera anda.

setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Okelah sobat itulah artikel tentang Cara Membuat Read More Pada Blog, Blogspot, Blogger yang mungkin bisa sedikit membantu anda. dan ingat, sebelum anda memasukan kode2 diatas sebaiknya anda backup terlebih dahulu template dengan cara download lengkap tempalte, langkah ini untuk antisipasi bila anda salah memasukkan kode yang ada. dan mungkin anda juga ingin Menampilkan Jumlah Visitor Online di blog atau Mempercantik Blog Dengan Gadget Blogspot dan mungkin juga menambahkan Daftar Isi atau Sitemap di Blog ?


http://caramembuatada.blogspot.com/2012/01/cara-membuat-read-more-pada-blog.html

readmore »»