Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Cara Membuat Update Artikel Headlines Via Feedburner

Cara Membuat Update Artikel Headlines Via Feedburner -  Tutorial blog kali ini saya akan membahas update artikel terbaru Headlines via Feedburner, yang dimana bila kita memosting artikel terbaru maka secara otomatis artikel yang baru kita tulis tersebut akan langsung terlihat di Headline feedburner ini, yang kbanyakan posisi Headlines ini terletak di sedebar blog. Sebagai penampakan biar lebih jelas lihat gambar di bawah :


Untuk membuat nya, sobat tinggal ikutin cara-cara berikut ini :
1. Login ke feedburner (bila belum memiliki akun silahkan daftar dulu)
2. Disini saya sudah menganggap anda sudah terdaftar,
3. Pilih Blog yang akan di buat Headlines nya, lalu klik tulisan Publicize > BuzzBoost di Sidebar kiri, lalu pada bagian daftar Buzzboost nya, atur tampilan sesuai keinginan, setelah diatur, klik active di bagian bawah.
4. Ambil kode html nya lalu pastekan ke sidebar blog sobat.
5. Selesai.

Semoga bermanfaat.

Rating: 5.0
Reviewer: eljohn us

Masalah Yang Harus Dihindari Agar Blog Tidak Sepi

Sudah hampir 2 bulan saya tidak mengangkat topik tentang Tips & Trik Blogger, terakhir saya posting artikel blogger tentang Tutorial Membuat Kotak Komentar Blogspot Bergambar yang fungsi nya hanya mempercantik kotak komentar saja.


Nah, kali ini saya akan coba membahas sedikit tentang Masalah Yang Harus Dihindari Agar Blog Tidak Sepi, Pembahasan ini saya rangkum menurut dari pengalaman saya pribadi, karena apabila kita memiliki blog yang pengunjungnya sedikit (sepi), otomatis kita akan merasa jenuh dan tidak lagi bersemangat untuk ngeblog.

Berikut Masalah Yang Harus Dihindari Agar Blog Tidak Sepi :

1. Blog Tidak Pernah Dipromosi
Jika anda kurang paham dengan SEO,itu tidak lah masalah karena untuk mendatangkan pengunjung tidak hanya melalui SEO, banyak cara mendatangkan pengunjung salah satu nya dengan Promosi blog, baik itu ke forum-forum,iklan via online/via offline, sekarang tergantung anda mana yang menurut anda dapat mendatangkan pengunjung.

2. Update Artikel Tidak Karuan
Maksud nya disini,blog anda jarang mengupdate artikel terbaru, saran saya updatelah artikel apasaja yang menurut anda bagus untuk diposting dan usahakan minimal 1 hari, 2 artikel terbaru yang diposting.

3. Loading Blog Lambat
Ini juga merupakan faktor penting menyebabkan pengunjung enggan berkunjung kembali, bagaimana tidak bila blog anda lambat untuk dibuka, maka pengunjung akan merasa bosan bahkan emosi bila menunggu lama saat membuka blog anda.

4. Template Asal-asalan
Template juga perlu profesional, biar gratisan seperti template saya tapi terlihat elegan,benar ga ..hhe, pilih lah template yang sedap untuk dilihat, jangan hanya selera sendiri untuk memilih template, bila perlu tanya rekan-rekan atau pengunjung,template yang kamu pakai sudah layak di publis atau belum.

5. Memilih Topik blog yang kurang diminati
Topik blog atau topik blogging secara sederhana bisa dipahami sebagai aktivitas blogging yang secara khusus dilakukan dengan cara membuat blog tertentu dengan bertema khusus dan ditunjukan kepada pembaca yang bertema khusus pula. jadi pilihlah Topik yang banyak diminati oleh para pengunjung seperti download software, pelajaran, tutorial blog, dan lain-lain.

Saya kira 5 masalah diatas yang perlu dihindari agar blog anda tidak sepi, selamat mencoba jadilah blogger sejati :))
Baca juga : Cara Membuat Blog Dari Nofollow Menjadi Dofollow dan Cara Membuat Kotak Pencarian Di Sidebar Blog .
Rating: 5.0
Reviewer: eljohn us

Cara Membuat Berlangganan Via Email Di Blog

