Blogger Tutorial Blog-Free Widget-Tips Trik Blogspot-Cara Buat Blog

Cara Buat Link di blogger.com

2012-03-21T19:30:00.000+07:00

Link dalam bahasa Indonesia berarti "Hubungan atau Tautan". Link atau Tautan sesuai dengan namanya berfungsi untuk mentautkan atau menghubungkan antara satu halaman dari suatu blog dengan halaman lainnya.

Link di bagi menjadi dua jenis yaitu :

Link Internal : Link Internal digunakan untuk menghubungkan satu posting dengan posting lainnya (Masih dalam lingkup satu blog).
Link External : Link External digunakan untuk menghubungkan satu blog dengan blog lainnya. Link External ini sering juga digunakan untuk menghubungkan posting dari halaman suatu blog dengan blog lainnya. Misalnya posting dari blog A dengan posting dari blog B.

Cara Buat Link di blogger.com :
Ada banyak cara yang yang bisa sobat blogger lakukan untuk membuat link pada teks :

Cara pertama dengan menambahkan tag seperti di bawah ini :

<a href="http://www.blogger.com">Blogger</a>

Teks yang berwarna merah adalah URL dan yang berwarna biru adalah teks yang akan ditampilkan. Tag dari contoh di atas akan terlihat seperti ini : Blogger

Cara kedua adalah dengan menggunakan Tombol link yang sudah disediakan oleh blogger.com.

Cara ini adalah cara yang paling mudah untuk membuat link. Kita hanya mem-blok kata teks yang akan kita buat link kemudian kita klik tombol Link yang ada pada menu bar dan terakhir kita masukkan URL-nya.

Coba perhatikan gambar dan petunjuk di bawah ini sambil di ikuti!

Blok teks atau kata yang akan di buat menjadi link

Klik tombol link yang ada pada menu bar

Jendela baru akan muncul

Kolom "Text to display" adalah teks yang akan ditampilkan
Kemudian Kolom "Web address" adalah URL yang akan di tuju
Jangan lupa untuk mengisi kolom "Web address" tersebut, setelah itu klik "OK".
Maka link yang sudah kita buat tadi terlihat seperti ini : Google

Kalau sobat blogger kasih tanda centang pada "Open this link in a new window", maka link yang sudah kita buat akan terbuka pada jedela baru atau tab baru.

Selamat Mencoba and Good Luck...!!!

Membuat Teks Link Berkedap Kedip

2012-03-19T19:30:00.010+07:00

Apakah sobat blogger pernah berkunjung ke suatu blog, kemudian salah satu atau beberapa teksnya berkedip? Misalnya seperti ini : Blogger Tutorial Blog. Apakah sobat blogger penasaran dan bertanya-tanya bagaimana cara membuat teks teks berkedip seperti itu? Ternyata, untuk membuat efek berkedip pada teks sangatlah mudah. Sobat blogger hanya menambahkan sedikit tag sebelum teks yang akan di tampilkan.

Sebagai contoh :

<blink>Free Widget</blink>

Maka hasilnya jadi seperti ini :
Free Widget

Intinya, untuk membuat teks berkedap kedip, sebelum teks kita harus meletakkan tag <blink> dan tag </blink> setelah teks. Bingung...??? Baca keterangan di atas berulang-ulang dan pelan-pelan, lama-lama sobat blogger pasti ngerti.

Bagimana kalau kita terapkan efek berkedip ini pada link? Bisa apa tidak? Ya jelas bisa dong. Caranya sama dengan di atas seperti ini :

<blink><a href="http://bloggertutorialblog.blogspot.com" target="_blank">Blogger Tutorial Blog</a></blink>

Berikut ini hasilnya :
Blogger Tutorial Blog

Blinking text atau blinking link ini terlihat bagus kalau kita menggunakan media browser Firefox, bagaimana dengan Internet Explorer atau Google Chrome? Sobat blogger akan menemukan jawabanyya kalau sudah membuka postingan ini dengan kedua media browser tersebut.

Saya rasa, tutorialnya sudah cukup. Saya sangat yakin kalau sobat blogger sudah bisa membuatnya. Semoga tips trik blogspot yang singkat tentang Cara Membuat Teks Dan Link Berkedap Kedip ini bermfaat buat sobat blogger. Terima kasih sudah mengunjungi Blogger Tutorial Blog.

Cara Buat Tombol Hide and Show (Spoiler)

2012-03-18T10:44:00.000+07:00

Tomblo Hide and show lebih populer dengan sebutan Spoiler. Mungkin, dari namanya saja "Hide and Show" sobat blogger sudah tau fungsi dari tombol ini. Tidak tau? Ya sudah, saya jelaskan sedikit. Hide dalam bahasa Indonesia berarti menyebunyikan dan Show dalam bahasa Indonesia berarti menunjukkan. Jadi, tombol Spoiler berfungsi untuk menyembunyikan teks, Link atau gambar. Spoiler ini sangat bermamfaat buat blog karena dengan adanya spoiler, kita bisa mengemat tempat kalau kita gunakan saat menulis artikel dan bisa menghemat tempat juga kalau kita gunakan sebagai Widget atau Gadget. Tempatkan kode Hide and Show atau spoiler pada tempat yang diinginkan (Kolom Postingan atau Kolom HTML/Java Script)

<div><div style="margin-bottom: 2px;"><i><b><small>Coba di Klik</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px;font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'show'; }" type="button"></div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI

</div></div></div>

Hasilnya akan terlihat seperti di bawah ini

Coba di Klik

Tambahan :
Jangan lupa mengganti "TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI" dengan gambar, link atau tulisan yang akan disembunyikan

Mamfaat Alexa Site Audit

2012-03-17T19:30:00.001+07:00

Alexa adalah sebuah situs yang sering di kupas atau di bahas oleh hampir semua blog. Ada yang mengupas tentang Cara membuat widget Alexa, Cara Memasang Widget Alexa, Cara optimasi blog di Alexa, Cara Claim blog di Alexa, dan banyak lagi topik lain yang di bahas tentang Alexa. Supaya sedikit berbeda dengan blog-blog yang lain dan supaya tidak di kira tulisan ini hasil kutipan, saya pun akan membahas topik yang lain tentang Alexa yaitu Mamfaat Alexa Site Audit. Walaupun informasi yang akan saya sajikan atau kupas hari ini sangat sedikit, saya sangat berharap, semua ini dapat menambah pengetahuan kita tentang Alexa.

