Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan

Sabtu, 04 Agustus 2012

Cara Cek Kecepatan Blog


بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Cek Kecepatan Blog - Berbeda dengan widget Cara Mengecek Berat Blog, tapi yang ini adalah kecepatan blog kita (bukan beratnya).

Karena baru-baru ini Google telah meluncurkan beberapa fitur baru dan salah satunya adalah tool untuk mengecek berat blog.

Ok yuk.. mari buruan kita coba nih, ni saya baru nyoba dan alhamdulillah hasilnya lumayan memuaskan.... hehehe

Ok langsung saja, Cara Cek Kecepatan Blog !
1. Buka Google Page Speed Online

2. Masukkan url blog sobat pada kolom yang tersedia

3. Tunggu sebentar

4. Akan muncul halaman yang memberitahu hasilnya

NB. Hasil tersebut berupa angka 1-100, jika hasil semakin mendekati 100 maka kecepatan blog sobat sudah bagus.

Pengen tahu gimana agar kecepatan blog semakin tinggi??
Yups, yaitu dengan memilih Template yang simpel-simpel aja dengan begitu kecepatan blog sobat akan lebih tinggi.

Ok. selamat mencoba..
Share:

Cara Memasang Jadwal Imsakiyah 1433 H

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Memasang Jadwal Imsakiyah 1433 H - Saya akan memberikan Tutorial Cara memasang jadwal imsakiyah 1433 H. sebenernya cara membuatnya juga tidak sulit, kita hanya perlu memasukkan sedikit kode html. Jadi, bagi sobat yang ingin membuat Jadwal Imsakiyah pada blog sobat, sobat ikuti langkah berikut ini :


1. Login ke Blogger
2. Buat Entri baru/New Post
3. Lalu copy kode ini dimode "HTML"

<iframe class="mp4downloader_tagChecked " height="800" src="http://www.rukyatulhilal.org/imsakiyah/" width="480"></iframe>

4. Lalu Klik Terbitkan Entri. dan liat hasilnya

Semoga Bermanfaat.. 

Share:

Kamis, 02 Agustus 2012

Widget Hari Raya Idul Fitri Untuk Blogger

Widget Hari Raya Idul Fitri Untuk Blogger - Kemarin saya pernah posting  Jadwal Puasa Ramadhan 2012 dan Jadwal Imsakiyah 1433 H Untuk Blogger, dan kali ini saya akan berbagi Widget Hari Raya Idul Fitri Untuk Blogger, walaupun Hari Raya Idul Fitri masih jauh, tapiii... tak apalah.. :D

Tak terasa sudah 12 hari kita menjalankan perintah Allah yaitu menjalankan ibadah puasa dibulan Ramadhan tahun 1433 H. Dibulan ini kita harus memperbanyak amal dan ibadah kita agar dosa - dosa kita yang terdahulu diampuni oleh Allah SWT. Widget Hari Raya Idul Fitri Untuk Blogger ini tentunya akan memperindah blog kita, dengan berbagai macam ucapan tentang Hari Raya Idul Fitri akan meramaikan blog kita.
Berikut Kumpulan Widget Hari Raya Idul Fitri Untuk Blogger :

Widget Hari Raya Idul Fitri [1]



Kode :

Widget Hari Raya Idul Fitri [2]

 

Kode :

Cara Pemasangannya :
  • Login ke Blogger
  • Tata letak => Tambah Gadget
  • HTML/JavaScript
  • Copy salah satu kode diatas
  • Simpan Template
Share:

Senin, 16 Juli 2012

Pasang SEO Smart Link Untuk Blogspot (Update)

Belajar SEO Blogspot - Pernah dengar plugin SEO smart link ? sebuah plugin untuk wordpress yang fungsinya mengubah setiap kata yang kita tentukan, menjadi sebuah link. Kini plugin tersebut dapat kita pasang juga di blogspot.


seo smart link blogger
Semua kata "SEO" akan otomatis diconvert menjadi link
Akan tetapi sudah sejak tahun lalu script ini sudah tidak bekerja.
Tapi tenang dulu, sekarang scriptnya sudah diperbaiki berkat bantuan seorang teman, Ganda Manurung namanya. Beliau adalah salah seorang programmer indonesia terbaik. Beliaulah salah seorang sahabat blogger yang banyak memberikan saran2 bermutunya kepada juragan. Terimakasih sekasih2nya kepada beliau. Ikuti tutorial memasang seo smart link plugin untuk blogspot/blogger dibawah ini.

