Mengubah Tampilan Kursor pada Link di Blog

Assalamualaikum Wr. Wb.

Halo sahabat! Udah lama ya saya tidak posting lagi tentang tutorial Blogger. Kali ini, saya akan membahas tentang Mengubah Tampilan Kursor pada Link di Blog. Sebelumnya, saya pernah membuat posting tentang Mengubah Tampilan Kursor di Blog, namun ketika kursor diletakkan pada sebuah link, tampilan kursor berubah kembali menjadi tampilan default.

Nah, daripada sahabat bingung duluan, mending sekarang kita langsung saja ke tutorialnya.

1. Login dulu ke akun Blogger sahabat
2. Pada dasbor, pilih blog sahabat, dan klik Template di sidebar sebelah kiri
3. Klik Edit HTML
4. Cari kode </head> dengan menekan tombol Ctrl+F
5. Copy kode di bawah ini, lalu paste di atas kode </head>

<style type='text/css'>body, a, a:link{cursor:url(URL KURSOR), default;} a:hover {cursor:url(URL KURSOR PADA LINK),wait;}</style>

6. Simpan Template

Kode yang berwarna merah merupakan URL kursor saat tidak menyentuh link. Sedangkan yang berwarna biru, adalah URL kursor saat menyentuh link. Sahabat bisa mendapatkan kursor gratis di www.cursors-4u.com. Sahabat juga bisa mencari kursor sendiri di Google.

Demikian tutorial singkat dari saya. Semoga bermanfaat.
Wassalamualaikum Wr. Wb.

Read More...

3 Situs Download Template untuk Blogger

Assalamu'alaikum Wr Wb.
Halo sahabat! Kali ini saya akan menyebutkan situs-situs download template untuk Blogger yang terpopuler kepada sahabat. Langsung saja kita lihat situs-situsnya.

BTemplates.com

BTemplates.com merupakan salah satu situs download template terpopuler di dunia. Banyak desain-desain template yang grafisnya cukup mengesankan. Namun variasi dari template yang disediakan dari BTemplates.com hanya sedikit. Rata-rata layout template sama, hanya saja pembuat dan desain grafisnya berbeda.





ZoomTemplate.com

ZoomTemplate.com merupakan situs download template yang populer. Banyak variasi dari template ini dan rata-rata template yang ada di situs tersebut adalah pengadopsian dari Wordpress.








BlogTemplate4U.com

BlogTemplate4U merupakan situs download template terpopuler dan terlengkap. Situs ini tidak hanya menyediakan template untuk Blogger saja, tetapi situs ini juga menyediakan template untuk Wordpress dan Joomla.







Cara menmasukkan template ke blog:

1. Login ke akun Blogger sahabat
2. Pilih template di sidebar sebelah kiri
3. Klik Cadangkan / Pulihkan di pojok kanan atas
4. Pada kolom "Unggah template dari file di hard drive Anda" klik "Browse File"
5. Masukkan file berekstensi .xml dari template Anda
6. Klik "Unggah"

Demikian posting dari saya. Wassalamu'alaikum Wr. Wb.

Read More...

Membuat Menu Tab View di Blog

Halo, Assalamu'alaikum Wr. Wb.
Bagaimana kabar sahabat hari ini? Semoga baik-baik saja ya... Kali ini, saya bakalan ngasih tau tentang Membuat Menu Tab View. Sebelumnya, saya mau nanya dulu ke sahabat pembaca. Kayak gimana sih, menu tab view itu? Nah saya kasih contoh dulu seperti gambar di bawah ini.

Nah, udah tau kan kayak gimana menu tab view itu. Sekarang kita langsung saja ke tutorialnya.

1. Login ke Blogger sahabat
2. Pilih blog sahabat, dan klik "Template" pada sidebar sebelah kiri
3. Pilih "Edit HTML"
4. Klik "Expand Template Widget"
5. Cari kode </head> dengan cara menekan tombol Ctrl + F
6. Copy kode di bawah ini, dan pastekan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>//<![CDATA[function tabview_aux(TabViewId, id){var TabView = document.getElementById(TabViewId);// ----- Tabs -----var Tabs = TabView.firstChild;while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;var Tab = Tabs.firstChild;var i = 0;do{if (Tab.tagName == "A"){i++;Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className = (i == id) ? "Active" : "";Tab.blur();}}while (Tab = Tab.nextSibling);// ----- Pages -----var Pages = TabView.firstChild;while (Pages.className != 'Pages') Pages = Pages.nextSibling;var Page = Pages.firstChild;var i = 0;do{if (Page.className == 'Page'){i++;if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";Page.style.overflow = "auto";Page.style.display = (i == id) ? 'block' : 'none';}}while (Page = Page.nextSibling);}// ----- Functions -------------------------------------------------------------function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }//]]></script>

7. Cari kode ]]></b:skin> dengan cara menekan  tombol Ctrl + F
8. Copy kode di bawah ini, dan pastekan kode di atas kode ]]></b:skin>