Seperti yang tertulis di background di situs tersebut, dengan Alexa Site Audit, You can grow your web traffic and improve your user experience. Artinya dengan melakukan site audit di situs Alexa, sobat blogger dapat meningkatkan traffik blog sobat dan dapat mengembangkan pengalaman sobat sebagai pengguna

Apa mamfaat dari Alexa Site Audit? Mungkin sobat blogger pernah bertanya tentang hal tersebut Jadi saya akan gambarkan sedikit tentang semua itu. Ada empat point penting yang kita bisa dapatkan kalau melakukan Site Audit di Alexa yaitu :

Increased Traffic
Extensive Insights
Peace of Mind
Complete Control

Increased Traffic (Lalu lintas meningkat)

Alexa Site Audit menyediakan analisis SEO yang paling lengkap di mana saja. Setiap audit memeriksa hingga 10.000 halaman di situs atau blog kita dan memberi kita rekomendasi terinci untuk meningkatkan lalu lintas pencarian kita.

Extensive Insights (Wawasan yang luas)

Lebih dari sekedar Tool SEO, Alexa Site Audit juga meliputi laporan pada kegunaan dan analisis Web cakupan tag di situs web atau blog kita.

Peace of Mind (Ketenangan Pikiran)

Dengan laporan berjalan secara otomatis dua kali setiap bulan, Alexa Site Audit memonitor situs atau blog kita sehingga kita dapat berkonsentrasi pada pengembangan bisnis kita.

Complete Control (Kontrol yang lengkap)

Kita dapat membatalkan langganan kita setiap saat, kita tidak akan ditagih lagi. Atau membeli sebuah laporan Alexa Site Audit tunggal dan menerima laporan tindak lanjut gratis.

Sebenarnya masih banyak lagi informasi yang bermamfaat atau berguna tentang Alexa Site Audit. Tapi cukup itu saja yang bisa saya gambarkan. Untuk lebih lengkapnya, silahkan sobat blogger langsung mengunjungi situs Alexa tentang Alexa Site Audit.

Informasi Seputar W3C

2012-03-15T19:30:00.000+07:00

The World Wide Web Consortium (W3C) adalah komunitas internasional yang berkembang dengan standar terbuka untuk memastikan pertumbuhan jangka panjang dari suatu Web.

W3C Misi :

Misi W3C adalah memimpin World Wide Web secara maksimal dengan mengembangkan protokol dan pedoman yang memastikan pertumbuhan jangka panjang dari Web. Di bawah ini kami membahas aspek penting dari misi ini, yang semuanya visi W3C lebih lanjut tentang Satu Web.

Prinsip

Berikut prinsip-prinsip kerja Pedoman W3C.

Web untuk Semuanya

Nilai sosial dari Web adalah bahwa hal itu memungkinkan komunikasi manusia, perdagangan, dan kesempatan untuk berbagi pengetahuan. Salah satu tujuan utama W3C adalah untuk membuat manfaat ini tersedia bagi semua orang, apapun perangkat keras mereka, perangkat lunak, infrastruktur jaringan, bahasa asli, budaya, lokasi geografis, atau kemampuan fisik atau mental.

Web untuk Segalanya

Jumlah berbagai jenis perangkat yang dapat mengakses Web telah berkembang dengan sangat pesat. Mobile phones, smart phones, personal digital assistants, interactive television systems, voice response systems, kiosks dan bahkan peralatan domestik tertentu bisa mengakses Web.

Visi W3C

Visi W3C untuk Web melibatkan partisipasi, berbagi pengetahuan, dan dengan demikian membangun kepercayaan dalam skala global.

Web untuk interaksi yang beraneka Ragam

Web ini diciptakan sebagai alat komunikasi dimaksudkan untuk memungkinkan siapapun, dimanapun untuk berbagi informasi. Selama bertahun-tahun, Web adalah "read-only" alat bagi banyak orang. Blog dan wiki membawa penulis lebih ke Web, dan jaringan sosial muncul dari pasar berkembang untuk konten Web dan pengalaman pribadi. Standar W3C telah mendukung evolusi ini untuk arsitektur yang kuat dan prinsip-prinsip desain.

Web Data dan Layanan

Beberapa orang melihat Web sebagai repositori raksasa data terkait sementara yang lain sebagai satu set raksasa layanan yang bertukar pesan. Dua pandangan saling melengkapi, dan yang menggunakan sering tergantung pada aplikasi.

Web of Trust

Web telah mengubah cara kita berkomunikasi satu sama lain. Dalam melakukannya, itu juga memodifikasi sifat hubungan sosial kita. Orang-orang sekarang "bertemu di Web" dan melaksanakan hubungan komersial dan pribadi, dalam beberapa kasus tanpa pernah bertemu secara pribadi. W3C mengakui bahwa kepercayaan adalah sebuah fenomena sosial, tapi desain teknologi dapat menumbuhkan kepercayaan dan keyakinan. Sebagai gerak lebih banyak aktivitas on-line, maka akan menjadi lebih penting untuk mendukung interaksi yang kompleks antara pihak di seluruh dunia.

Membuat Google Translate Bendera Berbayang

2012-03-14T23:14:00.000+07:00

Widget Google Translate yang saya tawarkan hari ini adalah widget Google Translate ke empat setelah Widget Google Translate Sederhana, Widget Google Translate Bendera Bergerak, Widget Google Translate Pin Bendera. Widget ini terlihat indah pada blog yang mempunyai background cerah atau terang. Nah... kalau blog sobat mempunyai background cerah, apa yang di tunggu? Langsung pasang widget ini di blog sobat.

Cara buat Widget Google Translate Bendera Berbayang

Sign In di http://www.blogger.com
Pada Dashbor klik Design
Klik Add a Gadget dan HTML Java Script
Copy kode di bawah ini dan paste pada kolom yang tersedia