Salam blogger, Mudah-mudahan hari ini semua tidak pada stress ya, soal nya pembahasan kita kali ini membuat agak sedikit stress yaitu Cara Membuat Berlangganan Via Email Di Blog, butuh konsentrasi penuh untuk mengikuti tutorialnya.


Fungsi dari Berlangganan Via email di blog yaitu Apabila ada seorang pengunjung yang memasukkan email via widget berlangganan ini, otomatis setiap blog kita update artikel terbaru maka artikel terbaru tersebut akan langsung terkirim ke email pengunjung yang berlangganan.

Dan untuk memasang nya di blog kita berikut cara-cara nya :
1. Buka situs www.feedburner.google.com (Bila belum memiliki account silahkan daftar dulu)
2. Disini saya menganggap Anda sudah terdaftar.
3. Klik menu Publicize > Email Subscriptions > Lalu ambil kode HTML nya :


4. Sekarang Masuk Pada Pemasangan Kode HTML
5. Masuk ke Blog Anda klik Tata letak > Tambah gadget > Lalu pilih HTML/Javascript
6. Paste kan Kode dibawah ini kedalam HTML/Javascript :

<style>
.kode-email{
background:url(http://i943.photobucket.com/albums/ad277/pakkuk/rss.gif) no-repeat 0px 14px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#000000;
}
.kode-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#000;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.kode-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="kode-email">
Berlangganan via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=eljohn-ussharinginformasi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="Eljohn-usSharingInformasi" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="kode-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Keterangan :
Warna biru : ganti dengan URL gambar yang Anda sukai
Warna Merah : Ganti dengan kode HTML yang baru di ambil di Feed burner sebelum nya (kode no.3)

7. Pratinjau terlebih dahulu, bila tidak ada kesalahan baru di Save. Selamat mencoba.

Anda juga dapat membuat tutorial Cara Membuat Isi Label Tampil Dengan Judul Saja yang cara pembuatan nya sangat lah gampang.

Tutorial Membuat Kotak Komentar Blogspot Bergambar

Tutorial Membuat Kotak Komentar Blogspot Bergambar, Harus garuk-garuk kepala dulu neh sob,setiap awal postingan selalu binggung mau buat kata sapaan apa, soal nya masih newbie :))


Baik lah seperti kata sapaan biasa saja, kali ini saya mahu berbagi tutorial yang berhubungan dengan kotak komentar di blogspot,yang tujuan nya hanya untuk memperindah kotak komentar saja,supaya para pengunjung tertarik untuk berkomentar.

Dan untuk membuat nya berikut cara-caranya :
1. Masuk ke blogger;
2. Klik Template,Edit Html
3. Checklist Expand Template Widget (Jgn lupa Backup template);
4. Kemudian tambahkan kode script berikut ini diatas kode ]]></b:skin>

#comment-form iframe{
   background:#ffffff url(Url gambar jika ingin membuat gambar) ;
   border:5px solid #9999FF;
   padding:5px;
   font:normal 12pt "ms sans serif", Arial;
   color:#7EB2AC;
   width:450px;
   height:230px;
   }

#comment-form iframe:hover{
   background:#000000 url(Url gambar jika ingin membuat gambar);
   border:7px solid #999FFF;
   }

Jika kode tersebut telah ada, maka sobat hanya perlu memodifikasi elemen yang ada di dalamnya, saya menemukan sebagian template tidak memiliki kode tersebut. Sobat bisa merubah gambar background sesuka hati sobat.

5. Selanjutnya sobat cari kode yang mirip seperti ini:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>
<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/>

6. Kemudian pastekan kode  <div id='comment-form'> dan </div> diantara kode tadi sehingga menjadi seperti ini: 

<div id='comment-form'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>
<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/> 
</div>

7. Pratinjau terlebih dahulu bila sudah tidak ada lagi kesalahan, baru di save.

Ket :
Url gambar jika ingin membuat gambar maksud nya yaitu apabila sobat ingin membuat background kotak komentar dengan gambar, sisipkan URL gambar sobat pada tulisan berwarna merah tersebut.
Mudah-mudah dimengerti yah, jika ada pertanyaan sobat bisa menanyakan saya langsung pada kotak komentar dibawah ini.
Terima kasih.
Rating: 5.0
Reviewer: eljohn us

Cara Membuat Isi Label Tampil Dengan Judul Saja