Bagaimana cara kerja SEO Smart link untuk blogspot ini ?

Script ini akan membaca setiap kata pada setiap posting. Contohnya, jika sobat memasukkan kata "SEO" pada script tersebut maka otomatis pada semua halaman yang terdapat kata "seo" akan di link ke alamat url yang telah sobat tentukan.

Apakah script autolink ini melanggar google guidelines ?

Tidak, selama jumlah link yang sobat masukkan pada kode autolink masih dalam tahap wajar. Rekomendasi saya, cukup 1 link saja.

Bagaimana cara memasang kode autolink ini di blogspot kamu ?


  1. Step pertama, Login ke blogger.com lalu ke design(rancangan).
  2. Menuju tab edit html. Tekan ctrl+f di keyboard. Dan cari kode </body> 
  3. Lihat kode scriptnya disini (klik untuk melihat di tab baru)
  4. Setelah halaman script terbuka silahkan copy pastekan semua kode di script tersebut tepat diatas kode </body>
Keterangan :
  • Lihat bagian paling akhir kode dan ganti SEO dengan kata atau kata kunci yang sobat pilih.
  • dibawahnya Ganti http://heninurardian.blogspot.com/ dengan alamat url yang dituju.
Semoga bermanfaat.. :)
Share:

Minggu, 15 Juli 2012

Membuat Related Post Thumbnail dan Kotak Feedburner

Artikel ini menjawab pertanyaan beberapa teman blogger yang ingin membuat fitur Related Post Thumbnail sekaligus dengan kotak Feedburner. Fitur related post thumbnail dan kotak feedburner ini menjadi satu bagian utuh dan letaknya biasanya di bawah postingan. Sebelumnya saya juga pernah membahasnya pada tutorial menambah dua kolom di bawah postingan, tapi hasilnya terlalu sederhana dan mungkin kurang menarik bagi minat pengunjung untuk berlama-lama di blog, apalagi perkembangan blogger sekarang ini, banyak sekali tutorial baru dengan menggunakan jQuery sehingga blogger menjadi salah satu CMS yang tidak bisa dipandang sebelah mata.

related post feedburner

Sebenarnya saya masih pengin berlama-lama ngobrol ngalor ngidul, tapi karena nanti malam ada pertandingan bola antara Barcelona versus AC Milan mesti cepet-cepet tidur biar bisa bangun nanti malem. Oke langsung saja, saya akan berikan tutorial untuk membuatnya, contohnya seperti gambar diatas demonya bisa dilihat disini di bawah postingan :
  1. Pertama Anda mesti login ke blogger dulu
  2. Kemudian klik Template > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu templatenya, untuk berjaga-jaga jika nanti ada kesalahan dalam pengeditan.
  4. Setelah itu, letakkan kode berikut di atas kode ]]></b:skin>
    #related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
    ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
    #related .related-posts{font-weight:400;width:50%;float:right}
    #related .related-posts p{margin:0}
    ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
    *html ul.rp#related-posts li{margin:0 13px}
    ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
    ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
    ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
    ul#related-posts li img{bottom:0;padding:0!important}
    ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
    #related .subscribe{width:43%;float:left;color:#bdbdbd;}
    #related .subscribe p.intro{font-weight:400}
    #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSxxtAioI0o1DLhfJJdnXkrFxd5rpJjOBPxs28ljDpE2yQxCDMy8Jc3w3xtN_qz18u2URCGo1dJgvtpnhE5DYFjm4fOYL-gLTIR8to5Q05uMDGlfh4RlAkOSFVrr709HpkgBNHsioxyCU/) 0 50% no-repeat;vertical-align:middle}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block}
  5. Masih pada posisi Edit HTML, letakkan kode di bawah ini setelah <data:post.body/> (jika ada 2 atau 3 pilih kode yang terakhir)
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='clearfix' id='related'>
    <div class='related-posts'>
    <p>Related Articles</p>
    <script type='text/javascript'>
    var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgunA-LWUvqCD-4YhLQqXFn4uhDYJlEoOLlRoH1VGuGzbGbDFQiKSmT_LdoHokLxvpxF0npSZo4t0Wlv44LEV6WEcvoXWwNODaJrnlnOcxM6tpPYnxqRrPofl2FCkYGNCrASWCOT1bPOy8/s1600/no+image.jpg&quot;;
    var maxresults=6;
    </script>
    <script src='http://johnytemplate.googlecode.com/files/related.js' type='text/javascript'/>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
    </b:loop>

    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>                
    </div>

    <div class='subscribe'>
    <p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/Heina' target='_blank' title='feedburner'>
    <b>click here</b></a>, or subscribe to receive more great content just like it.</p>
    <p class='feed'><a href='http://heninurardian.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Heina&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='Heina'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
    <input id='botsubbutton' type='submit' value='Submit'/><br/>
    <small>Your information will not be shared. Ever.</small><br/>
    <a href='http://feeds.feedburner.com/Heina'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Heina?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
    </form>
    </div>
    </div>
    </b:if>
    Keterangan :
    Warna biru : ganti dengan alamat feed anda.
    Warna merah : ganti dengan URL anda.
  6. Terakhir Save Templates, dan lihat hasilnya di bawah postingan Anda.
