Sabtu, 04 Februari 2012

Membuat Tulisan Mengikuti Cursor


Cara Membuat Tulisan Mengikuti Cursor
Gb. Demo Tulisan Berputar


Udah pernah Tukang pilih Lihat tulisan Yang berputar-putar mengelilingi kursor Dan selalu mengikuti kursor di blog blogger? Tadi saya Baru Saja berkunjung Ke salat Satu blog Teman Yang menulis PESAN di Buku Tamu, di Sana saya melihat sebuah tulisan Yang berputar-putar mengelilingi kursor Dan selalu mengikuti kemanapun arah kursor tersebut.Penghasilan kena pajak ITU melihat saya jadi ingin untuk menuliskan CARANYA, siapa industri tahu ADA Yang ingin menghias blog nya Mencari Google Artikel tulisan berputar mengelilingi kursor Blognya. Panduan Cara Membuat Tulisan Berpuatar Mengelilingi Kursor






  1. Masuk Ke dashboard blogger
  2. KLIK Desain / Rancangan
  3. Cara Membuat Tulisan Mengikuti Cursor
  4. Penghasilan kena pajak ITU KLIK Edit HTML
  5. Tulisan Mengikuti Cursor
Kemudian CARI Kode
</ Body>
Dan letakkan skrip berikut sebelum Kode </ body> Tadi
Membuat Tulisan Mengikuti Cursor
<style type='text/css'>
/ * Lingkaran Styles Teks * /
# OuterCircleText {
/ * Opsional - JANGAN SET FONT-SIZE HERE, SET IT IN THE SCRIPT * /
font-style: italic;
font-weight: bold;
font-family: "sans ms komik ', verdana, arial;
color: # 999;

