Cara Buat Link di blogger.com

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 :

1. Link Internal : Link Internal digunakan untuk menghubungkan satu posting dengan posting lainnya (Masih dalam lingkup satu blog).
2. 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...!!!

Baca Selengkapnya ...

Membuat Teks Link Berkedap Kedip

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.

Baca Selengkapnya ...

Cara Buat Tombol Hide and Show (Spoiler)

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

TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI

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

Baca Selengkapnya ...

Mamfaat Alexa Site Audit

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 :

1. Increased Traffic
2. Extensive Insights
3. Peace of Mind
4. 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.

Baca Selengkapnya ...

Recent Post Widget No Thumbnail

Tidak sedikit dari blog-blog yang ada di Indonesia memasang Widget Recent Post pada blog mereka. Ada yang pasang Recent Post Widget dengan Thumbnail (Recent Post Widget yang menampilkan gambar) atau Recent Post Widget No Thumbnail (Tanpa gambar). Sebenarnya, mana sih yang lebih bagus antara Recent Post Widget No Thumbnail dan Recent Post Widget dengan Thumbnail? Dua-duanya sama. Tergantung dari yang punya blog, apakah mau yang pake gambar atau tidak. Kalau kemarin saya memberikan tutorial blog tentang Cara Membuat Recent Post Animasi, Cara Membuat Recent Post dengan Thumbnail Widget, sekarang tentang cara membuat Recent Post Widget No Thumbnail.

Cara Buat Recent Post Widget :

• 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

<script style="" src="http://jimmyjackbob.googlepages.com/Recent_posts_widget_blogger.js"></script><script style="">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://bloggertutorialblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

• Klik Simpan

Tambahan :

1. Ganti http://bloggertutorialblog.blogspot.com/ dengan URL blog sobat
2. numposts = 10 adalah jumlah Post yang akan di tampilkan, Silahkan sobat blogger sesuaikan

Baca Selengkapnya ...

Informasi Seputar W3C

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.

Baca Selengkapnya ...

Membuat Google Translate Bendera Berbayang

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="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?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="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwj4Ab0NaI/AAAAAAAAA14/3H56LPKtijA/German_thumb%5B1%5D.png?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="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj8KhadjI/AAAAAAAAA2A/GNyl8VBie3o/Spain_thumb%5B1%5D.png?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="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?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="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?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="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?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="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkJ6RBJAI/AAAAAAAAA2o/lpsTh893J3k/Japanese_thumb%5B1%5D.png?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="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?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="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?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="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="27">

• Klik Simpan

Hasilnya akan terlihat seperti di bawah ini

     

Baca Selengkapnya ...

Cara Membuat Salam Pembuka Blog

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.

Baca Selengkapnya ...

Membuat Gambar di setiap Artikel Secara Otomatis SEO

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.

Baca Selengkapnya ...

Membuat Judul Blog Berada di Tengah

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.

Baca Selengkapnya ...

Cara Buat Tulisan Berjalan / Effect Marquee di Blog

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

Baca Selengkapnya ...

Cara Memasang Facebook Like Badge

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='&quot;loading&quot; + data:blog.mobileClass'>
• Copy dan Paste kode di bawah ini SETELAH kode tersebut

<!-- KakiNetwork.Com Likebox Pro FBFan Code Start -->
<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'/>
<!-- KakiNetwork.Com Likebox Pro FBFan Code End -->

• Klik Save

Tambahan :

1. Ganti tulisan "Blogger Tutorial Blog" dengan nama facebook sobat blogger
2. Ganti http://www.facebook.com/BloggerTutorialBlog dengan URL Facebook sobat blogger
3. 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/

Baca Selengkapnya ...

Membuat Google Translate Sederhana Untuk Blog

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 :

1. Widget Google Translate yang menampilkan bendera berbayang
2. Widget Google Translate dengan Icon Bendera yang bergerak

Baca Selengkapnya ...

Kelopak Bunga Berguguran pada Blog

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.

Baca Selengkapnya ...

Cara Memasang Burung Twitter Terbang

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 :

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://2.bp.blogspot.com/-7doZyLsr9yI/TqNtUCClP4I/AAAAAAAAAF8/ld0bdD3WWj8/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 http://2.bp.blogspot.com/-7doZyLsr9yI/TqNtUCClP4I/AAAAAAAAAF8/ld0bdD3WWj8/s1600/burung+twitter+terbang.png dengan salah satu kode di bawah ini :

Burung Twitter Warna Kuning

http://3.bp.blogspot.com/-xL1Dk6Bhi4g/TqN5gbyvSCI/AAAAAAAAAGM/jxsjBiRWMLw/s1600/yellow+bird.png

Burung Twitter Warna Hitam

http://1.bp.blogspot.com/-N3RvHfV3MUk/TqN5iPPqAEI/AAAAAAAAAGU/oYKSvsOj108/s1600/black+bird.png

Burung Twitter Warna Biru

http://3.bp.blogspot.com/-FNowQ1mqsLg/TqN5kxq86EI/AAAAAAAAAGc/VzatkjsUAEc/s1600/Blue+bird.png

Burung Twitter Warna Coklat

http://3.bp.blogspot.com/-b-9ncuDJxm0/TqN5nrOnTCI/AAAAAAAAAGk/LREurKp_tLc/s1600/brown+bird.png

Burung Twitter Warna Hijau

http://3.bp.blogspot.com/-SJP4OZmyeCU/TqN5qcyXgGI/AAAAAAAAAGs/jKQaqHF9EkA/s1600/Green+bird.png

Burung Twitter Warna Ungu

http://3.bp.blogspot.com/-Ec4JlrN6yc4/TqN5tIAXDpI/AAAAAAAAAG0/ywnjHeG4ASM/s1600/purple+bird.png

Burung Twitter Warna Putih

http://1.bp.blogspot.com/-qsxd6A0vUFU/TqN5vZVI2-I/AAAAAAAAAG8/lb0Ol5Nbrvw/s1600/white+bird.png

Burung Twitter Warna Merah

http://1.bp.blogspot.com/-knGCnCFCahI/TqN59awa61I/AAAAAAAAAHE/mniE1h9IW14/s1600/red+bird.png

Baca Selengkapnya ...

Cara Buat Widget Berlangganan FeedBurner

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(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/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 == &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="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

• Klik simpan.

Tambahan :

1. 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.
2. Ganti TntByStc dengan Judul Feed atau nama Feed dari blog sobat.

Baca Selengkapnya ...

Cara Menyembunyikan Navbar Blog

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.

Baca Selengkapnya ...

Cara Menampilkan Judul Artikel Saja di Home Page Blog

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.

Baca Selengkapnya ...

Cara Menambahkan Syntax Highlighter pada Blog

"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.

Baca Selengkapnya ...

Menghitung Jumlah Kata/Karakter Teks

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 :

String:

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>

Baca Selengkapnya ...