Tutorial membuat fitur related post thumbnail dengan feedburner diatas cocok untuk blog yang mempunyai warna background atau latar hitam. Tapi jika blog Anda mempunyai warna latar putih atau warna cerah anda tinggal modifikasi pada kode CSS nomer 4 diatas. 
Demikian tutorial kali ini selamat mencoba dan semoga bermanfaat.. :)
Share:

Selasa, 10 Juli 2012

Widget Marhaban Ya Ramadhan Untuk Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم


Widget Marhaban Ya Ramadhan Untuk Blogger - Halo sobat Blogger? Apa kabar? Kali ini saya akan berbagi widget Marhaban Ya Ramadhan. Bulan yang ditunggu - tunggu oleh umat islam, akhirnya datang juga. tinggal beberapa hari lagi kita akan menjalankan satu bulan ibadah puasa. Jadi, tidak ada salahnya kita Memasang Widget Marhaban Ya Ramadhan pada blog kita, semoga widget ini bermanfaat dan bisa membawa berkah bagi kita semua..
1. Login ke Blogger kamu
2. Pilih Tata letak >> Tambah Gadget >> HTML/JavaScript
3. Silahkan kamu pilih salah satu widget Marhaban Ya Ramadhan dibawah ini.
     1. Widget Ramadhan (Selamat Menunaikan ibadah Puasa)
     
    
     Kode :
     2. Widget Pak Haji

     Kode :

     3. Widget Bu Haji

     Kode :
     4. Widget Marhaban Ya Ramadhan +Jam dan tanggal
     Kode :
Share:

Rabu, 13 Juni 2012

Cara Membuat Menu Register dan Login diatas Header

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم


http://t0.gstatic.com/images?q=tbn:ANd9GcRe5Mxq3dROdOrc5fgcI-a3tfJ-WBBZev5DK2wMoTlaMIzW-_AH4SO7pvY
Contohnya, kamu bisa lihat diatas header blog ini, itu yang saya maksud Menu Register dan Login
 
 
Menu ini sengaja saya tambahkan dengan berbagai macam kategori, agar tidak hanya menu register dan login saja. Berikut contohnya :
1. Login ke Blogger
2. Masuk ke Template => Edit HTML => Lanjutkan 
3. Centang "Expand Template Widget"
4. Cari kode ]]></b:skin>, lalu letekkan kode berikut tepat diatas kode tadi
/*Top Horisontal*/ .toppic{background:#ffffff;width:1040px;margin:0 auto;border-bottom:1px solid #999;filter:alpha(opacity=70);opacity:0.7;} .topnav{width: 1040px;height:20px;overflow: hidden;margin:0 auto; padding:0px 10px 0px 10px; }
5. Cari kode <header> atau <div id='header-wrapper'>
6. Letakkan kode berikut tepat diatas kode <header> atau <div id='header-wrapper'>


<div class='toppic'>
    <div class='topnav'>
<div style='font: 12px Arial;float:left;padding-top:3px;letter-spacing:.01em;color:#000000;'>
Halo <b>Sobat !</b>  |  Members area  :  <a href='http://heina-blog.1066895.n5.nabble.com/template/NamlServlet.jtp?macro=start_registration_page&nextUrl=http%3A%2F%2Fheina-blog.1066895.n5.nabble.com%2F%3Bcid%3D1343661845344-496' title='Daftarkan ke Forumr'>Register</a>  |  <a href='http://heina-blog.1066895.n5.nabble.com/template/NamlServlet.jtp?macro=login_page&nextUrl=http%3A%2F%2Fheina-blog.1066895.n5.nabble.com%2F%3Bcid%3D1343661845344-496' title='Masuk ke Forum'>Sign in</a>
</div>
<div style='font: 12px Arial;float:right;padding-top:3px;letter-spacing:.01em;color:#000000;'>
<a href='http://heninurardian.blogspot.com/2011/05/daftar-isi.html' title='Daftar isi TutorialBlogz'>Sitemap</a>  |
<a href='http://heninurardian.blogspot.com/2012/06/guest-book-tutorial-blogz.html' title='Buku tamu'><blink>Guest Book</blink></a>  |
<a href='http://plus.google.com/105498311214830751333' title='Kontak kami'>Contact us</a>  |
<a href='http://heninurardian.blogspot.com/2012/07/privacy-policy.html' title='Kebijakan Privasi'>Privacy Policy</a>
</div>
</div>
</div>

Keterangan:
Ganti yang berwarna merah dengan Nama menunya
Ganti yang berwarna biru dengan URL yang akan dituju
7. Simpan Template.

Semoga bermanfaat..
Share:

Rabu, 06 Juni 2012

Memposting Kode HTML Pada Artikel

Memposting Kode HTML Pada Artikel - Sebenarnya artikel yang saya tulis ini sangat jarang sekali digunakan oleh para blogger, tapi ada baiknya akan saya tulis untuk lebih memperjelas Cara Membuat Postingan Berupa Kode HTML ini. Untuk memposting kode HTML pada artikel, anda harus menggunakan tool untuk mengkonversi atau mengubah kode HTML menjadi kode yang dapat dibaca pada artikel. Jika tidak, setiap kali kita memposting. Kode HTML-nya tidak akan muncul pada artikel. Misalnya kode < harus diganti dengan &lt; dan kode &lt; harus diganti dengan &amp;lt;

Berikut adalah cara untuk mengubah kode HTML menjadi kode yang dapat dibaca pada artikel:

1. Buka http://centricle.com/tools/html-entities/

2. Masukkan kode HTML yang mau ditampilkan pada artikel dalam kotak Centricle. Misalnya kode <div id='outer-wrapper'>.

centricle
3. Klik Encode. Kemudian akan muncul kode baru seperti pada gambar dibawah ini.

centricle encode4. Gunakan kode baru tersebut untuk diposting pada artikel.

Semoga Bermanfaat.. :)

Share:

Senin, 07 Mei 2012

Pengertian Blog Dofollow dan Blog Nofollow



Pengertian Blog Dofollow dan Blog Nofollow - Blog tidak asing lagi bagi yang setiap harinya berselancar di dunia maya (internet), karena bisa menemukan berbagai jenis blog yang membahas tentang tutorial, bisnis online, berita, wisata, penyedia iklan dan masih banyak kategori blog yang bisa kita temukan dengan admin yang berbeda pula, mulai dari anak SD, SMP, SMA, Perguruan Tinggi, Karyawan Swasta, PNS, Guru, maupun masyarakat umum telah mengetahui dan memiliki blog. Ada yang menjadikan blog sebagai media untuk menyalurkan hobi, ada yang ingin sharing dan ada juga yang menjadikan blog sebagai tempat untuk menghasilkan uang sesuai dengan adminnya untuk apa blog itu di ciptakan. Berbagai kegiatan dilakukan oleh pemilik blog (admin), mulai dari mempercantik tampilan blog, membuat content yang menarik, mempercepat loading blog, blogwalking, submit article, pasang iklan, berkomentar di blog dofollow dan sebagainya. Tentu saja hal tersebut dilakukan agar blog mempunyai traffic dan SERP (Search Engine Result Page) yang bagus sehingga menjadikan blog tersebut populer.

