Cara Membuat Penanda Postingan Baru di Blog

Haii Sobat New diandiki dah lama nih nggak upload kali ini saya mau shere tentang cara penanda bagaimana cara melihat postingan baru dan postingan lama, ini sangat berfunsi bagi pengunjung blog anda untuk melihat bagaimanakah cara menentukan ini postingan lama atau ini postingan baru.

Kali ini saya minta maaf bahwa saya tidak bisa memberikan demo yang bagus , walaupun begitu hasil yang dihasilkan oleh widget kali cukup memuaskan,untuk demonya anda bisa melihatnya di sini : Demo

Nah kali ini langsung aja kita lihat caranya

1. yang pasti login dulu ke blogger
2. Template > Edit HTML

3. Cari Kode  </head>  
 letakkan kode di bawah ini di atas kode tersebut:

<style>.post{position:relative;}</style>

4. cari kode

<div class='post hentry'>

5. Lalu paste kode di bawah ini di bawah kode tersebut

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'> 
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lt2nsopIDLG6OGgb9C1AEbSxy70PwD_UN4QuIfqfptSasCgNf9qE5L6cMhEhshuxMacX3dZ-P04_SEnD3g86k5LArZGZah_toqb9o6a4xQs03D3uP2ci93LKaX1mFeTnxalsL7Vz6Q/s56/New-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/>
<b:else/>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLAao0tRQBO_Q4JbLXEZfxntm-SGfvzwoZ-dliP-gdVtTCV7D7bMq-VJYGPNHdE0WDaYLmnlYLrUcEAy73hQsS9qJ5-RQCKHiuMfrKbiHXKjFop3LaeCviq0YUWL9LTiFnjnfzU0w0fg/s56/Old-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/> 
</b:if></b:if></b:if>

Ket : Kode yang saya shere kali ini adalah kode yang menujukkan pita hanya di layar homepege saja , jika anda ingin pita juga berada pada layar postingan anda bisa menghapus tanda merah di atas.

6. simnpan, dan lihatlah hasilnya ....

Posted by Unknown 18:54 0 comments

Cara Membuat Efek Foto Bergetar

Efek-efek menarikpada gambar tentu bisa membuat blog kita menjadi lebih bagus, efek yang kali ini saya shere adalah efek foto bergetar. Bergetar, jika kita letakkan kursor ke gambar tersebut maka gambar akan bergoyang ke memutar, keren bukan ??

Untuk contoh gambar dibawah ini bisa anda jadikan contoh, letakkan kursor di pada gambar dibawah ini, dan lihatlah hasilnya.




Baiklah begini caranya :

Caranya:

1. anda masuk ke blogger
2. tata letak--> tambah gadget --> copy paste kode dibawah ini :

<style type="text/css">
.img_OW{
position:relative
}
</style>
<script src="http://otowebsite.googlecode.com/files/Getar.js.txt" type="text/javascript"></script>
<a href="http://newdiandiki.blogspot.com/" target="blank"> <img class="img_OW" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqSfukB-u-tYpUxsRLdGDU6q3_UlNrITItsPt8nrJSBCLVkxScLe-1G25wryswZl6LUXZy3PbP7oKy0puTGJbiFJhW15NlHzpBVimkHjf_tHc6fHjrcsIVapvweznUEWuNnv_QdTlQF6Y/s640/Pemandangan_Air+Terjun_plitvice.jpg" /></a>

Ket :

• Warna Merah anda tukar dengan alamt yang dituju jika di klik 
• Warna Hijau anda tukar dengan URL foto yang ingin di tampilkan 

 3. Simpan

<<<<Widget ini bisa anda jadi kan widget di sidebar ataupun dilatakkan ke dalam postingan >>>

Posted by Unknown 04:32 2 comments

Membuat Cursor Menjadi Bertaburan Bintang

kursor kita akan lebih keren jika ada bindang yang bertaburan ketika kursor di gerakkan, semakin banyak kita mengerakkan kursor kita maka semakin banyak pulah bintang yang bertaburan, bagaimana keren kan ??

Untuk Contoh anda bisa lihat gambar di atas atau melihat demonya

Demo

Baiklah begini caranya :

1. Masuk ke blog
2. tata letak
3. Tambah gadget
4. HTML/ java scrip
5. Copy paste kode di bawah ini

<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hijau.js" type="text/javascript"></script>

Ket :

• Warna merah bisa anda ubah dengan warna kesukaan anda yang ada di bawah ini : 

1.  merah, 
2. ungu, 
3. silver, 
4. kuning, 
5. hitam
6. biru

6. ^ ___ ^  Simpan :)

Posted by Unknown 04:14 0 comments

Cara Membuat Efek Love Bertaburan di Blog

Widget kali ini sangat unik karena widget ini bisa menghasilkan banyak love ( hati ) dari atas blog kita, sehingga membentuk hati yang bertaburan, widget ini bisa mempercantik blog kita sehingga enek di lihat oleh mata pengunjung, Proses terjatuh nya love ini di awali dengan jatuhnya yang lambat dan hingga ke bawah jatuh love ini semakin cepat unik kan ...

Jika anda ingin demonya anda bisa di lihat demonya di bawah ini :

Demo

Jika anda sangat tertarik widget ini selahkan ikuti cara berikut

Cara Memasang:

1. Pertama anda harus masuk ke blog anda
2. Masuk ke Template --> edit HTML
3. Cari kode ini  </body> untuk memudahkan anda silahkan menggunakan Ctrl + F
4. Copy code di bawah ini di atas kode </body>

<script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/>

5. Pratinjau terlebih dahulu, setelah sesuai dengan keinginan anda lalu kita
6. Simpan

Posted by Unknown 04:40 0 comments

Cara membuat recent coment (komentar terbaru) di blog.

Cara memasang recent coment di blog ~ Widget ini sangat di butuhkan di blog kita, untuk memudahkan pengunjung ataupun kita untuk melihat berbagai macam komentar yang baru saja di kirim oleh pengunujung. Recent coment yang saya bagikan kali ini dilengkapi oleh thumbnail ( gambar ) orang yang mengirimkan komentar tersebut, sehingga kita lebih mengenal orang yang mengirimnya, selain itu masih banyak kelebihan recent coment yang kali ini.

Cara memasang :

1. tentunya anda harus login terlebih dahulu ko blog anda.
2. anda pergi ke tata letak --> tambah widget --> HTML java scrip.

3. Lalu anda copy paste code di bawah ini:

 <div style="overflow:auto;width:100%;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar.js"></script>
<script type="text/javascript" src="http://diandiki.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>
</div>

 Ket:

• Warna Hijau anda tukar dengan jumlah recent post yang anda inginkan
• Warna Merah =  digunakan untuk mengunakan gambar atau tidak, jika tidak menggunakan gambar anda tukar kode di atas dengan false
• Warna Orange di tukar untuk ukuran gambar
• Warna kuning di tukar dengan nama blog anda

 4. Jika semua Proses di atas selesai silahkan anda klik tombol simpan
5. Dan selesai :)

Posted by Unknown 04:04 0 comments