Cara Membuat Isi Label Tampil Dengan Judul Saja - Mudah-mudahan dengan judul nya semua pada paham ya, memang agak sedikit membingungkan tapi mudah di mengerti :))
Jika Anda seorang blogger sudah pasti tahu apa itu Label, dan jika Anda Blogger pemula berikut kesimpulan dari arti Label. Label adalah kategori yang befungsi untuk mengelompokkan artikel atau postingan yang berhubungan dengan postingan.


Tujuan nya sendiri yaitu, apabila Anda membaca sebuah artikel kesehatan, maka semua pengelompokan dari artikel tersebut tentang kesehatan juga.
Dan untuk desain Label di blog sendiri bisa kita otak-atik sesuai dengan selera seperti berbentuk cloud,label dengan Background dll.

Nah, kali ini kita ingin membuat Tampilan Label hanya terlihat judulnya saja dari semua label yang terkait dan untuk membuat nya, berikut cara-cara nya :

1. Login ke blog
2. Klik Rancangan lalu klik edit Html
3. Setelah itu cari kode berikut  
<b:include data='post' name='post'/> gunakan (ctrl+f) biar lebih gampang.
4. Jika sudah ketemu dengan kode di atas ganti dengan kode dibawah ini :


<!--Judul Artikel saja di label-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--eljohn-us.blogspot.com-->

5.Pratinjau dahulu,jika sudah tidak ada lagi kesalahan baru di save. Semoga berhasil :)

Satu tentang Cara Membuat Judul Berjalan Di Address Bar yang merupakan artikel yang sangat lah gampang di buat, selamat mebcoba.
Rating: 5.0
Reviewer: eljohn us

Cara Membuat Klik 1 link Terbuka Banyak Tab

Dengan Klik 1 link Terbuka Banyak Tab, Maksud dari judul tersebut, apabila kita mengklik 1 link yang terdapat di postingan maka akan muncul beberapa tab dengan sendirinya.
Biasanya link beginian di gunakan untuk mempromosikan website baru atau iklan-iklan tertentu, atau bisa saja di gunakan untuk promosi artikel kita yang baru.


Penasaran dengan cara membuat nya, berikut tutorial nya :

<a href="Isi URL untuk Tab 1" onclick="windows.open('Isi URL untuk Tab 2')" target="_blank">Teks Link</a>

Ket :
Warna Merah jambu : Isi URL yang akan di buka nanti nya untuk Tab 1
Merah : Isi URL yang akan di buka nanti nya untuk Tab 2
Biru : Sebagai Teks link atau penunjuk untuk mengklik link.

Seperti ini lah susunan Link nya :

<a href=" http://eljohn-us.blogspot.com/" onclick="windows.open(' http://eljohn-us.blogspot.com/')" target="_blank">Haii All</a>

Selamat Mencoba.
Rating: 5.0
Reviewer: eljohn us

Kode Warna HTML Lengkap

Didunia perblogkan pasti sangat akrap dengan yang namanya Warna HTML, karna dari setiap tampilan bentuk website itu selalu ada kaitan nya dengan warna html.
Baik itu untuk warna template nya, warna background template,dan juga warna tulisan diblog kita, semua bisa kita gunakan dengan kode warna html ini.

Bila dari Anda yang butuh mengambil kode warna html nya, berikut object untuk mengambil kode nya :

Cara Membuat Kotak Pencarian Di Sidebar Blog

Jika Anda mempunyai banyak artikel diblog, saya menyarankan Anda agar menggunakan Kotak Pencarian Di Sidebar Blog, dimana widget ini sangat membantu para pengunjung untuk mencari artikel yang ada di blog Anda.
Jadi Tunggu apalagi sobat, yuk ikutin cara di bawah ini untuk Cara Membuat Kotak Pencarian Di Sidebar Blog :
  1. Login ke blog anda
  2. Masuk pada tata letak kemudian klik "Tambah Gadget"
  3. Selanjtunya pilih HTML/JavaScript
  4. Copas Script berikut ini:
<form id="searchthis" action="http://eljohn-us.blogspot.com/search" style="display: inline;" method="get">
<input id="b-query" maxlength="305" name="q" size="20" type="text">
<input id="b-searchbtn" value="Cari" type="submit">
</form>

Catatan : Jangan lupa ganti tulisan merah dengan url blog sobat masing-masing.

Selamat mencoba yah, semoga bermanfaat.
Rating: 5.0
Reviewer: eljohn us

