Membuat Cursor Bertabur Bintang

Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik dan unik. Diantaranya dengan modifikasi template yang sudah ada, memasang ragam widget dan ragam aksesoris blog termasuk mengganti tampilan cursor.  Pernah lihat suatu blog dengan cursor bertabur bintang? Pingin mencobanya? Mudah kok, ikuti langkah-langkah berikut :

• Login ke blogger.
• Pilih Tata Letak
• Tambahkan gadget HTML/JavaScript
• Pilih kode taburan bintang dibawah ini.

Bintang HIJAU

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>

Bintang UNGU <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js' type="text/javascript"></script> Bintang MERAH <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js' type="text/javascript"></script> Bintang BIRU <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js' type="text/javascript"></script> Bintang PUTIH <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

• Copy salah satu kode yang anda pilih.
• Kemudian Simpan.

Mudah sekali bukan. Jika anda menyukai artikel diblog ini, silahkan Klik Join This Site or Berlangganan gratis via email, dengan begitu anda akan mendapatkan kiriman artikel setiap ada artikel yang terbit di Dunia Herni Chand.

Cara Membuat Menu Slider Versi 2 Menggunakan JQuery

• Langkah pertama pada dasbor klik Template => edit  HTML=> cari kode ]]></b:skin>
• letakkan kode berikut diatas kode ]]></b:skin> : 

Kode

#slider    {

background:url(YOUR-LINK-HERE/slide.png);

height: 254px;

overflow: hidden;

position: relative;

margin: 5px 0;

}

#mover {

width: auto;

position:absolute;

overflow:hidden;

}

.slide {

padding: 20px 0px;

width: 1000px;

float: left;

position: relative;

height:200px;

}

.slide h2 {

font-family:georgia, Helvetica, Sans-Serif;

font-size: 24px;

color: #ac0000;

padding:0px 0px 0px 30px;

margin:0px 0px;

width:500px;

overflow:hidden;

}

.slide h2 a:link, .slide h2 a:visited  {

color:#fff;

background-color: transparent;

}

.slide h2 a:hover  {

color: #ddd;

background-color: transparent;

}

span.slmet {

color: #ee0909;

font-size: 10px;

font-family:Tahoma, georgia, Helvetica, Sans-Serif;

line-height: 20px;

width: 500px;

padding:0px 0px 0px 30px;

margin:0px 0px;

text-transform:uppercase;

}

.slide p {

color: #999;

font-size: 12px;

font-family:georgia, Helvetica, Sans-Serif;

line-height: 20px;

width: 500px;

padding:0px 0px 0px 30px;

margin:0px 0px;

}

.slide img {

position: absolute;

top: 20px;

left: 577px;

background:#fff;

padding:10px 10px;

}

#slider-stopper {

position: absolute;

font-family: Georgia, Helvetica, Sans-Serif;

top: 113px;

right: 65px;

color: #AC0000;

padding: 3px 8px;

font-size: 14px;

text-transform: uppercase;

z-index: 1000;

}

Langkah ke dua letakkan script JQuery dan kode berikut sebelum </head>

