BLOG RANGGA: Pernak Pernik Blog

Home » Posts filed under Pernak Pernik Blog

Tampilkan postingan dengan label Pernak Pernik Blog. Tampilkan semua postingan

Tampilkan postingan dengan label Pernak Pernik Blog. Tampilkan semua postingan

Artisteer 4.3.0.60745 Full Free Download

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Artisteer 4 Blog rangga , Blog Tools , Download , full , free

Artisteer 4.3.0.60745 ??Artisteer 4.3.0.60745 telah di sempurnakan dari versi sebelum nya dari bug dan tambahan lainya , Artisteer 4.3.0.60745 adalah sebuah sofware yang sangat cocok untuk profesional ataupun pemula untuk membuat website template , blogger template, Tumblr Theme , Wordpress Theme tanpa harus mengerti bahasa program Web seperti program CSS, HTML, PHP dan sebagai nya , dengan sofware Artisteer ini pengguna nya tidak perlu lagi mendesain tema atau template menggunakan Adobe Dreamwaver ataupun Adobe Photoshop karena di Artisteer4.3.0.60745 sudah tersedia template dan icon yang tampilan yang sangat menarik dan bagus dengan banyak pilihan tampilan yang sangat menarik dan bagus buat tampilan website template , blogger template, Tumblr Theme , Wordpress Theme sesuai yang di terangkan di website resmi nya Artisteer

Artisteer adalah produk otomatisasi desain web pertama dan satu-satunya yang secara instan membuat templat situs web dan tema blog yang tampak fantastis

Desain blog yang luar biasa dan templat web keren dalam hitungan menit
Ekspor ke Blogger, Joomla, Wordpress, dan produk CMS lainnya
Tidak perlu belajar Photoshop, CSS, HTML atau teknologi lainnya
Menyenangkan dan mudah digunakan!
Pratinjau, unduh, dan edit contoh situs web dan templat online!

Kalau buat pemula sangat cocok sekali karena menggunakan cukup klik dan klik sesuai tampilan yang di inginkan yang jelas menurut pengalaman saya sendiri Sofware ini sangat User friendly tapi sayang tool ini di gunakan berbayar dengan harga yang tertera di bawah ini

HOME & EDITION + THEMLER PERSONAL BUY $49.95
STANDARD EDITION+THEMLER BUSINESS BUY $129.95
STANDARD EDITION+THEMLER PRO BUY $199.95

Tapi di sini saya akan berbagi sofware ini secara gratis buat yang ingin mencoba menggunakan tool ini dengan versi full nya lengkap dengan patch dengan mendowload melalui link di bawah ini

Link Download

Google Drive

Artisteer 4.3.0.60745 (120 MB)

Userscloud

Artisteer 4.3.0.60745 (120 MB)

Semoga berguna dan bermanfaat dan kalau ada link yan eror tolong di baritahukan supaya bisa di perbaiki secepat nya

»» READMORE...

Label: Blog Tools, Blog tutorial, Komputer Sofware, Pernak Pernik Blog, Sofware Tools, tips dan trik blog | 0 komentar

Cara Pasang Musik Mp3 Di Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Tembang yang dialunkan dari sebuah blog ternyata bisa berpengaruh terhadap blog , buktinya saya pernah berkunjung kesebuah blog yang memasang musik mp3 kesayangan ku di blog tersebut membuat saya mau berlama di blog tersebut sambil membaca artikel sekalian mendengarkan lagu kesayangan , bagi sobat yang pingin widget memasang mp3 yang langsung di putar secara otomatis di blog nya bisa dengan mengikuti langkahnya di bawah ini .
1. Kunjungi dulu penyedia widget nya yaitu http://www.divine-music.info/
2. Pilih salah satu kategori musik yang akan di pasang di blog atau pilih Browse All untuk semua aliran dan judul lagu.

3. Pilih judul lagu yang ingin di pasang di blog , contoh nya saya pasang lagu Muse - Starlight

4. Klik lagu nya dan copy kodenya script seperti contoh gambar di bawah ini .

Blog Rangga

