Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Mengganti "Older Posts" Dengan Angka

   No comments     
categories: 
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

Cara Membuat Widget Translate dengan Bendera

   No comments     
categories: 
Cara Membuat Widget Translate dengan Bendera - Menambahkan suatu widget translator pada blog dapat mempermudah pembaca untuk membaca meskipun teks tersebut tertulis dengan bahasa yang tidak kita mengerti. Namun jika pada blog anda terdapat widget translator dapat memungkinkan pembaca lebih nyaman membaca postingan blog anda, apalagi jika widget tersebut unik nan lucu, pastinya pembaca akan lebih betah dengan bolak balik ke postingan blog anda.


Cara Menampilkan Sumber Saat Artikel di Copy

   No comments     
categories: 
Cara Menampilkan Sumber Saat Artikel di Copy - Artikel adalah suatu karya yang diungkapkan/dituliskan oleh penulis pada suatu buku ataupun website. Biasanya para blogger newbie menganggap copy paste adalah hal yang biasa ketika menambahkan suatu artikel agar blog tersebut banyak postingannya.

Namun, kita orang Indonesia yang sebagian besar masyarakat menganut Agama Islam, kita juga harus menghormati atau menghargai suatu karya orang lain. Bilamana ketika kita mencopy pastekan suatu artikel orang lain, alangkah baiknya kita sertakan sumber atau meminta izin pada yang punya artikel.

Cara Membuat Kotak Search Box Cantik di Blog

   No comments     
categories: 

Cara Membuat Kotak Search Box Cantik di Blog - Menambahkan beberapa kode script dalam dapat membuat tampilan blog Anda lebih menarik dan ada pula yang malah membuat blog jadi berat. Kali ini saya akan membagika bagaimana cara membuat kotak search box cantik, pasti semua blogger ingin blognya tampil cantik kan ? Maka dari itu disini saya akan membagikan untuk Anda semua pengguna blogger. Contoh gambar dapat Anda lihat pada gambar di atas.
Okeh, langsung saja pada materi cara membuat kotak search box cantik di blog.

   No comments     
categories: 

Cara Menampilkan Emoticons Smiley Pada Komentar Blogger

   No comments     
categories: 

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ اارَّØ­ِيم


Tutorial kali ini saya ingin berbagi cara menampilkan emoticons smiley pada komentar blogger. Walau mungkin dipencarian google anda akan menemukan banyak blog tutorial yang membahas cara menambahkan yahoo smiley emoticons pada komentar blogger tapi yang menggunakan konsep JQuery mungkin masih jarang. Ini adalah fasilitas emoticons otomatis yang dapat merubah simbol :), :D, :P, menjadi sebuah gambar yang telah ditentukan. Semoga dengan trik ini threaded comments blog anda tampil lebih aktraktif.

Animasi

   No comments     
categories: 

Animasi Pojok Blog !!! (animasi klub bola)

Kali ini ane bakal nge-share sejumlah animasi pojok blog yang bertemakan sepak bola, mau tau? Cekidott..


Caranya :
1. Buka Tata Letak
2. Tambah Gadget
3. Copy Link

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="
http://bukanakgo.blogspot.com/2012/09/animasi-pojok-blog-part-iv-animasi-klub.html" target="_blank"><img border="0" src="
http://animationsa2z.com/attachments/Image/spongebob/spongebob10.gif" title="lihat lebih banyak animasi klub bergerak". alt="lihat lebih banyak animasi klub bergerak" /></a><small><center><a href="http://bukanakgo.blogspot.com/2012/09/animasi-pojok-blog-part-iv-animasi-klub.html" target="_blank" title="Cara Memasang Widget Animasi Klub di Pojok Blog">Animasi Klub Bola</a></center></small></div>

Mengganti Kursor

   No comments     
categories: 

Kumpulan Kursor di Blog (Kursor Klub Bola)

Malem malem gini enaknya sih minum Es Teh Jeruk Anget pke Es wkwk , lanjut aja kita ke topik yaitu mengubah kursor di blog menjadi kursor klub sepak bola faforit kalian, penasaran kan? langsung aja kita cekkidot..

Kali ini gua bakal nge-share cara mengubah kursor blog menjadi kursor klub sepak bola,, mau tau? lanjuut

Caranya :
1. Masuk ke Blogger
2. Klik Template


Daftar Kode Warna HTML Untuk Blogger

   No comments     
