Cara memasang Breadcrumb pada Blogspot

Pernahkah mendengar istilah Breadcrumb ? Bagi anda yang sudah lama melakukan blogging sudah tentu tau dengan istilah ini. Tetapi bagi yang baru, breadcrumb merupakan menu navigasi yang mempermudahkan pengunjung blog mengetahui posisinya dalam blog tersebut. Sehingga pengunjung blog dapat berpindah lokasi dari konten menuju home.

Breadcrumb juga berfungsi untuk menggambarkan struktur atau lokasi dari artikel yang dibacanya diblog. Biasanya breadcrumb diletakkan pada bagian atas header atau disebelah bawah header. Sebagai contoh bisa dilihat pada bagian atas judul artikel ini.



Bagaimana cara membuat breadcrumb pada blogspot ?

  1. 1. Login ke blogger anda.

  2. Klik DESIGN > Edit Html. Jangan lupa mem-backup template anda terlebih dahulu, kemudian klik Expand Widget templates.

  3. Lalu carilah kode berikut ini :

    <b:include data='top' name='status-message'/>
    Gantilah kode tersebut dengan kode dibawah ini 

    <b:include data='top' name='status-message'/> 
    <b:include data='posts' name='breadcrumb'/>

  4. Langkah berikutnya carilah kode dibawah ini :

    <b:includable id='main' var='top'>
    dan ganti dengan kode ini :

    <b:includable id='breadcrumb' var='posts'>    
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <!-- No breadcrumb on home page -->
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == "true"'> »
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    </b:loop>
    <b:else/>
    » Unlabelled
    </b:if>
    » <span><data:post.title/></span>
    </b:loop>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Arsip untuk <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == ""'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Semua posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Kategori <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>

  5. Berikutnya carilah kode :

    ]]></b:skin>
    dan tambahkan kode ini diatasnya :

    .breadcrumbs { 
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }

  6. Simpan template anda, dan lihat hasilnya

Cara menulis Konten Pada Blog

Setelah berhasil membuat blog, langkah selanjutnya adalah bagaimana cara menulis konten pada blog. Yang harus diperhatikan ketika menuliskan konten blog adalah bahwa konten yang dituliskan harus unik dan isinya sesuai dengan tujuan serta tema dari blog yang kita bangun. Agar nantinya konten yang ditulis dapat menarik dan disukai oleh yang membacanya.

Nah bagaimana cara menulis konten pada blog ?

  1. Login ke akun blogger anda.
  2. Lalu pilih menu NEW POST
    cara-memposting-01
  3. Akan muncul lembar menuliskan postingan seperti gambar dibawah ini :
    cara-memposting-02
    Title : Tuliskan judul postingan yang ingin dibuat.
    Pada bagian bernomor 2, tulislah isi konten postingan tersebut.
    Labels : Tambahkan Label atau kategori dari postingan, misalnya saya memberikan Label “Motivasi” untuk postingan tersebut. Label ini penting untuk diterapkan. Karena fungsi dari Label adalah untuk mengelompokkan beberapa postingan kedalam 1 kategori.
  4. Setelah diisi semua, klik tombol PUBLISH POST untuk menyimpan dan menerbitkan postingan anda. Jika anda belum ingin menerbitkannya bisa menekan tombol SAVE untuk menyimpan jadi draft/konsep atau PREVIEW untuk melihat hasil sementaranya.
  5. Jika anda langsung mem publish postingan, blogger akan menampilkan tampilan seperti dibawah ini :
    cara-memposting-03
    Pada gambar diatas terdapat 3 link tulisan, pada tulisan pertama (1) digunakan untuk melihat hasil postingan anda. Pada Tulisan kedua (2) digunakan untuk meng-edit tulisan yang telah dibuat tadi. Dan yang ketiga (3) untuk membuat postingan baru.
  6. Selamat menulis Blog.

Cara Menampilkan Ikon dalam postingan pada Label Tertentu

Pada blogger anda dapat menampilkan ikon, teks atau gambar tertentu untuk setiap label / kategori tertentu di dalam posting blog. Nah sebagai contoh, saya membuat sebuah blog tentang KPA Bestari yang memiliki label / kategori sebagai berikut : Berita, Pengumuman, Kegiatan, Dokumentasi dan Album. Setiap postingan yang berada dalam label tersebut diatas akan menampilkan ikon yang berbeda-beda. Contoh dapat dilihat pada gambar dibawah ini.