5. Untuk memasang di blog login dulu ke blogger.
6. Pilih Tata Letak di Dasbor blog .
7. Lalu klik Tambahkan Gadget >HTML/JavaScript.
8. Terakhir pastekan kode Script yang telah di copy tadi lalu simpan untuk melihat hasil nya diblog.

Semoga artikel ini bermanfaat buat sobat yang telah sudi berkunjung ke Blog ini .

»» READMORE...

Label: Blog tutorial, Pernak Pernik Blog, Widget | 66 komentar

Cara Membagi Dua Kolom Pada Postingan Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Pada postingan kali ini saya akan berbagi tentang Tutorial Blogger yaitu Cara Membagi Dua Kolom Pada Postingan Blog yaitu dalam satu halaman postingan akan terbagi dan terpisah menjadi dua kolom .
Penasaran tentang cara nya ?? langsung saja ke TKP nya dengan cara sebagai berikut :
1. Login dulu dengan Account Blogger yang telah sobat buat
2. Pilih Buat Entri Baru atau klik Icon Pena

BLOG RANGGA

3. Lalu pilih HTML pada halaman postingan blog dan masukan kode di bawah ini kehalaman tersebut

BLOG RANGGA

Kode Script Artikel 2 Kolom

<table border="0" cellspacing="10" style="width: 500px;">
<tbody>
<tr>
<td valign="top" width="250">kolom artikel 1...</td>
<td valign="top" width="250">kolom artikel 2...</td>
</tr>
</tbody></table>

4. Lalu Klik Compose dan ganti tulisan kolom artikel 1...dan kolom artikel 2...dengan artikel postingan sobat

BLOG RANGGA

5. Terakhir Publikasikan postingan sobat .

BLOG RANGGA

Keterangan :
Kode yang di tandai warna biru ( 10 , 500px dan 250 )silahkan ganti dengan ukuran dengan menyesuaikan dengan ukuran lebar halaman postingan sobat

»» READMORE...

Label: Blog tutorial, Pernak Pernik Blog, tips dan trik blog | 27 komentar

Cara Membuat Efek Shadow / Bayangan Pada Pinggir Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

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

»» READMORE...

Label: Blog tutorial, Pernak Pernik Blog, Ragam Efek Blog | 16 komentar

Cara Membuat Gambar Berputar Dan Membesar Saat Di Lalui Cursor Pada Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Blog rangga

Pada postingan kali ini saya akan berbagi artikel tentang Cara Membuat Gambar Berputar Dan Membesar Saat Di Lalui Cursor Pada Blog yaitu gambar pada blog secara otomatis akan berputar dan membesar pada saat di lalui kursor , supaya tidak penasaran kunjungi dulu link ini http://lapautemplate.blogspot.com/2013/05/ratu-sikumbang.html untuk melihat contoh nya , langkah selanjut nya yaitu cara memasang nya di blog yaitu dengan langkah sebagai berikut :

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 .

»» READMORE...

Label: Blog tutorial, Pernak Pernik Blog, Ragam Efek Blog, tips dan trik blog | 7 komentar

Cara Memasang Jam Pada Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Sudah seminggu setelah postingan sebelum nya CARA MEMBUAT TULISAN BERJALAN SEPERTI DIKETIK PADA BLOG akhirnya update postingan lagi dengan judul Cara Memasang Jam Pada Blog , Jam berguna untuk mengetahui waktu dalam kita melakukan kegiatan baik saat kita mau bekerja beristirahat dan sebagai nya , lalu apa hubungan nya pada blog ? Jam pada blog berguna untuk mengingatkan waktu kita beristirahat dan waktu bekerja karena jiwa seorang blogger sering melupakan waktu baik waktu istirahat , bekerja dan sebagai nya pada saat melakukan kegiatan blogger. jadi jam pada blog juga berguna karena bisa membawa manfaat buat orang lain dan diri sendiri untuk mengingatkan waktu selain berguna untuk mempercantik blog . supaya jam yang tepat waktu ada di blog yaitu dengan memasang widget nya yang biasa nya cocok di pasang di sidebar blog dan juga bisa di pasang di tempat lain di blog.
Supaya tidak berlama-lama lebih baik kita langsung saja pada cara nya :