<style>
.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; }
</style> <div><a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk166oYrWdnZh72oS1FU-iM7OtWCVi6rB48NcOYbJOJGZg7ENXb6HA8k8hkz-X-Lx6uGftl15S5GqBtZSKtYUC8yudyLxq0KPYRvSV59_MEbJCee6DooY9rIwS536QMVVBWzatpW8-_m8/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghNQ6VNTjI3v0Ie8SAbVdruIOkhJ0YgCfM9KDOk8YpyPNnXbRvGwNK5ZvjoyR73CRZVSsQ62Lbh7Vtu-LCxDWFl9i8LGA-uzjt29KyFj7QbYNsPOCTIu_TPt5vCjW9kSDynygAqkIE8QvO/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvlZ4FCEuefrEVQyQX3oUZtINYozwwt3_9v9c3wMRc2DUx7KrTbh4DVEsl2O0WfA218DKQf1sST9VG3ZZbhMJmYb0fDPbqNjDkiE_JmLR-a5RhvK-plQbrwsLAMxKTUdWWf3SpPgT8qBPB/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Italian"><img align="absbottom" alt="Italian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia1UoE49k0OW7OZL-pHSlOClHYGFoHB4KQ4tvl4Gd2T5x3vEIfGfVSs2x99GueFZJV0ua2sF3e5WrjEnH7DxcYPMmeDIEyL62XD94ez_9H_-jk174ReVWbl5url7mnYSR5RJy8_2Zwr74/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Italian" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Dutch"><img align="absbottom" alt="Dutch" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrS7FLw1abRXPDNPOm0JIc1cVty6YJujIdiCUdUtiHLk1vfRQQoH0gM78hWJWAsSS_DqNtgrpz5yXORPGpkAQDsRG5ldk19OaSNKNaBgk1H3aXPYnWuxuQcL_j6CdhwEH9hMykLCouDIw/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Dutch" width="30"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiqlsjH4kBc_NxbIx2uxOFXIuSEX6XIUy_eKNgIfEMsIkPuRg9Th39eIYtMpXrJKzTgX6ifwRRVCzGlVRgYYg0TXgWpzJST-NazteuyOuFnujung1Jg5quM3Yu_haJhDRKCV_vDTQhQuE/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIuLt5RFU6jJ1Is66FrjMwcyZigMYLC7Gzi3iEfTDNrllNxA4u0AQGtk7FwEc7XPyQdIDIEPU5sUFyjMliVu2_RlzAtpG1x9n1aFPyKzTPb89nDfrYZ4u2LA6mdVRz3FDDX1uzN3Th_S_l/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Korean"><img align="absbottom" alt="Korean" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBIuxE5bbNOjJlegaX1NjlawV_kYnegfHu0ICd1rOk5_quUcXbnT2g28kxuGafPenF5jny7XTVLOISWcVCPewOcgHcf-jqcp6UUoLp-YNOSPulaCRdupIFDOdGB4J5lp7F9jc2G7PUMoc/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Korean" width="30"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVD_MsdAtB-9PElUFtMYDY5AlJ6GW_7Zn08nn3aDEWCE2YhVeghpFRd2e1C2TpHVRxXJ7UgnvGrLQhHrFDy53planHG95ccVi_ASLF04XfFFO7hCHvL3tY3yDbtJ2pjw6D-0IxRDulqeo/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndCvmp-QpCE8xY5vzhYbSTXGHMnGvcI9wSNXH87rVFLSVVytu74Du9YD6-2sPXh_Do3nX_oMUa-asAVqE6Rbo6cNkl29SY_abV4HvhkiwVQg4TjNGKmsk7pWHVHdLHNU41XDFHXg50dc/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="27">

Klik Simpan

Hasilnya akan terlihat seperti di bawah ini

Cara Membuat Salam Pembuka Blog

2012-03-13T19:30:00.000+07:00

Apakah sobat blogger pernah berkunjung ke suatu blog, kemudian muncul sebuah salam pembuka atau ucapan salam dari blog tersebut? Kalau pernah, apakah sobat blogger tertarik untuk memasang fitur seperti itu? Kalau sobat blogger tertarik, berarti kebetulan banget karena itulah tutorial blog yang akan saya berikan buat sobat blogger hari ini, yaitu tentang cara Membuat Salam Pembuka Di Blog. Apa mamfaat dari memasang salam pembuka ini di blog, sepertinya tidak perlu saya sebutkan. So, let's make it.

Cara Membuat Salam Pembuka Di Blog :

Sobat masuk dulu ke akun Blogger sobat
Klik Design
Klik Add a Gadget dan HTML JavaScript
Copy dan paste kode berikut pada kolom yang tersedia

<script type='text/javascript'>
var name = prompt("Selamat Datang...!! Nama kamu siapa?", "Nama Kamu");
alert("Salam Kenal Ya..."+name)
alert("Selamat menikmati artikel yang kami suguhkan")
</script>

Klik Save

Tambahan :

Teks prompt yang berwarna merah bisa sobat blogger sesuaikan dengan keinginan sobat blogger. Tapi ingat ya, jangan gunakan bahasa yang kurang sopan, bisa-bisa pengunjung yang akan mencari artikel di blog sobat pada kabur semua.

Membuat Gambar di setiap Artikel Secara Otomatis SEO

2012-03-13T08:29:00.000+07:00

Untuk membuat blog kita menjadi blog yang SEO Friendly (Search Engine Optimization), banyak hal yang harus kita lakukan, salah satunya adalah dengan menambahkan ALT Tag pada setiap gambar yang menyertai postingan kita. Tapi bukan merupakan suatu hal yang mudah untuk melakukan optimasi setiap gambar yang dipublikasikan untuk Search Engine. Jadi, disini saya sudah menyiapkan kode JavaScript yang gunanya untuk menambahkan ALT Tag untuk semua gambar lalu mengoptimalkan semua gambar tersebut untuk Search Engine (Mesin Pencari). Cara ini merupakan cara yang paling mudah untuk proses optimasi gambar untuk setiap blog post sobat blogger. Untuk menerapkan teknik ini, sobat blogger hanya membutuhkan waktu tidak lebih dari satu menit.

Cara Buat Gambar Otomatis SEO:

Log In di http://www.blogger.com
Di bagian Dashbour, klik Design lalu klik Layout
Selanjutnya klik Edit HTML
Copy kode di bawah ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('img').each(function(){ var $img = $(this); var filename = $img.attr('src') $("img:not([alt])").attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); $("img:not([alt])").attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); //]]> </script>

Paste kode tersebut sebelum kode </body>
Simpan Template

Dengan menerapkan Automatic SEO for Images, semoga blog sobat blogger menjadi blog yang SEO Friendly.

Membuat Judul Blog Berada di Tengah

2012-03-11T19:30:00.001+07:00