Cara Menampilkan Ikon dalam postingan pada Label Tertentu

Nah mau tau cara membuatnya ? Untuk membuatnya kita harus memahami 2 tahapan :

Tahap 1 : Persiapan

  1. Dilarang menyisipkan gambar pada paragraf pertama setiap postingan.

  2. Dilarang menerapkan lebih dari 1 (satu) label untuk postingan.

  3. Setiap postingan telah diberi Label.

Tahap 2 : Cara Membuatnya

  1. Siapkan gambar / icon yang sesuai dengan label pada blog anda. Saya menggunakan gambar-gambar icon dibawah ini untuk label.



    Anda bisa mendownloadnya melalui www.iconfinder.com.

  2. Login ke Blogger, lalu pilih DESIGN > EDIT HTML dan klik "Expand Widget Templates"

  3. Lalu carilah kode dibawah ini, agar cepat gunakan CTRL + F :

    <div class='post-header-line-1'/> 

  4. Kemudian paste-kan kode ini dibawah tag diatas :

    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.name == &quot;LABEL_ANDA_1&quot;'>
    <img align='right' src='http://alamat-ikon-anda'/>
    </b:if>
    <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.name == &quot;LABEL_ANDA_2&quot;'> <img align='right' src='http://alamat-ikon-anda'/>
    </b:if>


  5. Ubahlah tulisan LABEL_ANDA_1, LABEL_ANDA_2 dengan label yang anda gunakan. Duplikat kode diatas sesuai dengan banyaknya label yang anda miliki.


  6. Ubah alamat gambar anda pada kode src=’http://alamat-ikon-anda’ dengan alamat ikon yang anda miliki.


  7. Langkah terakhir, simpanlah template anda.


Cara Melakukan Login Ke Akun Blogger

Bagi blogger newbie mungkin ada yang masih kurang memahami cara login ke bloggernya atau juga mungkin ada yang lupa cara melakukan login ke akun blogger setelah dibuat. Untuk melakukan login ke blogger, anda ketikkan url http://www.blogger.com di address bar web browser.

Nanti anda akan disuguhkan tampilan seperti dibawah ini :

blogger-login-welcome

Pada sisi sebelah kanan terdapat form isi yang harus diisikan

blogger-login-dashboard

  1. Isikan kotak isi Email dengan nama email untuk mendaftar diblog.
  2. Masukkan password yang dibuat ketika mendaftar blog.
  3. Lalu tekan tombol sign in.

Nah mudah bukan ? Keep Blogging.

Cara Membuat Blog di Blogspot

logo-bloggerSebelum memulai membuat blog, kita harus tahu platform apa saja yang banyak digunakan oleh blogger. Secara umum, platform yang nge-top adalah wordpress dan blogspot. Tetapi keputusannya terserah anda. Pada panduan kali ini saya hanya mengulas Cara Membuat Email di Google Mail. Karena lebih mudah untuk dimodifikasi dan juga gratis.

Untuk membuat sebuah blog, anda diwajibkan telah memiliki Email. Jika belum, silahkan baca terlebih dahulu Cara Membuat Email di Google Mail sebagai panduan. Selanjutnya anda dapat langsung mendaftarkan blog di blogger.