Selama ngeblog, tentu kita sering mendengar perkataan "Blog Dofollow" dan "Blog Nofollow" ada yang tau dan ada juga yang tidak tau pengertian tersebut. Bagi yang belum tau, Heina akan menjelaskan Pengertian Blog Dofollow dan Blog Nofollow tersebut. Berikut sedikit penjelasan tentang dofollow dan nofollow :
  • Dofollow artinya link yang dimasukkan pada saat memberikan komentar pada postingan sebuah blog akan ditelusuri lebih lanjut oleh search engine (mesin pencari), dalam artian mendapatkan backlink dari blog yang di komentari tersebut.
  • Nofollow adalah kebalikan dari dofollow, link yang dimasukkan pada saat memberikan komentar pada postingan sebuah blog tidak akan ditelusuri lebih lanjut oleh search engine (mesin pencari), dalam artian kita tidak mendapatkan backlink dari blog yang dikomentari tersebut. Sementara kita tahu backlink merupakan salah satu unsur penting dalam meningkatkan page rank (PR)
Berdasarkan pengertian diatas dapat kita simpulkan bahwa blog dofollow adalah blog yang memberikan backlink kepada link yang dimasukkan pada saat komentar, sedangkan blog nofollow adalah pada saat memasukkan link pada komentar, blog tersebut tidak memberikan backlink sehingga mempersulit kita untuk meningkatkan page rank (PR) karena backlink melatarbelakangi Page Rank (PR) sebuah blog. Jadi, untuk meningkatkan page rank (PR) blog perbanyaklah berkomentar pada blog dofollow dengan catatan jangan memberikan komentar sampah, berilah komentar yang sesuai dengan judul postingan tersebut.

Keuntungan Menggunakan Blog Dofollow :
 - Blog kita akan dicari oleh blogger pencari blog dofolow, sehingga meningkatkan traffic blog.
- Postingan kita akan mendapatkan banyak komentar
- Dengan komentar yang banyak, kita akan kelihatan eksis
- Merasa puas karena postingan kita diperhatikan.


Kekurangan Menggunakan BLog Dofollow : 
- Bisa membuat page rank (PR) turun
- Bisa memunculkan comment spam


Sedangkan Kelebihan Menggunakan Blog Nofollow :
 - Meningkatkan page rank (PR) blog
- Semakin tinggi page rank (PR) semakin baik posisi blog di Search Engine
- Bisa mendapatkan traffic yang banyak dari Search Engine
- Untuk bermain SEO blog nofollow sangat diperlukan


Kekurangan Menggunakan Blog Nofollow : 
- Pengunjung jarang meninggalkan comment, karena mereka hanya mencari informasi saja
- Jumlah comentator menjadi sedikit.


Nah, sekarang sudah jelas pengertian dari blog dofollow dan blog nofollow serta mengetahui kelebihan dan kekurangan menggunakan blog dofollow maupuan blog nofollow yang memiliki kelebihan dan kekurangan masing-masing. Sekarang tentukanlah tujuan anda apakah ingin membuat blog dofollow ataupun tetap menjadi blog nofollow.

Semoga Bermanfaat.. :-d
Share:

Sabtu, 07 April 2012

Tutorial Membuat Multi Menu Horizontal Dropdown

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Tutorial Membuat Multi Menu Horizontal Dropdown  - Kali ini saya akan membahas Tutorial Membuat Multi Menu Horizontal Dropdown . Menu dropdown ini berbeda dengan menu dropdown lainnya, mengapa? karena menu yg satu ini dropdown nya dapat bercabang lagi lebih banyak, Menu ini juga bermanfaat bagi sobat, yang mempunyai link cukup banyak.
Berikut Tutorialnya :
1. Login ke Account Blogger kamu
2. Pilih menu Rancangan, Edit HTML, lalu Ceklis "Expand Template Widget"
3. Cari kode ]]></b:skin>, bila sudah ketemu Copy kode dibawah ini tepat diatas kode ]]></b:skin>
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

4. Selanjutnya cari kode </head>, lalu Copy kode dibawah ini tepat diatas kode </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>

5. Kemudian sobat cari kode yang mirip dengan kode dibawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial Blogger (Header)' type='Header'/>
</b:section>
</div>

Ket : Kode di atas merupakan kode bagian Header dan untuk yang berwarna merah biasanya itu adalah judul header blog sobat, jadi cari saja kode yang mirip kayak di atas.

6. Dan setelah ketemu letakan kode di bawah ini tepat di bawah kode bagian akhir kode header di atas (letakan tepat di bawah kode yang berwarna biru).

<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://heninurardian.blogspot.com/'>Item 1</a></li>
<li><a href='#'>Folder 0</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Folder 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://heninurardian.blogspot.com/'>Item 4</a></li>
</ul>
<br style='clear: left'/>
</div>