Judul Blog atau blog title berada di bagian header di sebelah kiri. Posisi Judul blog yang berada di sebelah kiri sebenarnya tidak mengurangi keindahan tampilan blog kita. Akan tetapi, tidak sedikit dari rekan-rekan sesama blogger yang ingin mengganti posisi judul blog mereka yang berada di sebelah kiri menjadi posisi center atau tengah. Oleh sebab itu, saya pun berinisiatif untuk membuat postingan tentang Cara membuat judul blog berada di tengah. Teknik yang akan saya berikan untuk menetengahkan judul blog ini saya dapatkan dari Forum Blogger. Teknik ini pernah saya coba sendiri, dan alhamdulillah berhasil. Semoga teknik ini juga berhasil diterapkan atau diimplementasikan di blog sobat blogger.

Cara Buat Judul Blog Berada di Tengah :

Login dulu di blogger.com
Klik tombol Design dan Edit HTML
Back Up dulu template sobat untuk berjaga-jaga
Kemudian sobat cari kode yang seperti ini :

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

Kalau sudah ketemu kode yang seperti itu atau mirip seperti itu, hapus dan ganti dengan kode di bawah ini :

#header-inner {text-align: center ;}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

Klik Pratinjau atau Priview dulu, kalau berhasil baru klik save

Kalau teknik ini berhasil sobat terapkan di blog sobat. Jangan lupa tinggalkan pesan melalui kolom komentar yang tersedia. Akhir kata, Thanks for visiting Blogger Tutorial Blog.

Cara Buat Tulisan Berjalan / Effect Marquee di Blog

2012-03-11T11:14:00.000+07:00

Efek marquee artinya memberikan atau membuat kesan berjalan/bergerak pada suatu text. Efek Marquee atau tulisan berjalan umumnya di letakkan di bagian atas Header blog atau di bagian Footer Blog dan biasanya Efek marquee berisikan teks ucapan selamat datang. Untuk menampilkan tulisan berjalan pada blog, kita hanya menyisipkan kode HTML SEBELUM dan SESUDAH teks yang akan ditampilkan. Di bawah ini terdapat delapan efek marquee yang saya berikan, silahkan di copy paste di blog sobat.

Tempatkan kode Effect Marquee atau tulisan berjalan pada tempat yang diinginkan (Kolom Postingan atau Kolom HTML Java Script).

Effect Marquee atau Tulisan berjalan lambat

<marquee behavior="scroll" scrollamount="1" scrolldelay="32">Tulisan sobat disini</marquee>

Effect Marquee atau Tulisan berjalan ke atas

<marquee behavior="scroll" direction="up" height="30"> Tulisan sobat disini</marquee>

Effect Marquee atau Tulisan Zig-zag

<marquee behavior="alternate" direction="up" height="50px"><marquee direction="right"> Tulisan sobat disini</marquee></marquee>

Effect Marquee atau Tulisan berjalan tetapi berhenti kalau dibayangi cursor

<marquee onmouseout="this.start()" onmouseover="this.stop()">Tulisan sobat disini</marquee>

Effect Marquee atau Tulisan berjalan ke kanan

<marquee behavior="scroll" direction="right">Tulisan Tulisan sobat disini</marquee>

Effect Marquee atau Tulisan berjalan dengan gambar

<marquee behavior="scroll"><img height="84" src="Url%20gambar%20yang%20akan%20ditampilkan" width="110">Tulisan sobat disini</marquee>

Effect Marquee atau Tulisan dapat memantul

<marquee behavior="alternate" width="300"> Tulisan sobat disini</marquee>

Effect Marquee atau Tulisan Bouncing around

<marquee behavior="alternate" direction="up" height="100" width="300"><marquee behavior="alternate" direction="right">Tulisan sobat disini</marquee></marquee>

Perhatikan Contoh di bawah ini!

Tulisan berjalan lambat
Tulisan sobat disini

Tulisan berjalan ke atas
Tulisan sobat disini

Tulisan Zig-zag

Tulisan sobat disini

Tulisan berjalan tetapi berhenti kalau dibayangi cursor
Tulisan sobat disini

Tulisan berjalan ke kanan
Tulisan Tulisan sobat disini

Tulisan berjalan dengan gambar

Tulisan sobat disini

Tulisan dapat memantul
Tulisan sobat disini

Tulisan Bouncing around

Tulisan sobat disini

Cara Memasang Facebook Like Badge

2012-03-10T14:42:00.000+07:00

Hari ini saya merasa sangat bahagia banget karena dapat menyuguhkan tutorial tentang Cara Pasang Facebook Like Badge pada sobat blogger. Mungkin sobat blogger jarang mendengar istilah Facebook Like Badge, karena di beberapa blog yang tenar itu adalah Facebook Like Button, Tapi menurut saya pribadi jauh lebih bagus memasang Facebook Like Badge ketimbang Facebook Like Button. Kedua fitur facebook ini sangat berbeda, Facebook Like Badge hanya muncul ketika blog kita di buka dan Facebook Like Button hanya muncul di blog post atau area postingan. Dengan memasang Facebook like Badge pada blog, Blog terlihat indah dan keren.

Cara pasang Facebook Like Badge pada blog :

Sign In di http://www.blogger.com/
Klik Menu Rancangan, lalu pilih Edit HTML.
Kasih tanda Centang pada Expand Widget Template
Cari kode <body>
Kalau kode <body> tidak ada, cari kode <body expr:class='"loading" + data:blog.mobileClass'>
Copy dan Paste kode di bawah ini SETELAH kode tersebut

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='Blogger Tutorial Blog'
//]]>
</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakinetwork.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/unwanted86/javascript/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/unwanted86/javascript/kakinetwork.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 15,
wait: 0,
url: 'http://www.facebook.com/BloggerTutorialBlog',
closeable: true,
});
});
//]]>
</script>
<div id='fbtpdiv'/>

Klik Save

Tambahan :

Ganti tulisan "Blogger Tutorial Blog" dengan nama facebook sobat blogger
Ganti http://www.facebook.com/BloggerTutorialBlog dengan URL Facebook sobat blogger
Ganti angka 15 dengan waktu yang sobat blogger inginkan

Sobat blogger tidak berhasil? Gampang, langsung saja sobat melunjur ke website yang menyediakan fitur ini di http://www.kakiheboh.com/

Membuat Google Translate Sederhana Untuk Blog

2012-03-10T07:00:00.000+07:00