Nah bagaimana proses pendaftaran blog di blogger.com ? Berikut langkah-langkahnya :

  1. Buka web browser, dan ketikkan url www.blogger.com.
    blogger-first-time
  2. Kemudian klik tombol berwarna orange yang bertuliskan Get started.
    blogger-get-started
  3. Isilah formulir pendaftaran yang tersedia untuk mendapatkan blog.
    blogger-form-01
    - Isikan alamat email anda, kemudian ulangi ketik alamat email sama seperti yang dituliskan pada field diatasnya.
    - Masukkan password / sandi yang digunakan. Minimal mengandung 8 karakter (kombinasi angka dan huruf).
    - Ketik Ulang sandi yang dibuat diatas pada field dibawahnya.
  4. Lalu Tuliskan Nama Anda atau boleh menggunakan nama lain.
    - Pilih Jenis Kelamin dan masukkan tahun lahir anda.
    - Isikan Verifikasi Kata seperti yang muncul dilayar monitor anda.
    - Klik / ceklist pada kotak yang bertuliskan Saya menerima Persyaratan dan Layanan sebagai anda menerima persyaratan blogger.com
    - Jika semua data telah diisi dengan benar, klik tombol LANJUTKAN.
    blogger-form-02
  5. Langkah berikutnya adalah memberi Judul blog anda. Misalnya saya memberikan nama blog yang dibuat adalah Kelompok Pencinta Alam Bestari.
    blogger-setup
    Pada Alamat blog (URL) isikan nama yang diinginkan. Nama ini tidak bisa sama dengan nama yang telah dipilih oleh blogger lain. Silahkan klik link Cek Ketersediaan untuk memeriksanya. Jika muncul tulisan Alamat blog ini tersedia, maka anda dapat melanjutkan proses selanjutnya. Nantinya nama blog anda berakhiran blogspot.com. Jika kotak isian alamat blog anda adalah “kpa-bestari”, maka alamat yang tercipta menjadi http://kpa-bestari.blogspot.com.
    Klik tulisan LANJUTKAN untuk melanjutkan proses registrasi.
  6. Proses berikutnya adalah memilih template atau design awal dari blog anda. Design ini merupakan template yang disediakan oleh blogger untuk anda. nantinya anda bisa memilih template lain yang dibuat oleh blogger lain.
    blogger-template
    Setelah dipilih, klik tulisan LANJUTKAN.
  7. Berakhirlah sudah proses pembuatan blog. Klik tulisan MULAI BLOGGING untuk mengisi postingan pertama anda.
    blogger-finish

Mengenal Jenis Platform Blog

platform-blog-stat Sebelum melakukan proses pembuatan Blog tentu saja kita harus mengetahui platform atau jenis antar muka yang digunakan untuk blog. Saat ini platform blog sangat banyak. Dan platform yang paling popular digunakan adalah Wordpress.com, WordPress Self Hosting dan Blogspot. Masing-masing platform memiliki kelebihan dan kekurangan.

Dalam memilih platform blog, ada hal yang paling penting untuk diperhatikan, yaitu Kegunaan Blog itu sendiri. Jika kita ingin membangun blog dengan branding yang kuat tentu saja harus memiliki domain dan hosting sendiri.

Dibawah ini terdapat beberapa platform yang berkembang, diantaranya adalah :
•    Wordpress
•    Blogspot
•    Blogsome
•    MovableType
•    TypePad
•    Dotclear
•    Croogo
•    FlatPress
•    Globber
•    Habari
•    LifeType
•    Mi-Dia Blog
•    NibbleBlog
•    Nucleus CMS
•    Open Blog
•    Pritlog
•    Serendipity
•    SweetRice
•    Textpattern
•    Zomplog
•    Blog
•    Livejournal
•    Blogdrive
•    Multiply
•    My Opera
•    Tumblr
Berdasarkan statistic yang dirangkum oleh situs Wappalyzer.com di http://wappalyzer.com/stats/cat/Blogs, bahwa pengguna blog yang paling banyak adalah wordpress, berikut urutannya :
1.      Wordpress
2.      Blogger
3.      LiveJournal
4.      Tumblr
5.      Posterous

Apa itu Blog ?

jorn-barger Blog adalah singkatan dari Web Log. Istilah ini pertama kali digunakan oleh Jorn Barger pada bulan Desember 1997. Jorn Barger menggunakan istilah Weblog untuk menyebut kelompok website pribadi yang selalu diupdate secara kontinyu dan berisi link-link ke website lain yang mereka anggap menarik disertai dengan komentar-komentar mereka sendiri. Blog kemudian berkembang mencari bentuk sesuai dengan kemauan para pembuatnya atau para Blogger.

Blog yang pada mulanya merupakan “catatan perjalanan” seseorang di Internet, yaitu link ke website yang dikunjungi dan dianggap menarik, kemudian menjadi jauh lebih menarik daripada sebuah daftar link. Hal ini disebabkan karena para Blogger biasanya juga tidak lupa menyematkan komentar-komentar “cerdas” mereka, pendapat-pendapat pribadi dan bahkan mengekspresikan sarkasme mereka pada komentar yang mereka buat.