Cara Membuat Blog Dari Nofollow Menjadi Dofollow

Ini gan ada sedikit Tutorial tentang Cara Membuat Blog Dari Nofollow Menjadi Dofollow yang denger-denger katanya ikut bagian dalam tehnik SEO,itu sech katanya para master yang ada disono-sono :) blog saya sendiri menggunakan Dofollow yang dimana jika ada pengunjung berkomentar di blog saya, maka secara otomatis blog nya pengunjung tersebut akan dapat link dari blog saya.


Dan jika dari antara rekan blog sekalian yang ingin mengganti blog Nofollow nya ke Dofollow, berikut cara membuat nya :

  1. Login ke Blogger Masuk dasbor
  2. Pilih blog yang ingin dibuat DO FOLLOW,klik edit HTML,klik Expand Widget
  3. Cari kode Berikut

    <a exper:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    Hapus kode yang berwarna merah jadi seperti ini :

    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
  4.  Klik save
    Selesai
Satu lagi gan, ne ada artikel tentang Cara Membuat Daftar Isi Lengkap Diblog versi terbaru,yang dimana seluruh artikel blog yang terposting akan secara otomatis masuk kedalam list daftar isi tersebut, silah kan gan jika masih ada yang belum memilik Daftar isi di blog nya.
Rating: 5.0
Reviewer: eljohn us

Cara Membuat Blog Dalam Perbaikan (Maintenance)

Anda punya Blog ? sudah pasti ada waktu untuk perbaikan, baik itu sewaktu mengganti template,menambah widget,membuat pernak-pernik blog supaya blog terlihat lebih elegan atau apa lah yang membutuhkan waktu untuk untuk perbaikan.


Untuk Blog Dalam Perbaikan (Maintenance) ini hanya di tujukan agar dimana para pegunjung blog kita tidak terganggu akan dimana ada perubahan di rancangan blog kita.

Nah, jika ingin membuat blog nya maintenance, berikut tutorial nya :

1. login blog
2. buka rancangan >> edit HTML
3. taruh kode dibawah ini diatas kode ]]></b:skin>

html {
  height: 100%;
  background: url(http://www.eljohn-us_upload-photobucket.JPG.jpg) no-repeat center 50%;
  margin: 0;
}
body {
  display: none;
}

4. Untuk tulisan yang berwarna merah ganti dengan url gambar Anda yang sebelumnya sudah di upload di tempat penyimpanan gambar Anda.
5. Simpan template.

Dengan tutorial  Cara Membuat Blog Dalam Perbaikan (Maintenance) diatas mudah-mudahan maintenance nya berjalan lancar yah, selamat mencoba.
Rating: 5.0
Reviewer: eljohn us

Situs Penyedia Template Blogger SEO Friendly

Hallo para rekan blogger dimana saja berada kali ini eljohn-us ingin berbagi tentang Situs Penyedia Template Blogger SEO Friendly. Untuk sebuah blog, template itu sangat lah penting bisa di ibaratkan template adalah pondasi dari segala tumpuan untuk kita memulai ngeblog.


Tidak hanya untuk kepentingan SEO, dari tampilan template juga orang bisa menilai seberapa bagus situs kita, dan juga bisa membuat para pengunjung betah.

Berikut ini ada beberapa situs yang menyediakan Template gratisan versi saya yang pastinya SEO Friendly :
1. btemplate.com
2. zoomtemplate.com
3. blogtemplate4u.com
4. freetemplatesblogger.info
4. finalsense.com
5. premiumbloggerstemplate.com
6. deluxetemplates.net
7. template-bloggerindonesia.net
8. bloggerthemes.net
9. blogtemplatesfree.com
10. blogcrowds.com

Dari situs penyedia template diatas rekan-rekan bisa memilih template secara gratisan,sedikit saran tentang template gratisan, edit lah sedikit saja dari tampilan aslinya, ini agar tidak menyamai dari blog lain yang apabila memakai template yang sama.

Dengan artikel Situs Penyedia Template Blogger SEO Friendly ini mudah-mudahan dapat menambah wawasan kita yah. Semoga bermanfaat.
Rating: 5.0
Reviewer: eljohn us

Cara Membuat Link Blog Warna-Warni

Tutorial ini hanya buat memperindah link yang ada di blog kita, pada sudah tahu kan apa itu yang dinamakan link ? saya rasa semua pasti sudah tahu ya.
Penggunaan Cara Membuat Link Blog Warna-Warni pada umum nya tidak di anjurkan hanya saja jika ada diantara sobat yang ingin mencoba tidak ada salah nya, ternyata keren lho apabila setiap link dibuat warna-warni :)
Ingin mencobanya, berikut cara-cara nya :
  1. Cari Kode
  2. kemudian taruh kode dibawah tepat dibawah kode
    <script src='http://anas.ku93.googlepages.com/rainbow.js'>
    </script>
  3.  Kurang lebih jadinya
    <head>
    <script src='http://anas.ku93.googlepages.com/rainbow.js'>
    </script>
  4. Semudian Pratinjau terlebih dahulu jika tidak ada kesalahan, Save dan Lihat hasilnya ok!
