BLOG RANGGA

Posting lagi setelah hampir 1 bulan gak update postingan karena terlalu banyak tugas yang harus di selesaikan  , supaya tidak berlama-lama saya akan berbagi tentang inti dari postingan ini yang saya beri judul Cara Membuat Efek Shadow / Bayangan Pada Pinggir Blog yaitu kita akan memberi efek bayangan pada tepi blog dengan  cara sebagai berikut :

1. Login dulu ke Blogger
2. Di Dasbor Blog pilih Template
3. Selanjut nya klik Edit HTML
4. Cari salah kode yang mirip dengan kode di bawah ini di HTML Template blog sobat
content-outer atau content-wrapper
5. pasang kode di bawah ini setelah atau di bawah kode content-outer atau content-wrapper

    border:2px solid #0000ff;
    border-color:#9ecaed;
    box-shadow:0 0 10px #666}

Keterangan untuk merubah warna dan ukuran bayangan tepi blog :

• 2px = ketebalan Garis tepi blog.

• #0000ff = warna Garis pinggir.

• 10px = ketebalan efek shadow/bayangan blog.

• #666 = warna shadow/bayangan.

6. Terakhir Simpan kode untuk melihat hasil nya di blog .

Kalau sobat juga ingin membuat efek bayangan pada link blog kunjungi link ini  Cara Membuat Efek Shadow/Bayangan Pada Link Blog

1. Login dulu ke Blogger
2. Pilih Template di dasbor blog
3. Klik Edit HTML
4. Selanjut nya cari code </head> dan tambahkan code script di bawah ini di atas / sebelum code </head>

<style>#Hengky img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #Hengky img:hover{ -o-transform: scale(1.3) rotate(360deg); -moz-transform: scale(1.3) rotate(360deg); -webkit-transform: scale(1.3) rotate(360deg);}</style>

5. Untuk selanjut nya memasang gambar nya di postingan blog atau gadged blog yaitu dengan memasang kode di bawah ini di halaman HTML postingan blog atau halaman HTML Gadged blog

<div id="Hengky">
<a href="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/p206x206/480039_422560754446839_1421935342_n.jpg">
<img src="http://sphotos-a.xx.fbcdn.net/hphotos-ash3/p206x206/576205_421587091210872_394466854_n.jpg" /></a>
</div>

Keterangan :  

• Ganti kode Url gambar yang ditandai warna merah dengan kode Url gambar yang ingin sobat ganti 

6. Terakhir Publikasikan kalau sobat memasang nya di halaman HTML postingan blog dan Klik simpan kalau sobat memasang nya di halaman HTML Gadged blog .

Semoga artikel ini bermanfaat dan kalau ada waktu tinggal kan komentar tentang postingan ini untuk memastikan kode nya berfungsi atau tidak berfungsi di blog sobat .

Kolom atau tabel pada blog biasa nya berguna pada untuk memisahkan tulisan penting atau kode tertentu pada sebuah artikel pada blog/web dan kali ini saya akan berbagi Cara membuat kolom atau tabel teks dengan tombol  Select All pada blog yang berguna buat User untuk memblok kode yang ada di dalam tabel , tabel yang di lengkapi cocok di gunakan untuk meletakan link ataupun kode script karena cukup dengan dengan menekan tombol Select All kode otomatis akan terblok dan siap di copy seperti contoh yang saya gunakan pada halaman Tukar Link Otomatis Blog. Cara membuat nya yaitu dengan memasang kode di bawah ini :

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Ganti dengan teks atau kode sobat </textarea></p></form>

Keterangan 

1. Ganti dengan teks atau kode sobat adalah tulisan atau teks di dalam tabel
2. padding: 3px; adalah jarak tulisan dengan pinggir kolom
3. width: 300px; adalah lebar atau panjang kolom 
4. height: 50px; adalah tinggi dari kolom atau tabel 

Semoga artikel ini berguna dan bermanfaat untuk yang telah berkunjung ke blog ini .