Blog pertama dibuat dengan browser mosaic, mosaic sendiri adalah browser pertama sebelum internet exploler dan nescape. Justin hall memulai web pribadinya dengan nama Justin’s Home Page yang kemudian berubah menjadi Links from the Underground yang mungkin dapat disebut sebagai Blog pertama seperti yang kita kenal sekarang. Blog pertama kali sulit berkembang hal ini dikarenakan saat itu diperlukan keahlian dan pengetahuan khusus untuk membuat website. Untuk membuat website saat itu diperlukan keahlian seperti membuat web diantaranya harus mampu membuat dan mengubah file html, sehingga hanya orang tertentu yang mampu membuat blog pada saat itu seperti administrator sistem dan web disainer.

Blog mulai berkembang pada tahun 1998. Untuk memudahkan penggunaan blog, maka pihak ketiga berlomba-lomba untuk menciptakan sebuah platform agar penyebaran blog dapat berkembang dengan pesat, diantaranya adalah Blogger, Movable Type dan WordPress. Blog sangat mudah pengelolaannya dibandingkan website. Karena interface atau tampilan editornya mudah untuk dipahami. Sehingga semua kalangan bisa untuk melakukan blogging.

Cara Membuat Email di Google Mail

Cara Membuat Email di Google Mail Email tidak bisa lepas dari aktifitas kita di internet. Karena setiap kita menggunakan sesuatu hal seperti chating, blogging, mailing list, dll, pasti selalu ditanyakan alamat email anda. Apalagi sekarang lagi ngetrendnya facebook. Untuk bisa menggunakan layanan facebook, tentu saja kita harus memiliki email.

Persyaratan awal sebelum anda menjadi seorang blogger adalah anda harus memiliki Email. Pada tutorial ini akan membahas bagaimana Cara Membuat Email di Google Mail. Kenapa harus Google Mail ? Karena Blogger aka Blogspot adalah salah satu layanan yang dimiliki oleh Google. Dengan memiliki akun di Google akan memberikan kemudahan untuk menggunakan semua layanan yang ada. Perkembangan email google dari waktu ke waktu tentu saja mengalami perubahan. Nah tutorial ini khusus membahas Cara Membuat Email di Google Mail di Tahun 2011.

Bagaimana Cara Membuat Email di Google Mail ?

  1. Buka alamat http://mail.google.com pada web browser anda.
  2. Akan tampil layar seperti dibawah ini :
    gmail-01
    Lalu klik tombol Create an account.
  3. Isikan data-data anda seperti yang diminta oleh form pada gambar dibawah ini :
    gmail-02
    - First name : Isi dengan kata pertama nama anda.
    - Last name : Isi dengan kata selanjutnya dari nama anda.
    - Desired Login Name : Isikan dengan nama user yang anda inginkan. Dalam pengisian form ini haruslah unik. Anda harus bisa memilih nama yang belum digunakan oleh user lain. Pastikan anda mengklik tombol Check availability untuk mengecek nama user sudah digunakan apa belum. Seperti kasus pada gambar diatas, saya tidak bisa menggunakan username “kblogger”. Saya harus memilih nama lain, atau bisa langsung memilih dari daftar nama yang tertera dibawahnya.
  4. Jika nama user tersedia untuk digunakan, google akan menampilkan pesan seperti gambar ini
    gmail-03 
    Artinya nama user yang saya gunakan adalah “kblogger2011”.
  5. Selanjutnya kita isikan form seperti gambar dibawah ini :
    gmail-04
    - Choose a password : Isi dengan sandi atau kata rahasia anda. Minimal sandi harus 8 karakter (terdiri dari gabungan huruf dan angka)
    * TIPS : Buatlah sandi dengan menggabungkan angka dan huruf, serta huruf besar dan kecil, Password sangat sensitif, jadi harus berhati-hati dalam menuliskannya, contoh : k0L0mbL0gg3r.
    - Re-enter password : Ulangi pengetikan sandi yang sudah anda buat diatas.
    - Security question : Pilih salah satu pertanyaan untuk keamanan email anda.
    - Answer : Isikan dengan jawaban untuk menjawab pertanyaan anda diatas.
    * TIPS : Sebaiknya pertanyaan dan jawaban tidak korelasi / bertolak belakang. Misalnya pertanyaan “Kamu berbulan madu dimana ?” Jawabannya “Pasar”. Karena bertolak belakang tersebut akan susah untuk orang lain meng-hack akun google anda.
    - Location : pilih Indonesia.
    - Word Verification : Ketik tulisan seperti gambar yang muncul pada formulir anda.
  6. Setelah semua form terisi dengan benar, klik tombol I accept. Create my account.
  7. Langkah selanjutnya, google akan melakukan verifikasi akun anda melalui handphone.
    gmail-05
    Isikan dengan nomor handphone anda yang benar. Lalu klik tombol Send verification code. Tunggu beberapa detik, anda akan menerima sms dari google dengan pesan “Your Google verification code is xxxxxx”
    Masukkan code “xxxxxx” kedalam form ini :
    gmail-06
    Lalu klik tombol Verify.
  8. Jika berhasil, google akan menampilkan layar berikut ini :
    gmail-07
    Klik tombol Show me my account.
  9. Selamat anda telah memiliki Mail Google.
    gmail-08