Widget Google Translate adalah Widget Penterjemah yang di buat khusus buat pengguna Internet yang memiliki situs atau blog. Widget Google Translate merupakan widget yang harus di miliki oleh setiap situs atau blog yang target visitornya tidak hanya dari negeri sendiri. Dengan adanya widget ini, visitor yang berasal dari luar negeri dapat mengartikan secara langsung setiap artikel yang mereka baca. Widget google Translate ini memiliki tampilan yang sangat simple atau sederhana. Kalau widget ini di pasang di blog sobat blogger, maka ketika pengunjung blog membuka salah satu halaman blog sobat, di bagian bawah bawah menu bar akan muncul menu bar baru yang menawarkan kita untuk menterjemahkan laman yang di baca.

Cara buat Widget Google Translate Sederhana :

Sign In di http://www.blogger.com/
Pada Dashbor klik Design
Klik Add a Gadget dan HTML Java Script
Copy kode di bawah ini dan paste pada kolom yang tersedia

<div id="google_translate_element"></div><script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'id' }, 'google_translate_element'); } </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Klik Simpan

Tambahan :
id adalah kode Bahasa untuk Bahasa Indonesia, bahasa yang digunakan di blog
Kalau sobat blogger, menginginkan Widget Google Translate yang lain, Silahkan klik link di bawah ini :

Kelopak Bunga Berguguran pada Blog

2012-03-08T13:08:00.000+07:00

Kalau kita berada pada sebuah taman yang penuh dengan bunga, kemudian kelopak dari bunga-bunga tersebut jatuh berguguran. Waduh... sudah pasti kita bisa membayangkan bagaiman indahnya taman bunga tersebut. Tapi kalau Kelopak Bunga Berguguran pada Blog, gimana ya? Sudah pasti hal itu akan menambah keindahan blog sobat blogger. Jadi, Kelopak Bunga Berguguran pada Blog adalah salah satu cara memperindah blog. Kalau sobat blogger tidak yakin dengan senua ini, silahkan sobat blogger pasang di blog sobat.

Cara Membuat Kelopak Bunga Berguguran pada Blog:

Log In di http://www.blogger.com/
Pada Dashbor klik Design
Klik Add a Gadget dan HTML Java Script
Copy kode di bawah ini dan paste pada kolom yang tersedia

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script><script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://rinjanilovers.blogspot.com/'}).append(a).appendTo('body')});</script>

Klik Simpan

Blog yang indah akan membuat visitor betah untuk berlama-lama di blog kita.

Cara Memasang Burung Twitter Terbang

2012-03-07T19:30:00.001+07:00

Memasang burung Twitter terbang di blog sangat mudah. Sobat blogger hanya membutuhkan waktu kurang dari satu menit untuk melakukannya, karena sobat blogger tidak perlu edit template. Kode Twitter Flying Bird atau burung Twitter terbang hanya ditambahkan di area atau di kolom tempat sobat blogger biasa meletakkan kode untuk membuat widget. Dengan menambahkan burung Twitter terbang di blog, tampilan blog sobat pasti akan terlihat tambah indah dan cantik. Talk less do more, kita langsung saja ke prakteknya.

Cara Membuat atau Memasang Widget Burung Twitter di Blog :

Pertama, Klik Design lalu sobat klik Page Element
Klik Add Gadget dan HTML Javascript
Copy dan paste kode di bawah ini pada kolom yang tersedia :

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1giI14G-jWoPvOYBK8YcS4f4g3kGXzXMdl8Dfou4628Tjljyj2Aq1c_YI0Rpf3iH-W9i2MA87yPmCEspW6F84dJTRxxtiqKf-hAGN4ffKweLmMohLyfsxFS7i1DL4YN4iUyDw63yVU5w/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

Klik Simpan

Tambahan :
Ganti http://twitter.com/Akun Twitter sobat dengan Akun URL Twitter sobat

Apakah sobat blogger mau mengganti warna Burung Twitter tersebut? Gampang, sobat blogger tinggal ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1giI14G-jWoPvOYBK8YcS4f4g3kGXzXMdl8Dfou4628Tjljyj2Aq1c_YI0Rpf3iH-W9i2MA87yPmCEspW6F84dJTRxxtiqKf-hAGN4ffKweLmMohLyfsxFS7i1DL4YN4iUyDw63yVU5w/s1600/burung+twitter+terbang.png dengan salah satu kode di bawah ini :

Burung Twitter Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0QuERkA7jV_MssODUExR-Vz4FyYVJvNj-kEcakdBe-PG8Ek50vx3tJmPJKCzFBhxMT0-JJqgI9AtxV5I7K6YYe3-9yKvKxWZpPy8nrxFa0UyU06l7xDFtK0KpQLzBsKjfyFDtJ9lyyI/s1600/yellow+bird.png

Burung Twitter Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9OphO5S0IOIYBCtIwAdSZYEqMI60HnO7zR0RYLQdNyX6r_nC-AN_NPxppmy3vOAfqnyvsxBMqqsWsIqfxq2sKjA6fpZYA2AYy0gVJXKDEL-EVewHeQNuTjvSubmfJcFRMEk_Mq3Caak/s1600/black+bird.png

Burung Twitter Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6qzuJzCrbRKk8bu4CmcuGIAJS_KCpT1yVdw_k0dQPdNwg0u4-Aslph04XZMCiU6N4rf0-fVDgoD_Im1I2d_-FLW_BKNJsdZzZyWPNU6HSoNpfMtmIQMlY4Oif1QbiOqzrIsBILWAUus/s1600/Blue+bird.png

Burung Twitter Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXrp6rVWr66HElnB2zamNfu2qK6IK32Pvo5cuyJn_gHCw97c5C363ko1Dr80T_RM8VNsT0FVP7p-ijxHVFEa4UiLrJGRIRHzB00zIYW0Rm5yD-KaUGDhqLahZucSdQxjJXD7tq5E1Ou6o/s1600/brown+bird.png

Burung Twitter Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd-VeS7dW3SYvvS3b9gFthR3-c7CzaxyyDWL-NH5sYr8-ij-N6WdAe5rhdjrqjqMluXCErC3EHClCVruYNpnG_WSAYMIhva0hfmN3Rb1cZhyphenhyphen31ZvRDJHrKVxVVXxyr8jyo3YrwoHaMLiM/s1600/Green+bird.png

Burung Twitter Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguJJYS6EoKxnTvDObwfo73uqVQVrwgET0RABOOCpjclt3toP3shRRIVhmEoRKRZQdv4VEv0pFywrsHjtQGMyjKSK9hR1SjNE6bof6NCTaC7aXBR38V6vo08ZnOyP-0wTVO08AUUnXlAhk/s1600/purple+bird.png