1. Ambil jam nya dulu secara gratis melalui link ini http://www.clocklink.com/index.php
2. Pilih gallery seperti contoh gambar di bawah ini

blog rangga

3. Pada halaman gallery pilih jam pada menu sesuai dengan keinginan yang ingin di tampilkan di blog seperti gambar di bawah ini .

4. Setelah ketemu jam yang di inginkan klik View HTML Tag yang terdapat tepat di bawah jam yang di inginkan.

blog rangga

5. Untuk menyamakan waktu dengan tempat berada klik Select by City dan pilih kota yang terdekat dengan tempat di mana posisi berada .

blog rangga

6. Setelah watktu nya sesuai ambil kode dengan cara di copy code HTML nya .

blog rangga

7. Pastekan kode nya ke halaman HTML Javascript Gadged blog .

blog rangga

8. Terakhir simpan kode supaya jam berfungsi di blog .

Semoga artikel ini bisa memberikan hal yang positif dan berguna bagi orang lain amin .....

»» READMORE...

Label: Blog tutorial, Pernak Pernik Blog, tips dan trik blog, Widget | 9 komentar

Cara Membuat Tulisan Berjalan Seperti Diketik Pada Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

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

»» READMORE...

Label: Blog tutorial, Pernak Pernik Blog, Ragam Efek Blog, tips dan trik blog | 20 komentar

Cara Membuat Slideshow Photo Menggunakan Tombol Navigasi Pada Postingan Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

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

Acer kembali meluncurkan produk baru nya yang sangat luar biasa yaitu yang menyatukan Tablet PC dengan netbook

blog rangga Cara Membuat Readmore Otomatis Pada Blog Dengan Teks pernah saya bagikan di blog sebelum nya

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

Widget ini berguna untuk mempercepat kembali ke halaman bahagian atas dengan hanya mengklik icon Back Top

Kamera CCTV di gunakan untuk memantau setiap kegiatan di suatu tempat seperti di Mall , Toko , Rumah Dll supaya

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 :

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

<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery-1.7.min.js"></script>
<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.js"></script>
<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.min.js"></script>

<script type="text/javascript">
      $(document).ready(function() {
        var carousel = $("#carousel").featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value
        });

        $("#but_prev").click(function () {
          carousel.prev();
        });
        $("#but_pause").click(function () {
          carousel.pause();
        });
        $("#but_start").click(function () {
          carousel.start();
        });
        $("#but_next").click(function () {
          carousel.next();
        });
      });
    </script>

<style type='text/css'>
/********************
* FEATURE CAROUSEL *
********************/
#carousel-container {
position:relative;

padding:7px;
background-color:#CCC;

}
#carousel {
border:2px solid #fff;
height:300px;
background-color:#CCC;
position:relative;
font-size:12px;
font-family: Arial;
}
#carousel .carousel-image {
height:230px;
width:400px;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
border:0;
display:block;
}
#carousel .carousel-feature {
position:absolute;
top:-1000px;
left:-1000px;
border:2px solid #5d5d5d;
cursor:pointer;
}
#carousel .carousel-feature .carousel-caption {
position:absolute;
bottom:0;
width:100%;
background-color:#000;
}
#carousel .carousel-feature .carousel-caption p {
margin:0;
padding:5px;
font-weight:bold;
font-size:12px;
color:white;
}
#carousel .tracker-summation-container {
position:absolute;
color:white;
right:50px;
top:212px;
padding:3px;
margin:3px;
background-color:#000;
}
#carousel .tracker-individual-container {
position:absolute;
color:white;
right:95px;
top:218px;
padding:0;
margin:0;
}
#carousel .tracker-individual-container li {
list-style:none;
}
#carousel .tracker-individual-container .tracker-individual-blip {
margin:0 3px;
padding:0 3px;
color:#000;
text-align:center;
border:1px solid #5d5d5d;
background-color:#DDD;
}
#carousel .tracker-individual-container .tracker-individual-blip-selected {
color:#FFC600;
font-weight:bold;
border:1px solid #fff;
background-color:#000;
}
#carousel-left {
position:absolute;
bottom:33px;
left:200px;
cursor:pointer;
}
#carousel-right {
position:absolute;
bottom:33px;
right:200px;
cursor:pointer;
}
</style>

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

