Cara Menambahkan Widget Pengunjung (Visitor) Pada BLOG

Mempunyai blog tentunya kita menginginkan tampilan blog kita tersebut indah di pandang mata dan membuat nyaman serta memudahkan pengunjung didalam mencari sesuatu yang di inginkannya. Salah satu widget tersebut adalah widget visitor atau pengunjung blog kita.

Penyedia widget visitor ini banyak bertebaran di internet silahkan anda googling sendiri. Pada tutorial ini saya mengunakan jasa pihak ke tiga yaitu flagcounter. Nah widget visitor yang di tawarkan di flagcounter tersebut kita dapat mengetahui pengunjung blog kita melalui tampilan bendera negara si pengunjung blog kita tersebut.

Adapun cara menambahkan widget tersebut adalah:

A. Silahkan kunjungi flagcounter.com dan tampilanya kira-kira seperti gambar di bawah ini:

Penjelasan gambar di atas adalah:

Tampilan widget ini ada dua pilihan yaitu Top Cauntries dan Mini Counter dan penjelasan gambar yang di lingkari adalah:
1. Menu pengaturan jumlah bendera yang di tampilkan, jumlah kolom, dan penamaan label widget kita.
2. Menu untuk mengatur background, warna teks, dan border widget kita.
3. Menu  untuk mengatur label bendera pengunjung, page view, dan jumlah bendera yang kita koleksi dari pengunjung.

B. Langkah selanjutnya adalah kita isikan di form pengaturan (no.1) sesuai keinginan anda dan tampilan blog anda, seperti contoh gambar di bawah ini:

C. Kemudian isikan juga di form pengaturan (no.2) warna background,teks, dan border yang anda inginkan, seperti gambar di bawah ini:

D. Untuk selanjutnya silahkan contreng di pengaturan (no.3) sesuai yang anda inginkan, seperti contoh di bawah ini :

E. Dan hasilnya untuk tutorial ini adalah seperti gambar ini:

F. Langkan selanjutnya silahkan buat kode script counter flag anda dengan cara klik menu Get Your Flag Counter, kemudian anda akan di suguhkan tampilan form untuk pengisian alamat email anda (anda bisa memilih "Skip atau Continue) yang pada tutorial ini saya memilih "Skip".

Kemudian kita akan mendaptkan kode yang nanti dapat di pasang di widget blog yang kita kelola, dan tampilannya seperti ini:

G. Selanjutnya kita tinggal memasang kode tersebut di blog kita. Silahkan buka dashboard blog anda.

H. Kemudian silahkan buka menu Tata Letak

I. Selanjutnya silahkan klik menu tambahkan gadget

J. Kemudian Silahkan pilih HTML/Java Script

K. Selanjutnya silahkan Copy Pastekan kode yang anda dapatkan dari falg counter dan simpan.

L. Langkah selanjutnya silahkan geser gadget anda untuk diletakkan sesuai dengan keinginan anda.

M. Langkah terahir silahkan simpan perubahan.

Sekian yang dapat saya bagi kepada kalian, Mohon maaf apabila masih banyak kekurangan, Semoga kalian semua semangat lagi dalam membangun Blog dan semoga Tutorial ini bermanfaat bagi kalian semua

Read More

Cara Memasang Widget Jam di Blog

Setelah kemarin Blogaul mengulas beberapa artikel seputar cara-cara mendesain dan menghias blog, diantaranya artikel cara membuat like box facebook di blog, cara memberi burung twitter terbang di blog dan masih banyak lagi, maka kali ini saya kembali posting dengan judul cara memasang widget jam di blog. Widget jam merupakan widget yang sering dipakai oleh para blogger untuk menghias blog nya karena widget jam ini selain untuk mempercantik blog juga bisa menambah nilai dari blog itu sendiri karena dengan memasang widget jam ini akan membuat setiap visitor dapat melihat waktu saat ini sehingga mereka bisa mengontrol aktivitas mereka. Sebenarnya memasang widget jam cukup memberatkan blog apabila kita sudah memasang banyak widget di blog kita, tapi kalau baru sedikit widget juga tidak masalah. Apakah sobat tertarik untuk memasang widget jam tersebut? Bila tertarik untuk memasangnya, silahkan ikuti tutorial berikut:

1. Masuk ke situs penyedia jam, saya kasih contoh clocklink.com, silahkan masuk disini.
2. Setelah sobat sampai di situs tersebut, silahkan sobat lihat bagian sidebar sebelah kiri situs tersebut. Disitu ada beberapa pilihan aneka jenis jam yang bisa sobat pilih. Misal analog, digital, animal dan lain-lain. Silahkan sobat pilih sesuai keinginan sobat.
3. Setelah sobat pilih, maka akan muncul aneka bentuk jam yang bisa dipilih.
4. Setelah sobat memilih salah satu jam, maka selanjutnya klik View HTML Tag di bawah gambar jam yang sobat suka.
5. Maka akan terbuka halaman baru persetujuan, klik Accept untuk mendapatkan kodenya.
6. Atur kode area berdasarkan area di daerah sobat.
7. Setelah itu sobat akan mendapatkan kode html dari jam tersebut, copy saja.


Lantas, bagaimana cara memasang widget jam ini di blog kita? Berikut caranya:
1. Masuk dashbor blog sobat.
2. Klik Tata Letak.
3. Klik add gadget/tambah gadget di sidebar dimana sobat akan menempatkan jam tersebut.
4. Pilih HTML/Java Script.
5. Copast kode html jam tadi di kotak baru tersebut lalu klik simpan.
6. Silahkan lihat blog sobat.
Akhirnya selesai juga tutorial mengenai cara memasang widget jam di blog kita. Semoga bermanfaat untuk semua.

Read More

Cara Mengganti Kursor Penunjuk di Blog

Pada kesempatan saya akan menjelaskan cara merubah kursor di blog. Biasanya sebuah kursor pada satu blog hanyalah berbentuk panah. Namun, buat kamu yang bosan dengan tampilan kursor bawaannya, dapat menggunakan gambar lain sebagai kursor penunjuk untuk blog mu. Selain dapat mempercantik tampilan blog, pengunjung akan lebih mudah untuk meng-klik apapun apa yang ada didalam blog mu.
Oke, kita langsung ke caranya:

1. Login ke akun blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
Carilah kode yang kurang lebih seperti berikut ini:


body {
margin:0;
background:#cccccc;
color:#000000;
text-align: center;
}

a:link {
color:$linkcolor;
text-decoration:none;
}

a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

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


3. Kemudian tambahkan kode Kode di bawah ini Kemudian tambahkan kode cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPYOtUXE3ASLdry0KvRqLJvT5UZlwqjWc_-TzHNAB9WfioD_-aoET2wyItUHx8e3cpU3wV2thrxf7alGAj1daWesVRXA-d6f_2JnqKHeWvfHImGVXCL5qQMVMZyNGz14ZL_9XqTSgTSAN/s1600/cursorblue.png), progress; sehingga menjadi seperti ini:


body {
margin:0;
background:#cccccc;
color:#000000;
text-align: center;
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPYOtUXE3ASLdry0KvRqLJvT5UZlwqjWc_-TzHNAB9WfioD_-aoET2wyItUHx8e3cpU3wV2thrxf7alGAj1daWesVRXA-d6f_2JnqKHeWvfHImGVXCL5qQMVMZyNGz14ZL_9XqTSgTSAN/s1600/cursorblue.png), progress;
}

a:link {
color:$linkcolor;
text-decoration:none;
}

a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

a:hover {
color:#000;
text-decoration:underline;
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPYOtUXE3ASLdry0KvRqLJvT5UZlwqjWc_-TzHNAB9WfioD_-aoET2wyItUHx8e3cpU3wV2thrxf7alGAj1daWesVRXA-d6f_2JnqKHeWvfHImGVXCL5qQMVMZyNGz14ZL_9XqTSgTSAN/s1600/cursorblue.png), progress;
}


