CARA MEMBUAT BREADCRUMBS DIATAS JUDUL POSTINGAN BLOG

Breadcrumb, membuat alamat artikel post di Blogspot. Sebuah kata yang sulit diterjemahkan bagi seorang Newbie, breadcrumbs? apa itu breadcrumbs? Yang mungkin Anda pikirkan adalah bagaimana cara membuat alamat artikel post di blogspot diatas judul? Iyapz memang itulah bahasa yang mudah kita pahami. Nah untuk contohnya saya rasa Anda bisa melihat di atas judul artikel blog ini, adalah seperti urutan alamat artikel.

Berikut ini script dan cara memasang nya agar di blog Anda juga terdapat Breadcrumbs nya :

1. Silahkan login di blogger dengan akunmu

2. Clik Layout

3. Clik Edit HTML tab

4. Clik Download Full Template dan tolong Back Up dahulu template Anda yang pertama

5. Centang pada kotak kecil disamping Tulisan Expand Widget Template

6. Cari Code ]]></b:skin>

7. Copy dan paste code dibawah ini, tepat diatas code ]]></b:skin>

.breadcrumbs{ 

padding:5px 5px 5px 0; 

margin:0;font-size:95%; 

line-height:1.4em; 

border-bottom:4px double #cadaef; 

}

8. Cari Code berikut dalam template :

<div class='post hentry uncustomized-post-template'>

9. Copy dan paste code dibawah ini, tepat dibawah code <div class='post hentry uncustomized-post-template'> atau jika tidak menemukan coba cari <div class='post hentry

<b:if cond='data:blog.homepageUrl == data:blog.url'> 

<b:else/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<div class='breadcrumbs'> 

Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; 

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> 

<a expr:href='data:label.url' rel='tag'><data:label.name/></a> 

<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> 

</b:loop> 

</b:if> &#187; <data:post.title/> 

</div> 

</b:if> 

</b:if>

10. Clik Save Template 

11. Finished :)

NB : Selamat mencoba :))

READ MORE - CARA MEMBUAT BREADCRUMBS DIATAS JUDUL POSTINGAN BLOG

Cara Mengconvert Gambar Kedalam Bentuk ICON Windows (ICO)

Udah lama rasanya gak ngeblog :) kini saatnya saya akan memberikan sedikit pengetahuan yang saya dapat. Dan saya menemukan beberapa yang boleh juga untuk kalian yang suka dengan web desain apalagi untuk pemula. Saya menemukan beberapa artikel yang dapat membantu wawasan kalian.....

Cara Mengconvert Gambar Kedalam Bentuk ICON Windows (ICO) 



Berikut ini adalah sebuah aplikasi kecil yang dapat digunakan untuk merubah gambar dengan format BMP, JPG, GIF, PNG ke dalam format ICO. Dengan software kecil ini, anda dapat mengambil gambar apapun dan kemudian merubahnya ke dalam format ICO yang merupakan standart image icon di windows.

Program yang dimaksud adalah program ImageIcon (Link download ada di bagian akhir artikel). Meskipun kecil, aplikasi ini bekerja dengan sangat baik. Anda dapat mengambil gambar apa saja untuk dijadikan gambar icon dalam format dot ICO. Penggunaanya juga mudah, hanya tinggal menggeser gambar ke ImageIcon yang sedang berjalan, maka secara otomatis aplikasi akan membuat file ICO dengan nama yang sama dengan file asli dari gambar.

Jika tidak ingin menyimpannya dalam bentuk ICO, anda juga masih punya pilihan, ingin menyimpannya dalam format lain seperti JPG, BMP atau PNG. Gunakan menu Options, kemudian Save Mode untuk melakukan perubahan tersebut.

Dan yang terakhir, anda juga bisa menyesuaikan warna “latar” sendiri sesuai dengan keinginan anda. Klik Options dan pilih Customize Imagicon.

Fungsi lain dari aplikasi ini, jika anda seorang yang sering berkecimpung dengan dunia web, anda bisa menggunakan aplikasi ini untuk membuat ICON dari web yang anda kelola yang akan tampil pada URL address dari web browser yang anda pakai.


Link download
- Image Icon Software

Semoga bermanfaat :)

READ MORE - Cara Mengconvert Gambar Kedalam Bentuk ICON Windows (ICO)

Design Grafis Tidak Sama Dengan Web Design

Kalau kita seorang pemula mungkin kita mengira antar Web Design dan Design Grafis itu sama. Awalnya saya kira itu pun sama. Tapi setelah saya pahami ada perbedaan diantara keduanya. Banyak yang beranggapan, karena sama-sama memiliki kata Design, jadi diartikan sama pula.
Coba kalian pahami Perbedaan Antara Web Design dengan Design Grafis deh :

Web Design : 


Seorang perancang web melakukan tugas yang sangat spesifik. Tugas ini untuk membangun bahkan untuk mempertahankan situs web ini. Deorang perancang web, harus fasih dalam bahasa pemrograman yang berbeda yang meliputi CSS, HTML, PHP dan lain sebagainya. Perlu diingat bahwa desain web ini seringkali dilakukan dengan antarmuka grafis yang kompleks, dan ini akan membuat proses lebih mudah. Beberapa pakar berkata bahwa sebaiknya kalian melihat buku-buku panduan dasar HTML dan bahkan menyelidiki script CSS.

