Anda di halaman 1dari 13

Bikin Berjalan Teks Nama Blog di Address Bar

Ini posting saya persembahkan buat para blogger yang pengen nama di address bar blog-nya bisa
jalan-jalan. Tujuannya biar sedikit memikat pengunjung agar blog kita mendapat nilai lebih dari
pengunjung, biar menarik maksudnye …

Caranya nggak gampang eh…nggak susah kamsudnya, Cuma tinggal copy paste sesuai instruksi
dan rebez !

Caranya begini, silahkan anda copy kode di bawah ini dan letakan tepat di atas kode <head>

(Biar gampang cari kode <head> pake tombol keyboard ctrl+f pada posisi edit HTML di
blogspot).

<script type='text/javascript'>
//<![CDATA[

msg = "ITCOMMUNION";
msg = " ITCOMMUNION " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

Untuk tulisan berwarna biru bisa Anda ganti dengan nama blog atau situs atau nama lain (suka-
sukalah mau dikasih nama apa aja …), trus yang warna merah bisa Anda ganti dengan nama
Anda sendiri atau nama samaran (ini juga suka-sukalah..mau nama apa aja).

Cara Membuat Judul Blog Berjalan


Membuat tulisan berjalan sudah pernah kita pelajari bersama, yaitu dengan
menambahkan sedikit menambahkan kode html, mungkin untuk lebih jelanya kamu
dapat baca di sini. Sekarang kita juga akan belajar untuk membuat blog kita lebih
menarik lagi dengan hal yang sama, tetapi yang berjalan kali ini dalah judul blog
kita.

Mungkin belum tahu yang mana judul blog itu? kalo judul blog saya ini adalah
Belajar Ngeblog di BLOG, Oh ya,,,, ada sedikit tips yang berkenaan dengan judul
blog kita, yaitu kita dapat mengganti judul blog kita dengan judul postingan kita
agar blog kita lebih ramah dengan SEO.
Cara Membuat Judul Blog Berjalan

1. Pilih tata letak kemudian edit html


2. Jangan lupa beri tanda centang pada Expand Template Widget
3. Cari kode berikut <title><data:blog.pageTitle/></title>
4. Jika sudah ketemu, ganti kode tersebut dengan kode berikut ini

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

5. Lihat apakah berhasil dengan (PRATINJAU) jika berhasil SIMPAN

Menambahkan AddThis Untuk Membagikan Tulisan Kita

Addthis merupakan layanan yang memudahkan pengujung untuk menyimpan,


berbagi dan mempromosikan konten anda keberbagai macam jaringan sosial. Sama
halnya dengan layanan sosial bookmark lainnya.Selain itu layanan Addthis juga
menyediakan fasilitas one button one content yang sudah terintegrasi dengan
beberapa platform, termasuk blogger tentunya.

Kenapa kita harus menambahkan addthis pada blog kita? Salah satu alasan kenapa
kita memasang widget bookmark & share adalah sebagai salah satu upaya untuk
meningkatkan traffic (pengunjung). Widget bookmark & share Addthis ini setelah
Anda “instal” nanti akan terpajang di bawah setiap postingan yang efeknya
memudahkan pengunjung blog Anda untuk membookmark atau menyebarluaskan
content blog Anda pada berbagai directory yang tergabung dalam bookmark &
share Addthis.

Cara Menambahkan AddThis di Bawah Postingan


1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini <div class='post-footer'>
6. Setelah itu taruh kde berikut ini di bawahnya
<!-- AddThis Button BEGIN -->
<div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'
class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-share-
en.gif" width="125" height="16" alt="Bookmark and Share"
style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?
pub=xa-4a8b947c53d5c175"></script></div>
<!-- AddThis Button END -->

7. Simpan Template

Cara Menambahkan AddThis di Sidebar


1. Pilih Tata Letak kemudian Tambah Gadget
2. Pilih HTML/JavaScript
3. Masukan kode-kode (script) diatas.

Mengganti Icon Blogger di Addres Bar


Ketika membuka atau blog kita maka akan muncul di addres bar (tempat unuk
menuliskan alamat URL) akan muncul icon atau gambar kecil. Dan jika blog kita ada
di blogger.com atau blogspot maka icon itu berupa gambar dari blogger.com
seperti d ibawah ini.

http://kurniasepta.blogspot.com/

Untuk kita-kita yang sedikit tak meninginkan icon blogger itu muncul di Addres Bar
blog kita, bisa juga kita ganti icon blogger itu dengan yang lainnya. Misalkan
denagn foto kita sendiri atau gambar-gambar yang begerak atau berformat gif. Tapi
yang paling penting adalah ini sebuah icon jadi usahakan yang berukuran kecil saja,
misal 24 x 24 pixel atau 32 x 32 pixel saja supaya loadingnya cepat.

Cara Mengganti Icon Blogger di Addres Bar


1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini </head>
6. Taruh script berikut ini tepat diatas kode </head>

<link href='http://img401.imageshack.us/img401/7652/eqizqu6.gif' rel='SHORTCUT


ICON'/>
7. Lalu Simpan kalu sudah selesai.

Berikut ini Icon-icon yang bisa kita gunakan:

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

Membuat Daftar Isi Blog Kita dengan Mudah