Burung Twitter Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5_hcePegej_ag18ZbRAW3ibaW_13LwajIIF1jCgsbUyX1NRStenQG1PAJVYEiOqfvAjsIYCK6v0qyxGCHFh453AYD02WEpTTOBtUrnIt4XO4J_nagoQND2MuKQPyxR0KtunSU1iCJgQ/s1600/white+bird.png

Burung Twitter Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZsmg4RVq4FIQ-Jhtm68B6vtUE2W8UHeSnw8rOu7r11qDo3wJjgWHnQcKJvOOO4ynubV-XFvOe9ureTSLkgK4jZhSb9Im7Af0Nfe-baxEy8I69CFqlXb3uJcTIgPEwf7tBCd9_g0Ignn4/s1600/red+bird.png

Cara Buat Widget Berlangganan FeedBurner

2012-03-05T19:30:00.001+07:00

Kotak Berlangganan FeedBurner haruslah dibuat seindah atau semenarik mungkin untuk memancing setiap pengunjung blog kita untuk berlanggananan artikel atau postingan terbaru yang kita publikasikan. Semakin banyak yang berlanganan artikel kita, maka itu akan menjadi point tersendiri buat blog kita di mata mbah Google. Widget Berlangganan FeedBurner atau widget FeedBurner Subscription yang saya berikan sekarang memiliki tampilan yang sangat imut dan simple. Lihat saja gambar di atas, itu adalah tampilan atau bentuk kotak berlangganan FeedBurner yang saya berikan. Tertarik untuk memasang widget yang imut ini?

Cara Buat Kotak Berlangganan FeedBurner :

Seperti biasa, sobat masuk dulu di akun Blogger sobat
Selanjutnya klik Design dan Page Elements
Klik Add a Gadget dan pilih HTML JavaScript
Copy dan Paste kode di bawah ini :

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWm8ZS0nZw39Ecz05g82k3SJdlsZRfgDVAU0KGuE-9wsySJr5R-JnPRayHzAuH4fbdHOS1Rf2-SV_B1ZK5YhGETXkLdGLaTMI2fMVOIzJrHpwYbg_ASiP0snCk3DDMuJwvuGd91vAPmJnB/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
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;
}
.mbt-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="mbt-email">
Subscribe 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=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Klik simpan.

Tambahan :

Ganti http://feedburner.google.com/fb/a/mailverify?uri=TntByStc dengan feed link akaun feedburner sobat. Untuk melihat feed link sobat, sudah pasti sobat blogger harus mengunjungi akun FeedBurner sobat.
Ganti TntByStc dengan Judul Feed atau nama Feed dari blog sobat.

Cara Menyembunyikan Navbar Blog

2012-03-04T20:23:00.000+07:00

Navbar berada di bagian atas Header Blog. Navbar merupakan menu Horizontal yang terdiri atas kotak pencarian dan beberapa link seperti Link Bebagi, Link Laporkan Penyalahgunaan, Link Blog Berikut, Link Buat Blog dan Link Masuk. Navbar memiliki banyak tampilan warna seperti warna biru, hitam, silver, tan, transparan terang dan transparan gelap. Navbar merupakan fitur default dari sebuah template.

Sudah beberapa kali terjadi perubahan bentuk Navbar dari versi sebelumnya. Perubahan tersebut membuat Tampilan Navbar terlihat lebih bagus. Walaupun seperti itu, 95 dari 100 blog, menghilangkan fitur tersebut. Mungkin, mereka merasa dengan adanya Navbar, tampilan blog mereka kurang indah. Jadi kalau sobat blogger termasuk orang yang merasa seperti itu, ikuti tips menyembunyikan Navbar di bawah ini.

Cara Menyembunyikan Navbar :

Log In di http://www.blogger.com/
Pilih Layout kemudian klik Edit HTML
Copy kode di bawah ini

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