Kode

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/jquery-1.2.6.js' type='text/javascript'/>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/slider.js' type='text/javascript'/>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {

var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=" sfhover";

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Cari kode berikut: 

Kode

<div id='header-wrapper'>

..........

.........

</b:section>

Letakkan kode berikut tepat di bawah kode tadi : 

Kode

<!-- Casing -->

<div id='casing'>

<!-- Slider -->

<div id='slider'>

<div id='mover'>

<div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2010/01/cara-membuat-menu-dtree.html'>Cara Membuat Arsip Seperti Menu Dtree?</a></h2> <p>Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image disamping</p> <img alt='Ngeblog Offline' src='http://i50.tinypic.com/dbk4tv.jpg'/>

</div> <div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2009/07/cara-membuat-menu-scrolling.html'>Cara Membuat Menu Scroll</a></h2> <p>Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh disamping!</p> <img alt='Tab View Slide' src='http://i45.tinypic.com/b50h0y.jpg'/>

</div> <div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html'>Membuat menu tab view</a></h2> <p>Bagaimana cara membuat menu tab view sederhana seperti gambar disamping..</p> <img alt='tab view sederhana' src='http://i50.tinypic.com/25fimhu.jpg'/> </div> </div>

<!-- /Mover --> </div>

<!-- /Slider --> </div>

<div class='clear'/>

• Silahkan edit tulisan yang berwarna biru, merah dan hijau dengan link, judul dan deskripsi postingan anda !
• Klik Simpan.

Jika anda menyukai artikel diblog ini, silahkan Klik Join This Site or Berlangganan gratis via email, dengan begitu anda akan mendapatkan kiriman artikel setiap ada artikel yang terbit di Dunia Herni Chand.

Cara Memasang Widget Top Komentator

Ok langsung saja saya kasih tau bagaimana ini bisa terjadi. Let's Go !!!!

• Login ke blogger lalu pada dasbor pilih menu "Layout"/ Tata Letak
• Pada elemen halaman=> Klik Tambah Gadget=> HTML=> Letakkan kode berikut pada kolom konten

KODE

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ol>');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

if(obj.value.items[i].link == "")

var item ="<li>" + obj.value.items[i].title + "</li>";

else

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ol>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Famatullah83.blogspot.com&num=15&filter=amatullah" type="text/javascript"></script>

<small><div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://duniahernichand.blogspot.com target="_blank" title="widget top komentator">Add this widget to your blog</a></div></small>

Catatan: Ganti tulisan yang berwarna hijau dengan url blog sobat dan nama author. 

• Klik simpan.

Nah gimana tutorial kali ini, simpel bukan. Jika anda menyukai artikel diblog ini, silahkan Klik Join This Site or Berlangganan gratis via email, dengan begitu anda akan mendapatkan kiriman artikel setiap ada artikel yang terbit di Dunia Herni Chand.

Raisa Andriana

Raisa Andriana yang lahir 6 Juni 1990 merupakan salah satu singer female pendatang baru di industri hiburan musik Indonesia. Menyanyikan lagu A Whole New World Ost. Dari film kartun ALADDIN ketika umurnya masih 3 tahun dan juga lagu yang pertama kali Raisa nyanyikan.

• Nama : Raisa Andriana
• TTL : Jakarta, 6 Juni 1990
• Zodiac : Gemini
• Jenis musik : Jass, Blues, R&B, Soul
• Pekerjaan : Penyanyi
• Sekolah : Universitas Bina Nusantara International 
• Sosmed : Twitter, My Space , 

Raisa merilis debut single Serba Salah secara independen. Serba Salah merupakan lagu yang memiliki genre pop dan sedikit sentuhan RnB. Single Serba Salah ini dirilis secara digital pada website social media.Dengan menggunakan namanya sendiri, Raisa mengeluarkan album pertamanya pada tahun 2011 yang mana album tersebut diproduksi oleh Solid Records dan Universal Music Indonesia. Pada proses rekaman, para produser turun tangan langsung. Segala instrument musik direkam oleh Asta, Handy dan Rio dan mereka juga yang bertindak sebagai vocal director.

Daftar Lagu Album Raisa Andriana : 

• Melangkah
• Serba Salah
• Cinta Sempurna
• Inginku
• Apalah (Arti Menunggu)
• Bersama
• Could It Be
• Terjebak Nostalgia
• Pergilah
• Bersinar
• Hari Bahagia
• Pemeran Utama
• Teka Teki
• Let Me Be (I Do)
• Katakan!
• LDR
• Bye - Bye
• Mantan Terindah

Pengharagaan Raisa Andriana :

• OkeZone : Raisa Andriana, Artist of the Year 2013
• Most Wanted Female OMG! Awards 2013
• Ardan Group Awards 2013
• Nominasi World Music Awards 2013
• Anugerah Musik Indonesia (AMI) Awards 2012 : Penyanyi Pendatang Baru Terbaik Terbaik - Serba Salah
• Anugerah Musik Indonesia (AMI) Awards 2012 : Penyanyi Wanita Terbaik
• Anugerah Musik indonesia (AMI) Awards 2012 : Grafis Desain Album Terbaik Terbaik

Nah sekian biodata mengenai Raisa Andriana, Jika anda merasa biodata yang saya berikan kurang lengkap mohon isi dikolom komentar. Jika anda menyukai artikel diblog ini, silahkan Klik Join This Site or Berlangganan gratis via email, dengan begitu anda akan mendapatkan kiriman artikel setiap ada artikel yang terbit di Dunia Herni Chand.

Cara Menambahkan Basmalah dan Hamdalah di postingan

Hampir setiap muslim pasti mengenal kalimat basmalah dan hamdalah. Kalimat pendek ini biasanya dipakai ketika akan memulai suatu pekerjaan dan usai mengerjakannya. Karena bacaannya yang pendek ini pula, banyak orang yang menyepelekan kalimat ini.Padahal jika dikaji lebih mendalam, disamping sebagai sarana meraih cinta Allah SWT, ternyata kedua kalimat ini mengandung kekuatan yang luar biasa dalam meraih kesuksesan dan keberkahan hidup. Nah berikut saya berikan tutorial yang simpel buat para pemula bloging. 

• Setelah login ke akun blogger anda Pada dasbor, klik  template 
• Edit HTM
• Klik tab drop down Lompat ke widget >> Blog1 >> Klik tanda panah kecil disamping kode dengan id Blog1 Klik tanda panah kecil hitam disamping kode <b:includable id='post' var='post'>
• Click Ctrl+F >> cari kode <data:post.body/>

Untuk menambahkan bismalah diawal posting tambahkan kode berikut diatas <data:post.body/>

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; الر&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>

Untuk menambahkan hamdalah diakhir postingan tambahkan kode berikut dibawah <data:post.body/>

<div align='center'><span style='font-size: medium;'>ٱل&#1618;ح&#1614;م&#1618;د&#1615; ل&#1616;ل&#1614;&#1617;ه&#1616; ر&#1614;ب&#1616;&#1617;
ٱل&#1618;ع&#1614;&#1648;ل&#1614;م&#1616;ين</span></div>

• Simpan template dan lihat hasilnya di blog anda.

Jika anda menyukai artikel diblog ini, silahkan Klik Join This Site or Berlangganan gratis via email, dengan begitu anda akan mendapatkan kiriman artikel setiap ada artikel yang terbit di Dunia Herni Chand. 

Cara Membuat Galery Photo Keren Diblog

Dalam tutorial kali ini saya ingin membagi ilmu mengenai cara membuat gallery photo keren diblog dengan menggunakan CSS3 dan tanpa JavaScript. Ya, anda tidak salah membaca, benar tanpa javaScript. Kalau pada tutorial sebelumnya membuat image slider menggunakan javascript maka kali ini tidak ada penggunaan script sama sekali, murni hanya dengan properti CSS3 seperti, user-select, box-sizing, transition, box-shadow dan transform.
Pada gallery photo ini anda bisa mengklik image/photo untuk mendapatkan efek zooming dan anda bisa menggunakan tombol tab pada keyboard untuk melihat photo selanjutnya. Penasaran? Langsung saja kita sedot gan. 

Widget Popular Posts Dengan Multi Colored Style

Nah Kali ini saya akan memberikan tips mengenai Widged Popular Post. Tidak usah panjang lebar, langsung saja kita ke titik permasalahan. hehehe :D

1. Seperti biasa login ke akun anda.
2. Pilih edit HTML >> Cari kode ]]></b:skin>
3. Setelah ketemu letakkan kode dibawah ini tepat diatas kode nomor dua tadi : 

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

      4.  Simpan 

Tahap Kedua 

1. Pada menu tata letak >> Pilih add gadget/tambahkan gadget >> Pilih Entri populer/Popular posts >> hilangkan tanda centang cuplikan gambar dan keterangan, tampilkan minimal 9 posts.
2. Simpan dan lihat hasilnya diblog anda!
3. Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada blog. 

Jika anda menyukai artikel diblog ini, silahkan Klik Join This Site or Berlangganan gratis via email, dengan begitu anda akan mendapatkan kiriman artikel setiap ada artikel yang terbit di Dunia Herni Chand.

Semoga bermanfaat. :)