Salah satu cara menjaring pengunjung blog yaitu dengan cara memodifikasi tampilan blog supaya terlihat bagus dan indah untuk dipandang bisa saja dengan menggunakan membuat tulisan berjalan seperti di ketik seperti contoh teks yang ada diatas postingan ini .
Supaya kode nya berfungsi yaitu dengan cara menyisipkan kode Script di dalam kolom dibawah ini ke dalam halaman HTML Javascript pada blog , baik pada halaman HTML postingan blog , Halaman HTML Gadget dan pada HTML Template blog .

<script language="JavaScript">
var text="CARA MEMBUAT TULISAN BERJALAN SEPERTI DIKETIK PADA BLOG";
var delay=10;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script>
<b></b>
<br />
<div 0px="" 10px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: white;">
</div>
<script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>

Keterangan : Teks yang ditandai warna merah ganti dengan teks tulisan yang ingin di tampilkan

Kalau ingin membuat tulisan nya berjalan biasa naik dan turun dan sebagai nya kalau ada waktu silahkan kunjungi halaman tutorial nya melalui link ini CARA MEMBUAT TULISAN BERGERAK BUAT BLOG

Untuk memenuhi jawaban dari permintaan sobat pengunjung Blog Rangga pada postingan sebelum nya pada judul post  Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog yang meminta supaya di bagikan Cara Membuat Slideshow Photo Menggunakan Tombol Navigasi Pada Postingan Blog , kali ini saya mencoba untuk memenuhi permintaan itu seperti contoh slideshow nya dibawah ini

Supaya slideshow nya berfungsi seperti di atas saya menggunakan kode yang saya dapat dari postingan nya Mas Noer Cholis yang mempunyai website keren http://www.carabuatwebgratis.com/ yaitu dengan langkah2 sebagai berikut :

1. Login dulu ke blogger.
2. Pilih Template di dasbor blog.
3. Pilih Edit HTML 
4. Centang dulu Expand Template Widget.
5. cari kode </head> gunakan Ctrl+F untuk memudahkan pencarian kode 
6. Pasang kode di bawah ini sebelum kode </head>

 7. Simpan Template
 8. Copy kode di bawah ini dan pastekan ke halaman HTML Gadget atau Halaman HTML Postingan blog sobat

<div id="carousel-container">
<div id="carousel">
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/03/cara-hidup-pintar-dengan-tablet-pc.html">
<img alt="Blog Rangga" class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4ubPorw_zXx83S6PCRGgikiPjhAa85FW6nV2JrI8eou34Xz5Z14trUgVK13jI_iw0BfDjw1K7jTKp-kOYVI05N_zvQ7JeFsIW0_CNANogQaegH7R5HNkATVJW1fOoFDsD3N0bTFRKTwV/s1600/Blog+Rangga.jpg" title="Cara Membuat Slideshow Photo Menggunakan Tombol Navigasi Pada Postingan Blog" /></a>
<br />
<div class="carousel-caption">
Acer kembali meluncurkan produk baru nya yang sangat luar biasa yaitu  yang menyatukan Tablet PC dengan netbook yang menyatukan dua gadget sekaligus yang sangat mudah di bawa kemanapun sangat cocok untuk semua kalangan dan pekerjaan
 </div>
</div>
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/02/cara-memasang-readmore-otomatis-dengan.html">
<img alt="Image Caption" class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVh4j77lnbF5ekE7-fK60MYGAFRGmQEK56OM8j6l4jI-KzkcSv9bARFcIxabU2wlAF7373sA4xTJ-5rPXHbIdDHYni1ilLZSGw7DcU3cjHWx9c51lm9f7fOh6nSG0K8t2ImY5iMYSCLULu/s1600/Blog+Rangga.jpg" /></a>
<br />
<div class="carousel-caption">

blog rangga

Cara Membuat Readmore Otomatis Pada Blog Dengan Teks pernah saya bagikan di blog sebelum nya dan kali ini masih tutorial yang sama yaitu Cara Memasang