Modern Photography Blogger Template








Template Name :
Modern Photography
Template Author :
Bloggermint
Description :
Modern Photography Excellent layout for blogs about photography. Is a free premium blogger template with 2 columns, right sidebar, rounded corners, footer columns, slideshow and abstract.


Rulerplate Blogger Template








Template Name :
Rulerplate
Template Author :
FiveforBlogger
Description :
Rulerplate is a free premium blogger template with 3 columns, right sidebar, exclusive design for Blogger and geometric motifs.


MusicStyle Blogger Template








Template Name :
MusicStyle
Template Author :
PBTemplates
Description :
MusicStyle is a free blogger template adapted from WordPress with 2 columns, right sidebar, space for ads, footer columns, slideshow, posts thumbnails and drop down menu.


Noise Light Blogger Template








Template Name :
Noise Light
Template Author :
Dzignine
Description :
Noise Light is a free blogger template with 3 columns, right sidebar, exclusive design for Blogger, footer columns and posts thumbnails.


Cara Mudah Menambahkan Scrollbar pada Widget Blogspot

scroll-widget-blogspot Agar blog terlihat lebih rapi, tentu saja sobat blogger perlu untuk menata tampilan halaman agar terlihat professional dan nyaman untuk dikunjungi. Jika tampilan kurang rapi, bagi sebagian orang akan malas untuk menelusuri lebih dalam blog tersebut.
Sebagai contoh saya ingin menata tinggi widget blogroll yang berisikan link-link sahabat blogger yang jumlahnya banyak. Tentu saja tinggi widget ini akan terlihat lebih tinggi dari widget lainnyakan ? Agar tinggi widget ini bisa disesuaikan, maka kita bisa menambahkan scroll pada widget tersebut.

Mau tau caranya ? Sangat mudah kok untuk menerapkannya.
1. Login ke Blogger.

2. Pilih menu Rancangan / Design.

3. Lihat ID dari Widget pada blog anda.

4. Setelah tau ID Widgetnya pilih Edit HTML pada Menu Design.

5. Kemudian Cari kode ]]></b:skin>

6. Pastekan kode CSS dibawah ini sebelum kode diatas :

#WidgetID .widget-content { 
height: 400px;
overflow: auto;
}
7. Ganti tulisan yang berwarna merah (WidgetID) dengan ID Widget anda.

8. Sesuaikan tinggi widget dengan keinginan anda pada angka yang berwarna biru.

9. Simpanlah Template Anda.

Cara Mudah Melihat Widget ID pada Blogspot

cara-melihat-widget-id Tutorial ini bertujuan untuk memudahkan rekan blogger dalam melakukan editing template pada Blogspot. Sebagian besar pekerjaan yang dilakukan dalam menata template sebuah blog adalah melakukan memodifikasi Style / CSS. CSS sangat erat hubungannya dengan penamaan ID, Class dan juga Tag HTML. Dengan hanya mendefenisikan CSS dengan nama ID, Class ataupun tag HTML, maka CSS akan berhasil diterapkan.