Kode cursor yang berada pada tag body { adalah untuk mengganti cursor default pada blog kita, sedangkan kode cursor yang berada pada tag a:hover { adalah untuk cursor pada link. kamu bisa merubah url ( kode warna Merah ) gambar untuk cursor pada blog sobat sesuai dengan keinginan kamu,  bisa cari url cursor di:
http://www.totallyfreecursors.com/

http://www.123cursors.com/ dan
http://www.cursors-4u.com/

Nah, sekian posting saya mengenai cara mengganti kursor penunjuk di blog. Semoga bermanfaat :)

Read More

Membuat Anti Copy-Paste Pada Blog

Membuat blog menjadi anti copy paste merupakan salah satu cara menjaga keamanan/privasi blog kita. Selain blog, kita juga bisa bisa memproteksi elemen-elemen atau widget-widget blog kita dari orang-orang jahil, misalnya memproteksi counter histats. Baca: cara private counter histats. Nah, kali ini saya akan membahas mengenai trik mengatur blog menjadi anti copy paste menggunakan sript. Oke, langsung saja.. Cara kerja script ini adalah menonaktifkan fungsi blok pada posting sehingga copy paste terhadap blog kita dapat diminimalisir. Tapi saya sarankan jika blog sobat bertema "blog tutorial" sebaiknya jangan menggunakan script ini, karena script/kode yang ada pada tutorial sobat tidak akan bisa di blok. Baik langsung berikut cara mengubah blog menjadi anti copy paste:

1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Cari kode </head> (gunakan ctrl+f).
4. Copy paste script berikut tepat di bawah kode nomor 3 tadi

<SCRIPT type="text/javascript">

if (typeof document.onselectstart!="undefined") {

document.onselectstart=new Function ("return false");

}

else{

document.onmousedown=new Function ("return false");

document.onmouseup=new Function ("return true");

}

</SCRIPT>

Simpan template dan lihatlah hasilnya.

Gunakan script ini jika konten blog sobat memang mengandung hak cipta atau bersifat pribadi yang tidak ingin di copy paste. Nah demikian cara membuat anti copy paste di blog, semoga bermanfaat!

Read More

Mengganti "Older Posts" Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini

1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'> 
var pageCount=5; 
var displayPageNum=5; 
var upPageWord =&#39;Previous&#39;; 
var downPageWord =&#39;Next&#39;; 
</script> 
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> 
</b:if> </b:if> 
<!--Page Navigation Ends -->



Kalau sudah silahkan dilihat hasilnya.

Read More

Cara Pasang Flash di Blog

Untuk memasang flash ke dalam blog cukuplah mudah. Yang kamu perlukan yaitu file flash yang biasanya ber-extensi .swf lalu upload file tersebut ke hosting. misal di geocities.com ato 000webhost ato tempat hosting lainnya. File animasi flash tersebut bisa dijadikan hiasan pada blog ato bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif. Untuk memasang flash pada blog caranya sebagai berikut :

1. Login ke blogger kemudian pilih menu "Layout".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
3. Pilih "HTML/Javascript" kemudian taruh script berikut :

<embed src="http://blogoholic.info/wellcome.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>


Contoh :

* Ganti "http://blogoholic.info/wellcome.swf" dengan alamat file flash kamu yang telah ditaruh di hosting. 

* Ganti width="500" height="100 dengan ukuran dari file flashmu.

Read More

Mengubah Komentar Lama Menjadi Baru

Komentar sudah menjadi hal yang tak bisa dipisahkan dengan postingan, seperti ibarat motor dengan bensin, tetapi pada postingan saya kali ini akan membahas bagaimana cara mengubah bentuk komentar lama blogger menjadi komentar baru blogger yang lebih canggih dengan ada photo author disebelah post comments.

Apabila Anda menggunakan template lawas photo author ini tidak muncul selayaknya yang ada pada template baru blogger yang ada photo author disebelahnya.

Coba lihat gambar dibawah ini untuk membedakan komentar lawas dengan komentar baru.

Nah terlihat skema di atas ada perbedaan dengan ditambahi foto komentator.

Apakah Anda ingin mengubahnya ?

Langkah pertama masuk pada menu "Settings" lalu "Comments" dan pastikan pilih "YES" untuk pertanyaan "Show profile images on comments?" lalu SAVE

langkah kedua masuk menu Edit HTML dan centang box "Expand Widget Templates"

Lalu cari kode dibawah ini


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


Pahami dan sesuaikan codenya untuk template Anda.

Lalu Ganti code diatas dengan code dibawah ini

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p>

<data:comment.body/>

<span class='interaction-iframe-guide'/>

</p>

</b:if>

</dd>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

</div>

Nah tinggal SAVE dan lihat hasilnya deh.

Dan apabila ada pertanyaan silahkan lontarkan saja komentar disini, mulai sekarang saya semangat untuk membalas komentar-komentar Anda.

Read More

Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :
Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Read More

Menampilkan Widget Di Halaman Tertentu

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

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

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code
<b:if cond='data:blog.pageType == data:blog.homepageUrl'>


Untuk menempatkan di halaman Archive saja
<b:if cond='data:blog.pageType == "archive"'>


Untuk menempatkan dihalaman item/posting saja digunakan code
<b:if cond='data:blog.pageType == "item"'>


Dan untuk pada halaman pages atau static page blogger digunakan
<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini
<b:if cond='data:blog.url == "URL_HERE"'>


Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

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

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

Read More

Kumpulan Widget Animasi Yang Lucu dan Keren Untuk Blog

 Cara Memasang Widget Animasi Yang Lucu dan Keren di Blog -
Banyak hal yang dapat membuat sebuah blog dikatakan menarik, selain dari isi content atau postingan , ternyata ada hal - hal lain yang bisa membuat si blog terlihat lebih menarik dan tentunya banyak pengunjungnya. Nah selain postingan, disain dan animasi / pernak - pernik blog ternyata dapat meningkatkan performa dari suatu blog.. ga percaya ? cobalah anda berkunjung kesuatu blog yang disainnya polos hanya berisikan artikel saja kemudian bandingkan dengan blog yang berisi postingan menarik dengan disain yang menarik pula . Pasti kita akan lebih betah berlama-lama di blog yang berisi artikel menarik dan disain / animasi yang menarik itu bukan ? tentunya. Dan, memberikan efek animasi di blog itu ga sulit kok, dan pilihan animasinya pun beragam bergantung selera. . nah dibawah ini ada beberapa contoh widget animasinya. Kalo udah cocok, berikut langkahnya :

 Cara Memasang Widget Animasi Di Blog

1.Copy script yang ingin anda munculkan animasinya
2.Login ke Blog
3.Pilih Rancangan
4.Tambah gedget
5.Pilih edit html atau script,
6.Pastekan script tadi
7.Lalu save.. “pasti akan langsung  muncul animasi yang anda pilih tadi”

selamat mencoba..

1.helicopter

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://agungfajarriyadi.blogspot.com//" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="widget animasi lucu bergerak atau gif"  alt="animasi bergerak naruto dan onepiece"/></a><small><center><a href="http://agungfajarriyadi.blogspot.com//2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

2. Ekspresi Muka

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com//" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/742/th/74214.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com//2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Ekspresi</a></center></small></div>

3. Kodok mata gede

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com//" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/466/th/46606.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com//2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

4 Spiderman

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com//" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/3/th/312.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com//2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

5.Pig

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com//" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/110/th/11046.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com//2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

6. Muka senyum

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com//" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/197/th/19769.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com//2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

7. monyet

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com//" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/458/th/45845.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com//2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

 8.Doraemon

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

9.Spongebob

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

10.Panda

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

11.Monyet loncat

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53966.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

12.Anime cewek

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/228/th/22801.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

13.Saringgan

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

14.Naruto berubah

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

15.Gajah loncat

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget-Animasi</a></center></small></div>

17.Kucing tidur

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>

18.Ayam betelur

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://agungfajarriyadi.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020541.gif" title="Click to get more." /></a><small><center><a href="http://agungfajarriyadi.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget</a></center></small></div>

Read More

Tips Cara Pasang Iklan Disamping Blog

Cara pasang iklan disamping blog –Untuk mendapatkan penghasilan dari blog dapat dilakukan dengan beberapa cara diantaranya dengan memasang iklan di blog. Banyak cara dan ruang untuk memasang iklan di blog. Misalnya disidebar atas atau bawah, di header blog, di dalam postingan atau iklan popup bahkan berada dibawah atau disamping blog.

Khusus postingan hari ini, masterriyadi dot com akan membagikan Cara pasang Iklan di samping Blogdengan mudah.

 Berikut langkah -langkah yang akan kita lakukan :1. Pada dasbor blog sobat klik menu Rancangan –> Edit HTML–> beri tanda centang pada Expant Template Widget

2. Temukan kode ]]></b:skin>3. Copy kode CSS berikut letakkan diatas kode ]]></b:skin>