Gampangkan tentang Cara Membuat Link Blog Warna-Warni,selamat mencoba yah. Good Luck !

Script by : Tutorial-jitu
Rating: 5.0
Reviewer: eljohn us

Membuat Gambar Dipostingan Menjadi Besar Apabila Disorot Dengan Cursor

Seperti pada postingan 10 Top Bikini Selebritis yang saya posting sebelum nya merupakan artikel yang memiliki banyak gambar di postingan tersebut, nah apa hubungan nya, hubungan nya yaitu jika kita arah kan cursor pada gambar yang ada di artikel tersebut maka akan gambar tersebut dengan sendiri nya akan membesar, tanpa harus kita mengklik nya.


Penasaran dengan cara  Membuat Gambar Dipostingan Menjadi Besar Apabila Disorot Dengan Cursor berikut cara-cara nya :
1. Login Ke Blogger
2. Klik Template >> Edit HTML.
3. Centeng Expand Widget Template.
4. Tekan CTRL F dan cari ]]></b:skin
5. Kalau sudah ketemu letakkan kode berikut diatas kode ]]></b:skin>

 .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); }

6. Klik Pratinjau dulu sebelum menyimpan, jika gak ada masalah, Simpan Template.

Saya rasa sangat gampang membuat nya yah, tidak seperti Cara Membuat Headline News Berjalan di Blog kalau artikel yang satu ini agak lumayan susah, tapi jika ada tutorial nya maka semuanya akan gampang iya kan.
Selamat mencoba.

Download Template SEO,Fitur Adsense,Fast Loading For Blogger

Ada kabar bagus buat para blogger yang doyan gonta-ganti pasangan ehh template maksud nya,ini adalah template seo dan fitur Adsense yang paling di idam-idam kan atau kata keren nya paling dicari, bagai mana tidak dari template ini dirancang memang di tujukan untuk template seo dan sangat friendly.

Seperti template yang saya gunakan pada saat ini,semua lengkap mulai dari fitur adsense nya yang strategis,kecepatan loading template nya pun sangat faster.

Berikut detail dari template :

Demo | Download

Mungkin jika ada diantara kita yang memakai template tersebut, kiranya di edit sedikit tampilan nya yah, ini agar supaya dari blogger yang menggunakan template ini tidak sama :)
Terima Kasih.

Cara Membuat Judul Berjalan Di Address Bar

Untuk pemahaman judul diatas, kita cari tahu dulu apa itu Judul Address Bar. Judul Address Bar merupakan Judul title blog yang letaknya berapa di ujung kiri browser yang kita gunakan,dengan cara ini kita dapat membuat judul berjalan seakan menari-menari.

Dan untuk membuat nya, Sobat tinggal menggikuti cara-cara berikut ini :
  • Login ke Blogger
  • Setelah itu klik menu Layout atau Tata letak
  • Kemudian klik menu Edit HTML
  • Silahkan temukan kode ini </head> (Gunakan CTRL+F,biar gampang)
  • Letakkan kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
msg = " --- KATA-KATAKU ";
msg = " | Terserah Mau Buat Kata Apa | Terserah Mau Buat Kata Apa | Terserah Mau Buat Kata Apa | Terserah Mau Buat Kata Apa --- " + 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()",100);
}
scrollMSG();
//]]>
</script>

Untuk Keterangan Huruf warna Biru,ganti sesuai dengan kata-kata sobat,maka nanti nya huruf tersebutlah yang akan berjalan dan menari-menari.
Selamat mencoba, jika Gagal kritik blog ini,jika Berhasil Give Thx.