</div>
</div>
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/02/download-gratis-skin-dan-aimp-terbaru.html">
<img alt="Image Caption" class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcCGyKsW5POJT5lUUM8TNtZEU5FPRjfMpntbTvi0MY8SLPOqOzwpvgm2HO0QLjS6GEZs3mrTQ5Q0MYlza8WJLKy5UbEkHQMJn7TaibTPwcDylYh-7kZWRzGIEDdF2zUEM9YeX6lsiC2Il/s1600/Blog+Rangga.jpg" /></a>
<br />
<div class="carousel-caption">

Aplikasi Audio Player yang satu ini memang tidak di ragukan lagi kualitas nya , selain hadir dengan berbagai macam tampilan nya yang menarik AIMP juga menghasilkan suara yang

</div>
</div>
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/02/cara-memasang-widget-back-top-icon.html">
<img alt="Image Caption" class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7mDBCnFD2WZgC6ovHMs_srNCSx_1_NM7W6DyV3DTkiZE8tNy7YShz4aaopeG2L36oXB0SkmHBtavGwUEg3T8wIbPDs0XExvKWCB3ZpGa3hNvoAAXo8nKDjycmOyR2LAccm1X6LGORB9Oj/s1600/Blog+Rangga.jpg" /></a>
<br />
<div class="carousel-caption">

Widget ini berguna untuk mempercepat kembali ke halaman bahagian atas dengan hanya mengklik icon Back Top , Cara Memasang Widget Back Top Icon Animasi Pada Blog ini

</div>
</div>
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/01/cara-memasang-kamera-cctv-di-blog.html">
<img alt="Image Caption" class="carousel-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggd_py-saUYkJ_VNNj0fCBKcypTkPcc6eh0Y-R-h9OWoc9TsOKdpsdTOZzwAnSzUCK1JTntogXMCM48LTR14e65Tj8wZTldQ-OWrvZltla5eIsP6-ebgeZ_BO5FFV2kvaNSwlriA97eMv8/s1600/Blog+Rangga+copy.jpg" /></a>
<br />
<div class="carousel-caption">

Kamera CCTV di gunakan untuk memantau setiap kegiatan di suatu tempat seperti di Mall , Toko , Rumah Dll supaya aman dan bisa melihat dengan detail semua kejadian yang telah di

</div>
</div>
</div>
<div id="carousel-left">
<img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div>
<div id="carousel-right">
<img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div>
</div>

9. Klik simpan untuk melihat hasil nya di blog

Keterangan :

• Kode yang di tandai warna merah adalah kode URL gambar
• Kode yang di tandai warna merah adalah Link tautan gambar
• Kode yang di tandai warna kuning adalah deskripsi atau judul gambar

Semoga artikel ini bermanfaat dan selamat berexperiment ........

Cara Membuat Efek Animasi Bayi Merangkak Di Blog Judul postingan pada kali ini yang saya pilih karena saya akan berbagi cara memasang efek bayi lucu merangkak ini di blog , cara pasang nya cukup mudah dan tidak membuat berat loading blog

Cara pasang nya cukup mudah dan masih sama dengan tutorial sebelum nya Cara Membuat Efek Uang Bertaburan Di Blog yaitu dengan cara sebagai berikut :

• Login dengan account blog sobat
• Pilih tata letak
• Pilih salah satu tambah gadget untuk meletakan kode
• Cari HTML/Javascript
• Letakan kode dibawah ini di halaman HTML/Javascript

<script language="javascript"> nd_mode="baby"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efekbayiberjalan.js"></script> 

• Terakhir klik simpan untuk melihat hasilnya di blog sobat

Banyak cara dan gaya untuk membuat teks link menjadi lebih menarik buat user blog supaya teks tersebut di dikunjungi , apalagi link itu berkaitan dengan postingan lain di dalam blog atau link internal blog , efek samping nya cukup bermanfaat buat blog , karena hal tersebut bisa meningkat nilai pageview pada blog dan membantu dalam upaya sobat untuk meramping kan blog karena nilai pageview nya naik .

Efek link memberikan banyak pilihan seperti Efek Link Pelangi Blog , Membuat Link Bergerak Di Blog dan masih banyak efek link lain nya yang bertebaran cara memasang nya di blog yang bisa di temukan di Search Engine seperti Google dan semua tergantung keinginan yang mana mau dipasang buat blog .