Pada blogspot, setiap Widget secara khusus telah diberikan Nama ID. Jadi dalam menerapkan CSS dengan blogspot dapat dilakukan dengan mudah. Misalnya kita akan menerapkan style khusus untuk widget tertentu.
Nah bagaimana cara mudah melihat ID Widget pada Blogspot ?
Caranya sangat mudah, silahkan masuk kedalam mode perancangan / design blog anda. Lalu klik lah salah satu widget yang sudah terpasang. Lalu muncul popup halaman widget yang akan diedit. Klik mode full screen untuk melihat urlnya.
cara-lihat-widget-id
Tulisan dalam kotak merah pada gambar diatas merupakan Widget ID-nya.
Contoh Penerapannya :

#Widget ID .widget-content{      
height:200px;
width:auto;
overflow:auto;
}
Hasilnya diterapkan menjadi :

#BlogArchive1 .widget-content{       
height:200px;
width:auto;
overflow:auto;
}
Sumber : Cara Mudah Melihat ID Widget pada Blogspot

Cara Menambahkan Syntax Highlighter pada Blogspot

syntax-highlighter-code Bagi yang menggunakan blog wordpress, jika ingin menambahkan Syntax Highlighter sagat mudah dilakukan. Karena tinggal menambahkan plugin Syntax Highlighter. Tetapi bagaimana bagi pengguna blogspot ? Ternyata juga tidak terlalu sulit untuk diterapkan. Mau tau caranya ? Saya akan membantu teman-teman untuk mewujudkannya.


Penulisan kode apa saja yang bisa dilakukan dengan Syntax Highligter ? Diantaranya adalah : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt. Sangat banyak bukan ?
Adapun langkah-langkahnya adalah sebagai berikut :

1. Login dan Klik Layout > Edit HTML dan klik "Expand Widget Templates".

2. Klik situs http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css, kemudian copy semua kode yang ada.

3. Paste code css tersebut sebelum tag berikut ]]--></b:skin>

4. Kemudian copykan kode berikut ini sebelum tag </head> :

<!– Add-in CSS for syntax highlighting –>    
<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>
5. Langkah terakhir adalah memasukkan kode dibawah ini sebelum tag </body> :

<!– Add-in Script for syntax highlighting –>    
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
6. Untuk menuliskannya kedalam blog, gunakan format seperti dibawah ini :

<pre name="code" class="html">

….ketikkan kode yang anda inginkan disini….!

</pre>

Untuk menuliskan kode tertentu, silahkan ubah tulisan yang berwarna merah (html) dengan jenis kode yang ingin dituliskan, seperti : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt

Sebagai contoh hasilnya bisa dilihat pada blog ini Syntax Highlighter Kode.

Cara Memasang Widget Cuaca (Weather)

weather-symbols Sebenarnya informasi tentang cuaca diperlukan juga untuk diketahui. nah bagi sobat blogger yang ingin memasang widget informasi cuaca pada blognya, bisa mengikuti langkah-langkah dibawah ini.
Info cuaca ini tidak hanya menampilkan info cuaca dikota-kota besar, seperti Pekanbaru. Tetapi juga bisa menampilkan kota kecamatan seperti Rumbai, Gobah, Air Molek, dll. Tinggal memasukkan kata kunci nama daerah, apakah tersedia info daerah sobat blogger.


Bagaimana Cara Memasang Widget Cuaca pada Blogger ?
1. Silahkan buka situs HotelsCombined.com.
2. Aturlah konfigurasi untuk Widget sobat

- Pilih Jenis Satuan (Celcius / Fahrenheit)

- Pilih Skin / Warna Widget
3. Ketikkan nama kota / daerah bertempat tinggal. (Widget akan langsung menampilkan preview)
widget-cuaca
4. Lalu tekan Tombol Get Code. Copy code tersebut
5. Login ke Blogger sobat.
6. Pilih Menu Design > Add Gadget . Pastekan kode yang telah di generate tadi.
7. Simpan Perubahan.
Hasilnya terlihat seperti dibawah ini :


Cara Merubah Link Blog Menjadi Warna Pelangi

link-pelangi Ada seikat pelangi di balik gerimismu

cahayanya terurai dalam lariklarik puisi

bercucuran di sudut matamu

melukiskan berjuta pixel warna cinta.


Sungguh indah puisi yang mengungkap Pelangi tersebut. Pelangi memang sangat indah untuk dilihat. Sobat Blogger juga dapat mengungkapkan keindahan pelangi pada blog. Keindahan Pelangi bisa diterapkan pada link yang ada didalam blog.