#iklan_endi {

position:fixed;_position:absolute;top:0px; right:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

KETERANGAN :

Sesuaikan dengan keinginan sobat. Top-right = kanan atas ; top-left = kiri atas ; untuk posisi dibawah ganti kode top:0px; right:0px; dengan bottom:0px; , jadi kode lengkapnya seperti berikut :

#iklan_endi {

position:fixed;_position:absolute;bottom:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

4. Jika sudah siap dengan kode CSSnya, sobay cari kode </body>

5. Lalu copy kode dibawah dan paste di atas </body>

<div id=”iklan_endi”>

Kode iklan 120 x 600 disini

</div>

 KETERANGAN:

Jangan lupa pharse kode iklan sobat baru kemudian dipasang pada script diatas..

Read More

Tips Cara Membuat Tabel pada Postingan

Jika Anda ingin membuat suatu hal yang penting dikelilingi oleh sebuah tabel.. atau Anda memerlukan sebuah tabel yang ingi anda letakkan pada postingan anda tetapi anda tidak tau bagaimana caranya membuat sebuah tabel ada pada postingan anda.

Jika Anda maenginginkan sebuah tabel seperti yang ada pada gambar diatas, cara mudah kok anda tinggal Mengikuti langkah-langkah berikut :

Saat membuat postingan baru anda ditunjukkan pada dua cara penulisan yaitu :