»» READMORE...

Label: Blog tutorial, Pernak Pernik Blog, Ragam Efek Blog, tips dan trik blog | 16 komentar

Cara Memasang Like Facebook Di Atas Postingan Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Pada postingan sebelum, nya saya pernah berbagi Cara Membuat Like Box Fans Facebook Tersembunyi Di Blog yang berguna untuk membantu meningkatkan kunjungan pada blog dan kali ini saya akan kembali mencoba untuk berbagi Cara Memasang Like Facebook Di Atas Postingan Blog dengan langkah sebagai berikut :

Login dulu ke blogger.
Pilih Template di dasbor blog.
Pilih Edit HTML
Centang dulu Expand Template Widget.
cari kode <data:post.body/> dan kalau Sudah ketemu kemudian Copy dan paste kode dibawah ini tepat dibawah kode <data:post.body/>

<iframe allowTranrparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&action=like&layout=standard&show_faces=false&width=400&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/></div>

6. terakhir klik Simpan Selesai dan lihat hasilnya

»» READMORE...

Label: Blog tutorial, Pernak Pernik Blog, tips trik Facebook | 2 komentar

Cara Membuat Efek Animasi Bayi Merangkak Di Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

BLOG RANGGA

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

»» READMORE...

Label: Pernak Pernik Blog, Ragam Efek Blog | 10 komentar

Cara Membuat Efek Semut Berputar dan Berkeliaran Di Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Blog Rangga

Pada postingan sebelum nya saya pernah berbagi Cara Memasang Widget Back Top Icon Animasi Pada Blog dan pada postingan kali saya pilih judul CaraMembuat Efek Semut Berputar dan Berkeliaran Di Blog yaitu semut nya akan tampak berkeliaran di blog seperti contoh semut yang berkeliaran di postingan ini , Mungkin bisa menipu pengunjung blog karena mungkin menganggap di monitor nya ada semut nyasar he...he....
Kalau sobat pengen mencoba silahkan ikuti langkah-langkah nya di bawah ini :

1. Log In dulu ke blogger
2. Pilih Tata Letak
3. Pilih Salah satu Tambah Gadget
4. Pilih Lagi HTML/Javascript
5. Pasangkan kode ini di halaman HTML/Javascript

<div style="display: scroll; left: 30px; position: fixed; top: 250px;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJcy9lrAREDbtbOlD6fE1tUJLsLsz7k0t6sYEfHtRJy9uKE4eUiO6XT2Lo5u6SAmDxUf0Kyn_wl_JgviJyuQbfsa3IxsPdP7ZhaQG8kvhafHJNnkt8okN_Y3kNP2Ed_UXjDPQB9-q5OJZ/s1600/semut-rangga.gif" /> </div>

6. Simpan dulu kode nya untuk melihat hasil nya di blog .
Perhatian ..!!! Kode yang berwarna merah bisa sobat kreasikan sendiri

Semoga artikel ini menarik dan bermanfaat buat sobat yang berkunjung ke blog ini.

»» READMORE...

Label: Pernak Pernik Blog | 8 komentar

Cara Memasang favicon Animasi Address Bar Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Cara Memasang favicon Animasi Address Bar Blog judul posting yang saya pilih kali ini , sebelum saya akan membahas lebih lanjut tentang cara pasang favicon animasi pada blog sebaik nya saya akan menjelaskan lebih dahulu sedikit tentang favicon .

Favicon adalah gambar atau icon website/blog yang muncul pada Address Bar dan pada dasar nya favicon blogger sudah ada dengan tampilan default nya huruf B berwarna kuning , Nah itulah yang sekarang yang akan di ganti menjadi sebuah gambar animasi yang bisa bergerak di Address Bar pada saat membuka blog