Bagaimana Cara Merubah Link Blog Menjadi Warna Pelangi ?

1. Login ke Blogger anda.

2. Klik Design > Edit HTML.

3. Cari tag </body>, kemudian pastekan kode berikut ini :

<script src="http://piliang.googlecode.com/files/pelangi.js"></script>
4. Simpan Template anda.

Nah sangat mudah bukan caranya ? Selamat Mencoba.

Memasang Related Post Blog dengan LinkWithIn

logo-linkwithin LinkWithIn merupakan widget yang banyak digunakan oleh blogger pada blognya. Widget ini menampilkan postingan yang mirip dengan postingan yang dibaca oleh pengunjung. Dengan menambahkan widget ini, pengunjung dapat menemukan artikel terkait pada blog anda. Secara tidak langsung, widget ini juga akan mendatangkan trafik terhadap blog. Saya sendiri sangat merasakan fungsi dari widget ini.

widget-linkwithin-01

LinkWithIn akan menampilkan linknya secara thumbnail dibawah setiap halaman posting. Sudah pasti, setiap pengunjung akan langsung dapat melihat widget ini. Pengunjung hanya tinggal klik disalah satu artikel yang ingin dibacanya.
Widget yang mensupport untuk digunakan pada Blogger.com, WordPress (selft hosting), Typepad, dll ini dapat menaikkan trafik pada blog anda. Kenapa saya bisa katakan demikian ? Karena secara otomatis, widget ini akan menampilkan artikel-artikel yang memiliki kemiripan tag ataupun kategori. Sehingga, bisa mengajak pengunjung akan mengklik artikel lain pada blog yang memiliki keterkaitan dengan artikel tersebut.
Bagaimana Cara Menggunakannya ?

Untuk bisa menggunakan Widget LinkWithIn ini adalah sbb :

1. Kunjungi Situs LinkWithIn.
2. Kemudian isikan data yang dibutuhkan oleh widget, seperti alamat email, alamat blog anda, jenis platform blog yang anda gunakan, dan banyaknya berita yang mau ditampilkan. Jika melihat gambar diatas saya menggunakan width = 4 stories. Jadi sesuaikan dengan lebar blog anda.
widget-linkwithin-02

3. Setelah selesai diisi, lanjutkan dengan menekan tombol Get Widget!.
4. Proses selanjutnya adalah melakukan instalasi Widget sesuai dengan Platform yang anda pilih. Ikuti petunjuk instalasi berdasarkan guide yang diberikan.
Original Source : Belajar PC

Menambahkan Widget Statistik Blogger

widget-stat Untuk mengetahui banyaknya pengunjung pada blog, kita dapat menambahkan widget statistik. Dengan menggunakan widget ini, pemilik dan pengunjung lain dapat melihat kepopularan dari blog tersebut. Sekarang blogger.com sudah menambahkan fitur tersebut sebagai widget standart dalam platformnya. Jika anda ingin melihat berapa banyaknya pengunjung pada blog, bisa menggunakan widget ini.



Fitur sederhana yang dimiliki widget ini, dapat melihat statistik pengunjung berdasarkan 3 periode waktu, yaitu :

  • All Time : merekam statistik pengunjung blog untuk semua waktu.

  • Last 30 Days : merekam statistik pengunjung blog untuk 1 bulan, ketika berpindah bulan, statistik akan direset kembali dari 0.

  • Last 7 Days : merekam statistik pengunjung blog untuk 1 minggu, memasuki minggu berikutnya, statistik akan direset kembali dari 0.

Untuk style atau tampilan, widget statistik mempunyai 4 pilihan, seperti terlihat pada gambar dibawah ini :

widget-stat-01



Bagaimana Cara Menambahkan Widget Statistik Blogger pada Blogspot Anda ?

1. Login kedalam blogspot anda. Pilih menu Design > Page Elements.

2. Lalu klik link Add Gadget. Muncul Halaman Popup, kemudian cari Widget Stat, Klik link atau pada gambar bersimbol [ + ].

widget-stat-02

3. Aturlah konfigurasi tampilan seperti yang anda inginkan.

widget-stat-03

4. Klik Tombol Save. Lihat hasilnya.