Compose

Edit HTML

Pilihlah Edit HTML dan tuliskan kode berikut:

<table align=”center” Border=”2″>

<tr>

<td>

Kata-kata yang ingin ditulis

<td/>

<tr/>

<table/>

Read More

Tips Cara Mengganti Title Blog Dengan Title Postingan

untuk blog kita lebih terkenal dan dikenal dengan judul postingan kita maka itu dapat diganti dengan cara sebagai berikut..:
1. Masuk ke –>Edit Html anda.
2. Cari kode <title><data:blog.title/></title&gt;
3. Ganti kode tersebut dengan :

<b:if cond=’data:blog.pageType == “index”‘><title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Read More

Tips Menampilkan Video Pada Blog

•   Langkah 1:

1. Masuk ke situs Youtube.com Jika mau mengambil video dari situs tersebut.
2. Pilih Video yang ingin anda tampilkan.
3. Lihat pada gambar ada tulisan embed.. Copy dan pastekan kode tersebut kedalam Blog anda

4. Selesai..

• Langkah 2 :

1. Masuk ke Blog anda
2. Video Dalam postingan
3. Masuk ke postingan baru.. pilih Edit HTML pada sudut atas Box.
4. Pstekan Kode tadi Ke dalam postingan tersebut.
5. Klik Publikasikan
                        Lihat hasilnya.

• Video dalam Widget

1. Masuk ke Layout dan pilih Page Element.
2. Pilih Add Page Element dan akan telihat kotak Conten. Pastekan kode tadi kedalam kotak Konten Tersebut.
3. Klik save.
Dan Lihat Hasilnya.
Selesai..

Mudah Kan
Ternyata Mudah, ya tidak sesusah yang di pikirkan, jadi tunggu apalagi silahkan coba pada blog anda.

Read More