Supaya favicon Animasi berfungsi sebaik nya ikuti saja langkah pasang nya sebagai berikut :

1. Login ke Blogger
2. Pilih Template
3. Klik Html Template
4. Centang dulu Expand Template Widget
5. Cari kode <b:skin><![CDATA[ (gunakan Ctrl+F untuk memudahkan pencarian)
6. Pasang kode dibawah ini tepat diatas kode <b:skin><![CDATA[

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbErgaIbFLbAUbvhgGwxFWDNFZzG9FW-kpwkCdV1r6s4ZEtkhi4eWXSg3PiEd2HPP5FiNyZ6ZIHWJKLFNojC-oBxLiulqn1hmuCsOQntndZFpUbfHozYcoA_B-jHUUh6QMHEGqF8qk0SMH/s1600/animated_favicon.gif' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Keterangan :
kode yang berwarna merah ganti dengan URL gambar animasi pilihan sobat dan bisa juga dapat kan kode animasi nya DISINI

7. Simpan Template untuk melihat hasil nya.

Kalau cara diatas tidak bekerja silahkan tinggal kan kritik dan saran melalui form komentar di bawah ini .

»» READMORE...

Label: Pernak Pernik Blog | 12 komentar

Cara Mudah Pasang Gambar Dan Animasi Melayang Di Sudut Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Pada postingan sebelum nya saya juga pernah berbagi cara Cara Pasang Gambar Animasi Di Pojok Blog yang dapat mempercantik tampilan pada blog , Cara sebelum nya yaitu dengan menggunakan kode HTML yang di pasang di gadget blog .

Kali ini saya akan bagikan cara pasang animasi atau gambar nya dengan menggunakan kode CSS yang akan di pasang di dalam HTML Template blog cara yang ini menguntungkan buat blog karena tidak memberatkan loading pada blog , kalau sobat mau melihat contoh hasil nya klik PREVIEW
Kalau sobat tertarik langsung aja ya sob pada cara pasang nya di blog dengan langkah sebagai berikut :

1. Login dulu ke Blogger
2. Pilih Template
3. Klik Edit Html Template
4. Simpan dulu kode untuk berjaga-jaga seandai nya ada kesalahan pengeditan
5. Centang Expand Template Widget
6. Cari kode ]]></b:skin> ( Gunakan Ctrl+F untuk memudahkan pencarian kode )
7. Letakan kode CSS di bawah ini diatas kode ]]></b:skin> atau sebelum kode ]]></b:skin>

#Animasi-melayang {
    position:fixed;_position:absolute;bottom:0px; left:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

8.Langkah selanjut nya Cari kode </body>
9. Pasang kode Script di bawah ini tepat diatas kode </body>

<div id='Animasi-melayang'>
    <a href='http://blog-rangga.blogspot.com'>
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVytaXTg5xDtMKJwPzgrOEawgD2nDuYQuhhRU3OCFdU-yjKMYWaJ22OPZaDy5wnOhteMlwMbPnxw5kZontMotlVvZLezm-HuqigkJd2Ind3UP2QbiGechB_fZBn6kHu4gWEOUGe6rZL_FL/s1600/cewek+goyang.gif'/></a>
    </div>

Keterangan : kode warna merah silahkan ganti dengan kode URL Gambar atau animasi pilihan sobat

10. Klik simpan untuk melihat hasil nya di blog

Itu lah Cara Mudah Pasang Gambar Dan Animasi Melayang Di Sudut Blog dengan menggunakan kode CSS , semoga artikel ini bermanfaat

»» READMORE...

Label: Pernak Pernik Blog | 12 komentar

Cara Mudah Membuat Tombol Pada Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

blog rangga

Tombol pada blog kebanyakan di gunakan sebagai tombol penanda untuk mendownload file agar mudah terlihat oleh pengunjung blog yang memudahkan untuk membedakan link dangan kalimat lain dalam postingan blog .