Ket : ganti judul Sub item dan Folder dengan judul menunya, dan # ganti dengan url yang akan dituju. 

7. Klik Pratinjau/Preview terlebih dahulu, bila sudah berhasil menunya sobat Klik Simpan Template.

Share:

Jumat, 06 April 2012

Membuat Banner atau Gambar Berjalan Ke Atas

Selamat sore teman, sekarang saya akan membahas tentang Membuat Banner atau Gambar Berjalan Ke Atas. langsung saja ya teman.
Silahkan anda simak langkah-langkah di bawah ini :

1. Login ke Blogger Anda.
2. Masuk ke Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavaScript.
3. silakan anda masukkan kode di bawah ini ke dalam HTML/JavaScript anda.


<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200">

MASUKKAN KODE BANNER ATAU GAMBAR

</marquee>

4. ganti tulisan MASUKKAN KODE BANNER ATAU GAMBAR yang berwarna merah dengan kode Banner atau Gambar yang sobat inginkan.
5. Simpan dan lihat hasilnya.


Semoga Bermanfaat..
Share:

Rabu, 07 Maret 2012

Cara Membuat Widget Cek Berat Blog/Web


بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Cara Membuat Widget Cek Berat Blog/Web - Yups sebelumnya saya sudah share ke sobat" cara mengecek berat blog, jadi kali ini saya kan share Cara Membuat Widget Speed Test atau bisa disebut widget untuk mengecek berat blog.

Ok deh langsung saja ane kasih tipsnya...
Copy kode HTML dibawah ini dan taruh di kotak postingan sobat(edit HTML) dan langsung publikasikan deh... hehehehe