Kali ini saya akan mencoba berbagi lagi cara memberikan efek pada link blog saat di lalui kursor yaitu Cara Membuat Efek Shadow/Bayangan Pada Link Blog dengan cara sebagai berikut :

• Login dulu ke Blogger

• Klik Template di Dasbor Blog

• Simpan atau Back up dulu kode  agar bisa di kembalikan kalau ada salah dalam pengeditan kode

Edit HTML Template

• Centang dulu Expand Template Widget

• Lalu cari kode yang mirip dengan kode ini  a.hover     {                text-decoration:underline;

Kalau sudah lihat kode setelah nya  biasanya ada kode warna seperti contoh di bawah ini : 
 a.hover     {                text-decoration:underline;        color:#EB0004}
Warning : Kode yang berwarna hijau kadang berbeda di setiap Template Blog

• Lalu tambah kan kode CSS di bawah ini setelah kode warna atau sebelum kurung penutup }

Kode CSS yang di tambahkan

 ;text-shadow:3px 3px 3px #000 

a.hover     {                text-decoration:underline;        color:#EB0004 }

 a.hover     {                text-decoration:underline;        color:#EB0004 ;text-shadow:3px 3px 3px #000 }

• Tambahkan kode  ;text-shadow:3px 3px 3px #000 pada setiap kode a.hover     {                text-decoration:underline;        color:# yang ada pada blog supaya semua link pada blog menghasilkan efek shadow/bayangan pada semua link saat lalui cursor.

• Terakhir simpan template .

Keterangan :

;text-shadow:3px 3px 3px #000
Angka yang berwarna biru adalah ukuran bayangan yang di tampilkan , bisa diganti sesuai ke inginan
Kode yang berwarna merah adalah kode HTML warna shadow/bayangan yang di tampilkan bisa di ganti kode sesuai keinginan dan dapatkan kode warna HTML nya melalui menu di bawah judul blog

Sekian dan terima kasih , kalau ada rangkaian artikel ini yang kurang sobat mengerti silahkan tinggalkan pertanyaan melalui form komentar di bawah ini.

 
          Efek link seperti cahaya  pelangi yang ada di blog memang mempunyai daya tarik sendiri dalam sebuah blog dan dapat memikat visitor untuk mengunjungi link tautan pada blog ,  banyak yang memposting tentang cara membuat Efek link Pelangi Blog tapi kebanyakan di tempatkan pada kode <head> HTML Template blog.  

        Untuk kali ini saya akan posting cara mudah pasang link efek cahaya pelangi blog yaitu tanpa mengutak-atik template blog ,Bagaimana cara pasang nya ? cara pasang nya sangat gampang dengan hampir sama dengan cara pasang "Efek Link Bergerak Di Blog" mengikuti langkah-langkah nya di bawah ini :

• Login dulu dengan account blogger 

• Pilih tata letak =>>Add gadget /Tambah gadget=>>HTML/Javascript.

• Copy paste kode dibawah ini ke halaman HTML/Javascript

 <script src="http://mp3terlengkap.googlecode.com/files/LinkPelangi.js" type="text/javascript"></script>

• Terakhir klik simpan untuk melihat hasil nya di blog sobat.

Kalau hasil nya maksimal/tidak maksimal silahkan tinggalkan pesan atau saran sobat di form komentar yang tersedia .

Cara Membuat Efek Uang Bertaburan Di Blog" Itu lah judul posting kali ini yang saya buat , sayang nya uang bertaburan ini bukan uang benaran , kalau uang benaran yang bertaburan blog sobat pasti kebajiran pengunjung yang ingin mengambil uang yang bertaburan di blog sobat he...he...

Mudah-mudahan dengan memasang efek ini blog sobat kebajiran pengunjung untuk melihat uang yang bertebaran , cara pasang nya sangat mudah hampir sama dengan "Cara Membuat Efek Gelembung Cursor Di Blog"  yaitu :

• Login dengan account blog sobat
• Pilih tata letak
• Pilih salah satu tambah gadget untuk meletakan kode
• Cari HTML/Javascript
• Letakan kode dibawah ini di halaman HTML/Javascript

<script src="http://blog-rangga.googlecode.com/files/uang.js" type="text/javascript"/></script>

• Terakhir klik simpan untuk melihat hasilnya di blog sobat

Lihat juga membuat efek blog lain nya disini ya sob

    Sebulan lebih selama bulan ramadhan  saya tidak posting di blog ini , kali ini saya berbagi tentang CARA MEMBUAT TULISAN BERGERAK BUAT BLOG yang bisa di sebut dengan kata lain yaitu tulisan (Marquee) yang berguna buat memperindah tampilan pada blog , cara menghias blog yang satu ini cukup mudah alias gampang seperti contoh di bawah ini :

1. Siapkan dulu acount blog sobat atau login dulu di blogger.
2. Lalu pilih ELEMEN HALAMAN atau TATA LETAK.
3. Pilih TAMBAH GADGED sesuai ditempat yang ingin dipasang tulisan .
4. Lalu pilih lah kode yang mau dipasang di blog sobat yang sesuai dengan keinginan sobat.

Tulisan bergerak ke kanan 

 <marquee direction="left" scrollamount="2" align="center">Tulisan bergerak kekanan</marquee>
  Tulisan bergerak ke kiri

<marquee direction="right" scrollamount="2" align="center"> Tulisan bergerak ke kiri </marquee>
  Tulisan bergerak mondar-mandir

   <marquee align="center" behavior="alternate" direction="left" scrollamount="2"> Tulisan bergerak mondar-mandir </marquee> Tulisan bergerak kebawah    <marquee direction="down" scrollamount="2" align="center"> Tulisan bergerak kebawah </marquee> Tulisan bergerak keatas    <marquee direction="up" scrollamount="2" align="center"> Tulisan bergerak keatas </marquee> Tulisan Bergerak turun naik kode : <marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Tulisan Bergerak turun naik </marquee>
Tulisan bergerak zig zag  <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> tulisan bergerak zig zag </marquee></marquee></center>
Tulisan bergerak memantul  <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Tulisan bergerak memantul</marquee></marquee></center>

Keterangan : 
Code nya yang distabilo hijau untuk di copy paste
Tulisan yang berwarna merah silahkan ganti dengan keinginan sobat # direction="left/right/up/down" --> Mengatur arah gerakan teks. # scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya. # behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan : ~> Scroll --> teks bergerak berputar ~> Slide--> teks bergerak sekali lalu berhenti ~> Alternate --> teks bergerak dari kiri kekanan lalu balik lagi
<center> ............. </center>adalah mengatur posisi ditengah

Semoga artikel kali ini bemanfaat dan berguna .....

Cara Membuat Link Bergerak Di Blog

Pada postingan postingan sebelum nya saya telah berbagi cara Cara Membuat Link New Tab Otomatis sama dengan judul artikel kali ini  yaitu  Cara Membuat Link Bergerak Di Blog saat dilewati cursor di blog.

Untuk apa dipasang link bergerak saat dilalui cursor di blog ? Salah satu nya berguna untuk membantu dan mempermudah visitor untuk menemukan tautan halaman lain dalam blog biasa nya di tambah dengan efek pada link saat di lewati cursor, contoh nya link bergerak ,link shadow/bayangan ,efek link pelangi saat di lewati cursor dan lain-lain.

Bagi sobat yang ingin mencoba Cara Membuat Link Bergerak Di Blog bisa dengan mengikuti langkah-langkah nya dibawah ini:

• Login ke account blog.
• Cari rancangan.
• Klikelemen halaman.
• Pilih salah satu kolom tambah gadget.
• Cari HTML Java script.
• copas kode yang di stabilo dibawah ke kolom HTML Java script.
• lalu klik simpan.

Untuk melihat hasil nya langsung masuk ke blog sobat.
tolong jangan lupa saran ya....!.


TERIMA KASIH