Cascading Style Sheet (CSS) tentu saja merupakan bahasa yang paling umum dan berfungsi untuk membentuk beberapa layout agar lebih mengesankan.Perlu diingat bahwa tidak seperti script CSS, bahasa HTML merupakan bahasa pemrograman dan memerlukan cukup banyak pengalaman. Metode Web desain lainnya akan melibatkan pemrograman database PHP dan ASP yang bahkan bisa lebih sulit baagi beberapa orang. Para pakar berkata orang lain menemukan bahwa aspek dari industri desain grafis bisa lebih menarik.

Design Grafis :


Ada beberapa yang akan mengatakan aspek industri desain grafis membutuhkan ketrampilan lebih sedikit, tetapi dalam kenyataannya mereka tetap sama. Grafis yang digunakan dalam setiap aspek dari sebuah situs web dari mulai gambar latar pada tombol kontrol di kedua sidebar atau dibagian atas situs, Itulah yang menjadikan penting untuk menciptakan seni-realitis grafis, atau setidaknya grafis akan lebih menarik pengguna.

Yang perlu di perhatikan dalam penggunaan Desain Grafis konteks dari website, yang berarti kalian harus meneliti secara mendetail sebelum kalian memulai untuk bekerja pada setiap proyek desain grafis. Perhatikan bahwa ada banyak perangkat lunak desain grafis yang berbeda di luar sana mulai dari Adobe Photoshop , Adobe Illustrator , Gimp , bahkan Corel Draw dan Corel Photo-Pain (Jika ingin mendownload langsung klik pada software yang di inginkan). Yang kalian gunakan tinggal menjadi selera dan kemampuan yang kalian miliki.

Seperti yang kalian lihat, banyak perbedaan antar keduanya. Tetapi selalu di perlukan untuk menggunakan keduanya bersama-sama. Jika kalian gagal melakukannya, website kalian akan lebih hambar dan tidak akan menarik bagi para pengguna lainnya, penting untuk mempelajari kedua aspek tersebut. Industri ini merupakan hal sulit untuk saat ini, tetapi jauh lebih efisien .

READ MORE - Design Grafis Tidak Sama Dengan Web Design

Cara Memasang Animasi Burung Twitter di Blog (Warna-Warni)

Awalnya aku membuat Blog baru dan beripikiran ingin menambah widget yang bisa langsung diterusin ke twitter. Akhirnya setelah berlama-lama menghadap laptop dah mbah gugel. Aku mendapatkan artikel ini nih. Kalau kalian ingin masang di blog kalian, caranya gampang :

1. Buka Design > Page elements
2. Add a Gadget > HTML/Javascript
3. Copy Script di bawah ini :


<script type="text/javascript" src=" http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://i1013.photobucket.com/albums/af252/sleman234/bluetwit.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/twitter-mu";var tweetThisText = "Twitter - twitter-mu http://namablog-mu.blogspot.com/";tripleflapInit();</script>



Tapi, sebelum disave. ada beberapa yang harus kamu ganti, yaitu:

namablog-mu
Ganti dengan alamat blog-mu

twitter-mu 
Ganti dengan nama/akun twitter-mu

http://i1013.photobucket.com/albums/af252/sleman234/bluetwit.png
Ganti alamat gambar tersebut dengan alamat gambar dengan warna yang kamu suka:

Merah:
http://i1013.photobucket.com/albums/af252/sleman234/red.png

Biru Tua:
http://i1013.photobucket.com/albums/af252/sleman234/Blue.png

Ungu:
http://i1013.photobucket.com/albums/af252/sleman234/purple.png

Cokelat:
http://i1013.photobucket.com/albums/af252/sleman234/brown.png

Hitam:
http://i1013.photobucket.com/albums/af252/sleman234/black.png

Hijau:
http://i1013.photobucket.com/albums/af252/sleman234/Green.png

Kuning:
http://i1013.photobucket.com/albums/af252/sleman234/yellow.png

Putih:
http://i1013.photobucket.com/albums/af252/sleman234/white.png

Biru Muda (Standard):
http://i1013.photobucket.com/albums/af252/sleman234/bluetwit.png

7. Nah setelah kamu ganti gambar animasi burung twitternya
8. Klik Simpan/Save yang ada di kanan atas
9. Silahkan buka di browser anda.
10. Selamat mencoba


Sumber

READ MORE - Cara Memasang Animasi Burung Twitter di Blog (Warna-Warni)

Membuat Buku Tamu "TERSEMBUNYI"

Awal posting langsung akan aku beri tau cara membuat Buku Tamu "TERSEMBUNYI" seperti yang aku pakai. Awalnya, buka-buka blog seseorang dan aku ingin menambah cara seperti itu. Akhirnya searching searching, nemu deh.

Caranya :

1. Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements"
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript"
3. Copy-paste kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya
5. Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu
6. Selamat mencoba!

Gak akan lupa aku tulis sumbernya yah :)

Sumber

READ MORE - Membuat Buku Tamu "TERSEMBUNYI"