Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Cara Menyisipkan Coding Di Blogspot

Capture

Asalamualaikum Wr Wb.

Setelah sekian lama browsing akhirnya dapet apa yang gue pengen, yaitu penyisipan code di blogspot. Untuk menyisipkan Code di blogspot kita harus menyisipkan script yang di buat oleh alexgorbatchev yang bernama SyntaxHighlighter. Menurut pengelaman gue browsing berjam – berjam dan analisa gue dari berbagai tutorial ternyata cara ini yang paling mudah dan Thumbs up

 

Untuk menambahkan SyntaxHighlighter ini, seperti biasa kita harus masuk ke bagian dashboar –> Template –> Edit Html

Setelah itu cari code </head> dengan menekan tombol ctrl + f dan sisipkan script dibawah ini tepat di atas code </head>

<!-- Syntax Highlighter Additions START -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://googledrive.com/host/0B99V6rFPWhMUd3BjSVo5a3ZxanM" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript" />
 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript" />
 
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->


Dan untuk menyiskan code pada posting, menggunakan tag berikut.



<pre class=”html”> kode kamu disini </pre>


kemudian publish post, dan hasilnya kira – kira seperti ini



Capture

Untuk bahasa tertentu di bedakan berdasarkan class pada <pre class=”nama_bahasa”> yang bisa dilihat disini http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


Selamat mencoba dan semoga berhasil Winking smile


Wasalam.

Read More »

Google Dinosaurus

Sebagai seorang blogger yang baik, kali ini aku akan mebagikan sebuah knowledge yang sangat penting di ketahui oleh blogger lain.

Yaitu tentang algoritma google search yang bernama google dinosaurus. Algoritma itu sendiri adalah komponen penting google untuk mencari sebuah content internet yang di inginkan pengguna internet.

Sebelumnya google telah meluncurkan Algoritma google panda dan penguin dan saat ini telah lahir kembali google dinosaurus yang di bilang sangat kejam Open-mouthed smile kejam bagaimana maksudnya ?

Google dinosaurus di rancang untuk membuat pengguna internet lebih tepat sasaran saat mencari sesuatu di internet. Jadi tidak melenceng kemana – mana dan tidak nyambung dengan apa yang kita cari dan kita inginkan.

Kabarnya, google dinosaurus ini memfilter tulisan tulisan yang tidak berkualitas atau tulisan penipuan ( SPAM), akbibatnya web atau blog yang memuat konten tidak berkualitas akan di abaikan oleh mesin pencari google, bahkan ada juga yang mengatakan ketika blogger memuat tulisan tidak berguna atau hanya copas, akan langsung di hapus oleh blogger Open-mouthed smile jadi benar – benar kejam Open-mouthed smile

Dan blog yang terlalu banyak memuat iklan juga akan di abaikan, apalagi bukan iklan dari google Open-mouthed smile mungkin ini adalah strategi google untuk meraup untung lebih banyak lagi Open-mouthed smile

Jadi mulai sekarang temen – temen blogger yang udah ngerti apa itu google dinosaurus jangan sekali – kali copas ya Open-mouthed smile berkarya sendiri lebih terhormat meskipun hasilnya kurang bagus Open-mouthed smile

Selamat melanjutkan selancar internet Winking smile

Read More »

Menambah Emoticon Di Blogspot

Alhamdulillah, doa dan kerja keras agar dapat teman seorang penulis akhirnya terkabulkan juga Open-mouthed smile, ini adalah tutorial sebagai hadiah manis untuk teman baru ini Open-mouthed smile ha !

Blog adalah ruang tamu bagi para pengunjung, dan ruang tamu haruslah memberikan suatu yang istimewa dan menyenangkan agar tamu tidak kapok untuk datang kembali.

Jadi, agar pengunjung blog agak bergairah dan dengan senang hati selalu memberikan komentar pada blog kita, berikanlah fasilitas yang baik, salah satunya adalah menambahkan emoticon.

Tidak usah banyak basa – basi, begini caranya.

  • Masuk ke blogger –> Template –> Edit HTML
  • Cari kode ]]></b:skin> dengan cara menekan tombol CTRL + F
  • Copy kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>
   1: .emoWrap {color:greenyellow;font:bold 12px Tahoma,Arial,Sans-Serif;text-align:center;}
   2: img.emo, input.emoKey {display:inline-block;display:inline;vertical-align:middle;}
   3: input.emoKey {border:1px solid #ccc;background-color:white;font:bold 11px Arial,Sans-Serif;padding:1px 2px;margin:0px 0px 0px 2px;color:black;}

image

  • Kemudian cari kode </body> dan copy kode di bawah ini tepat di atas kode </body>


   1: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script src='http://codecbd.googlecode.com/files/emotion-coment.js' type='text/javascript'/>
   1:  
   2: <script type='text/javascript'>
   3: //<![CDATA[
   4: var emoRange = "#comments p, div.emoWrap",
   5: putEmoAbove = "iframe#comment-editor",
   6: emoMessage = "Berikan tidaknya satu spasi dibelakang emoticon.";
   7: //]]>
</script>



  • Simpan Template dan rasakan perbedaannya !

Terima kasih telah berkunjung Winking smile di tunggu kedatangannya kembali Open-mouthed smile

Read More »

Cara Membuat Artikel Terkait Di Blogger

image

Pada tampilan blogger yang baru, banyak perubahan yang dirasa tidak begitu nyaman untuk blogger yang sudah terbiasa dengan tampilan lama. hal ini membuat sebagian blogger bingung untuk edit html pada template blog Steaming mad

Nah pada postingan kali ini saya akan memberikan tutorial tentang Menambahkan Artikel Terkait pada tampilan blogger yang baru. tidak beda jauh sih Open-mouthed smile hanya saja prosesnya agak beda Punch

oke langsung aja !

  1. 1. Login Blogger –> Template
  2. 2. Edit Html
  3. 3. Cari kode </head> dan letakkan kode di bawah ini tepat di atas kode </head>

image

Tekan Ctrl + F


<style> #related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMxneLxWEQLXHL7IHtv7r6c8JPQNnbU1OBuESQubrgckPWG2gU5zGrmlIla6XEGlffVbxYWKyieFnO8oHFTP8yv3svlQ-1YP3pI3yRrpLLKks6BZ2kpFjxr0RjdOOmnQsoCWGQEKBylYV4/s1600/rss.png ") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://oktriblogger.googlecode.com/files/related-post-tutorialbelajarblog.js' type='text/javascript'/>


  1. 4. Kemudian cari kode <data:post.body/> dan letakkan kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>


Catatan : pilih kode <data:post.body/> pada baris ke tiga !

Selamat mencoba brad Open-mouthed smile Winking smile

Read More »

Membuat Highlight Text Pada Posting


Kali ini saya akan membahas tentang highlight text, jadi highlight text itu adalah text  yang dibedakan dari text yang lain, biar apa yaa :/ oh orang ngelihatnya lebih gimanaaaa gitu ....
highlight text ini berguna untuk membuat code program dan lain - lain seperti di bawah ini.

untuk membuat highlight text di blogspot, caranya gampang banget

  1. Login
  2. Template --> Edit Template
  3. Cari kode </head>
  4. Copy kode di bawah ini tepat di atas code </head>

.alert { background: #black;
color : white;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;
border-bottom: 1px dotted #223344;
border-left: 1px dotted #223344;
border-right: 1px dotted #223344; }

dan ketika memposting, gunakan kode
<p class='alert'> text disini </p>
:D
Segitu doang yak tutornya :D
Read More »