Tips Trik Blog: Membuat Syntax Highlighting Blogger

akhirnya setelah mencari-cari artikel yang membahas bagaimana caranya untuk membuat codingan html dengan tampilan seperti pada Notepad++ di blogger, akhirnya ketemu juga, namanya Syntax Highlighting..

contohnya bisa sobat lihat pada codingan artikel ini.
fungsi dari Syntax Highlighting ini adalah untuk lebih memudahkan kita untuk menulis kode hmtl/script yang biasanya ribet untuk dilakukan..

langsung aja deh. masuk ke akun blogger sobat.
lalu masuk ke menu desain - pilih edit html - jangan lupa untuk mencontreng Expand Widget Templates.

1. cari kata </b:skin> lalu masukkan kode berikut sebelum </b:skin>

Kode htmlnya gan no jebmen :

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

2. clo udah cari kata </head> dan masukkin kode berikut sebelum </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>  

3. lanjut gan.. cari lagi tag </body>, trus masukin (paste) kode berikut sebelum tag </body>

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

4. clo udah di PREVIEW dulu sebelum di SAVE gan.. clo dah gak ada yang error, sobat SAVE.
selesai..


cara gunainnya:
pas sobat bikin post baru sobat ketikkan:

<pre class="cpp" name="code">
.:Masukkan kode disini:.
</pre>

untuk kode yang akan ditulis jangan lupa di parse/encode terlebih dahulu..
kesini aja untuk langsung memparse kodenya..

Encode/Decode HTML

Read More

Tips Trik Blog: Membuat Icon Burung Terbang Twitter

Welcome in my Blog,
kali ini saya akan membahas mengenai bagaimana cara membuat Icon Burung Terbang Twitter yang bisa beterbangan pada tampilan Blog sobat, cocok sekali buat sobat yang ingin memperbanyak followers di twitter.
langsung aja deh, login ke akun Blogger sobat.
masuk ke Tab Design, pilih Page Element,
lalu pilih Add Gadgets, pilih tempatnya dimana saja sesuka sobat,
kemudian pilih HTML/Javascript,

sebelumnya sobat copy dan paste kode berikut kedalam notepad untuk memudahkan pengeditan:

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lR8VCIcPJsUXHQw783cD_Y7gas987ZGAVLXRo-ueNHXg1zqRtF3xwUG5Jx-M9BnKMSyX1cUAEkM0zBfok8MOxWgHo5T7FhVCJTDS3tHcdo08gfQfUe1_b9haLU7JzAURoYYnjjwqypro/s1600/birdsprite.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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>

*clo sudah, cari http://twitter.com/NamaTwitterAnda
Ubah nama Twitter anda dengan nama akun twitter sobat.
*cari lagi pada kode NamaTwitterAnda http://UrlSitusAnda/
ubah lagi  NamaTwitterAnda dengan nama twitter sobat, lalu UrlSitusAnda dengan URL situs blog sobat.

setelah selesai kemudian sobat SAVE dan lihat hasilnya..

follow to my twitter akun:

@fadlypuccino

Read More

Blogger Awards: Stylish Blog Award 2011

Mengawali tulisan diblog ini, saya sangat berterimakasih kepada sobat blogger saya yaitu Anwar (maaf clo salah) dengan site blog di : http://anwar358.blogspot.com/ yang telah memberikan saya Stylish Blog Award 2011 ini.
bisa dibilang ini adalah award pertama saya. hhehe..
karena usaha saya dalam membangun Tips Trik Blog ini telah mendapat apresiasi dari sobat blogger sekalian.
langsung ke topik permasalahan, di blog mas Anwar saya diharuskan untuk melakukan beberapa langkah yang harus dilakukan sebagai penerima Blogger Awards ini, salah satu diantaranya adalah: Mengharuskan menuliskan 8 Things About My Self.
kenapa mesti 8 tidak 7 saja, karena di blog luar hanya 7 saja. hhehe. .
yaudah deh saya tuliskan 8 Things About My Self.

#1 I hate writting Blogs.

Entah mengapa saya sebenarnya tidak suka sama sekali untuk menulis Blog, mungkin karena dulu sewaktu mengerjakan tugas kuliah, jawabannya harus dipublish di blog, ya jadinya mau tidak mau harus menulis di blog. saya menulis blog tips trik ini hanya sekedar untuk sharing karena saya suka Berbagi.

#2 Im Addicted to Capuccino.

tidak salah mengapa nama belakang saya sengaja saya tambahkan Puccino, coz I love Capuccino.

#3 I Love First Person Shooter PC Game

saya suka sekali game PC yang berhubungan dengan perang-perangan, mungkin terkesan kekanak-kanakan, but its Real Me..yang terakhir saya mainkan adalah Call Of Duty Black Ops, very realistic War Game.

# 4 I Love Sports

Saya suka sekali berolah raga, futsal, badminton, basket dll.

#5 Really Love Programing language

mungkin karena saya juga kuliah yang tiap harinya berhubungan dengan bahasa pemrograman.

#6 I love Music

Musik apa saya suka koq.. yang penting bisa headbanging!!!!

#7 Im Bass Player

Yeah, Im Bass Player. but i dont have a Bass.. hhehe.

#8 I Really Love My Girl