/ Akhir * opsional * /
/ * Mulai Diperlukan - Jangan Edit * /
position: absolute; top: 0; kiri: 0; z-index: 3000; kursor: default;}
# OuterCircleText div {position: relative;}
# OuterCircleText div div {position: absolute; top: 0; kiri: 0; text-align: center;}
/ * End Diperlukan * /
/ * Gaya Lingkaran Akhir Teks * /
</ Style>
<script type='text/javascript'>
/ / <[CDATA [
/ * Mengelilingi teks trail-Tim Tilton
Website: http://www.tempermedia.com/
Kunjungi: http://www.dynamicdrive.com/ untuk Original Source dan ton script
Modifikasi Di sini untuk lebih banyak fleksibilitas dan dukungan browser modern
Modifikasi seperti pertama kali terlihat di http://www.dynamicdrive.com/forums/
username: jscheuer1 - Pemberitahuan ini harus tetap untuk penggunaan hukum
* /
; (Function () {
/ / Anda pesan di sini (STRING QUOTED)
var msg = " AR Blog (Blogger Tutorial) ";
/ * SISA DARI NILAI Editable BAWAH ADALAH SEMUA NOMOR kuotasi * /
/ / Set gaya font itu ukuran untuk menghitung dimensi
/ / Set untuk jumlah ukuran piksel yang diinginkan font (angka desimal dan negatif tidak diperbolehkan)
var size = 24;
/ / Set ke 1 untuk kedua lingkaran polos, menetapkan satu dari mereka untuk 2 untuk oval
/ Nomor / Lain & desimal dapat memiliki efek yang menarik, terus rendah (0 sampai 3)
var circleY = 0,75; var circleX = 2;
/ / Semakin besar pembagi ini, semakin kecil ruang antara huruf
/ / (Desimal diperbolehkan, bukan angka negatif)
var letter_spacing = 5;
/ / Semakin besar pengganda ini, semakin besar lingkaran / oval
/ / (Desimal diperbolehkan, bukan angka negatif, pembulatan beberapa diterapkan)
var diameter = 10;
/ / Rotasi kecepatan, mengaturnya negatif jika Anda ingin berputar searah jarum jam (desimal diperbolehkan)
var rotasi = 0,4;
/ / Ini bukan kecepatan rotasi, kecepatan reaksinya, tetap rendah!
/ / Set ini ke 1 atau desimal kurang dari satu (desimal diperbolehkan, bukan angka negatif)
var kecepatan = 0,3;
/ / / / / / / / / / / / / / / / / / / / / / Stop Edit / / / / / / / / / / / / / / / / / / / / / /
jika | kembali (&& window.addEventListener window.attachEvent | document.createElement!);
msg = msg.split ('');
var n = msg.length - 1, a = Math.round (ukuran diameter * * 0,208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement ('div'), oi = document.createElement ('div'),
b = document.compatMode && document.compatMode = "BackCompat"? document.documentElement: document.body,
mouse = function (e) {
e = e | | window.event;
ymouse = illegalChars.test (e.pageY)? e.pageY: e.clientY; / / y-posisi
xmouse = illegalChars.test (e.pageX)? e.pageX: e.clientX; / / x-posisi
},
makecircle fungsi = () {/ / rotasi / posisi
if (init.nopy) {
o.style.top = (b | | document.body) scrollTop + 'px'.;
o.style.left = (b | | document.body) scrollLeft + 'px'.;
};
currStep - = rotasi;
for (var d, i = n; i> -1; - i) {/ / membuat lingkaran
. d = document.getElementById ('iemsg' + i) gaya;
d.top = Math.round (y [i] + a * Math.sin ((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round (x [i] + a * Math.cos ((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function () {/ / membuat perlawanan
y [0] = Y [0] + = (ymouse - Y [0]) * kecepatan;
x [0] = X [0] + = (xmouse - 20 - X [0]) * kecepatan;
for (var i = n; i> 0; - i) {
y [i] = Y [i] + = (y [i-1] - Y [i]) * kecepatan;
x [i] = X [i] + = (x [i-1] - X [i]) * kecepatan;
};
makecircle ();
},
init = function () {/ / menambahkan divs pesan, & menetapkan nilai awal untuk array posisi
if (illegalChars.test (window.pageYOffset)) {
ymouse + = window.pageYOffset;
xmouse + = window.pageXOffset;
} Else init.nopy = true;
for (var d, i = n; i> -1; - i) {
d = document.createElement ('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild (document.createTextNode (msg [i]));
oi.appendChild (d); y [i] = x [i] = Y [i] = X [i] = 0;
};
o.appendChild (oi); document.body.appendChild (o);
setInterval (drag, 25);
},
ascroll = function () {
ymouse + = window.pageYOffset;
xmouse + = window.pageXOffset;
window.removeEventListener ('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = ukuran + 'px';
if (window.addEventListener) {
window.addEventListener ('beban', init, false);
document.addEventListener ('Gunaka mouse, mouse, false);
document.addEventListener ('mousemove', mouse, false);
if (/ Apple / .test (navigator.vendor))
window.addEventListener ('scroll', ascroll, false);
}
else if (window.attachEvent) {
window.attachEvent ('onload', init);
document.attachEvent ('onmousemove', mouse);
};
}) ();
/ /]]>
</ Script>
PADA Bagian tidak
/ / Anda pesan di sini (STRING QUOTED)
var msg = " AR Blog (Blogger Tutorial) ";

silakah Ganti tulisan AR Blog (Blogger Tutorial) Mencari Google Artikel tulisan Yang ANDA inginkan, KARENA tulisan itulah Yang nantinya Akan berputar-putar mengeliligi kursor

Membuat Text Animasi Tulisan Berwarna

Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna di Blogger.

Pada artikel kali ini saya akan menuliskan panduan cara bikin teks flash (teks animasi flash / tulisan berwarna bergaya flash) yang nantinya bisa teman-teman pasang pada postingan blog (untuk mempercantik tulisan) atau di widget/sidebar (sebagai widget selamat datang yang keren).

Tutorial blog ini berbeda dengan Tutorial Cara Bikin Tulisan Kelap Kelip (Blink) yang sudah saya tuliskan dulu, karena tutorial cara membuat text animasi flash atau animasi tulisan berwarna ini menggunakan scriptsedangkan untuk membuat tulisan kelap kelip (Blink) tidak memerlukan script, hanya kode html saja.

Sebelum saya menuliskan panduan membuat text animasi flash atau animasi tulisan berwarna, saya akan memperlihatkan demonya dulu, agar teman-teman bisa melihat langsung bagaimana hasilnya nanti.

Demo Text Flash Animasi Berwarna / Tulisan Flash Animasi Berwarna
Selamat Datang Di Blog Ahmad Rifai Net
Nah itulah seperti itulah nanti penampakannya di blog teman. Next ...

Panduan Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna

Untuk Di Pasang Pada Postingan Bagi teman-teman yang ingin memasukkan text flash animasi ini pada postingan silakan ikuti langkah berikut:
  1. Buat posting baru / Edit postingan yang sudah ada.
  2. Masukkan kode script Text / Tulisan Flash Animasi Berwarna di sana (kode ada di bawah). Sebelum memasukkan kode script pastikan teman memasukkannya di bagian Edit HTML bukan di Compose(lihat di sebelah kanan atas forum isian posting)
  3. Terbitkan Entri (boleh juga dipratinjau dulu)
Untuk Di Pasang Pada Widget Bagi teman-teman yang ingin memasukkan text flash animasi ini pada widget/sidebar silakan ikuti langkah berikut:
  1. Pergi ke Rancangan / Design
  2. Klik Tambah Gadget / Add Gadget
  3. Masukkan kode script Text / Tulisan Flash Animasi Berwarna di sana (kode ada di bawah)
  4. Simpan
Nah itulah langkah yang harus di lakukan.

Kode Script Text / Tulisan Flash Animasi Berwarna

<div style="-moz-box-shadow: inset 0 1px 5px 0 #fff; background: #990099; border: 1px solid #ECEDE8; box-shadow: inset 0 1px 5px 0 #555; font-family: Cataneo BT; font-size: 21px; font-weight: bolder; padding: 5px 20px; text-align: center;">
<script type="text/javascript">
var message="Selamat Datang Di Blog Ahmad Rifai Net"
var bgsGR1color="#FFFFFF" /* Warna utama teks */
var bgsGR2color="#FFFF00" /* Warna teks flash pertama */
var bgsGR3color="#00FF66" /* Warna teks flash ke dua */
var flashspeed=100 // kec. ganti warna (1/1000 dt)
var flashingletters=15 // jumlah teks pertama (tips / hiting jumlah text, kemudian bagi 2)
var flashingletters2=18 // jumlah berwarna teks ke dua (tips / hiting jumlah text, kemudian bagi 2)
var flashpause=1 // waktu jeda pergantian warna (1/1000 dtk)
var n=0
if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')}else
document.write(message)
function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++)
crossref(m).style.color=bgsGR1color}
crossref(n).style.color=bgsGR2color
if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color 
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color
if (n<message.length-1)
n++
else{n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return}}
function beginneon(){if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)}
beginneon()
</script>
</div> 
Catatan :
Ganti tulisan Selamat Datang Di Blog Ahmad Rifai Net yang ada di line 3 dengan tulisan yang teman mau. var flashingletters=19 - var flashingletters2=19 : pada link 8 & 9 . Ganti angka 19 dengan angka yang teman mau (Tips* hitung seluruh tulisan dan spasi yang teman masukkan pada line 3 (kode 1) atau line 5 (kode 2), kemudian bagi 2, setelah itu ganti angka 19 dengan hasil pembagian tadi.
 Selamat mencoba membuat text animasi tulisan berwarna & Semoga berhasil

Membuat Breadcrumb Di Blogger

Bagaimana Cara Bikin Navigasi Breadcrumb Di Blogger?

Sebelum saya teruskan menulis Cara Membuat Breadcrumb Di Blogger mungkin ada yang masih belum tahu apa itu Breadcrumb, jika masih belum tahu apa yang di maksud dengan breadcrumb silahkan ihat contohnya ada di blog ini, yang ada di atas judul artikel itu lo.
Okey mari kita mulai...

Cara Mudah Memasang Navigasi Breadcrumb Di Blogspot/Blogger

Langkah Pertama yang harus anda lakukan adalah login ke blogspot.com, kemudian Pilih menu Tata Letak(Layout) =>> Edit HTML, setelah anda berada di halaman Edit Html silahkan Centang bagian yang ada tulisanExpand Widget Templates.

Sekarang Cari Kode Ini
<b:includable id='post' var='post'>
Kemudian letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<em>Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <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> / <a expr:href='data:post.link'><data:post.title/></a></em>
Setelah itu silahkan simpan pengaturan template anda.

Catatan* Breadcrumb tersebut hanya akan terlihat di halaman artikel (post page) saja.

Itu adalah cara mudah Memasang Navigasi Breadcrumb Di Blogspot/Blogger, selain cara di atasa anda bisa juga menggunakan cara lain yaitu dengan menambahkan sedikit kode CSS di template blogger anda.

Cara Pasang Breadcrumb Di Blogger + Kode CSS

Sebenarnya cara ini hampir sama dengan cara pertama, naun perbedaannya adalah cara ini di sertai dengan kode css.

Silahkan ikuti langkah-langkah di atas, setelah anda sampai pada bagian Expand Widget Templates maka lanjutkan dengan tutorial berikut.

Cari kode ini ]]></b:skin>

Pasang kode CSS berikut tepat di atas kode ]]></b:skin> tadi

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
Kemudian cari kode <b:includable id='post' var='post'&gt
Setelah itu letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<div class='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <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> / <a expr:href='data:post.link'><data:post.title/></a>
</div>
Kemudian silahkan simpan perubahan template anda dan silahkan cek di halaman artikel (post page) apakah Breadcrumb sudah ada.

Jika di saat anda menyimpan template timbul pesan eror atau perubahannya tidak bisa di simpan silahkan cek kembali pengaturannya apakah sudah sesuai atau belum dengan tutorial yang tertulis di sini.

Menambahkan Facebook Like Button Di Blogger


Hallo Teman...
Cara Membuat Facebook Like Button Di Blogger
Kali ini saya akan menuliskan panduan cara menambahkan Facebook 'Like' Button di blogger. Bagi siapa saja yang tertarik ingin menambahkan Facebook 'Like' Button di blog blogger tapi belum tahu bahaimana caranya silakan baca terus tutorial Cara Menambahkan Facebook Like Button ini, dan bagi teman-teman yang sudah tau caranya silakan koreksi, jika ada yang salah silakan di tegur ya...

Ok Langsung saja ...

Tutorial Cara Menambahkan Facebook Like Button Di Blogger

Seperti biasa, pertama silakan login dulu ke blogger

Setelah itu silakan klik Design / Rancangan / Tata Letak, kemudian klik bagian Edit Html

Cari Kode
]]></b:skin>
Letakkan kode berikut di atas ]]></b:skin> tadi
.fb_like_box {
-moz-border-radius:5px 5px 5px 5px;
border-radius:10px;
background:#f5f5f5;
border:1px dotted #ddd;
margin-bottom:10px;
padding:10px;
width:500px;
height:20px;
}
Penting Untuk Diketahui !!!
Silakan ganti kode yang saya beri warna merah (500) dengan ukuran lebar yang sesuai dengan template teman.

Simpan dulu dengan cara mengklik tombol Simpan / Save (Letakknya di bawah).
Beri centang pada pada bagian Expand Widget TemplatesJika belum tahu tempatnya silakan lihat di cara membuat auto read more di blogger

Masukkan kode berikut di bawah kode <data:post.body/>

<div class='fb_like_box'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='400'/>
</div>
Sekarang silakan simpan kembali template anda dan silakan lihat hasilnya, apakah Facebook Like Button nya sudah terlihat.

Oh ia ...
Jika anda meninginkan Facebook Like Button nya terlihat di halaman posting saja silakan pasang kode yang ini, kode di atas tidak perlu di pasang.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='400'/>
</div>
</b:if>
Selamat Mencoba dan semoga berhasil ...

Pasang Buku Tamu Tersembunyi Di Blogger


Kali ini saya akan menuliskan bagaimana cara pasang buku tamu di blogger, namun pada artikel ini saya akan menuliskan tutorial cara pasang buku tamu Tersembunyi / Hidden.

Buku tamu merupakan salah satu hal yang tidak wajib ada di blog kita, namun buku tamu bisa mempercantik blog kita. Selain itu pengunjung blog kita bisa dengan mudah menyapa kita sebagai admin (atau pengunjung lainnya), walau cuma sebatas kalimat (mampir gan, malam, kunjungi blog saya juga ya, dsb...)

Buku tamu tersembunyi juga baru saya pasang di sidebar blog ini. Setelah niat untuk pasang buku tamu tersembunyi di blog ini akhirnya timbullah niat untuk menuliskan bagaimana cara memasang buku tamu tersembunyi di sidebar blogger.
Cara Pasang Buku Tamu Tersembunyi Di Blogger
Ok ga perlu panjang lebar, langsung saja ke topik utama kita.

Panduan Cara Pasang Buku Tamu Tersembunyi Di Sidebar Blogger

Pertama-tama silakan buat akun di www.cbox.ws atau di situs penyedia script buku tamu gratis yang teman suka.

Kemudian ambil script yang sudah di sediakan (kopi kodenya).

Sekarang mari kita ke blogger. Jika belum login silakan login dulu. Jika sudah login silakan klik Rancangan/Design/Tata Letak dan Klik Tambah Gadget/Add Gadget. Jika masih bingung bagaimana cara pasang di blogger silakan baca : Panduan Cara Menghias Blog Blogger

Pilih html/javascript dan silakan 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lT-XIUQbPr9Ti9aTq6md3iIKoWuRE6cahbZlS3WZcwhSQ7GBPQaBDsRKwNQADoVn3lNMDTW5Es19XvM2NL_c8PCbB0BA5b0bzdpLfloOC6vRJjd75MXQUQEKjD0fEihho9KaIKf1dZw/s1600/bukutamu.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">
Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini

<div style="text-align:right">
<a href="http://blog.ahmadrifai.net/2011/06/pasang-buku-tamu-tersembunyi-di-blogger.html">[Pasang Ini Juga]</a>><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></div></div>
Bagi teman-teman yang faham bahasa css atau html silahkan di atur sendiri tampilannya sesuai selera, jika sudah selesai silakan di Simpan dan Selesai

mengedit HTML Template Pada Blogger Tampilan Baru


Karena blogger saat ini tampilan dasbor nya jauh berbeda dengan tampilan lama akhirnya sebagian blogger pengguna tampilan baru blogger menjadi kebingungan saat ingin menambahkan kode baik itu kode html, atau Script pada templatenya (maksudnya kode yang harus dipasang pada Edit HTML Template).

Karena ada beberapa sahabat blogger kita yang bertanya:
dimana tempatnya edit html
dimana letak edit html untuk blogger tampilan baru
Akhirnya saya putuskan untuk menuliskan tutorial ini, karena saya rasa tutorial ini sangat penting dan akan sangat membantu blogger pemula pengguna blogger tampilan baru untuk mengedit kode html template yang digunakan. Dan mudah-mudahan ini dapat bermanfaat.

Untuk tutorial blogger yang sudah saya terbitkan di blog ini akan saya update secara berkala. Do'akan ya mudah-mudahan saya selalu sehat agar bisa memperbaiki (memperbaiki artikel lama dan update artikel terbaru) blog ini sehingga bisa bermanfaat bagi siapa saja yang mengunjungi blog ini.

Next ...

Letak Edit HTML Template Pada Blogger Tampilan Baru

Alangkah lebih baik jika kamu membaca artikel ini sambil praktek.
Pertama silakan login ke blogger.com
Klik menu seperti ini

Setelah itu klik menu / tulisan Template
Jika proses loading sudah selesai silakan klik menu Edit HTML

Kemudian klik lagi tulisan / menu Lanjutkan
Nah sekarang kamu sudah bisa melakukan pengeditan template, jika memang diperlukan silakan beri centang pada bagian Expand Template Widget
Selesai tutorial dimana letak Edit HTML template pada Blogger tampilan baru.
Selamat edit template, hati-hati ya dalam mengedittemplate jika tidak ingin blognya EROR.

Menghias Blog Blogger


Bagaimana Cara Menghias Blog Blogger?

Blog Tutorial kali ini adalah tentang tata letak blog blogger, karena di sinilah tempat Menghias Blog Blogger.

Tata letak memang di sediakan blogger untuk menghias blog baik dengan gambar, iklan, dsb.  Namun sayangnya tidak semua pengguna blogger memanfaatkan fasilitas ini, mungkin ini di sebabkan mereka belum kegunaan Tata Letak Blogger dan bagaimana cara memanfaatkannya.

Sebagaimana yang sudah saya sebutkan di atas bahwa Tata Letak bisa di gunakan untuk menghias blog yaitu dengan menambahkan widget seperti daftar link, banner, iklan ppc (google adsense, dsb), gamber, dan lain sebagainya. Dimana hasil dari widget tersebut akan di letakkan (Terlihat) di sidebar blog blogger kita.

Agar bisa menghias blog blogger dengan widget yang kita inginkan kita harus mengenal tata letak.

Berikut Langkah - Langkah Menghias Blog Blogger


Pertama Silakan login ke blogger

Kedua Klik Menu Tata Letak atau Design
Panduan Cara Menghias Blog
Maka anda akan melihat halaman seperti di bawah ini
Panduan Cara Menghias Blog Blogger
Silakan klik pada bagian yang saya bulati dengan bulatan merah.

Pada template yang saya gunakan ada beberapa tempat yang bisa di gunakan untuk menambahkan Gadget, yang letaknya di samping kanan adalah sidebar kanan dan juga akan terlihat di sebelah kanan blog, sedangkan yang di bawah akan terlihat di bawah juga.

Catatan* Setiap template memiliki tata letak yang berbeda, jika sidebar template blog anda letaknya di sebelah kiri maka letak add a Gadget nya juga di sebelah kiri, dsb.

Untuk menambah Gatget atau hiasan baru silakan klik Add a Gadget, maka akan keluar jendela baru seperti ini
Cara Menghias Blog Blogger

Di sana teman akan menemukan banyak gadget yang bisa di gunakan untuk menghias blog, silakan pilih yang teman suka.

Ok saya akan coba jelaskan sebagian fungsi gadget tersebut.
  1. Pages. Untuk menampilkan daftar halaman blog blogger (bukan daftar postingan lho)
  2. Search Box. Untuk menampilkan forum pencarian.
  3. HTML/JavaScript. Untuk menambahkan html atau java script di sidebar misalnya seperti banner, iklan adsense, iklan ppc, statistik, dsb.
  4. Link List. Untuk membuat daftar link yang akan kita tampilkan di sidebar.
  5. Profile. Untuk memperlihatkan profil kita.
  6. Blog Archive. Untuk menampilkan daftar arsip blog kita.
Nah itulah beberapa gadget yang bisa teman gunakan untuk menghias blog, sebenarnya masih banyak gadget lainnya, untuk gadget lainnya silahkan baca sendiri fungsinya, karena sudah ada keterangannya kok.

Pendahuluan Menggambar Teknik

1. JENIS-JENIS GARIS

1 Jenis-jenis garis dan pengunaannya
Dalam penggambaran teknik, digunakan beberapa jenis garis yang digunakan sesuai dengan maksud dan
tujuannya. Pada dasarnya, jenis-jenis garis dibagi menjadi 3 bentuk :
1. Garis nyata, yaitu garis kontinu
2. Garis gores, yaitu garis pendek-pendek dengan jarak antara
3. Garis bergores, yaitu garis gores panjang dengan garis gores pendek diantaranya
Selain bentuk, harus diperhatikan juga ketebalan garis yang digunakan. Berdasarkan tebalnya, garis dibagi menjadi dua jenis, yaitu garis tebal dan garis tipis, dengan masing-masing kegunaannya. Di bawah ini adalah contoh dari penggunaan variasi garis dan tabel keterangannya
Gambar 1
Contoh penggunaan variasi jenis garis
Tabel jenis-jenis garis dan penggunaannya
Contoh lain penggunaan garis

2. PROYEKSI

Proyeksi 2 dimensi adalah penerjemahan suatu benda bentuk 3 dimensi kedalam bentuk 2 dimensi, artinya benda tersebut digambarkan hanya dari salah satu sudut pandang, dan oleh sebab itu gambar proyeksi 2 dimensi hanya memiliki dua komponen ukuran , yaitu panjang dan lebar. Kekurangan satu elemen ukuran yang lain yaitu ukuran tinggi dikompensasi dengan di buatkan proyeksi dari sudut pandang yang lain yang dapat memperlihatkan ketinggian benda tersebut. Apabila benda yang hendak diproyeksikan memiliki kerumitan yang tinggi, tidak menutup kemungkinan gambar proyeksi yang dibuat menampilkan banyak sudut pandang. Gambar tampilan proyeksi 2 dimensi diusahakan menampilkan sesedikit mungkin pandangan dengan memperhatikan faktor kerapian dan kemudahan pembacaan gambar.
Konsep proyeksi
Konsep proyeksi
Mengapa kita membutuhkan lebih dari satu pandangan ?
Dalam pembuatan gambar teknik, ada kalanya satu pandangan tidak mencukupi untuk menerjemahkan suatu benda ke dalam gambar proyeksi 2 dimensi. Perhatikan gambar contoh di bawah;
Gambar 6. Pandangan depan suatu benda
Gambar 7. Alternatif bentuk
Pada gambar 6 terlihat bahwa semua bentuk benda tersebut memiliki gambar proyeksi yang sama seperti gambar 3 (dilihat dari pandangan depan). Untuk mengetahui dengan pasti bagaimana bentuk benda yang sebenarnya, kita harus menambah gambar proyeksi tersebut dengan mengambil sudut  pandang yang lain, bisa 2 pandangan, 3 pandangan atau lebih, tergantung dari tingkat kerumitan yang dimiliki oleh benda tersebut. Peraturan dalam menentukan jumlah sudut pandang proyeksi adalah buatlah pandangan sesedikit mungkin, dengan menampilkan seluruh informasi yang diperlukan, dengan catatan keseluruhan gambar tersebut mudah dibaca semua orang (artinya lebih baik membuat gambar 3 pandangan dengan kondisi yang mudah dibaca daripada membuat gambar 2 pandangan dengan kondisi yang sulit dibaca).
Gambar proyeksi
Dari gambar di atas terlihat bahwa untuk menerjemahkan benda 3d (gambar 7) diperlukan paling sedikit 2 pandangan, bisa terdiri dari bermacam kombinasi pandangan, bisa tediri dari pandangan depan + pandangan samping, atau pandangan depan + pandangan atas, atau yang lainnya sepanjang semua informasi bentuk tercakup dalam gambar proyeksi tersebut.
Berikut ini adalah contoh-contoh proyeksi dari benda-benda sederhana, dilanjutkan dengan soal-soal latihannya :
Penguasaan gambar proyeksi diperlukan terutama untuk membuat gambar teknik, bukan untuk membaca gambar teknik, tetapi karena tingkat kesulitan dalam membuat gambar berada di bawah  tingkat kesulitan membaca gambar, maka pelajaran proyeksi sebaiknya dilakukan pada tahap awal pengajaran, untuk pendahuluan dalam pelatihan daya bayang dalam pembacaan bentuk gambar  3 dimensi (perspektif).
Sudut pandang proyeksi
Konsep lay out (tata letak) dalam penggambaran gambar teknik terdapat dua macam konsep, yang didasarkan pada sudut pandang gambar, yaitu :
1. Sudut pertama (1st angle) atau proyeksi Eropa
2. Sudut ketiga (3rd angle) atau proyeksi Amerika
Perhatikan gambar di bawah ;
Cara proyeksi berdasarkan kwadran
“Kamar-kamar” yang terbentuk dari potongan bidang proyeksi tersebut disebut kwadran, yang berarti masing-masing kamar dinamakan kwadran pertama, kwandran kedua sampai keempat, apabila benda diletakkan pada kwadran pertama dan diproyeksikan pada bidang proyeksi di dalamnya, maka cara seperti ini disebut cara pandang (cara proyeksi) kwadran pertama (atau sudut pertama), demikian juga halnya apabila benda diletakkan pada kwadran ketiga dan diproyeksikan pada bidang-bidang proyeksinya, maka cara tersebut dinamakan cara pandang sudut ketiga. Secara konsep, proyeksi sudut kedua dan keempat pun bisa digunakan, tetapi pada prakteknya yang sekarang ini digunakan hanyalah proyeksi sudut pertama dan ketiga.
Cara proyeksi sudut pertama
Benda seperti yang tampak pada gambar 12a diletakkan di depan bidang-bidang proyeksi seperti pada gambar 12b. Ia diproyeksikan pada bidang belakang menurut garis penglihatan A, dan gambarnya adalah gambar pandangan depan. Tiap garis atau tepi benda tergambar sebagai titik atau garis pada bidang proyeksi. Pada gambar 12b tampak juga proyeksi benda pada bidang bawah menurut arah B, menurut arah C pada bidang proyeksi sebelah kanan , menurut arah D pada bidang proyeksi sebelah kiri, menurut arah E pada bidang proyeksi atas, dan menurut arah F pada bidang depan. Setelah terbentuk semua proyeksi (gambar 12b), bentangkan semua bidang proyeksi menjadi bidang-bidang 2 dimensi (gambar 13a).
Gambar 12a                                                                               Gambar12b
Gambar 13a                                                                         Gambar 13b
Susunan gambar proyeksi harus sedemikian rupa sehingga pandangan depan A sebagai patokan, pandangan atas B terletak dibawah, pandangan kiri C terletak di kanan, pandangan kanan D terletak disebelah kiri, pandangan bawah E terletak diatas, dan pandangan belakang F boleh ditempatkan disebelah kiri atau kanan. Hasil selengkap dapat di lihat pada Gambar 13b.
Dalam gambar, garis-garis tepi yaitu garis-garis batas antara bidang-bidang proyeksi dan garis-garis proyeksi tidak digambar.
Gambar proyeksi demikian disebut gambar proyeksi sudut pertama. Cara ini disebut juga “Cara E” karena cara ini telah banyak dipergunakan dinegara-negara Eropa seperti Jerman, Swiss, Prancis, Rusia dsb.
Cara proyeksi sudut ketiga
Benda yang akan digambar diletak dalam peti dengan sisi-sisi tembus pandang sebagai bidang-bidang proyeksi, seperti pada gambar 14a. Pada tiap-tiap bidang proyeksi akan tampak gambar pandangan dari benda menurut arah penglihatan, yang ditentukan oleh anak panah.
Pandangan depan dalam arah A dipilih sebagai pandangan depan. Pandangan-pandangan lain diproyeksikan pada bidang proyeksi lainnya menuerut gambar 14a, Sisi peti dibuka menjadi satu bidang proyeksi lainnya menurut gabar 14b. Hasil lengkapnya dapat dilihat pada gambar 14c. Dengan pandangan A sebagai patokan, pandangan atas B diletakkan di atas, pandangan kiri C diletakkan di kiri, pandangan kanan D diletakkan di kanan, pandangan bawah E diletakkan di bawah, dan pandangan belakang F dapat diletakkan di kiri atau kanan. Susunan proyeksi demikian disebut gambar proyeksi sudut ketiga, dan disebut juga “Cara A” karena cara ini telah dipakai di Amerika.Negara-negara lain yang banyak mempergunakan cara ini adalah Jepang, Australia, Canada dsb.
Benda kerja                                                                             Hasil proyeksi
Susunan gambar hasil proyeksi
3. PERSPEKTIF
Gambar perspektif adalah gambar 3 dimensi yang merupakan hasil terjemahan dari gambar 2 dimensi, jadi merupakan kebalikan dari gambar proyeksi. Membuat gambar perspektif relatif lebih sulit dibandingkan dengan menggambar proyeksi. Kesulitan pertama adalah menggabungkan seluruh pandangan yang ada sehingga kita bisa membayangkan bentuk benda yang sebenarnya. Kesulitan kedua adalah, walaupun kita sanggup membayangkan bentuk perspektif dari benda tersebut di pikiran kita, seringkali kita kesulitan dalam menggambarkan bentuk tersebut di atas kertas. Menerjemahkan hasil pembacaan kita ke atas kertas memang tidak mutlak harus dilakukan, tetapi akan sangat membantu apabila kita sanggup melakukannya.
Kemampuan untuk membaca gambar (membayangkan perspektif) lebih banyak diperlukan secara umum daripada kamampuan membuat gambar (membayangkan proyeksi). Kemampuan membuat gambar diperlukan hanya terbatas utuk orang-orang yang tugasnya memang membuat/mencipta gambar teknik, seperti misalnya drafter, designer, atau copies. Tetapi kemampuan membaca gambar diperlukan oleh lebih banyak orang yang tugasnya berkaitan dengan bidang engineering. Oleh karenanya pelatihan gambar perspektif harus dilakukan secara intensif. Teori pada pokok bahasan perspektif ini sangatlah sedikit (untuk tahap dasar), sehingga metoda pelatihan yang terbaik adalah dengan dengan banyak mengerjakan latihan-latihan soal.  Di bawah ini adalah beberapa contoh aplikasi gambar perspektif, pelajari dengan baik, kemudian kerjakan latihan soal-soal pada halaman paling belakang
Proyeksi                                                         Perspektif
Keterangan :             PD (pandangan depan), PS (pandangan samping), PA (pandangan atas)
Contoh gambar perspektif
4. GAMBAR POTONGAN
Tidak jarang ditemui benda-benda dengan rongga–rongga didalamnya. Untuk menggambarkan bagian–bagian ini dipergunakan garis gores, yang menyatakan garis–garis tersembunyi. Jika hal ini dilaksanakan secara taat asas, maka akan dihasilkan sebuah gambar yang rumit sekali dan susah dimengerti. Bayangkan saja jika sebuah lemari roda gigi harus digambar secara lengkap! Untuk mendapatkan gambaran dari bagian–bagian yang tersembunyi ini, bagian yang menutupi dibuang. Gambar demikian disebut gambar potongan, atau disingkat dengan potongan.
Gambar pada gambar 16a memperlihatkan sebuah benda dengan bagian yang tidak kelihatan. Bagian ini dapat dinyatakan dengan garis gores. Jika benda ini dipotong, maka bentuk dalamnya akan lebih jelas lagi. Gambar 16b memperlihatkan cara memotongnya, dan gambar 16c sisa bagian depan setelah bagian yang menutupi disingkirkan. Gambar sisa ini diproyeksikan ke bidang potong, dan hasilnya disebut potongan (gambar 16d. Gambarnya diselesaikan dengan garis tebal.
Dalam hal–hal tertentu bagian–bagian yang terletak di belakang potongan ini, tidak perlu digambar. Hanya jika bagian ini diperlukan,  maka bagian di belakang potongan ini digambar dengan garis gores.
Gambar 16. Penjelasan Mengenai Potongan
Cara–Cara Membuat Potongan
Potongan Dalam Satu Bidang
(1) Potongan Oleh Bidang Potong Melalui Garis Sumbu Dasar
Jika bidang potongan melalui garis sumbu dasar, pada umumnya garis potongnya dan tanda tandanya tidak perlu dijelaskan pada gambar. Foto demikian disebut potongan utama (gambar 17a)
(2) Potongan Yang Tidak Melalui Garis Sumbu Dasar
Jika diperlukan potongan yang tidak melalui sumbu dasar, letak bidang potongnya harus dijelaskan pada garis potongnya (gambar 17b).
Gambar 17a                                                                                           Gambar 17b
Potongan melalui garis sumbu dasar                                                   Potongan tidak melalui garis sumbu dasar
Potongan Oleh lebih dari satu bidang
(1)   Potongan Meloncat
Untuk menyederhanakan gambar dan penghematan waktu, potongan–potongan dalam beberapa bidang sejajar dapat disatukan. Pada gambar 18a diperlihatkan sebuah benda yang dipotong menurut garis potong A-A. sebenarnya bidang potongannya terdiri atas dua bidang, yang dalam hal ini akan disatukan. Potongan demikian dinamakan potongan meloncat.
(2)   Potongan oleh dua bidang berpotongan
Bagian – bagian simetrik dapat digambar pada dua bidang potong yang saling berpotongan. Satu bidang potong merupakan potongan utama, sedangkan bidang yang lain menyudut dengan bidang pertama. Proyeksi pada bidang terakhir ini, setelah diselesaikan menurut aturan-