Cara Membuat Daftar Isi Lengkap Diblog

Tahukan rekan-rekan blogger, kalau membuat daftar isi (site map) itu sangatlah penting dimata Google dan termasuk juga untuk pengunjung setia blog nya rekan-rekan agar dimana mereka dapat dengan mudah mencari artikel di blog tersebut.


Seperti blog saya ini, saya menggunakan widget simple ini, dari buatan nya mas abufarhan yang script nya bisa dipakai secara percuma dan tidak pakai ribet, script HTML nya sudah dirancang se simple mungkin agar teman-teman dapat dengan mudah menggunakan nya.

Dan bila ingin memakai script Cara Membuat Daftar Isi Lengkap Diblog miliknya abufarhan yang kebetulan juga saya pakai pada blog ini, berikut cara pembuatannya :

1. Login keblog
2. Buat Entri baru
3. Lalu Klik HTML di pojok kiri samping Compose.
4. Paste kan kode script dibawah ini di kotak HTML tersebut " Ingat Di HTML bukan COMPOSE "

<script src="http://sites.google.com/site/congcot/kode-1/CCjs1.js">
</script> <script src="http://eljohn-us.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script> <script type="text/javascript">
 var accToc=true;
</script> <script src="http://sites.google.com/site/congcot/kode-1/CCjs2.js" type="text/javascript">
</script>

5. Ganti tulisan yang tebal dengan alamat blognya rekan-rekan, simpan dan lihat hasil.

Sekian dulu tutorial untuk Cara Membuat Daftar Isi Lengkap Diblog dan bagi yang ingin membuat breadcrumb di blog nya cukup klik disini.
Semoga bermanfaat.

Kode Script by : abu-farhan.com

Cara Menghilangkan/Menghapus Judul Blog Di Header

Tutorial ini hanya ditujukan untuk blogger yang malu dan minder melihat judul blognya sendiri sehingga pengen cepat-cepat untuk menghapus atau menghilangkan judul blog nya , atau mungkin saja karena hal-hal yang lain kali yah .

Dan jika ingin menghapus nya, cara nya simple n gampang koq, tidak seperti cara membuat Cara Membuat Headline News Berjalan di Blog yang di publish pada beberapa waktu lalu, yang memang agak sedikit perlu kejelian dan konsentrasi agar tidak ada kesalahan pada HTML.

Yuk,langsung saja menuju tata Cara Menghilangkan/Menghapus Judul Blog Di Header :

1.Login Blog
2.Rancangan/Tata letak
3.Pilih Edit HTML (centang Expand template widget)
4.Lalu cari kode berikut (dengan CTRL+F) :

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 67%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;

5.Setelah ketemu dengan kode yang diatas,sematkan kode berikut :
   visibility:hidden; tepat dibawah color ; sehingga menjadi seperti kode dibawah ini :

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

Bagaimana Gampang yah .. Selamat mencoba.
 

Cara mengganti warna link diblog

Kali ini kita bahas Tutorial Blogger yang gampang-gampang dulu yah, tidak seperti pada Cara Membuat Headline News Berjalan di Blog pada postingan sebelum, Pada topik tersebut lumayan membutuhkan ekstra konsentrasi yang penuh,kalau tidak kode script pada Template HTML akan mengalami error bahkan fatal bila tidak pas pemuatan kode nya.

Baiklah kalau untuk tutorial ini cara nya gampang sangat,rekan-rekan hanya perlu mencari sedikit script HTML di templatenya masing-masing,
Berikut caranya :

1.Login Blog
2.Rancangan/Tata letak
3.Pilih Edit HTML (centang Expand template widget)
4.Lalu cari kode berikut :
    a:link { color:#0000cc;
    text-decoration: underline;
    }
    a:hover {
    color:#ff0000;
    text-decoration: underline;
    }
    a:visited {
    color:#006600;
    text-decoration: underline;
    }
Sedikit keterangan Tentang mengganti warna link diatas :
    a:link {
    color:#0000cc;
    text-decoration: underline;
    }
    Link ini akan berwarna biru.

    a:hover {
    color:#ff0000;
    text-decoration: underline;
    }
    Jika mouse kita arahkan pada link maka akan berubah menjadi warna merah.

    a:visited {
    color:#006600;
    text-decoration: underline;
    }
    Jika link selesai diklik pengunjung maka link akan berubah menjadi hijau.
