cara ngatur blog: Blog Triks

Tampilkan postingan dengan label Blog Triks. Tampilkan semua postingan

Cara Menampilkan Postingan Berdasarkan Label

widget-feed-label Untuk menampilkan postingan yang hanya pada label tertentu, kita bisa memanfaatkan jasa LABEL pada blogspot. Sebagai contoh, saya memiliki blog yang dikelompokkan kedalam beberapa label, salah satunya berlabel Widget. Dan saya ingin menampilkan widget artikel yang berisikan artikel dalam label Widget saja. Jadi artikel dengan label lain tidak diikutsertakan.

Nah bagaimana cara membuatnya ? Berikut triks singkat untuk membuatnya :

Login ke Blogger anda. Pilih menu Design > Page Elements.
Kemudian klik Add a gadget.
Lalu cari widget yang bertuliskan Feed. Klik pada tulisannya atau pada gambar bersimbol (+).
Lalu akan muncul form isian seperti dibawah ini :

- Ketikkan alamat ini pada form :
http://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget
Ubahlah teks alamat-blog-anda menjadi alamat blog anda.
- Jika menggunakan nama labelnya lebih dari satu kata seperti “Widget Saya”, maka harus menambahkan %20 diantara kedua kata label tersebut. Hasilnya menjadi :
http://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget%20Saya
- Untuk menampilkan urutan postingan dari yang terbaru ke yang lama, ubah menjadi
http://alamat-blog-anda.blogspot.com/feeds/posts/default/-/Widget?orderby=updated
Klik tombol SAVE.

Cara Mengganti Kursor Mouse pada Blog

cursor-mouse Apakah Anda merasa bosan dengan kursor default pada blog anda? Jika iya, anda dapat merubahnya dengan mudah. Merubah kursor mouse pada blog berbeda dengan merubah kursor pada sistem operasi. Keunggulannya kursor pada blog bisa divariasikan, baik itu menggunakan format .cur, .ani maupun .gif.

Selain itu, penggunaan cursor juga bisa diterapkan hanya pada bagian tertentu saja, misalnya hanya pada Hyperlink (URL), Table, TD, DIV, SPAN, dll.

Bagaimana Cara Mengganti Kursor Mouse pada Blog ?

Cara 1 :

Klik Menu Design > Page Elements > Add Gadget

Pilih gadget "HTML/Java Script"

Copy kode dibawah ini kedalamnya :

<style type="text/css">
body {cursor:url("http://cursors3.totallyfreecursors.com/thumbnails/4.gif"),default} 
</style>

Tekan tombol Save.

Anda dapat mengganti alamat kursor yang lain pada bagian URL.

Cara 2 :

Klik Menu Design > Edit HTML

Carilah kode ]]></b:skin>, lalu paste-kan kode dibawah ini sebelum kode tersebut :

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/4.gif), default;}

Simpan Template anda.

Sebagai referensi kursor anda bisa mengunjungi situs :

Totally Free Cursors

Cursors @ Fun Utilities

Free Cursors 4U

123 Cursors.com

Beberapa contoh gambar kursor yang bisa anda gunakan :

Cara Mematikan Fungsi Klik Kanan Mouse dengan JQuery

disable-right-click Klik kanan pada web browser memiliki fungsi yang cukup banyak. Diantaranya adalah mencopy teks, memblok sebagian teks, menyimpan gambar, mengambil url link, dll. Sebagian blogger sengaja mematikan fungsi ini untuk menghindari agar artikel dan gambarnya tidak bisa di copas alias copy + paste. Nah sobat blogger yang belum mengetahui triks ini tentu saja juga bisa menerapkannya pada blog sobat.

Mau tahu caranya ?

1. Login ke blogger sobat, lalu klik > Design > Edit HTML

2. Menggunakan Ctrl + F, carilah tag </head>.

3. Copy-kan kode dibawah ini sebelum tag </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

//]]>
</script>

4. Langkah terakhir klik pada tombol Save Template.

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. Login ke blogger anda.

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

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'/>

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'>

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

Simpan template anda, dan lihat hasilnya

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.

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

Tahap 1 : Persiapan

Dilarang menyisipkan gambar pada paragraf pertama setiap postingan.

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

Setiap postingan telah diberi Label.

Tahap 2 : Cara Membuatnya

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.

Lalu carilah kode dibawah ini, agar cepat gunakan CTRL + F :
```
<div class='post-header-line-1'/> 
```

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>

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

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

Langkah terakhir, simpanlah template anda.

Cara Mudah Menambahkan Scrollbar pada 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 Menambahkan Syntax Highlighter pada Blogspot

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 Merubah Link Blog Menjadi Warna 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.

Cara Menghilangkan Navigation Bar Blogspot

Navigation Bar pada blogspot sebenarnya berfungsi untuk memudahkan kita berkomunikasi dengan blog orang lain. Tetapi kadang navbar ini mengganggu tampilan dari design blog. Ada beberapa teknik untuk menghilangkan Navigation Bar ini, salah satunya adalah dengan menyembunyikannya.

Untuk melakukannya kita hanya melakukan beberapa langkah, yaitu :

1. Sign In ke Blogspot anda.

2. Masuk ke Mode Perancangan

3. Masuk ke Mode Edit HTML, lalu carilah kode :

]]></b:skin>

4. Copy Paste kode CSS dibawah ini sebelum tag diatas :

#navbar-iframe {
display: none !important;
}

5. Simpan perubahan template anda.