div.TabView div.Tabs{height: 30px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 98px; /* Lebar Menu Utama Atas */text-align: center;height: 30px; /* Tinggi Menu Utama Atas */padding-top: 3px;vertical-align: middle;border: 1px solid #BDBDBD; /* Warna border Menu Atas */border-bottom-width: 0;text-decoration: none;font-family: "Verdana", Serif; /* Font Menu Utama Atas */font-weight: bold;color: #000; /* Warna Font Menu Utama Atas */-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #E6E6E6; /* Warna background Menu Utama Atas */}div.TabView div.Pages{clear: both;border: 1px solid #BDBDBD; /* Warna border Kotak Utama */overflow: hidden;background-color: #E6E6E6; /* Warna background Kotak Utama */}div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}

9. Simpan template sahabat, dengan mengklik tombol "Simpan Template"
10. Selanjutnya, klik "Tata Letak" di sidebar sebelah kiri
11. Pilih Add a Gadget, dan pilihlah "HTML / Javascript"
12. Copy kode di bawah ini, dan paste ke dalam text box tersebut

<form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 300px;"><a>Menu 1</a><a>Menu 2</a><a>Menu 3</a></div><div class="Pages" style="width: 300px; height: 250px;"><div class="Page"><div class="Pad">Menu 1.1 <br />Menu 1.2 <br />Menu 1.3 <br /> </div></div><div class="Page"><div class="Pad">Menu 2.1 <br />Menu 2.2 <br />Menu 2.3 <br /></div></div><div class="Page"><div class="Pad">Menu 3.1 <br />Menu 3.2 <br />Menu 3.3 <br /> </div></div></div></div></form><script type="text/javascript">tabview_initialize('TabView');</script>

14. Setelah selesai mengedit widget, klik "Simpan Gadget"

Catatan: 

• Tulisan yang berwarna merah merupakan ukuran dari tab tersebut
• Tulisan yang berwarna ungu merupakan warna garis tab tersebut
• Tulisan yang berwarna hijau merupakan font dari tab tersebut
• Tulisan yang berwarna biru merupakan warna dari tab tersebut
• Tulisan yang berwarna merah jambu, ungu tua, ungu muda, dan hijau tua adalah tulisan yang sahabat inginkan

Demikian tutorial dari saya, semoga bermanfaat bagi sahabat.

Wassalamu'alaikum Wr. Wb.

Read More...

Mengubah Tampilan Kursor di Blog

Halo, Assalamu'alaikum Wr. Wb.

Pada kesempatan kali ini, saya akan memberikan tutorial yang nggak kalah menarik kepada sahabat, yaitu mengganti tampilan kursor pada blog. Sebelumnya, pasti sahabat pernah mengunjungi salah satu blog yang kursornya berbeda dengan tampilan yang biasanya. Daripada kebanyakan perkenalan, mending langsung aja deh ke tutorialnya.

1. Login ke akun Blogger sahabat
2. Pada sidebar sebelah kiri, pilih "Template"
3. Klik "Edit HTML" di bawah preview blog sahabat
4. Cari kode: </head>
5. Copy kode di bawah ini, dan pastekan di atas kode </head>

<style type="text/css">HTML,BODY{cursor: url("URL GAMBAR KURSOR"), auto;}</style>

6. Klik "Simpan Template"

Catatan:

1. Teks yang dicetak tebal adalah url kursor yang Anda inginkan
2. Saya menyarankan bagi Anda yang tidak mempunyai gambar kursor agar mengunjungi www.totallyfreecursors.com. Karena situs tersebut mempunyai banyak koleksi kursor

Demikian tutorial dari saya, dan semoga tutorial ini bermanfaat.
Wassalamu'alaikum Wr. Wb.

Read More...

Membuat Judul (Title) Blog Berjalan

Halo, Assalamu'alaikum Wr. Wb.
Bagaimana kabar sahabatku kali ini? Semoga baik-baik saja ya. Kali ini, saya bakal ngasih tutorial untuk para blogger tentang Membuat Judul (Title) Blog Berjalan.

Nah, untuk membuat judul di blog sahabat berjalan, sahabat harus mengikuti langkah di bawah ini:

1. Login ke akun Blogger Anda
2. Setelah login dan memilih blog Anda, klik "Template" di kolom sebelah kiri
3. Pilih Edit HTML di bawah tampilan blog Anda
4. Klik "Expand Template Widget"
5. Cari kode di bawah ini. (Klik Ctrl + F)

<b:include data='blog' name='all-head-content'/>

6. Copy kode di bawah ini, dan pastekan di bawah kode <b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>
var txt=&quot;: JUDUL BLOG :&quot;;
var kecepatan=150;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();</script>

7. Klik "Simpan Template"

Keterangan:

• Tulisan yang dicetak tebal dan berwarna biru merupakan judul blog Anda
• Tulisan yang dicetak tebal dan berwarna hijau merupakan kecepatan teks berjalan. Semakin kecil angkanya, semakin cepat teks berjalan.

Demikian tutoiral dari saya. 

Wassalamu'alaikum Wr. Wb.

Read More...

Membuat Blog Anda Menjadi SEO Friendly

Pasti anda bertanya apakah SEO friendly itu? SEO friendly yaitu dimana judul artikel mudah dicari search engine. Contohnya adalah seperti ini:

Langkah-langkah untuk menjadikan judul blog anda seperti di atas adalah:

1. Login ke Blogger

2. Klik blog anda

3. Jika anda menggunakan tampilan Blogger baru, klik Template pada sidebar kiri

4. Pilih Edit HTML di bawah preview blog anda

5. Setelah muncul dialog box, klik Lanjutkan

6. Cari tag <title><data:blog.pageTitle/></title>, jika masih tidak ketemu juga tekan Ctrl + F, dan ketiklah <title><data:blog.pageTitle/></title>.

7. Gantilah dengan kode:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

8. Simpan Template

Read More...