categories: 

Kali ini saya sengaja memuat Daftar Kode Warna HTML / HTML Warna Untuk Blogger. Namun postingan ini saya beri judul Dafrtar Kode Warna HTML Untuk Blogger namun kode html warna yang saya muat di sini tidak hanya bisa di gunakan untuk blogger saja.

Kode HTML Warna ini nantinya bisa di gunakan sesuai keperluan kita masing-masing, misalnya untuk merubah warna latar belakang blog blogger kita, warna header, footer, warna font, dsb.
Dafrtar Kode Warna HTML Untuk Blogger : Image

Merubah Link Older Post menjadi Gambar

   No comments     
categories: 

Tujuannya ya mungkin untuk beda dari pada yang lain dan juga memperindah blog. Biasanya Older Post atau Newer Post dapat ditemukan di bawah Posting Artikel. Seperti gambar dibawah yang belum diubah (di Edit).

Nah, bosan melihat yang begitu - begitu saja? Ayo kita simak cara merubah Link Older Post atau Newer Post menjadi Gambar.

• Login ke Blogger
• Sobat mengarah ke Edit HTML
• Centrang Expand Widget
• Cari kode: 
<data:newerPageTitle/>
. Untuk merubah Newer Preview Hapus kode tersebut dan ganti kode dengan
 <img src='Alamat Gambar Newer Post'/>
Ubah kode yang berwarna Biru sesuai Alamat Gambar yang akan di pasang menjadi Newer Post

CARA PASANG JAM & KALENDER ISLAMI AL-HABIB DI BLOG...

   No comments     
categories: 
CARA PASANG JAM & KALENDER ISLAMI AL-HABIB DI BLOG...
Bagi sobat2 blogger yang blognya ber-TeMa-kan islami.. ada bagusnya jika meng-instal Widget Jam & Kalender Islami dari Al-Habib ini di blognya.. dengan tampilan widget yang inovatif & colourfull... akan membuat tampilan blogmu menjadi lebih hidup.. :-)
Note MySpace: instal plugin flash player di browser kamu terlebih dahulu sebelum menggunakan widget ini !.. jika tidak maka widget takkan bisa tampil..

WIDGET JAM


WIDGET KALENDER


Contoh Cara Menginstal widget jam, MySpacesbb :1. Loginlah dulu di Blog kamu...
2. Browsing ke aL-HabibAda juga Widget yang Menampilkan Hadist yang Scrolling secara Otomatis dibagian Various Widget...

Cara Membuat Burung Terbang Follow Twiter di Blog

   No comments     
categories: 
Pada siang ini saya akan berbagi Cara Membuat Burung Terbang Follow Twitter di Blog, burung twitter ini nantinya akan bergerak kasana kemari saat mouse digerakkan, pada saat mouse berhenti burung twitter ini pun akan hinggap berhenti, lucu dan unik kan, jika sobat mempunyai akun twitter dan ingin menambah teman sobat dapat gunakan burung twitter ini pada blog sobat dengan begitunya nantinya akan ada yang follow tapi jangan lupa follow back juga teman yang sudah follow sobat,,,

Nah untuk membuat burung twitter terbang ini berikut caranya :
1. Masuk ke Blogger dengan menggunakan akun blogger sobat
2. Pilih Tata Letak
3. Klik pada Tambah Gadget
4. Pilih HTML/Javascript
5. Kemudian copy pastekan kode dibawah ini

<script type="text/javascript" src="http://tmm999.googlecode.com/files/twitter.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yOnR5gatNe1MD_YyVThAfN75MdxZsuJjq5i6-xPwHltBGPJKCC4yhepg7cfiBbnxFPRte3iMAgGbQ6N9MTVUFozEG9zV_XV7GndNcqx-ZqzULJQGOQ8FN_FAyO6d4WrWVrhkkMAZ04MZ/s1600/burung+twitter+biru.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/Rizky_NM_1";var tweetThisText= "@Rizky_NM_1 Hi,Follow me";tripleflapInit();
</script>
Ganti kode yang diberi warna Orange dengan alamat URL twitter sobat dan ganti yang diberi warna Pink dengan nama id twitter sobat.

Membuat Menu Serta Sub Menu Tanpa jQuery

   No comments     
categories: 


Membuat Menu Serta Sub Menu Tanpa jQuery