Disini saya akan mencoba belajar dan berbagi Cara Mudah Membuat Tombol Pada Blog dengan tampilan sederhana dan disini tombol nya akan dilengkapi juga dengan link supaya tombol nya berfungsi sebagai tautan contoh nya seperti link download

Saya rasa sobat semua sudah tahu apa itu tombol , sekarang kita langsung saja pada cara pembuatan tombol nya

Tombol Biasa

Tombol ini hanya merupakan tombol tanpa di sertai link

kode HTML Tombol blog

<button>Contoh Tombol Biasa</button>

Tombol Dengan link

Tombol akan membuka link saat di klik
Kode HTML Tombol dengan link

<a href="http://blog-rangga.blogspot.com/2012/01/membuat-readmore-otomatis-pada-blog.html"><button>Contoh Tombol Link</button></a>

Tombol Link New Tab

Tombol ini akan terbuka di tab baru pada saat di klik
Kode HTML link new tab untuk blog

<a href="http://blog-rangga.blogspot.com/2012/01/membuat-readmore-otomatis-pada-blog.html" target="blank"><button>Contoh Tombol Blog Berisikan Link</button></a>

Tombol Link Dilengkapi Warna

Tombol link ini membedakan warna dengan background blog

Kode HTML Link New Tab Warna Blog

<a href="http://blog-rangga.blogspot.com/2012/01/membuat-readmore-otomatis-pada-blog.html" target="blank"><button><span style="color: #f21414;">Contoh Tombol Link New Tab Warna</span></button></a></center>

Itulah beberapa contoh cara membuat tombol sederhana pada blog , semoga artikel ini bermanfaat dan jagan lupa kasih saran buat blog ini melalui form komentar di bawah ini.

»» READMORE...

Label: Pernak Pernik Blog | 13 komentar

Cara Mengganti Icon Kursor Blog Dengan Gambar Animasi

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Mau mengganti kursor blog standar yang berbentuk panah dengan icon atau gambar yang sesuai dengan pilihan supaya tampilan blog lebih keren dan indah , kelebihan kursor ini bisa di ganti-ganti kalau sudah bosan dan hanya tampil pada blog sobat yang telah di pasangi kode script nya .

Kalau sobat penasaran atau tidak percaya silahkan coba pasang kode script nya di blog sobat dengan langkah-langkah sebagai berikut :

1. Login dulu di Blogger .
2. Pilih Template di Dasbor Blog
3. Klik Edit HTML Template
4. Centang dulu Expand Template Widget
5. Cari kode </head> di blog ( gunakan Ctrl+F untuk memudahkan pencarian kode ).
6. Pasang kode kursor di bawah ini diatas kode </head> atau sebelum kode </head>

<style type='text/css'>
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif"), auto;}
</style>

Keterangan : Kode warna merah adalah kode gambar atau icon kursor kalau sobat mau mengganti dengan tampilan lain bisa sobat gunakan kode di bawah ini sesuai dengan gambar kursor yang sobat sukai .

http://blog-rangga.blogspot.com/

http://ak.imgfarm.com/images/cursormania/files/4/2308a.gif

http://blog-rangga.blogspot.com/

http://cursors0.totallyfreecursors.com/thumbnails/bullseye-ani.gif

http://blog-rangga.blogspot.com/

http://cursors2.totallyfreecursors.com/thumbnails/tail2.gif

http://blog-rangga.blogspot.com/

http://ak.imgfarm.com/images/cursormania/files/6/3019a.gif

http://blog-rangga.blogspot.com/

http://ak.imgfarm.com/images/cursormania/files/26/13148a.gif

http://blog-rangga.blogspot.com/

http://ak.imgfarm.com/images/cursormania/files/24/12224a.gif

http://blog-rangga.blogspot.com/

http://cursors0.totallyfreecursors.com/thumbnails/rainbow-ani3.gif

http://blog-rangga.blogspot.com/

http://cursors3.totallyfreecursors.com/thumbnails/fireblue.gif

7. Terakhir klik simpan untuk melihat hasil nya diblog .