Saya rasa simple yah,Cara mengganti warna link diblog dan bilamana ada yang kurang paham atau sulit dimengerti rekan-rekan dapat menanyakan saya, saya akan menjawab sedetail mungkin.

Cara Membuat Headline News Berjalan di Blog

Coba rekan-rekan perhatikan pada bagian Menu blog ini dan lihat kebawahnya,itulah yang dinamakan Headline News berjalan.
Mungkin sebagian dari para blogger sejati jarang menggunakan tentang Cara Membuat Headline News Berjalan di Blog ini, mungkin karena faktor kurang paham HTML ato malas di karenakan banyak script yang akan di pasang atao karna apalah.



Padahal bagus lho dibwat di blog, dan juga berfungsi untuk mempermudah para pengunjung untuk melihat tak headline dari daftar isi blog tersebut.

Dan bagi rekan-rekan yang ingin membuat nya diblog masing-masing,berikut Tata cara untuk membuat nya :

1. Rancangan > Edit Html . jangan lupa centang expands nya.
2. Cari kode ]]></b:skin>
3. Jika sudah ketemu , pastekan kode di bawah ini tepat di atas kode ]]></b:skin>
kode:
.newspic {background:#FFF url(http://4.bp.blogspot.com/-dx79apSnB6I/T3UoZVIgltI/AAAAAAAACxY/35LWW31ebL4/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 840px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000;text-decoration:none;}
.news a:hover {color:#0099cc;text-decoration:underline;}

4.Cari kode </head> , jika sudah ketemu,pastekan kode berikut ini tepat di atas </head>
kode:

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#0099cc;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 12px courier;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 960px;
height: 13px;
border: 0px solid #cdcdcd;
padding: 0px;
font:bold 13px courier;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #0099CC;}
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}
#example1 a:hover {color:#111;text-decoration:none;}
</style>

5.sekarang lanjut cari kode <div id='outer-wrapper'>
Jika sudah ketemu ,silahkan pastekan kode berikut ini tepat di atas <div id='outer-wrapper'>
kode:
<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://eljohn-us.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div>

6.Jika sudah selesai, silahkan simpan template anda dan lihat hasilnya.
untuk posisi sendiri silahkan di tempatkan sesuai selera anda.
kode pada poin 5 itu bisa anda masukkan di element html/javascript pada rancangan blog anda .ato dimana pun posisi yang rekan-rekan inginkan script Headline news nya berada.
Dan untuk tulisan berwarna merah ganti dengan alamat Blog Anda.

Bila ada yang kurang paham rekan-rekan bisa mengontact saya atau pun mencantumkan keluhan di kotak komentar dibawah.

Kode script By : http:/thizan.blogspot.com/

Cara Membuat Breadcrumb Di Postingan Blog

Untuk mengetahui apa itu Breadcrumb ada baik nya kita pahami dulu pengertian nya dan juga fungsi dari breadcrumb ini sendiri.
Pengertian Breadcrumb yaitu menu navigasi yang letaknya berada di atas judul setiap postingan ini berguna untuk mempermudah para pengunjung untuk melihat label yang mencakup di postingan tersebut. (versi eljohn-us)
Sedangkan untuk fungsinya sendiri adalah untuk mengetahui pengunjung sedang dihalaman mana sekarang. Dengan kata lain kita sedang berada dilokasi yang kita tempati sekarang ini. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan.

Dan bagi Anda yang ingin membuat cara membuat breadcrumb di postingan blog seperti yang ada di blog saya ini, berikut cara-cara nya :

1. Masuk ke blogger.com, Pilih Tab Design, Pilih Tab Edit HTML, ceklis pada Expand Widget Templates.

2. Cari kode ini pada template anda. ]]></b:skin>

3. Copas kode berikut diatas kode ]]></b:skin> :

.breadcrumb { 
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

4. Cari kode berikut di template Anda. <b:includable id='post' var='post'>

5. Copas kode berikut dibawah kode <b:includable id='post' var='post'>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

6. Klik prtinjau terlebih dahulu jika tidak ada kesalahan,Klik Save Templates.
Sekian dulu tutorial untuk pembuatan breadcrumb di postingan blog , jika ada yang kurang paham atau pun bilamana ada kesalahan pada script di atas mohon agar di beritahu pada kotak komentar di bawah.
Terima Kasih.
Related Posts Plugin for WordPress, Blogger...