Tempatnya Belajar dan Berbagi |
- Membuat Syntax Highlighter di Blog
- Membuat Rounded Corner dengan CSS di Blog
- Memasang Baloon Tooltip Dengan Kode CSS di Blog
- Membuat Tombol Share Post Melayang di Blog
| Membuat Syntax Highlighter di Blog Posted: 23 Aug 2013 08:17 AM PDT Syntax Highlighter adalah suatu fitur biasanya dari text editor khususnya editor source code bahasa pemrograman tertentu untuk menampilkan text tersebut dalam berbagai warna agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut. Bagi Anda yang sering posting source code pada Web/Blog tentu fitur Syntax Highlighter akan sangat membantu agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya lebih menarik bagi pengunjung. Nah, sekarang masalahnya bagaimana cara kita menggunakan Syntax Highlighter ini pada blog khususnya di Blogger.com? Jika di blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. kode untuk Syntax Highlighter ini sendiri dibuat oleh Alex Gorbatchev (2004-2008). Adapun fitur yang ada dalam Syntax Highlighter ini yaitu:
1. Login dengan akun blogger anda kemudian pilih Rancangan 2. Klik EDIT HTML (centang expand template widget) 3. Simpan kode berikut Setelah kode <head> atau sebelum kode </head> <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>4. Selanjutnya scroll mouse kalian kebawah dan cari kode ]]></b:skin> 5. Simpan CSS berikut diatas kode ]]></b:skin> (Klik Buka untuk melihat kode CSSnya) Anda juga bisa lihat kode CSS ini dengan membuka link ini : http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css 6. Sekarang lanjut ke bagian paling bawah dan cari kode </body> 7. Simpan kode berikut diatas kode </body> tadi <!-- Add-in Script for syntax highlighting --> <script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script> 8. Simpan template anda. Pemasangan kode HTML untuk membuat Syntax Highlighter pada template sudah selesai tinggal kita terapkan pada postingan yang memakai kode CSS atau javascript. Untuk pemasangan script Kode JS gunakan kode berikut <pre name="code" class="JScript">Untuk pemasangan kode CSS gunakan kode berikut : <pre name="code" class="Css"> Itu tadi tutorial hari ini, mungkin agak terlalu banyak kode-kode yang mesti kita pasang. Tapi saya yakin temen-temen semua bisa membuatnya. Jika ada yang masih bingung kasih komentar, siapa tahu saya bisa bantu. |
| Membuat Rounded Corner dengan CSS di Blog Posted: 23 Aug 2013 08:17 AM PDT Satu lagi cara untuk modifikasi blog yang akan saya bahas disini adalah dengan menggunakan Rounded Corners. Rounded corners atau sudut melengkung adalah lengkungan atau belokan pada sudut dari suatu bentuk bangunan persegi. Sudut melengkung ini biasa digunakan dalam pembuatan design template agar template menjadi tampak lebih menarik dan tidak terlihat terlalu kaku dan monoton. Pada umumnya code css yang digunakan untuk membuat rounded corners adalah :
1. Rounded corners pada seluruh sudut <div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius: 10px; width: auto;">Rounded corners seluruh sudut</div> Rounded corners seluruh sudut 2. Rounded corners hanya pada sudut atas <div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; width: auto;">Rounded corners hanya pada sudut atas</div> Rounded corners hanya pada sudut atas 3. Rounded corner hanya pada sudut bawah <div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; width: auto;">Rounded corners hanya pada sudut bawah</div> Rounded corners hanya pada sudut bawah Penerapan Rounded Corner di Sidebar Jika temen-temen ingin membuat rounded corners itu pada sidebar tinggal menambahkan kode yang berwarna merah pada kode #sidebar .widget { contohnya seperti ini : #sidebar .widget { Kode yang berwarna kuning adalah kode sidebar pada template anda, karena setiap template mempunyai kode sidebar yang berbeda-beda di bawah kode #sidebar .widget { saya kasih titik-titik. Anda bisa ganti 10px sesuai dengan selera masing-masing. Sama halnya jika anda ingin membuat rounded corner di main-wrapper, content-wrapper, outer-wraper anda tinggal menambahkan kode yang berwarna merah seperti contoh diatas. Penerapan rounded corners diatas hanya beberapa contoh dari begitu banyak yang dapat kita lakukan dengan menggunakan border radius. Silahkan anda kreasikan sendiri dan semoga berhasil. |
| Memasang Baloon Tooltip Dengan Kode CSS di Blog Posted: 23 Aug 2013 08:17 AM PDT |
| Membuat Tombol Share Post Melayang di Blog Posted: 23 Aug 2013 08:16 AM PDT Tahukah temen-temen apa itu tombol share post? Tombol share post atau yang lebih dikenal sebagai tombol-tombol social bookmark sedikit banyak memang membantu meningkatkan pengunjung dari social bookmark yang bersangkutan. Contoh saja twitter, dengan mengintegrasikan feedburner dan twitter ketika ada artikel baru dari sebuah blog, maka secara otomatis akan langsung terupdate di twitter. Dengan begitu para follower yang penasaran dengan artikel tersebut akan langsung melihat artikelnya. Nah, untuk kali ini saya akan memberikan tips untuk memasang tombol share post melayang, untuk anda yang penasaran bisa dilihat contohnya disini.  Membuat tombol share post melayang ini sangat mudah karena kita tidak perlu pusing mengutak-atik HTML template kita. Kita tinggal memasukkan ke dalam widget sidebar. Untuk lebih jelasnya berikut ini adalah langkah-langkah pemasangannya : 1. Login dengan akun blogger anda. 2. Pilih Rancangan >> Elemen Halaman 3. Klik tambah gadget 4. Pilih HTML/Java Script 5. Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya <style type="text/css"> *{margin:0;padding:0;} * html #z33sHare{ position: absolute; } #z33sHare{ right:1%;width: 70px;background:transparant;border:0px solid #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px; position:fixed; top: 20%; } #z33sHare div{ padding:6px 6px 6px 5px; } #stw{ margin-left:-2px; } #sfs{ margin-left:-5px; } </style> <div id="z33sHare"> <div id="ssl-box"> <div id="stw"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div> <div><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script> </div> <div> <script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script> <a class="DiggThisButton DiggMedium"></a> </div> </div> <div><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><div style="clear:both;"></div></div> 5. Yang terakhir tentu saja anda harus simpan. Jika sudah selesai anda dapat lihat di sebelah kiri blog anda sekarang ada tombol share post yang melayang. Gampang bukan? Demikian tadi sedikit tutorial dari saya, selamat mencoba dan semoga bermanfaat. |
| You are subscribed to email updates from Tempatnya Belajar dan Berbagi To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 komentar:
Posting Komentar