Kalau sobat mau menambah efek shadow atau bayangan pada hover link blog untuk mempercantik tampilan blog sobat silahkan kunjungi halaman ini " Cara Membuat Efek Shadow/Bayangan Pada Link Blog " dan kalau ada kesalahan kode jangan lupa berikan saran melalui form komentar di bawah ini ya ....dan kalau berhasil jagan lupa juga ucapan nya terima kasih melalui form komentar pertanda sobat telah berkunjung ke blog ini .

»» READMORE...

Label: Pernak Pernik Blog | 51 komentar

Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Gak bisa tidur ni sob.... dari pada timbul pikiran yang negatif nanti bisa merugikan diri sendiri dan orang lain lebih baik berbagi artikel dengan sesama sahabat yang berkunjung ke blog ini mungkin ini bisa membawa manfaat sekalian beramal membantu orang lain melalui sebuah artikel ini he....he....

Kali ini saya coba pilih judul yaitu Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog kenapa saya memilih judul seperti itu ? karena yang akan saya bahas tentang cara pasang gambar atau foto seperti yang bisa sobat lihat contoh screen shot nya seperti diatas tulisan ini , Langsung ja ya sob ....!! nanti kalau kelaman jadi basi

Buat sobat yang mau mencoba untuk blog sobat cara agak gampang-gampang susah alias gasus , tapi kalau sobat teliti cara nya cukup mudah yaitu copy paste kode di bawah ini kehalaman HTML Postingan blog

Keterangan :

Kode yang berwarna Orange atau kuning adalah URL yang bisa sobat ganti dengan URL blog sobat.
Kode warna merah adalah URL Gambar , ganti dengan URL blog yang mau sobat tampilkan
Tulisan warna hijau atau green Ganti dengan judul yang sobat inginkan kan
Tulisan warna biru ganti dengan deskripsi

Kalau ada salah kata mohon dimaafkan dan kalau ada salah kode atau tidak berfungsi mohon di tinggalkan pesan di form komentar di bawah ini , selamat malam dan terima kasih .....

»» READMORE...

Label: Pernak Pernik Blog | 159 komentar

Memperindah Tulisan Blog Dengan Google Web Fonts

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Banyak cara untuk memperindah tampilan blog dan berbagai trik di lakukan para blogger supaya blog nya mendapatkan banyak pengunjung agar mendapatkan peringkat di mata search engine ( SEO ) salah satu nya dengan Memperindah Tulisan Blog Dengan Google Web Fonts .

Font Directory Google ini dapat di gunakan untuk mengganti font website atau blog dengan berbagai jenis dan model yang pasti dapat membuat tampilan blog lebih indah dan keren . Jika sobat penasaran silahkan ikuti cara nya di bawah ini .

Pertama Kunjungi dulu Google Web Fonts
Pilih model fontsnya sesuai keinginan .
Lalu Atur ukuran fonts nya agar seimbang tampilan nya di blog
Pilih Add to Collection dan klik Use untuk mendapatkan kodenya. seperti contoh gambar di bawah ini

blog rangga

Pada halaman berikut sobat akan di berikan kode nya seperti contoh gambar di bawah ini :

blog rangga

Copy kode nya lalu tambahkan garis miring sebelum tag akhir seperti contoh kode di bawah ini :

sebelum ditambah garis

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

sesudah ditambah garis <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>

Terakhir pastekan kode nya di setelah kode <head> atau sebelum kode </head> pada HTML Template blog.

kalau sobat belum tahu cara pasang nya kode ke HTML Template blog bisa melihat " Cara Membuat Link New Tab Otomatis Blog " karena cara pasang nya hampir sama sob.....

»» READMORE...

Label: Pernak Pernik Blog | 0 komentar

Cara Menghilangkan Garis Bawah Pada link Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Berbagai cara di lakukan oleh seorang blogger untuk membuat tampilan blog nya lebih bagus dan indah biar di sukai pengunjung blog salah satu nya mengutak-atik link pada blog seperti menambah efek pada link seperti yang pernah saya coba sebelum nya " Efek Link Pelangi Blog " dan kali ini saya mencoba Cara Menghilangkan Garis Bawah Pada link Blog Karena ingin tampilan blog ini lebih bagus yang biasa nya garis bawah pada link blog selalu ada pada tampilan defauld blog .
Saya mencoba cara yang saya temukan pada sebuah web melalui search engine Google dengan langkah sebagai berikut :