Isi blog kita yang telah kita pelihara dari kecil sampai dewasa ini tentunya sudah
sangat banyak postingan, Ada banyak sekali judul postingan yang telah kita
terbitkan. Tentu untuk mempermudah para pengunjung untuk melihat apa saja
yang ada di blog kita tanpa melihat seluruh isi tulisan blog kita itu tidak mudah, jika
orang harus melihat seluruh isi dari postingan blog kita pasti akan jenuh, Oleh
sebab itulah perlu bagi kita untuk membuat daftar isi yang menampilkan judul-
judul yang dari postingan kita.

Trik atau tutorial yang bagus untuk membuat daftar isi atau sitemap secara
otomotis ke dalam halaman postingan. hack yang sangat rapih, bagus dan pintar ini
dikembangakan oleh abu farhan. Daftar isi ini dikelompokkan berdasarkan Label

Cara Membuat Daftar Isi Blog Kita dengan Mudah


1.Login Ke blogger
2. Pilih entri Baru
3. Masukan script sebagai isi Postingan

<script style="text/javascript" src="http://www.abu-


farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://kurniasepta.blogspot.com/feeds/posts/default?max-
results=9999&alt=json-in-script&callback=loadtoc"></script>

4. Ganti kurniasepta dengan URL kita sendiri.


5. Beri judul misal "Daftar Isi Blog" kalau sudah terbitkan entri.

Menambahkan Nomor Halaman di Bawah Area Postingan


Ibarat sebuah buku, blog seharusnya juga memiliki sebuah halaman. Dengan menmabahkan atau
memberi nomor halaman tentu akan mempermudah kita untuk mencari dan membuka buku itu.
Kali ini kita kan belajar cara menambhkan halaman di bawah area postingna, mungkin untuk
lebik jelas dan mengerti apa yang dimaksud halaman disini adalah seperti ilustrasi di bawah ini:

Page 1 of 9: 1 2 3 Next Last

Dengan begitu tentu akan mempermudah pembaca atau pengunjung blog kita
untuk melihat-lihat isi dari tulisan atau postingan kita. Misalnya kita menampilkan 5
judul postingan dalam halaman yang pertama, 5 postingan dihalaman kedua, dan
seterusnya. Langsung saja kita praktekan bersama-sama, karena caranya sangat
mudah.

Cara Menambahkan Nomor Halaman di Bawah Area Postingan

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #fff;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #fff;
background-color: #333;
}

.showpageNum a {border: 1px solid #505050;


color: #666;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #fff;
background-color: #333;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #000000;
background-color: #ffffff;

.showpage a:hover {font-size:11px;


border: 1px solid #333;
color: #ffffff;
background-color: #333;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #fffff;
color: #ffffff;
background-color: #333333;}

.showpageNum a:hover {font-size:11px;


border: 1px solid #333;
color: #ffffff;
background-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=2;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

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;color: #ffffff;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>

5. Simpan Kalau sudah selesai.


6. Pindahkan Gadget HTML tersebut dengan mendragnya ke bawah Posting Blog
(Blog Post)
Membuat Jump Menu atau Dropdown Menu (Open Link In
Same Window)
Jump Menu atau Dropdown Menu pernah kita pelajari di tutrial yang sebelumnya,
mungkin untuk meningatkan bisa kita cuplik sedikit Jump menu adalah salah satu
gadget (widget) yang sama fungsinya dengan blogroll, tetapi lebih hemat tempat
lagi, karena cuma satu baris dan untuk membukanya kita tinggal mengklik arah
panah ke bawah.

Ada perbedaan dengan Jump Menu yang akan kita pelajari sekarang dengan yang
dulu ( bisa dibaca disini yang ) kalau yang pertam dulu kita membuat jump menu
dengan open link in new window, tapi yang sekrang kita akan belajar bagaimana
membuat jump menu atau dropdown menu dengan membuka link di jendela
yang sama. Ini cocok untuk link berupa label-label tulisan di blog kita, karena masih
ada hubungan dengan blog kita, dan lebih menghemat tempat.

Cara Membuat Jump Menu atau Dropdown Menu (Open Link In Same
Window)
1. Login ke blogger
2. Pilih tata letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<select
onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>MENU BLOG</option>
<option value="Links 1">Label 1</option>
<option value="Links 2">Label 2</option>
</select>

*) Tulisan tebal adalah Judul yang Muncul, dan tulisan yang miring adalah URL link
tersebut
Contoh jika saya gunakan dalam Belajar Ngeblog di Blog seperti ini

<select
onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Menu Blog</option>
<option
value="http://kurniasepta.blogspot.com/search/label/aksesoris">Aksesoris</option
>
<option value="http://kurniasepta.blogspot.com/search/label/blogger
%20kreatif">Blogger Kreatif</option>
<option value="http://kurniasepta.blogspot.com/search/label/pernak-
pernik">Pernak-Pernik</option>
<option
value="http://kurniasepta.blogspot.com/search/label/widget">Widgets</option>
<option
value="http://kurniasepta.blogspot.com/search/label/musik">Musik</option>
<option value="http://kurniasepta.blogspot.com/search/label/tips%20blog">Tips
Blog</option>
</select>

Jika berhasil hasilnya akan seperti ini

Menu Blog

Top of Form

Enter your email address:

Bottom of Form

http://artikelkomputerku.blogspot.com/2009/11/cara-buat-teks-judul-blog-berjalan-
di.html

Anda mungkin juga menyukai