Tampilkan postingan dengan label TIPS DAN TRIK. Tampilkan semua postingan
hay teman.. ^_^ pernahkah kalian mengalami "Undefined" saat mencoba mengganti template.
setelah saya selidiki, ternyata kesalahannya ada pada pemformatan tanggal postingan kalian.. !
cara mengatasinya yang telah saya coba satu satu..
ini dia cara yang manjur alias yg mampu. :v
1. buka dasbor blogger kalian
2. klik setelan
3.
Ubah Format Header tanggalnya ke Hari, Bulan, Tanggal, Tahun ( Sabtu, 11 Maret 1997 )
Ubah Tanggal Index Arsip ke bulan tahun ( Maret 1997 )
Ubah Format Timestamp ke Hari, Bulan, Tanggal, Tahun ( Sabtu, Maret 11, 1997 )
Okay selamat mencoba ^_^ dan semoga berhasil.
setelah saya selidiki, ternyata kesalahannya ada pada pemformatan tanggal postingan kalian.. !
cara mengatasinya yang telah saya coba satu satu..
ini dia cara yang manjur alias yg mampu. :v
1. buka dasbor blogger kalian
2. klik setelan
3.
Ubah Format Header tanggalnya ke Hari, Bulan, Tanggal, Tahun ( Sabtu, 11 Maret 1997 )
Ubah Tanggal Index Arsip ke bulan tahun ( Maret 1997 )
Ubah Format Timestamp ke Hari, Bulan, Tanggal, Tahun ( Sabtu, Maret 11, 1997 )
Okay selamat mencoba ^_^ dan semoga berhasil.
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
Tumblr merupakan sebuah layanan tumblelog yang mengizinkan penggunanya untuk melakukan posting, tidak hanya dalam bentuk tulisan, akan tetapi dapat juga melakukan posting dalam bentuk foto, quote, video, chat, audio, dan link. Tumblr didirikan pada tahun 2007 oleh David Karp dengan kantor pusat di New York. Tumbl adalah sebuah situs web untuk social network service (Layanan Jaringan Sosial) dan micro blogging.
Itu adalah sedikit gambaran tentang situs web Tumblr yang saya petik dari beberapa situs termasuk dari Wikipedia. Sebenarnya, hari ini saya bukannya mau bercerita tentang situs web Tumblr, tetapi saya mau memberikan panduan tentang bagaimana cara membuat tombol Follow seperti yang ada di situs web Tumblr untuk follower Google Friend Connect sobat blogger. Saya yakin, sobat blogger tidak akan tau bentuk tombol follow itu kalau sobat blogger tidak pernah berkunjung ke Tumblr.
Ganti yang warna merah dengan ID blog sobat. Untuk melihat Identitas blog sobat, sobat blogger harus sign in di blogger.com. Ketika sobat sudah berada di laman beranda blogger.com, klik link blog sobat, maka di kotak pencarian browser sobat akan langsung terlihat nomor id blog sobat. Lihat gambar di bawah ini!
Itu adalah sedikit gambaran tentang situs web Tumblr yang saya petik dari beberapa situs termasuk dari Wikipedia. Sebenarnya, hari ini saya bukannya mau bercerita tentang situs web Tumblr, tetapi saya mau memberikan panduan tentang bagaimana cara membuat tombol Follow seperti yang ada di situs web Tumblr untuk follower Google Friend Connect sobat blogger. Saya yakin, sobat blogger tidak akan tau bentuk tombol follow itu kalau sobat blogger tidak pernah berkunjung ke Tumblr.
- Sign In di Blogger.com
- Pada Menu drop down, pilih layout dan klik add a gadget
- Pilih HTML/JavaScript dan copy paste kode berikut pada kolom yang tersedia
<div style="display:scroll; position:fixed; top:5px; right:95px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://www.tutorialblogspot.com/" target="_blank" rel="dofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div></div>
- Simpan Widget follow dan dashboard sobat blogger
Ganti yang warna merah dengan ID blog sobat. Untuk melihat Identitas blog sobat, sobat blogger harus sign in di blogger.com. Ketika sobat sudah berada di laman beranda blogger.com, klik link blog sobat, maka di kotak pencarian browser sobat akan langsung terlihat nomor id blog sobat. Lihat gambar di bawah ini!
selamat mencoba !!
dan semoga berhasill !! ^_^
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal . Contohnya seperti gambar dibawah ini:
Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna biru muda (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');
Pilihan Warna menu vertikal :
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-blog-nyaman.blogspot.com">Trik Blog</a></li>
<li><a href="http://trik-nyaman.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
Kode yang berwarna biru muda adalah linknya dan yg warna kuning adalah teks yang ditampilkan.
Selamat mencoba dan semoga berhasil ^_^
Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna biru muda (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');
Pilihan Warna menu vertikal :
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-blog-nyaman.blogspot.com">Trik Blog</a></li>
<li><a href="http://trik-nyaman.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
Kode yang berwarna biru muda adalah linknya dan yg warna kuning adalah teks yang ditampilkan.
Selamat mencoba dan semoga berhasil ^_^
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
sudah paham akan bikin apa sekarang. Jika sudah paham langsung saja copy dan paste kode berikut di Kustomisasi ---> Tata Letak ---> Tambah Gadget --->HTML/JavaScript dan paste pada bagianContent.
<div style="border: 0px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;>
<script style="text/javascript" src="http://sites.google.com/site/masfaysblog/Home/codedaftarisi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://masnyaman.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Lalu ganti http://masnyaman.blogspot.com dengan alamat blog anda.
oke !! selamat mencoba dan semoga berhasil ^_^
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
Tutorial kali ini membahas bagaimana caranya membuat Read more secara otomatis. Selain read morenya muncul secara otomatis hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih baik saya sebut saja dengan fasilitas image thumbnail.
Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada dua pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.
Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Kalo sudah tinggal lanjutkan dengan tutorial dibawah.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
Langsung copy paste aja kode dibawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
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>
ilahkan disimpan dan lihat hasilnya :
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
selamat mencoba dan semoga berhasil ^_^
Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada dua pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.
Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Kalo sudah tinggal lanjutkan dengan tutorial dibawah.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
Langsung copy paste aja kode dibawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
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>
ilahkan disimpan dan lihat hasilnya :
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
selamat mencoba dan semoga berhasil ^_^
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
Kadang kadang template standar dari blogger.com tidak menyertakan fasilitas Add Widged pada bagian headernya sehingga kita kesulitan untuk memasang gambar atau widged lainya di bagian atas blog atau biasa di sebut Header. kalau masih bingung tentang Header, itu tuh yang ada tulisan judul blog dan deskripsi tentang blog, contohnya kalau punya saya di bagian atas yang ada tulisanya Bocah Salahgaul dan ada gambar animenya :
Nah begini caranya pertama cari kode berikut ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>Ganti kode yang berwarna biru sehingga menjadi seperti ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>Setelah itu simpan. Untuk maxwidgets nya juga bisa anda ganti menjadi dua atau lebih Widged nya, nah setelah itu seperti biasa masuk ke Tata Letak--->Add Gadged--->HTML/javascript anda posting dahulu gambar di www.photobucket.com lalu copy HTML code nya, lalu paste di HTML/javascript pada bagian content. atau bisa juga anda langsung upload foto dari komputer anda, caranya masuk ke Tata Letak--->Add Gadged--->Gambar lalu upload gambar anda yang ada di komputer anda oke deh,selamat mencoba.
Nah begini caranya pertama cari kode berikut ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>Ganti kode yang berwarna biru sehingga menjadi seperti ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>Setelah itu simpan. Untuk maxwidgets nya juga bisa anda ganti menjadi dua atau lebih Widged nya, nah setelah itu seperti biasa masuk ke Tata Letak--->Add Gadged--->HTML/javascript anda posting dahulu gambar di www.photobucket.com lalu copy HTML code nya, lalu paste di HTML/javascript pada bagian content. atau bisa juga anda langsung upload foto dari komputer anda, caranya masuk ke Tata Letak--->Add Gadged--->Gambar lalu upload gambar anda yang ada di komputer anda oke deh,selamat mencoba.
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
hay sobat, :))Kalau sobat blogger rajin keliling dari satu blog ke blog yang lain, pasti sobat blogger pernah melihat blog yang mana Cursor dari blog tersebut bertaburan bintang. Cursor tersebut kalau tidak digerakkan atau tidak dipindah, Cursor tersebut tidak akan menaburkan bintang. Itulah hebatnya fitur Cursor bertabur bintang ini. Fitur ini di buat menggunakan kode JavaScript yang bisa kita kostumisasi. Apakah sobat blogger tertarik untuk memasang fitur Bintang berjatuhan pada Cursor? Kalau sobat blogger tertarik, ikuti langkah yang kami berikan di bawah ini :
- Kunjungi dan langsung masuk ke laman blogger.com
- Klik aja disini :D
- lalu pilih Add Widget
- selesai
selamat mencoba ^_^
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
Nah sekarang !! jika sobat sama-sama tertarik ingin membuat text berjalan , 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 hijau , 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.
selamat mencoba ^_^
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 hijau , 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.
selamat mencoba ^_^
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
nah kawan ini posting aku perbarui. karena yg kemarin mungkin kata teman gak bisa ato ada code yg slah (mungkin) :D nah sekarang aku perbarui. langsung saja DIPLOTOT :
- Log in ke www.blogger.com
- Klik Template → Edit HTML Cari kode ]]></b:skin> dengan cara tekan Ctrl+F → Letakkan kode berikut ini tepat diatas kode ]]></b:skin>
.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px;cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}
- Cari kode </head> → Letakkan kode berikut ini tepat diatas kode</head>
Kode script:
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://code.jquery.com/jquery-latest.js'/> <meta content='IDfacebook' property='fb:admins'/> <script type='text/javascript'> function commentToggle(selectTab) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").show();} </script>
- Ganti ID facebook dengan ID akun facebook Anda sendiri
- Cari kode <div class='comments'id='comments'>
Kode script:
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments"
;' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data
ost.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments"' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <dataost.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/><fb:comments expr:href='dataost.url' num_posts='5' width='450'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>
;' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='dataost.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments"' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <dataost.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/><fb:comments expr:href='dataost.url' num_posts='5' width='450'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>
Keterangan :
5 : jumlah komentar yang ingin Anda tampilkan
450 : lebar kotak komentar facebook.
- Simpan template dan lihat blog Anda
Duh, panjang ya uraiannya hehe… silakan bagi yang mengalami problema yang sama bisa menerapkan hal ini juga. Semoga bermanfaat dan selamat berkomentar, pasti saya balas …
Kalo ada masalah tinggal commentar aja. okee!! (y) ;)
Tag :// BLOGGER,
Tag :// TIPS DAN TRIK