1. Login dulu ke akun blogger sobat.
2. Pilih template.
3. Edit HTML.
4. Cari kode a:hover { ( tekan cntrl + F pada keyboard untuk mempermudah pencarian dan masukkan kode tersebut pada kolom pencarian lalu klik panah di samping nya ).
5. Ganti kode text- decorarion:underlline; yang ada di bawah kode a:hover { menjadi text- decorarion:none;
6. Terakhir Simpan template.

Ternyata cara diatas berhasil menghilangkan garis bawah/underline pada blog ini dan kalau ada sobat yang mau mencoba cara ini silahkan ikuti juga cara di atas ini dan kalau ada pengaruh nya Menghilangkan Garis Bawah Pada link Blog tolong di kasih saran ya sob...

»» READMORE...

Label: Pernak Pernik Blog | 0 komentar

Cara Memelihara Hamster Di Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Binatang lucu seperti hamster rupanya bisa dipelihara seperti yang sobat lihat di blog ini , kalau sobat mau berbaik hati nolongongin ngasih makan arah kan cursor nya di atas hamster lalu klik kiri mouse nya , makanan yang jatuh langsung di makan oleh hamster nya karena hamster nya lagi kelaparan tu .

Kalau sobat mau juga memelihara hamster ini di blog saya akan kasih tapi pelihara baik2 ya sob , kasian tu lau hamster nya nanti tewas gak makan wkwkwkw....wkwkwk

Sebaik nya Hamster nya di pelihara di sidebar blog biar banyak yang ikut bantuin kasih makan di blog sobat
kalau sobat mau hamster nya silahkan Copy kode Cara Memelihara Hamster Di Blog di bawah ini :

<center>
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object></center>

Lalu Paste kode nya di blog , cara nya yaitu ;

Login ke Blogger .
Pilih tata letak >> Edit HTML/Javascript.
Pastekan kode nya ke halaman HTML/Javascript.
Klik simpan untuk melihat Hamster nya di blog .

Kalau Hamster nya udah di blog sobat jangan lupa juga ya kasih komentar nya ..
Sekian dan terima kasih buat yang telah sudi mampir ke blog ini ( blog rangga )

»» READMORE...

Label: Pernak Pernik Blog | 1 komentar

Cara Membuat Kotak Profil Dibawah Postingan Blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Postingan kali ini saya akan berbagi cara membuat Kotak profil atau bisa juga di sebut Author box di bawah postingan blog atau di atas form komentar blog seperti contoh hampir sama dengan kotak profil yang ada di postingan blog ini , dan sekarang langsung saja pada cara memasang nya di bawah postingan blog dengan cara sebagai berikut :

1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan >> centang Expand Template Widget.
3. Cari kode ]]></b:skin> di HTML template blog.
4. hapus kode ]]></b:skin> lalu ganti dengan kode di bawah ini

.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}
]]></b:skin>

5. selanjut nya cari kode <div class="post-footer-line post-footer-line-1"> hapus lagi kode ini ganti dengan kode di bawah ini

<div class="post-footer-line post-footer-line-1">
cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='URL Foto Profil ' width='70'/><b>About Me</b><br/>
Isi dengan Bio Data sobat dll <br/></p>
</div>
</b:if>

Keterangan :Ganti tulisan berwarna hijau dengan URL Foto Profil Ganti dengan Url Photo yang mau ditampilkan , About Me bisa di ganti dengan lain nya , Isi Dengan Bio Data dll ganti dengan sekilas diri sobat dan sebagainya .

6. Terakhir simpan template untuk melihat hasil nya di bawah postingan blog .

»» READMORE...

Label: Pernak Pernik Blog | 2 komentar

Langganan: Postingan (Atom)