Cara Membuat Favicon untuk Blogspot

Cara membuat favicon di blogspot ada 2 cara : 

1. Upload file gambar harus ber-ekstensikan ".ico" di bagian menu layout blogger, jadi jika gambar ber-ekstensi ".jpg/.png" maka harus di konversi dulu ke ".ico" (rekomendasi di icon converter), setelah itu klik edit, browse gambar lalu save, lalu save arrangement  dan view blog untuk mengetes-nya.

2. Jika dengan cara diatas tidak berhasil, maka sobat coba cara kedua ini, jadi sobat harus menambahkan gambar favicon secara manual dengan menggunakan code html. Dan sebelum menambahkan kode sobat harus upload gambar sobat dulu ke situs penyimpanan gambar di internet, kalo saya biasanya di photobucket.com, silakan mendaftar terlebih dahulu. Setelah daftar lalu upload foto yang sobat inginkan yang ber-ekstensi bebas, direkomendasikan file ".PNG" atau ".jpg"  dan berukuran lebih kecil dari 100 kb biar mudah/cepat ketika loading. 

setelah itu sobat kembali ke halaman blogger dan pilih menu template > klik edit html > tekan Ctrl + F lalu ketikan  <b:skin><![CDATA[/* setelah terlihat, copy kode HTML di bawah ini, lalu paste kan di atas kode  <b:skin><![CDATA[/* jangan dulu di close/save!!, lalu sobat kembali ke halaman photobucket tempat foto anda di upload, lalu klik direct link gambar untuk meng-copy link secara otomatis. Setelah itu sobat ganti dan paste kan link gambar tadi di code html seperti dibawah ini pada halaman edit html blogger sobat. klik tombol save lalu close dan klik view blog

Contoh:

<link href='Ini_adalah_code_gambar_saya.png' rel='icon' type='image/x-icon'/>

jadi,

 <link href='http://i1208.photobucket.com/albums/cc371/adhieresthenes/My%20Icon/favicon_zps52432c3c.png' rel='icon' type='image/x-icon'/>

CODE HTML FAVICON :

<link href='Ini_adalah_code_gambar_saya.png' rel='icon' type='image/x-icon'/>

Jika berhasi maka tampilannya seperti berikut:

Ok GoodLuck!

Bagaimana Cara Membuat Pesan di atas kotak Komentar Blog

Ok langsung saja, berikut adalah contohnya :

Inilah Step by step nya. Jika blog anda menggunakan bahasa inggris:
1.Login ke blogger.com menggunakan account anda
2.Masuk ke halaman  'Settings'

3.Klik 'Post' and 'Comments'

4.Kemudian cari kotak 'Comment Form Message' dan isikan pesan anda pada kotak yang tersedia. ingat bukan kotak 'post template' tapi kotak seperti dibawah ini!

5.Setelah itu klik tombol 'Save' di pojok kanan atas

Selesai dan lihat hasilnya...
Goodluck!

Cara Membuat Twitter Box News Feed Tanpa Plugin

    Cara membuat widget twitter box news feed sebenarnya hal yang sudah tidak asing lagi dan mudah untuk dibuat, tentu saja jika kita menggunakan plugin script dan aplikasi API dari situs twitternya secara langsung, lihat contoh pada link berikut ini adalah sebagai referensinya Twitter widget for Web/blog 

atau langsung ke editornya Costumize your profile widget .  

                  Nah pada tutorial ini diriku mau memperkenalkan kepada sobat sekalian sesuatu yang berbeda yaitu "Membuat Customized Twitter Feed  Tanpa Plugin script  dari situs Twitternya secara langsung" artinya kita tidak menggunakan code script yang di customized dan disediakan dari situs twitter tersebut, tapi disini kita lebih di tekankan untuk kreatif dan membuat sebuah tampilan customized yang berbeda dengan membuat script sendiri secara pure menggunakan code HTML, Javascript dan CSS sehingga tampilan bisa bebas sesuai dengan keinginan kita atau mengkostumisasi/customizing sendiri.  Berbeda halnya jika kita menggunakan plugin widget secara langsung dari twitter, kita tidak bisa bebas meng-customizednya dan ada batasan-batasan tertentu yang sudah berlaku atau tampilannya monoton hampir semuanya sama dan membosankan hehe...  *itu sih menurut pendapatku sobat!   Tapi kalo sobat lebih senang apa adanya, ya gpp menggunakan widget yang sudah siap pakai juga dari twitter selama itu masih  gretongan bin gratis!!^^

NB: Tutorial ini aku tujukan untuk para pengguna 'Blogspot'. Atau kemungkinan bisa juga untuk pengguna blog lainnya seperti 'Wordpress' dan 'Joomla', sobat cari tau sendiri ja cara pemasangan!!! hehe, coba cari di mbah google.. ambalayah tu..

Okay Langsung saja pada Intinya, Bagaimana cara memasang widget twitter box news feed tanpa plugin/secara manual. Berikut adalah langkah-langkahnya :

1.Login ke Blog Sobat bukan ke blog aku!  http://www.blogger.com

2.Setelah login, sobat cari tombol Tanda Panah  ke Bawah di sebelah tombol View lalu klik lalu akan muncul pilihan

3.Pilih/klik Template, kemudian klik lagi Edit HTML 

4.Klik Proceed

5. Kemudian copy dan paste code CSS berikut sebelum tag </head> :

untuk mempercepat pencarian tekan Ctrl+F  lalu masukan  </head> pada kotak search, Enter!

<!-- CSS tweet feed --><br /> <style type='text/css'> #twitter_update_list { font-size: 13px; line-height: 21px; list-style: none; } #twitter_update_list li { background: url('images/twitter-divider.gif') bottom left repeat-x; padding-bottom: 7px; margin-bottom: 9px; } #twitter_update_list span, #twitter_update_list span a { color: #eee; text-decoration: none; } #twitter_update_list a { color: #6f7276; } #twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; } </style>

Jika sudah, sobat bisa men save-nya!

NB: Tampilan atau warna kotak feed CSS bisa di rubah sesuai keinginan, diatas hanya contoh, jika sobat ingin merubahnya dan meng customize nya silakan jika sudah ngerti HTML dan CSS, jika belum akan sangat beresiko! jangan lupa sebelum editing backup dulu template sobat.

6.Setelah menyimpan CSS diatas, kemudian sobat tinggal menyimpan code HTML dan Javascript secara bersamaan pada widget yang tersedia di blogspot, hal ini juga yang akan menentukan dimana sobat akan menampilkan/menyimpan news profile twitter sobat di blog. Berikut adalah langkahnya :

a) Klik Menu Layout pada Blog sobat

b) Klik add Gadget (bebas mau pilih di posisi mana saja)

c) Muncul layar pop-up, cari dan pilih HTML/Javascript   lalu klik tombol 'Plus'

d) Copy dan paste kan Code berikut ini ke layar HTML/Javascript tadi :

<ul id="twitter_update_list"><li>Twitter feed loading</li> </ul><br /> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><br /> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=2"></script><br />

Jika sudah, Ganti atau Replace String "USERNAME" dengan Username twitter sobat contoh username twitter aku  "adhieresthenes", gtu..  lalu klik Save (simpan). 

Selesai deh Hore.., moga berhasil dan bermanfaat! kalo suka di like,koment or di share ya haha.. =D

Cara Membuat Ticker Text_How to Make Text Ticker

Hi teman-teman, pada kesempatan kali ini saya mau berbagi tentang "Bagaimana cara membuat Text Ticker". Kalian bisa lihat kan text di bagian header pada blog ini yang berslide dari bawah ke atas, seperti halnya news feed di twitter! dengan sedikit menambahkan script, Html dan Css.

Sebagai referensiku, kalian bisa lihat langsung dari link berikut ini  Demo Text Ticker

Baiklah langsung saja ke point yang akan di bahas. Berikut ini adalah code-codenya :

Silakan Copy dan Paste kan Code Css di bawah ini sebelum code </head>

<style type='text/css'> .ticker { background-color: #EEEEEE; border: 1px solid #DDDDDD; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 5px #DDDDDD; height: 40px; margin: 0; overflow: hidden; padding: 0; text-align: center; } </style>

Kemudian, Copy dan Paste kan juga code javascript berikut sebelum code </head>:

<script> function tick(){ $('#ticker_01 li:first').slideUp( function () { $(this).appendTo($('#ticker_01')).slideDown(); }); } setInterval(function(){ tick () }, 3000); </script>

Kemudian, Sobat copy kan code HTML di bawah sesudah tag <body> atau bebas tergantung keinginan sobat ingin menyimpannya di mana :
<div class='ticker'> <ul class='ticker' id='ticker_01'> <li><p>Cara Download File di Blog ini, Silakan Ikuti Petunjuknya Pada Menu Tips Download</p></li> <li><p>Like This Page</p></li> <li><p>Happy Reading</p></li> </ul> </div>

Selesai deh, silakan anda coba modifikasi lagi sendiri !!  hehe..

Good luck, kalo berhasil comment ya!!

Cara Membuat Blogroll list untuk Referensi Link Website

Hi sobat blogger ? kali ini diriku mau berbagi dan mudah-mudahan bermanfaat !

tutorialnya sederhana ^^ hehe maklum belun sempet buat tutorial yang bagus, cz ini semua dadakan bagaimana!! oke to the point.. Bagaimana cara membuat blogroll yang bisa di scroll ke bwah dan ke atas?

caranya adalah sebagai brkt:

Coba ikuti langkah berikut ini:

• Silahkan masuk ke dasbor akun blogspot Anda.
• Klik menu Rancangan.
• Klik Elemen Laman.
• Klik Tambah Gadget.
• Cari HTML/JavaScript, dan silahkan klik tanda "+".
• Lalu masukkan kode di bawah ini.

<br /> <div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 140px; height: 140px; text-align: Left; background:#ffffff;"><br /> <a href="http://alamat-url-1/" target="_blank">Nama blog</a><br/><br /> <a href="http://alamat-url-2/" target="_blank">Nama blog</a><br/><br /> <a href="http://alamat-url-3/" target="_blank">Nama blog</a><br/><br /> <a href="http://alamat-url-4/" target="_blank">Nama blog</a><br/><br /> <br /> </div><br />

• Dan setelah selesai, silahkan klik Simpan.
• Beres deh..

Memasang Syntax Highlighter Untuk Blogspot

          SYNTAX HIGHLIGHTER, apakah sobat pernah mejumpai dan melihat syntax highlighter ketika berkunjung ke sebuah blog?  Apa itu syntax highlighter? mungkin untuk para blogger yang sudah berpengalaman istilah tersebut sudah tidak asing lagi, betul..betul..betul..! hee

      Syntax highlighter atau penyototan syntax adalah tampilan dari beberapa code editor teks yang menampilan teks, terutama untuk berbagai source code seperti Markup Languange(HTML), CSS, Script, dan code dari bahasa pemrogramman lainnya. Fitur ini memudahkan kita dalam menulis code pada sebuah situs atau blog dengan rapi dan terstruktur seperti bahasa pemrograman atau bahasa markup. Pada kesempatan ini diriku ingin berbagi tutorial tentang cara membuat syntax highlighter.

Berikut langkah cara menambahkan sytax highlighter pada BLOGSPOT :

1. Login ke Blog sobat bukan aku  di  http://www.blogger.com

2. Jika blog berbahasa Indo, maka  klik Menu Rancangan, lalu Pilih Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode di bawah ini sebelum kode ]]></b:skin>

<br /> .dp-highlighter<br /> {<br /> font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;<br /> font-size: 12px;<br /> background-color: #E7E5DC;<br /> width: 99%;<br /> overflow: auto;<br /> margin: 18px 0 18px 0 !important;<br /> padding-top: 1px; /* adds a little border on top when controls are hidden */<br /> }<br /> <br /> /* clear styles */<br /> .dp-highlighter ol,<br /> .dp-highlighter ol li,<br /> .dp-highlighter ol li span<br /> {<br /> margin: 0;<br /> padding: 0;<br /> border: none;<br /> }<br /> <br /> .dp-highlighter a,<br /> .dp-highlighter a:hover<br /> {<br /> background: none;<br /> border: none;<br /> padding: 0;<br /> margin: 0;<br /> }<br /> <br /> .dp-highlighter .bar<br /> {<br /> padding-left: 45px;<br /> }<br /> <br /> .dp-highlighter.collapsed .bar,<br /> .dp-highlighter.nogutter .bar<br /> {<br /> padding-left: 0px;<br /> }<br /> <br /> .dp-highlighter ol<br /> {<br /> list-style: decimal; /* for ie */<br /> background-color: #fff;<br /> margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */<br /> padding: 0px;<br /> color: #5C5C5C;<br /> }<br /> <br /> .dp-highlighter.nogutter ol,<br /> .dp-highlighter.nogutter ol li<br /> {<br /> list-style: none !important;<br /> margin-left: 0px !important;<br /> }<br /> <br /> .dp-highlighter ol li,<br /> .dp-highlighter .columns div<br /> {<br /> list-style: decimal-leading-zero; /* better look for others, override cascade from OL */<br /> list-style-position: outside !important;<br /> border-left: 3px solid #6CE26C;<br /> background-color: #F8F8F8;<br /> color: #5C5C5C;<br /> padding: 0 3px 0 10px !important;<br /> margin: 0 !important;<br /> line-height: 14px;<br /> }<br /> <br /> .dp-highlighter.nogutter ol li,<br /> .dp-highlighter.nogutter .columns div<br /> {<br /> border: 0;<br /> }<br /> <br /> .dp-highlighter .columns<br /> {<br /> background-color: #F8F8F8;<br /> color: gray;<br /> overflow: hidden;<br /> width: 100%;<br /> }<br /> <br /> .dp-highlighter .columns div<br /> {<br /> padding-bottom: 5px;<br /> }<br /> <br /> .dp-highlighter ol li.alt<br /> {<br /> background-color: #FFF;<br /> color: inherit;<br /> }<br /> <br /> .dp-highlighter ol li span<br /> {<br /> color: black;<br /> background-color: inherit;<br /> }<br /> <br /> /* Adjust some properties when collapsed */<br /> <br /> .dp-highlighter.collapsed ol<br /> {<br /> margin: 0px;<br /> }<br /> <br /> .dp-highlighter.collapsed ol li<br /> {<br /> display: none;<br /> }<br /> <br /> /* Additional modifications when in print-view */<br /> <br /> .dp-highlighter.printing<br /> {<br /> border: none;<br /> }<br /> <br /> .dp-highlighter.printing .tools<br /> {<br /> display: none !important;<br /> }<br /> <br /> .dp-highlighter.printing li<br /> {<br /> display: list-item !important;<br /> }<br /> <br /> /* Styles for the tools */<br /> <br /> .dp-highlighter .tools<br /> {<br /> padding: 3px 8px 3px 10px;<br /> font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> color: silver;<br /> background-color: #f8f8f8;<br /> padding-bottom: 10px;<br /> border-left: 3px solid #6CE26C;<br /> }<br /> <br /> .dp-highlighter.nogutter .tools<br /> {<br /> border-left: 0;<br /> }<br /> <br /> .dp-highlighter.collapsed .tools<br /> {<br /> border-bottom: 0;<br /> }<br /> <br /> .dp-highlighter .tools a<br /> {<br /> font-size: 9px;<br /> color: #a0a0a0;<br /> background-color: inherit;<br /> text-decoration: none;<br /> margin-right: 10px;<br /> }<br /> <br /> .dp-highlighter .tools a:hover<br /> {<br /> color: red;<br /> background-color: inherit;<br /> text-decoration: underline;<br /> }<br /> <br /> /* About dialog styles */<br /> <br /> .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }<br /> .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }<br /> .dp-about td { padding: 10px; vertical-align: top; }<br /> .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }<br /> .dp-about .title { color: red; background-color: inherit; font-weight: bold; }<br /> .dp-about .para { margin: 0 0 4px 0; }<br /> .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }<br /> .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }<br /> <br /> /* Language specific styles */<br /> <br /> .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }<br /> .dp-highlighter .string { color: blue; background-color: inherit; }<br /> .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }<br /> .dp-highlighter .preprocessor { color: gray; background-color: inherit; }<br />

4. Kemudian, Cari kode </head> dan letakkan kode di bawah ini sebelum kode

</head>

<br /> <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> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"> </script> <br /> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"> </script><br />

5. kemudian, Cari kode </body> dan letakkan kode di bawah ini sebelum kode

</body>

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

Ok, Selesai deh.. pemasangannya eitss..tapi ntar dulu masih ada 1 langkah lagi yang terakhir, jika kita ingin memposting suatu code dan menampilkan code highlighter pada blog.
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>

Horeh sobat sudah berhasil! silakan coba  tampilkan code seperti di bawah ini:
NB: yg ini hanya contoh!
<br /> #include <stdio.h><br /> main(){<br /> printf("Hello World!");<br /> return 0;<br /> } <br />