<center>
<form action="http://www.iwebtool.com/tool/tools/speed_test/speed_test.php" method="get" name="pageform" onsubmit="return validate(this);" target="pageframe">
<table border="0" style="border-collapse: collapse;"><tbody>
<tr> <td height="91" valign="top">
<table class="tooltop" height="76" style="border-collapse: collapse;"><tbody>
<tr> <td>
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr> <td colspan="5" valign="top"><b><span style="font-size: medium;">Masukkan Alamat Blog/Web Max 10 Url: </span></b></td> </tr>
<tr> <td colspan="4" valign="top">
<textarea name="domain" rows="11" style="width: 100%;"></textarea></td> <td>
</td> </tr>
<tr> <td>
<input style="float: left;" type="submit" value="Check!" /></td> <td>
<span style="font-size: x-small;">(<a href="http://vikrymadz.blogspot.com/">http://vikrymadz.blogspot.com</a>)</span></td> <td>
</td> <td colspan="2"></td> </tr>
</tbody></table>
</td> </tr>
</tbody></table>
</td> </tr>
<tr> <td>
</td> </tr>
<tr> <td height="39">
</td> </tr>
</tbody></table>
</form>
<script language="JavaScript">
function validate(theform) {
if (theform.domain.value == "") { alert("No domain provided"); return false; }
return true;
}
</script>
</center>
Selamat Mencoba..
Share:

Selasa, 07 Februari 2012

Cara Membuat Widget Sms Gratis


بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ
 


Cara Membuat Widget Sms Gratis - Kali ini saya akan membagikan tutorial Cara Membuat Widget Sms Gratis, Widget Sms Gratis adalah widget yang menyediakan layanan pengiriman SMS gratis. widget ini bisa dipasang diwebsite dan blog anda dengan tujuan agar memperbanyak pengunjung website. untuk contohnya bisa dilihat disini .

Berikut ini langkah-langkah memasang Widget Sms Gratis pada Blogger :
Cara Membuat Widget SMS Gratis untuk Blogger


  • Pertama login ke akun blogger Anda
  • Klik menu rancangan
  • Klik ‘Tambah Gadget’ (HTML/JavaScript)
  • Isikan kode berikut
<iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="270" height="350" frameborder="0"></iframe>
  • lalu simpan, dan lihat hasilnya.

Semoga Bermanfaat..
Share:

Selasa, 17 Januari 2012

Cara Membuat Efek Loading Page Pada Blogger


بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ


Cara Membuat Efek Loading Page Pada Blogger - Buat para blogger yang senang dengan efek-efek yang lumayan menarik, Saya punya trik yaitu Cara Membuat Efek Loading Page Pada Blogger.


Mau tau previewnya??? Ok. nih contohnya bisa dilihat DISINI

Gimana??? sobat tertarik kah????



kalau iya,  langsung saja ya Cara Membuat Efek Loading Page Pada Blogger
  • login blog
  • buka menu rancangan >> edit HTML
  • lalu cari kode </head>
  • dan letakkan kode dibawah ini tepat diatas kode </head>
<!-- Loading Page Script – vikrymadz – http://vikrymadz.blogspot.com -->
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>

  • lalu cari kode <body>
  • lalu letakkan kode dibawah ini dibawah kode diatas
  • <div id="page">
  • cari lagi kode </body>
  • dan taruh kode </div> diatas kode </body>
  • lalu simpan deh...
Share:

Jumat, 06 Januari 2012

Cara Membuat Widget Kode Warna HTML


بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ
 

Cara Membuat Widget Kode Warna HTML - Buat para sobat Blogger yang ingin mempunyai widget Kode Warna HTML, yaaaahhh..  biar kita gak harus cari-cari Kode Warna HTML kemana-mana.... hehehehe




Ok langsung saja ya sob....

Sobat hanya tinggal memasukkan semua kode HTML dibawah ini ke dalam kotak postingan (edit HTML bukan Compose)


<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie">
<param value="High" name="quality">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object>




<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess">
<param value="http://www.2createawebsite.com/build/col.swf" name="movie">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>

Dan jangan lupa diterbitkan dan lihat hasilnya....
bila ingin melihat hasilnya sobat bisa buka Kode Warna HTML 


Semoga Bermanfaat..

Share:

Kamis, 08 Desember 2011

Cara Membuat Tombol Spoiler (Tombol Buka/Tutup)

Cara Membuat Spoiler atau Tombol Buka/Tutup pada blog yang disimpan di sidebar atau dalam postingan , selan itu sekalian juga Cara Membuat Spoiler Show/Hidden Widget .

Cara Membuat Spoiler Pada Sidebar atau Postingan


Sebenarnya Spoiler bisa ditempatkan dimana saja di Sidebar, Komentar atau di postingan , Dengan Spoiler kita bisa menghemat tempat dll. Cara membuatnya  sama saja tinggal menggunakan kode HTML  seperti di bawah ini :
<div style="margin-bottom: 2px;">Judul Spoiler<div style="margin-top: 5px; text-align: center;"><input value="Buka" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"> Silahkan masukan Isi Spoiler disini, Bisa teks atau gambar / foto </div></div></div>

Perhatikan tulisan berwarna merah, itu bisa diganti sesuai keinginan dan isi pokok dari spoiler bisa berupa teks atau gambar. 

Contoh Spoiler bisa dilihat pada blog ini sementara spoiler dalam postingan bisa dilihat di sini.
  
Cara Membuat Spoiler Show / Hidden Widget

Untuk Membuat Spoiler Show/Hidden Widget  kita harus merubah kode HTML langsung pada template blog., widgetnya bisa yang mana saja.. misalnya pada Daftar Isi, Label , Komentar atau Link Sahabat dll..

Langkah membuatnya :

1. Masuk ke Blogger , pilih Design atau Layout , lalu Edit HTML
2. Sebaiknya backup dulu dengan Download full template
3. Centang Expand Widget Templates
4. Cari kode widget yang akan di rubah. Berdasarkan pengalaman sebaiknya tiap widget itu
    diberi nama, jadi mudah untuk mencarinya, tinggal Ctl+F lalu ketik nama widgetnya langsung
    ketemu deh.
5. Contoh yang akan saya buat Spoilernya adalah Link Sahabat.

Widget Link Sahabat kodenya seperti ini :

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

6. Ganti kode yang berwarna pink dengan script berikut :
<h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

7. Copy kode dibawah ini & simpan diatas kode </b:includable> :

<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>

8. Bila kodenya digabungkan maka akan seperti ini :
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'> <b:widget id='HTML8' locked='false' title='Link Sahabat' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
</b:if>
<div class='widget-content'>
<data:content/>
</div> <b:include name='quickedit'/>
<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
</b:includable>
</b:widget>

9. Sampai disini urusan Spoiler selesai, tinggal Save Templates Selamat mencoba.
    Semoga Bermanfaat.. :)
Share:

Selasa, 06 Desember 2011