Sebenarnya panduan cara membuat menu sudah pernah saya tuliskan di blog ini, artikel tersebut saya beri judul Tutorial bikin menu horizontal di blogger, namun karena tutorial bikin menu horizontal tersebut tidak saya sertai dengan penambahan sub menu akhirnya banyak teman-teman yang menanyakan bagaimana cara membuat sub menu.
Membuat Menu Serta Sub Menu Tanpa jQuery
Pada artikel kali ini saya akan menuliskan Tutorial/cara membuat menu serta sub menu di blogger tanpa menggunakan jQuery, yakni menggunakan kode html + css saja.
Demo Menu Horizontal

Langsung saja ya, tidak perlu basa-basi

Panduan Langkah Demi Langkah Membuat Menu Horizontal + Sub Menu Di Blogger

Seperti biasa, langkah pertama yang wajib dilakukan adalah login ke blogger.

  • PANDUAN UNTUK BLOGGER BARU
  • PANDUAN UNTUK BLOGGER LAMA

Tutorial Membuat Menu Serta Sub Menu Tanpa jQuery Untuk Blogger Baru

1. Klik menu seperti ini


2. Klik menu / tulisan Template
3. Klik menu Edit HTML
4. Klik tulisan / menu Lanjutkan
5. Beri centang pada Expand Template Widget

   No comments     
categories: 

Cara Menambahkan "You Might Also Like" di Blog

Saat sedang bosen dan gatau mau posting apa an, saya pun cari ide untuk memperbaiki tamppilam blog saya tercinta ini. Cari-cari ide akhirnya nemu deh suatu widget yang menarik perhatian saya dan sudah populer dipakai banyak blog. Yaitu "You Might Also Like/lihat pula/dll", yaitu suatu cara membuat related post (artikel yang berkaitan) untuk menampilkan list judul postingan yang berhubungan dengan postingan utama yang menggunkan thumbnail atau gambar didalamnya, seperti pada gambar diatas.Masa punya saya ga ada?malu donk.hhaha. Nah saya coba cari di "Add Gadget" nya blogger kok ga ada ya? akhirnya searching deh dan ternyata widget itu disediakan oleh suau situs kawan. Yaitu Linkwithin.com, cara mendapatkannya juga mudah kok, begini ni :

  • Buka situs linkwithin di sini
  • Kemudian isi form yang ada di bagian kanan halaman
  • Email : email kamu
  • Blog link : url blog kamu
  • Platform : pilih platformnya, ada blogger, wordpress, dll
  • width : pilih jumlah related post yang pengen kamu tampilkan.

Cara Membuat Like Box Facebook Tersembunyi di blog

   No comments     
categories: 

Cara Membuat Like Box Facebook Tersembunyi di blog

Pengguna facebook kian bertambah banyak, hal ini memungkinkan kita para blogger untuk mempromosikan blog melalui sosial media facebook ini. Bagi yang sudah memiliki fans page di facebook pasti sebagian besar para blogger sudah memasang like box yang sudah disediakan oleh facebook.

Nah tampilan like box dari facebook ini pun sudah menarik menurut saya. Tetapi mungkin ada sobat blogger yang kebingungan mencari tempat untuk memasang like box fans page facebooknya karena di blognya sudah banyak terpasang widget. Tenang sob, sobat bisa menyembunyikan kotak like box fans page facebook sobat pada blog sobat. Dengan cara ini juga maka blog sobat kelihatan lebih indah untuk dipandang. Untuk tampilannya sobat bisa lihat gambar di samping.

Apakah sobat juga ingin memasangnya juga di blog sobat? jika jawaban dari sobat ya, maka ikutilah langkah-langkah Cara Membuat Like Box Facebook Tersembunyi.

1. Log in ke blogger.
2.Klik rancangan  » add gadget » HTML/Java Script.
3.Pastekan kode di bawah ini pada kolom yang sudah disediakan.


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCK-RCAq69scV2clITGYVgP8lLQd4V4lbbnGvvgj8xZ5uHqABiheCd9WGI_SeaAgeI1pWB9NoxCwCxSfFZ5cJ983dFW8opJmwShF9UYUTdE-kgcUuCh21rtrSRxUb5wSBGkOiyDNI90lw/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Bdiggfriendspage&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://bdigg.blogspot.com/2012/04/cara-membuat-like-box-facebook.html" target="_blank">+ Get This</a></span></div></div>