give a lot of thanks to my little angel,Syahsoza Puji who always support me for everything.

 

*Blogger i have recently discovered

1. Anwar358

2. Tips Trik Blog

3. Blog Ka21 Gunadarma

4. Meteora

5. Arvis Blog

6. KayzKuh Blog

7. Bacaanmu

8. Syahsoza Blogs

Peraturannya Jika sobat Menerima Blogger Awards Ini dari saya.

1. Thank And Link To The Person Who Awarded Me This Award (Done)
2. Share 8 Things About My Self (Yang ini pastinya sudah)
3. Pay it forward to 8 bloggers that i have recently discovered (Done)
4. Contact those blogger and tell them about their awards. (Sip, sudah!) 

Ingat!!
Sebelum meletakkan link-link di atas, hapus terlebih dahulu peserta nomor 1 dari daftar. Sehingga semua peserta naik 1 level. Peserta nomor 2 menjadi nomor 1, nomor 3 jadi 2, dst. Kemudian masukkan link Anda sendiri di bagian paling bawah (nomor 8). Dan teman-teman semua harus adil dalam menjalankannya (Tidak Boleh Curang yah..). Jika tiap penerima award mampu memberikan award ini kepada 8 orang saja dan jika mereka semua mengerjakannya, maka sobat akan mendapatkan backlink gratis.

Read More

Tips Trik Blog: Cara Bikin Blog Otomatis Update Yuk Gan

Siap lagi gan buat ngebaca the next tutorial on Tips Trik Blog.,.
neh saya akan sedikit berbagi Tips dan Trik gimana caranya buat Blog yang Update Otomatis Setiap Hari, jadi gg perlu repot-repot lagi bikin tulisan.. hhehe


Clo sobat mau belajar tentang SEO Blogger dan ingin blog sobat yang baru langsung muncul di Search Engine Google, sobat bisa baca artikelnya Seo Blogger disini. 


coba sobat liat updetan Blog saya ini, pasti sobat menemukan tulisan yang isinya Game-game flash kan?
yup, itu yang membuat blog saya tetap terupdate tiap harinya.
gimana cara bikin Blog yang Update tiap hari?


sobat masuk dulu kesini gan..

DailyGame

nah disitu sobat pilih aja yang BLOGGER.

terus sobat register/daftarin aja blog sobat disitu, nanti muncul form buat diisi alamat site/blog sobat terus sama alamat email sobat (kayak gambar dibawah ini)

clo udah sekarang sobat masuk ke akun blogger sobat.
Pilih Menu Setting/Pengaturan - terus pilih Permission (ituloh, tulisan yg ada di pojok kanan).
nah setelah itu pilih add author/ tambah penulis,
masukkin alamat email berikut: played.online.dailygame@gmail.com  
clo sudah, tunggu sampai di approve sama mereka, (sabar gan..paling lama 2 hari koq)
clo dah di approve maka di blog sobat akan muncul tulisan yang isinya game-game flash gitu.


bisa juga loh bikin akun google adsense dengan cara ini.. hhhee..
selamat mencoba sobat.. 
jangan lupa commentnya yah.. 

Read More

Tips Trik Blog: Tips Mendapatkan Penghasilan Sampingan Dari Adsense

Setelah beberapa hari vakum menulis di Tips Trik Blog ini akhirnya saya kembali mencoba menulis lagi dengan membahas mengenai Bagaimana Cara Mendapatkan Penghasilan Sampingan Dari Adsense.
Jika sobat belum mengenal apa itu Adsense, maka saya akan coba jelaskan sedikit pengertiannya,
Adsense adalah semacam situs penyedia iklan dimana setiap kita mendaftarkan dan memasang banner di blog sobat, maka setiap iklan yang diklik akan mendapatkan uang.
Klik disini untuk mendaftarkan Adsense di blog/site sobat.

Namun tentu saja jangan terlalu menggantungkan sumber penghasilan kita dari pendapatan Adsense itu sendiri, karena ada banyak faktor-faktor pendukung supaya Adsense kita banyak yang mengklik.


Intinya jika site/blog sobat mendapatkan penghasilan dari Adsense, maka Populerkan terlebih dahulu site/blog sobat itu sendiri, dengan begitu site sobat akan mendapatkan visitor tetap, dan kemungkinan besar untuk mendapatkan pengunjung yang akan mengklik di blog sobat akan semakin besar.

Kemudian jangan menggunakan cara-cara yang dilarang oleh situs penyedia Iklan Berbayar (Adsense) itu sendiri, contohnya adalah:
1. Jangan menampilkan iklan melayang (Pop Up) yang mewajibkan kita untuk mengklik apa yang ada di Pop Up tersebut, tentunya hal tersebut tentunya cukup menggangu kenyamanan visitor yang ingin membaca di blog kita.
2. Jangan memasang Banner iklan di blog kita secara berlebihan, karena tentunya jika ini dilakukan maka akun Adsense kita akan di Banned..
Mungkiin itu saja yang bisa saya share.
Jika sobat ingin memiliki ataupun mengetahui apa itu Adsense Indonesia, sobat bisa baca artikel saya yang lain tentang Adsense. Cara Daftar Adsense Camp
thanks dah mampir ke Tips Trik Blogger.. Salam Blogger.

Read More