Cara Membuat Tanda Tangan di Bawah Postingan

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Tanda Tangan di Bawah Postingan - Kali ini saya akan membahas Cara Membuat Tanda Tangan di Bawah Postingan. Sekarang membuat tanda tangan tidak usah ribet, seperti membuat tanda tangannya menggunakan kertas atau yang lainnya, karena ada salah satu web yang menyediakan pembuatan tanda tangan, yaitu MyLiveSignature. Selain di blog, sobat dapat memasangnya di tempat lain seperti forum.
Berikut Tutorialnya : 
1. Kunjungi situs http://www.mylivesignature.com
2. Lalu Pilih Menu "Start Now"
3. Klik "Using the signature creaton wizard"
4. Pada Step 1, masukkan Nama tanda tangan yg nanti akan ditampilkan
5. Kemudian pada Step 2, Pilih jenis font (huruf) yang sobat inginkan
6. Step 3, Pilih ukuran font yang sobat inginkan. Step 4, Pilih warna background. Step 5, atur kemiringannya
7. Dibawah, ada 2 pilihan yaitu :
- Want us to animate this signature?
- Want to download this signature?
- Want to use this signature?
8. Pilih yang Want to use this signature?
9. Kemudian muncul halaman baru, pilih Generate HTML code
10. Copy kodenya
11. Login ke blogger kamu
12. Pilih Template, Edit HTML, Ceklis "Expand Template widget"
13. Pastekan kodenya tepat dibawah kode <data:post.body/>
14. Simpan Template. dan lihat hasilnya. :-d

Semoga bermanfaat..  :-d
Share:

Minggu, 06 November 2011

Cara Membuat Kotak Langganan RSS Feed Via Email Dibawah Posting

 Cara Membuat Kotak Langganan RSS Feed Via Email Dibawah Posting :

1. Masuk pada blogger.com Pilih Template >>Edit HTML
2. Lanjutkan Centang Expand Template Widget
3. Cari kode ]]></b:skin> Letakkan kode berikut diatas kode ]]></b:skin> :
 .kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px;-webkit-border-radius:5px; border: 1px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; } .Rssardi33 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5CsWThK7z9v96A8R9BFuoeEZN_g9QbmKnqNPcG_qot7_ZfK8-bYg7foB7LoIrV6y_xPZ0toxllRV54zCimglKiMBiYrMFCUz9VDKBwx60wSWS2wALNVjJ1nf-WPTJLqnVvTHU3EbaMYY/s1600/maskolis.co.cc.jpg') no-repeat bottom right; } .Rssardi33 a { background: none;}  .inpRssardi33 { border: 1px solid #B9C1C6; width: 170px;height: 16px; font-size: 12px; padding:3px 4px 4px 10px;-moz-border-radius:5px;-webkit-border-radius: 5px;} .sbmtRssardi33 {background:#9b9b9b;border: 1px #9b9b9b solid;color:#FFF;font-size:13,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:7px;-webkit-border-radius: 7px;} .ardi33subs table {border-collapse: inherit; border: none;} .ardi33subs tr { border:0;} .ardi33subs td { border:0;} .ardi33subs th { border:0;} .clear { clear: both; }

4. Selanjutnya cari kode Letakkan kode berikut dibawah
<!-- Script Artikel Berlangganan  -->
<div class='kotakRSS1'>
<div class='Rssardi33'>
Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/Fahen' target='_blank' title='Berlangganan'>
<b>klik disini</b></a> untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <font color='#0099DD'>Heina Website. </font>
<div class='ardi33subs'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=diesilver&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRssardi33' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='Fahen'/>
<input name='title' type='hidden' value='Fahen'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtRssardi33' type='submit' value='Subscribe'/></div>
</form></td><td align='left' style='padding:6px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/Fahen'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Fahen?bg=9b9b9b&amp;fg=fffffff&amp;anim=0' style='border:0' width='88'/></a></td></tr></table></div></div></div><div class='clear'/><!-- End Artikel Berlangganan -->

NB :
*Ganti Fahen dengan id feedbunner Anda 

*Tambahan : Untuk blog yang menggunakan readmore otomatis maka Anda akan menemukan 2 kode, letakkan kode di bawah kode yang kedua. 
Simpan Template dan Lihat Hasilnya 

 Semoga Bermanfaat.. :)
Share:

Ads

Followers

Site Info