Letakkan kode terebut sebelum kode /* Variable definitions (Untuk lebih jelasnya, perhatikan gambar di bawah ini) :

SEBELUM

SETELAH

Kalau sobat blogger sudah mengikuti langkah di atas, SAVE template sobat

Tambahan :

Pada beberapa template, kode di atas tidak bisa digunakan. Oleh karena itu, kalau sobat blogger memiliki template yang berbeda dan ingin menyembunyikan Navbar. Silahkan ajukan melalui kolom komentar di bawah ini, tentunya dengan menyertakan jenis template sobat.

Cara Menampilkan Judul Artikel Saja di Home Page Blog

2012-03-03T22:17:00.000+07:00

Blog Post yang menampilkan Judul Artikel saja

Coba sobat blogger perhatikan gambar di atas, itu adalah gambar home page atau Halaman awal dari blog ini. Gambar tersebut saya ambil seminggu yang lalu. Gambar itu sebenarnya sangat besar, tapi saya Crop beberapa bagian dan saya sisakan di bagian blog post saja. Saya sengaja meninggalkan bagian blog post saja karena ada sangkutpautnya dengan tutorial blog yang akan saya berikan hari ini.

Baiklah, tanpa berbicara panjang lebar, kita langsung saja ke pokok persoalan yang akan kita bahas.

Di bagian Home Page blog, hampir semua blogger memasang fitur Read More, supaya postingan mereka terpotong atau terpenggal (Ya... sama lah dengan blog ini, menggunakan fitur Read More juga). Kalau kita menggunakan fitur read more, di bagian blog post akan tampil bulan, tahun, tanggal, hari, judul postingan, Short Text, dan Link read more. Perhatikan gambar di bawah ini!

Blog Post Menggunakan Fitur Read More

Antara gambar pertama dan gambar kedua di atas, terdapat pebedaan yang sangat besar. Gambar pertama hanya menampilkan waktu dan judul artikel saja dan gambar kedua, menampilkan sebagian text plus gambar. Saya mau blog saya seperti gambar pertama, Bagaimana caranya? Gampang kok dan kebetulan itulah yang akan saya uraikan hari ini.

Cara Menampilkan Judul Artikel Saja di Home Page Blog :

Log in di http://www.blogger.com/
Klik Rancangan dan pilih Edit HTML.
Kasih tanda centang pada Expand Widget Template
Copy kode berikut

<style type='text/css'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> .post-body{display:none;} </b:if> </b:if> </style>

Paste kode tersebut di bawah kode ]]></b:skin>
Simpan template sobat.

Semoga Artikel atau postingan kali ini ada mamfaatnya buat sobat blogger. Terima kasih atas kunjunganya.

Cara Menambahkan Syntax Highlighter pada Blog

2012-02-29T20:14:00.000+07:00

"Syntax Highlighter" apakah sobat blogger merasa asing dengan istilah tersebut? atau bahkan sebaliknya, istilah Syntax Highlighter sudah sering terdengar di telinga sobat blogger. Syntax Highlighter atau Penyorotan sintaks adalah fitur dari beberapa editor teks yang menampilkan teks, terutama source code dalam berbagai warna dan font sesuai dengan kategori istilah. Fitur ini memudahkan kita dalam menulis dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup. Untuk kesempatan kali ini, saya akan memberikan tutorial blog tentang cara membuat Syntax Highlighter.

Cara Menambahkan Syntax Highlighter pada Blog :

Log In di http://www.blogger.com/
Klik Menu Rancangan, lalu pilih Edit HTML
Cari kode ]]></b:skin> dan letakkan kode di bawah ini sebelum kode ]]></b:skin>

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Cari kode </head> dan letakkan kode di bawah ini sebelum kode </head>

<script gapi_processed="true" src="https://apis.google.com/js/plusone.js" async="" type="text/javascript"></script><script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript">
</script>

Cari kode </body> dan letakkan kode di bawah ini sebelum kode </body>

<script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>

Tambahan :
Setiap mempublikasikan post yang terdapat kode-kode di dalamnya, sobat blogger harus memasukkan kode tersebut seperti contoh d bawah ini!

<textarea name="code" class="c#" cols="60" rows="10">
KODE YANG AKAN DITAMPILKAN DILETAKKAN DISINI
</textarea>

Sobat blogger masih bingung? Ya wajarlah sobat blogger bingung. Langkahnya terlalu panjang sih... Untuk itu, ceritakan kebingungan sobat melalui kolom komentar yang ada di bawah ini, supaya kita bisa menemukan pemecahan terhadap kebingungan sobat tersebut.

Menghitung Jumlah Kata/Karakter Teks

2012-02-29T19:30:00.000+07:00

Cara mengetahui berapa karakter kata yang sudah kita tulis atau berapa character yang sudah kita buat, kita bisa menggunakan tools ini. Tools ini disebut dengan nama Word/Character counter.Word/Character counter di buat oleh http://centricle.com. Cara menggunakan tools ini sangat simple, kita tinggal meletakkan text yang sudah kita buat pada kolom yang disediakan kemudian kita klik tombol "How Many?", secara langsung kita akan di bawa ke website http://centricle.com/ lalu jumlah kata dan karakter dari teks kita akan langsung diperlihatkan.

Silahkan tes Tools ini :

Kalau sobat blogger ingin memasang tools ini di blognya tinggal copas (Copy Paste) kode di bawah ini di kolom widget atau di area posting.

<form action="http://centricle.com/tools/word+character-counter/" method="post" target="blank">
<fieldset>
<label for="pad">String:</label>
<textarea cols="60" rows="15" name="pad" id="pad"></textarea>
<input class="submit" type="submit" name="countem" value="How many?" />
</fieldset>
</form>

Cara Menghias Cursor Blog

2012-02-28T19:30:00.013+07:00

Picture by : Tutorial Untuk Blog

Hari ini menjadi hari yang melelahkan dan membosankan buat saya, melelahkan karena banyaknya pekerjaan yang harus diselesaikan, dan membosankan karena jaringan internet yang saya gunakan lagi gangguan. Tepaksa, postingan yang seharusnya saya publikasikan, saya tunda untuk beberapa hari. Terus postingan yang sobat blogger baca saat ini, bisa dikatakan sebagai media curhat supaya kedua rasa yang sudah saya sebutkan tadi bisa sedikit berkurang. Tapi kalau saya teruskan curhat saya ini, bisa-bisa blog ini menjadi blog untuk curhat bukan blog yang kasih tutorial tentang blog. Jadi, saya putuskan untuk membuat tutorial singkat tentang cara membuat Cursor Blog di kejar warna. Salah salah salah, saya ganti istilahnya menjadi cara membuat cursor di krumuni warna. Waduh, kayaknya masih kurang tepat juga istilah ini, ya sudah, saya pakai istilah yang lebih umum saja yaitu "Cara Modifikasi Cursor Blog".

Teknik ini tidak merubah tampilan default dari cursor kita yang berbentuk panah (Arrow), akan tetapi crusor yang tanda panah itu akan di kejar oleh sekumpulan warna yang indah. Teknik ini bisa dikatakan sebagai salah satu cara memperindah blog. Mungkin sobat blogger tidak bisa membayangkan apa yang sudah saya jelaskan tadi. Jadi, supaya sobat blogger bisa melihat langsung seperti apa yang saya jelaskan tadi, langsung saja praktekkan tutorial ini :

Cara Modifikasi Crusor Blog :

Seperti biasa, masuk dulu ke akun blogger sobat
Di bagian Dashboard klik design
Selanjutnya klik Add a Gadget dan HTML/javascript
Copy kode di bawah ini dan paste pada kolom yang tersedia :

<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;
for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}
function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}
if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

Save

Tambahan :
Kalau sobat blogger mau mengganti warna yang mengitari cursor, sobat bisa rubah kode ini :

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

Untuk melihat kode warna silahkan kunjungi halaman blog saya ini : HTML Color Code

Cara Membuat Recent Post Animasi

2012-02-28T18:46:00.000+07:00

Kembali lagi saya membahas tentang Widget Recent post. Sobat blogger tentu masih ingat bahwa pada pertemuan sebelumnya, kita membahas tentang Recent Post Widget No Thumbnail dan Recent Post dengan Thumbnail. Widget Recent Post kali ini saya sebut dengan nama Recent Post Animasi. Kenapa di sebut dengan nama Widget Recent Post Animasi? karena widget ini bergerak turun naik secara beraturan. Menurut hemat saya, di antara ke tiga Widget Recent Post ini, Widget Recent Post Animasi adalah yang paling bagus karena menurut saya juga Widget Recent Post Animasi ini adalah Widget Recent Post penyempurna dari Widget Recent Post sebelumnya. Coba saja sobat pasang ketiga widget ini dan sobat bandingkan, mana yang lebih cantik dan mana yang kelihatan lebih indah.

Cara Buat Widget Recent Post Animasi :

Sign In di http://www.blogger.com/
Pada Dashbor klik Design
Klik Add a Gadget dan HTML Java Script
Copy kode di bawah ini dan paste pada kolom yang tersedia

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>

<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>

<ul id="rp_plus_img"><script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://bloggertutorialblog.blogspot.com/" target="_blank">Get this widget here</a></small>

Klik Simpan

Tambahan :
var numposts = 5; adalah jumlah post yang akan ditampilkan, silahkan sobat blogger sesuaikan

Blog dan Google Chrome

2012-02-27T19:30:00.001+07:00

Dunia Blogging adalah dunia baru yang membuat saya terlena. Saya tidak bisa melewati satu hari pun tanpa melihat, menjamah atau mengurus blog saya. Saya sebenarnya merasa lelah dengan dunia ini, tapi karena saya sudah ketagihan, saya jadi tidak bisa melepas semua ini. Apalagi, semenjak Google meluncurkan media browsernya yaitu "Google Chrome" saya pun tambah ketagihan. Yang tadinya saya ngeblog sekali dalam sehari, menjadi dua, tiga kali dalam sehari. Apa yang menyebabkan saya ketagihan ngeblog menggunakan Google Chrome? Google Chrome adala media browser yang dibuat oleh Google dengan beberapa fitur luarbiasanya seperti :

Google Chrome sudah didesain sedimikian rupa sehingga kita bisa Aman dalam melakukan browsing internet.
Google Chrome memiliki tampilan yang sangat sederhana dan bersih sehingga kita akan merasa nyaman dan mudah dalam melakukan navigasi
Yang terakhir, Google Chrome di rancang supaya bekerja lebih cepat dari pada media browser yang lain. Cepat dimulai dari desktop, memuat laman web dalam sekejap, dan menjalankan aplikasi web yang rumit secepat kilat.

Masih banyak fitur menarik lainnya dari Google Chrome, untuk mengetahuinya, klik link ini : Informasi tentang fitur Google Chrome

Kalau sobat blogger lagi browsing, kemudian muncul pesan seperti di bawah ini, berarti Jaringan sobat blogger yang bermasalah bukan Google Chrome yang bermasalah. Sobat blogger harus menghubungi ISP (Internet Service Provider) sobat untuk mengatasi masalah ini.

Galat koneksi SSL
Tidak dapat melakukan koneksi yang aman ke server. Mungkin ada masalah dengan server, atau mungkin memerlukan sertifikat autentikasi klien yang tidak Anda miliki.
Galat 107net::ERR_SSL_PROTOCOL_ERROR: Galat protokol SSL.

Tidak ada data yang diterima
Tidak dapat memuat laman web karena server tidak mengirim data apa pun.
Berikut adalah saran kami:
Muat ulang laman web ini nanti.
Galat 324net::ERR_EMPTY_RESPONSE: Server memutus sambungan tanpa mengirim data apa pun.

Laman web ini tidak tersedia
Google Chrome tidak dapat memuat laman web karena mail.google.com terlalu lama merespons. Situs web mungkin sedang tidak aktif atau koneksi internet Anda bermasalah.
Berikut adalah saran kami:
Muat ulang laman web ini nanti.
Periksa koneksi internet Anda. Mulai ulang router, modem, atau perangkat jaringan lainnya yang mungkin sedang Anda gunakan.
Tambahkan Google Chrome sebagai program yang diizinkan di setelan firewall atau perangkat lunak antivirus Anda. Jika program itu sudah diizinkan, coba hapus dari daftar program yang diizinkan dan tambahkan lagi.
Jika Anda menggunakan server proxy, periksa setelan proxy atau hubungi administrator jaringan Anda untuk memastikan bahwa server proxy bekerja. Jika Anda tidak yakin harus menggunakan server proxy, sesuaikan setelan proxy: Buka menu perkakas > Opsi > Di Balik Terpal > Ubah setelan proksi... > Setelan LAN dan hapus centang "Gunakan server proxy untuk LAN Anda".
Galat 7net::ERR_TIMED_OUT: Terlalu lama!

Semoga informast ini bermamfaat buat sobat blogger. Kalau sobat blogger belum memasang Google Chrome, buruan pasang dengan cara meng-klik link berikut : Unduh dan Pasang Google Chrome

Contact Us

2012-02-26T21:58:00.000+07:00

You can use this contact form to send us a message. Do not forget to write down your complete name, your email and your subject. We will not publish your email. As soon as possible, we will replay your message

Powered byEMF Forms Builder

Report Abuse

Cara Buat Daftar Isi

2012-02-25T19:30:00.001+07:00

Ini adalah postingan ketiga saya tentang cara buat daftar isi. Daftar isi yang sebelumnya saya berikan adalah daftar isi otomatis update, sedangkan yang sekarang ini adalah daftar isi yang di update secara manual. Sebenarnya, mana sih yang lebih bagus antara Daftar isi otomatis update dengan daftar isi yang di update secar manual? Jawaban yang tepat untuk pertanyaan itu adalah "Daftar isi yang di update secara manual lebih bagus ketimbang daftar isi otomatis update". Pertanyaan kedua muncul lagi, kenapa? Itulah pertanyaan yang mana jawabanya harus sobat blogger cari tau sendiri. Sebagai seorang webmaster, informasi seputar dunia blog harus di cari, jangan hanya di situs atau blog Indonesia saja, tapi juga di luar negeri.

Cara buat daftar isi atau cara buat Table of content :

Copy kode di bawah ini dan paste di kolom widget

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">
<div class="list">
<a href="http://bloggertutorialblog.blogspot.com/2012/02/cara-buat-navbar-auto-hide.html">Cara Buat Navbar Auto Hide</a></div>
<div class="list">
<a href="http://bloggertutorialblog.blogspot.com/2012/02/all-about-anchor-text.html">All About Anchor Text</a></div>
<div class="list">
<a href="http://bloggertutorialblog.blogspot.com/2012/02/cara-pasang-yahoo-emoticon-blog.html">Cara Pasang Yahoo Emoticon di Blog</a></div>
<div class="list">
<a href="http://bloggertutorialblog.blogspot.com/2012/02/apakah-blog-sudah-terindex-google.html">Apakah Blog Sudah Terindex Google?</a></div>
</div>

Ganti yang warna merah dengan link sobat dan warna biru dengan Judul atau title posting sobat.
Selanjutnya klik Save

Thank you for visiting Blogger Tutorial Blog. And Thanks for reading.

Contact Form
Name *

Email *

Subject *

Message *