Cara Membuat dan Menampilkan Blink Effects: Efek Berkedip Pada Teks

Panduan BloGGeR tentang cara membuat “blink effects”, “efek berkedip” atau “flash text” bertujuan untuk melengkapi pemahaman blogger tentang kode html yang mempunyai fungsi untuk menampilkan sebuah teks biasa atau teks yang berupa sebuah link tampil indah dan lebih terlihat menonjol dibandingkan dengan teks-teks yang lain. Hingga detik ini efek kedip (blink effects) belum bisa digunakan pada sebuah obyek yang berupa gambar.

Cara Membuat Navigasi Breadcrumb

Cara Membuat Navigasi Breadcrumb
Diposkan oleh Hizrian di 17.58 | Minggu, 04 Juli 2010 | 23 komentar
Label: navigasi, trik blog
Kata telah terucap, tangan telah tergerak, prasangka telah terungkap, Tiada kata, Kecuali “saling maaf” jalin ukhuwah dan kasih sayang raih indahnya kemenangan hakiki, Selamat Hari Raya Idul Fitri 1431H

Kali ini saya akan membahas tentang "Membuat Navigasi Breadcrumb"
Navigasi Breadcrumb berguna untuk memudahkan pengunjung untuk kembali kehalaman sebelumnya.
Contoh hasilnya:

15 Artikel Terbaru

• 15 Artikel Terbaru

  • Tips untuk mencegah kejadian website kita hilang atau error
  • Bagaimana menghindari Google Ban ?
  • Mengamankan joomla 1.5 yang tepat
  • Antisipasi terhadap Spam Email
  • Uji Coba Internet Broadband XL
  • Akses KlikBca melalui Blackberry
  • Mie yang baru aja launching nih…..
  • Siapakah Juara 1, 2, 3 dan 4 pada kasus Cut Tari, Luna Maya, Ariel?
  • Kapan saya harus menggunakan VPS ?
  • Keybca bisa di buat di semua cabang BCA
  • Posting Blog pake Blackberry
  • Kisah seorang CS Indosatm3 Vs Customer yang lucu
  • Kenapa modem USB HSDPA sekarang murah ?
  • domain xxx akan di launching
  • Defrag Harddisk Komputer Cara Cepat

Download Gratis

Dalam sesi kali ini, ada kabar baik buat kawan-kawan semua. ya saya mau bagi-bagi software buat anda yang suka akan internet, khususnya bagi yang berminat untuk bisa membuat website sendiri. Untuk produk-produk di bawah ini saya sudah mendapatkan hak Resale Right atau hak jual ulang, tapi buat kawan-kawan semua khusus saya berikan gratis. Beberapa produk merupakan dalam format ZIP, silahkan gunakan winzip untuk mengekstraknya. Untuk membacanya, anda memerlukan Acrobat Reader versi 5.0 ke atas.

Klik di sini jika anda belum memiliki program Winzip.
Klik di sini jika anda belum memiliki program Acrobat Reader

• How to build HTML

Yahoo ! Messenger Emoticons

Yahoo ! Messenger Emoticons
Buat kawan-kawan yang ingin menghiasi posting-annya dengan berbagai ekspresi dari yahoo, saya berikan source codenya, biar anda bebas ngakak atau cemberut selagi posting. Silahkan copy source code berikut, sisipkan pada kata yang sesuai dengan postingan anda, kalo lagi sedih jangan di pasang yang lagi ngakak, trus kalo lagi patah hati ya nyengir aja ya...          

Blogger Emoticons

Blogger Emoticons
Biar senyum nya makin lebar, and kalo ketawa makin ngakak dikala posting artikel, saya berikan perbendaharaan wajah-wajah kamu...

Blogger Emoticons

Membuat Read More untuk Template klasik

Membuat Read More untuk Template klasik
Update : Tutorial ini khusus bagi anda yang masih menggunakan template klasik, jika anda sudah menggunakan template baru (xml/beta), silahkan baca petunjuk membuat read more di sini!

Cara Memposting Artikel

Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com. Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.

Toolbar yang ada ketika posting :

Mengatur Hurup dan Warna

Mengatur Hurup dan Warna
Untuk para blogger baru, sobat akan menikmati fasilitas baru dari blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk template "minima")

Cara Mengganti Template di blogspot

Cara Mengganti Template di blogspot

Sekilas tentang template blog, Template website atau blog adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang anda lihat saat ini, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.

Cara Setting Blog Di blogger

Cara Setting Blog Di blogger

Hal pertama yang penting anda lakukan agar blog anda di blogger mempunyai performa yang baik adalah melakukan beberapa Setting atau pengaturan. Sebagai bahan inspirasi bagaimana cara melakukan setting blog di blogger, berikut Kolom Tutorial tuliskan cara pengaturan blog di blogger (pastikan anda (pastikan anda memilih bahasa indonesia agar sesuai dengan tutorial dibawah) :

 

Panduan membuat Blog di Blogspot

Panduan membuat Blog di Blogspot
1. Apa itu Blog ?

Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama.

Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan situs yang ada di internet.

Membuat Text Area 2

Membuat Text Area
Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Membuat Link (2)

Membuat Link (2)
Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :

   1. Login di blogger dengan ID anda


   2. Klik menu Layout


   3. Klik Page Elements


   4. Klik Add a Page Element

Membuat Link (1)

Membuat Link (1)
Dalam dunia blog, tentu anda tidak asing lagi dengan yang namanya link. Apabila anda seorang blogger (tukang ngeblog kata orang jakarta mah), tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog lain, jadi kalau anda tidak bisa membuat link, ini dapat berakibat anda akan di asingkan alias di cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini, saya akan mengulasnya dalam beberapa sub bagian yakni :

Link pada posting-an

Anchor Link / Link Satu Halaman

Anchor Link / Link Satu Halaman
Lagi-lagi saya tertarik untuk membahas tentang cara membuat link. Yo'i, karena tercatat tiga artikel yang sudah di posting tentang bagaimana cara membuat tautan atau link, dan yang sekarang merupakan artikel yang keempat. Akan tetapi jangan dulu mengira bahwa posting kali ini akan sama dengan postingan terdahulu, sebab kali ini yang akan di bahas adalah cara untuk membuat link dalam bentuk Anchor.

Apa itu Anchor Link ?

Pasang Link di New Blogger Template

Pasang Link di New Blogger Template
Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Membuat Komentar Admin Berbeda Dengan Pengunjung Blog

imageKalau kita berkunjung ke beberapa blog terkadang kita melihat daftar komentator suatu postingan dan mendapatkan komentar admin atau pemilik blog tampak berbeda dengan komentar pengunjung. Sebagian template telah menyediakan fitur ini sedangkan lainnya harus dimodifikasi lagi.

Nah bagi anda yang templatenya belum memiliki fitur tersebut berikut trik membuat komentar pemilik blog berbeda dengan pengunjung:

Membuat Background Pada Teks Area

Anaa pernah posting cara membuat teks area, apa itu teks area? lihat aja lagi postingan itu disini.

Kali ini cara membuat agar teks areanya memiliki background dengan cara menambahkan kode berikut:

<div style="overflow: auto; width: 500px; height: 100px;
background-color: #FFCCFF; text-align: justify; padding: 5px;
border: 2px solid #FF3300;">Letakkan kalimat yang ingin ditampilkan pada teks area disini</div>

Cara Membuat Background Pada Titel Footer

Melengkapi postingan sebelumnya. Berikut langkah langkah membuat background pada titel atau judul footer seperti pada contoh gambar berikut atau lihat
disini dan disini

membuat background titel footer

membuat background titel footer

Membuat background pada titel atau judul footer

Membuat background Pada Judul Sidebar

Ingin mengganti background pada judul atau titel sidebar seperti contoh dibawah ini?
mengganti background pada judul atau titel sidebar< mengganti background pada judul atau titel sidebar<






Berikut cara mengganti background pada judul sidebar, tutorial ini sudah anaa praktekan diblog anaa disini dan disini

Membuat Background Pada Judul Postingan

Postingan anaa kali ini masih tentang modifikasi background pada template kalau sebelumnya trik membuat background pada judul sidebar sekarang anaa ingin berbagi trik sederhana lagi, bagaimana membuat background pada judul atau titel posts yang contohnya bisa dilihat pada gambar berikut atau aplikasi nyatanya disini
background pada titel posts
Mudah saja, berikut langkah langkah membuat background pada titel posts:

Membuat Efek Stabilo/ Background Tulisan

Kalau sebelumnya anaa pernah membuat postingan cara membuat background pada postingan, kali ini anaa ingin sharing lagi cara membuat efek stabilo atau cara membuat background pada tulisan. Seperti ini:
Contoh tulisan Dengan Efek Stabilo

Contoh tulisan Dengan Efek Stabilo
Bagaimana cara membuatnya? Mudah saja hanya dengan menambahkan code berikut

    <span style="background-color:#FFFFB3;"> Disini letak tulisan yang ingin diberi efek stabilo </span>

Untuk menambahkan code tersebut anda harus dalam edit HTML.
Untuk melihat code warna dapat merujuk disini

Merubah Background Postingan

Suatu waktu mungkin kita bosan dengan background postingan kita yang warnanya putih atau hitam polos, atau mungkin sekedar ingin mencoba bereksperimen kecil maka kita boleh mencoba merubah backgroun postingan dengan cara-cara berikut ini, karena pengetahuaan yang baru pasti sangat menyenangkan. Nah cara membuat backgroun postingan yang saya tahu saat ini baru dua cara...

    * Yang Pertama untuk membuat background warna, caranya...

Mengganti Background Blog

Lansung aja ya!

    * Mengganti Warna Background
      Untuk template minima klasik :

   1. Sign in
   2. Klik menu Template
   3. Klik menu Edit HTML
   4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
   5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :

Membuat BlogRool

Blogroll adalah tempat menyimpan link address milik orang lain pada blog atau website kita.

BlogRool ini gunanya untuk menghemat tempat pada blog pada saat daftar link kita sudah banyak dan menyesakkan body template blog. Ada beberapa cara yang saya tahu untuk membuat blogrool.

Yang pertama seperti ini: Blogroll dengan menu dropdown:

Membuat Scroll Pada Daftar Komentar (New)

image

Postingan ini untuk menjawab pertanyaan ukhty narti pada trik membuat scroll pada daftar komentar pertama seperti terlihat pada image diatas. jadi perbedaannya dengan trik sebelumnya kolom untuk menuliskan komentar berada diluar daftar komentar. Untuk hasil atau contohnya seperti daftar komentar pada blog ini

Cara Membuat Scroll Pada Daftar Komentar

imageBeberapa waktu lalu, beberapa postingan anaa mendapatkan banyak komentar hingga puluhan (belum sampai ratusan nie?) Alhamdulillah apresiasi yang indah dari rekan-rekan sahabat blogger. Tapi rasanya kurang nyaman juga melihat sebuah halaman dibuka dan daftar komentarnya panjang sekali, beberapa kali blogwalking dan melihat disebagian blog sahabat lainnya ada yang daftar komentarnya memakai scroll, anaapun tertarik untuk membuat hal serupa itung itung hemat halaman.

Cara Membuat Menu Scrolling

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 dibawah ini!

      Cara membuat related post

      Ngeblog offline tanpa terhubung keinternet

      Mengganti Read More Dengan Image

      Cara membuat Recent Post

 

Membuat Cursor Bertabur Bintang

Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik, unik dan macam-macam deh. 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:
Membuat cursor bertabur bintang

Cara Membuat Link Memiliki Ragam Efek Menarik

Bingung mau ngasih judul apa, maksud anaa jika Ingin link tersentuh pointer menjadi huruf besar, bekedip kedip warna pelangi dan backgroundnya seperti kembang api atau bintang bertaburan (contohnya seperti di blog ini).
Berikut cara buatnya:

Membuat Link Berwarna Pelangi

Ingin membuat link pada blog anda berkedip dan berwarna pelangi ketika tersentuh pointer? Caranya sangat mudah

    * Dalam keadaan loggin,
    * Masuk pada menu template,
    * Klik Edit HTML,
    * Cari kode <head>,

Kemudian copy code berikut dan paste tepat dibawah code tadi

    <script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/>.

    * Terakhir simpan template.

Membuat Effect Hover Pada Image Dengan CSS

Postingan kali ini saya hanya ingin mengetengahkan trik sederhana membuat effect hover pada image dengan bantuan CSS. Seperti apa effect yang terlihat, silahkan sorotkan pointer pada sample image dibawah ini:

Nah cara menambahkan effect hover pada image untuk template blogger sebagai berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

Cara Membuat Efek Marquee (Teks Berjalan)

Berikut Beberapa macam efek marque atau teks berjalan:

    * Contoh marque dasar

Kalimat Anda



caranya dengan menambah code berikut:

    <marquee>Kalimat Anda</marquee>

    * Contoh marquee yang berjalan dari kiri ke kanan

Merubah Read More Dengan Icon Image

Setelah pada postingan sebelumnya kita membahas Cara membuat read more atau baca selengkapnya. Kali ini saya ingin berbagi lagi dengan pengunjung, kali ini cara merubah atau mengganti read more dengan image agar tampilannya lebih menarik.

Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini: th_readmore atau seperti ini:

Membuat Read More Atau Baca Selengkapnya

Postingan kali ini tutorial membuat read more atau baca selengkapnya, Karena ada ade yang nanya tuh di kolom shoutmix,

dien: Kak, gimana sih caranya biar postingan tidak tampil seluruhnya? Yang ada "baca selengkapnya..." gitu...

Dari pada dijawab personal aja mendingan dibuat postingan biar bisa juga jadi referensi bagi yang lain paling tidak untuk jagoan-jagoan kecil saya nanti toh? InsyaAllah. Apalagi awal ngeblog saya juga bingung, mau tampilin postingan tiga aja dihalaman depan dah panjaaaang banget, pusing khan liatnya? Fatalnya gara-gara masalah sepele itu saya sempat mandek nulis, setelah dapat caranya template saya malah rusak karena salah memahami. Belajar dari pengalaman saya tuliskan tutorial ini, pengalaman guru paling berharga bukan?

Saya Buat Blog Ini Via Hp

Ketika demam ngeblog menyerang orang orang, sayapun ingin terjangkiti tapi sayang hasrat terbentur sarana yang terbatas, disini saya tidak menemukan warnet yang menyediakan ruangan khusus bagi wanita.

Sampai kemudian saya memiliki Hp dengan jaringan gprs yang dapat mengakses internet, saya mulai ngotak ngatik, dan masyaAllah saya takjub dengan hasilnya. Hp saya ternyata tidak saja terbatas pada fungsinya sebagai alat komunikasi, tapi memiliki fungsi beragam yang luar biasa. Diantaranya, ya untuk mewujudkan satu impian kecil saya diatas tadi.

Ngeblog Offline Tanpa Terhubung Ke Internet

Mungkin teman-teman sudah pernah mendengar atau bahkan sudah tak asing lagi dengan Windows Live Writter, tapi saya yakin tidak menutup kemungkinan ada diantara pengunjung yang belum mengetahuinya, maka saya memandang perlu untuk mempublikasikan hal ini dalam postingan saya kali ini, postingan yang saya ketik menggunakan aplikasi yang akan kita bahas saat ini.

Cara Membuat Menu dTree

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 berikut:
cara membuat menu dtree
Menu seperti ini bisa juga kita tampilkan pada web atau blog kita seperti yang terlihat pada image berikut atau bisa lihat langsung demonya diblog saya disini
image
Nah ingin membuat menu dtree seperti itu? Caranya mudah saja hanya dalam beberapa langkah:

Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

 Thumbnail galery with heading and caption with jquery

View Demo

Tutorial kali ini kita akan belajar membuat image dengen caption (keterangan) menggunakan script simple JQuery, turorial ini saya pelajari dari Queness. Disini saya ingin berbagi kepada teman-teman cara menerapkan jquery pada template blogger.

How To Add Featured Auto Posts Slider Using JQuery To Blogger

menu slider/ featured auto posts slider

Sebagaimana janji saya sebelumnya untuk segera berbagi setiap ilmu penerapan JQuery untuk template blogger yang baru saya dapatkan, maka postingan ini masih akan mengetengahkan tutorial JQuery dengan tema yang serupa dengan tutorial sebelumnya pula, yaitu modifikasi featured posts atau content slider (menu slider). Agar teman-teman juga memiliki banyak pilihan, bahkan bagi teman yang sudah bisa mengedit CSS bisa juga memodifikasi kembali tampilan featured post ini sesuai kreatifitas masing-masing.

Membuat Sebuah Simple Featured Content SlideShow Menggunakan JQuery

menu slider simple menggunakan JQuery untuk template blogger
View Demo

InsyaAllah postingan kali ini, kembali saya ingin mengetengahkan tutorial penerapan JQuery pada template blogger. Berbeda dari tutorial-tutorial sebelumnya dimana source saya peroleh dari web-web designer luar, maka tutorial kali ini lahir dari hasil pengamatan pada sebuah free blogger template yang dikenal dengan Elegant Dashboard, tidak jauh berbeda dengan lahirnya tutorial terdahulu dengan judul menu slider versi 2 yang juga saya pelajari dari free blogger template Zinmag Primus. Bagi yang belum pernah mencoba membuat menu slider versi 2 seperti screenshot berikut, silahkan klik disini, atau silahkan lihat dulu demo featured content slider post using JQuery/ menu slider versi 2 menggunakan JQuery disini
menu slider simple menggunakan JQuery untuk template blogger
Nah sekarang langsung pada tutorial, cara membuat simple content slideshow menggunakan JQuery
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag

Membuat Featured Posts (Menu Slider) Dengan JQuery

featured post/ menu slider  Untuk Lihat Live Demo klik disini atau disini

Dalam desain web site atau blog banyak cara untuk membuat tampilan featured content atau post nampak profesional dan cantik dengan bantuan JQuery. Sehingga menambah jumlah ragam fetured content slider atau slide show dalam dunia desain. Sebagai peminat JQuery InsyaAllah saya akan sering mengetengahkan tutorial JQuery yang baru saya dapatkan untuk dibagi kepada teman-teman dan pengunjung blog ini.

Cara Membuat Menu Slider Versi 2 Menggunakan JQuery

image
Berikut anaa coba berbagi trik membuat menu slider versi dua. Mengapa versi dua? Karena sebelumnya anaa pernah posting trik membuat menu slide atau tab view slide versi 1 yang contonya bisa dilihat pada halaman awal (home) pada sidebar kanan blog ini.
Cara membuat menu slider versi 2

Featured Content Slider Using JQuery

featured content slider using jquery   

    View Demo



Banyak hal yang bisa kita dapatkan dari dunia maya ini, baik yang positif ataupun negatif.. tinggal bagaimana kita memfilter diri untuk menyaring yang baik dan postif. Saya merasakan hal ini pada diri saya, saat berselancar di dunia maya, blog walking keblog teman-teman, bahkan sekedar melihat-lihat galery template, theme atau layout web site, saya menemukan ilmu dan informasi baru bahkan terkadang  inspirasi untuk postingan yang akan saya publikasikan diblog ini sampai rancangan planning yang ingin saya lakukan dimasa mendatang.

Membuat Tabber Tab Dengan Jquery #2

Postingan sebelumnya saya pernah mengetengahkan cara membuat tabber tab atau tab view dengan bantuan JQuery part 1. Namun tabber tab tersebut memiliki beberapa keterbatasan, diantaranya tidak dapat menambahkan beberapa widget umum seperti arsip blog, label, kecuali dengan memasukkan link widget yang saya sebutkan tadi dengan cara manual. Sedangkan tabber tab dengan JQuery part 2 ini, kita dapat menembahkan fitur atau widget tadi dengan mudah, cukup dengan mendrag/ memindahkan widget kesidebar.

Cara Membuat Page Peel Effect Untuk Blogger Dengan JQuery

Salam sobat blogger. Pada postingan kali ini saya ingin berbagi lagi cara membuat page peel effect untuk template blogger. Apa yang dimaksud dengan page peel effect? Sobat pernah mengunjungi suatu blog dan ketika krusor atau pointer menunjuk kesudut kanan atas blog, tiba-tiba halaman tersebut terlipat? Seperti contoh image berikut:

Multi Level Drop-Down Menu Dengan CSS dan JQuery

Multi level drop-down menuMulti level drop-down menu

View Demo

Pada postingan saya sebelumnya yang berjudul 30 tab menu navigasi horizontal, seorang pengunjung bertanya pada kolom komentar cara membut menu drop-down. Alhamdulillah setelah search digoogle, saya temukan tutorial membuat multi level drop-down menu dengan CSS dan JQuery untuk web dari Dinamic Drive. Setelah saya modifikasi tutorial ini bekerja dengan baik pula pada template blogger. Contohnya bisa lihat pada diatas atau free blogger template dalam pengembangan saya disini

Cara Memasang Widget Sexy Sosial Bookmarks

Postingan kali ini merupakan request dari seorang pengunjung baru blog ini. Saya kira dari sekian pengunjung dan penanya yang pernah merequest tutorial, inilah satu penanya yang menurut saya punya cara yang unik mengajukan request. kenapa saya bilang unik?
Berikut pertanyaan yang ditinggalkan sang penanya:

Daftar Kode Warna Dengan Tabel

Berikut adalah tabel kode warna sebagai referensi sobat dalam mengedit atau mendesain template blog . Cara untuk mengetahuai kode warnanya, sobat klik aja pada tabel warna pilihan sobat maka secara otomatis kodenya akan ditampilkan pada kolom persegi dibawah tabel warna, disamping tulisan "kode warna yang terpilih"!

Cara Memasang Widget Top Komentator

Saya kira akhir-akhir ini keasyikan ngotak ngatik CSS dan desain template hampir melupakan saya bahwa masih ada beberapa widget blogger yang belum saya posting.  Diantaranya widget top komentator yang ingin saya ketengahkan kali ini tutorial memasangnya pada template blogger.

Cara Membuat Scroll Pada Related Post

Awalnya alasan membuat scroll pada artikel terkait/ related post diblog ini karena pada postingan anaa cara membuat scroll pada daftar komentar sebelumnya bermaksud agar bisa dikit menghemat halaman dan tampilan lebih apik tidak dijejali dengan daftar komentar yang panjang.... tapi komentar dari sahabat blogger (ukhty Narti) yang menanyakan bagaimana agar daftar komentar tidak masuk dalam scroll membuat anaa berpikir kembali. Benar juga ada baiknya kolom untuk menuliskan komentar tidak masuk dalam scroll selain justru lebih apik, sangat membantu sahabat blogger yang masih baru (padahal asli anaa satu diantaranya) untuk tidak bingung saat ingin menuliskan komentarnya harus nyari nyari, apalagi kalau belum ngerti scroll? Karena kolomnya 'sembunyi' didalam scroll & terletak paling bawah dari daftar komentar.

 

Cara Membuat Related Post (Tulisan Terkait)

Related posts adalah tulisan terkait atau artikel yang bersangkutan. Jadi saat kita menampilkan suatu artikel dengan adanya widget related posts ini, pembaca atau pengunjung blog anda akan mudah mendapatkan informasi tentang artikel anda yang masih memiliki keterkaitan atau masih dalam categori yang sama karena related posts ini letaknya tepat dibawah postingan. Selain memudahkan pembaca, juga sebagai satu sarana promosi tulisan anda juga kali ya?!

nah berikut tutorial untuk Membuat Related Post atau Artikel Yang Berhubungan

Membuat Recent Comment (Komentar Terbaru)

membuat widget recent comment atau komentar terbaru Fungsi dari recent comment atau komentar terbaru ini, agar kita dapat mengetahui siapa yang baru saja berkomentar dan dipostingan kita yang mana pengunjung meninggalkan komentarnya.

Nah berikut tutorial untuk membuat recent comment atau komentar terbaru:

1. Login ke blogger lalu pilih menu "Layout"
2. Kemudian copy script berikut ini :

    <script style="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/recents.comments.js"></script>
    <script style="text/javascript">
    var numcomments = 8;
    var showcommentdate = true;
    var showposttitle = true;
    var numchars = 100;
    var standardstyling = true;
    </script>
    <script src="http://yourblog.blogspot.com"/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti http://yourblog.blogspot.com dengan nama blog anda!
3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script diatas kedalam kotak yg disediakan.

5.Simpan! Selesai, lihat hasilnya diblog anda!

Cara Membuat Recent Post (Postingan Terbaru)

Setelah pada postingan sebelumnya saya menjelaskan cara membuat recent comment maka postingan kali ini adalah bagaimana cara membuat recent post atau postingan terbaru. Ya langsung saja:

    * Login pada blogger.
    * Klik Layout pada Dashboard ,lalu Page Element.
    * Klik Add a Gadget.
    * Pilih HTML/Javascript
    * Masukkan kode dibawah ini dengan cara copy dan paste dan beri judul pada kolom Title.

Cara Memasang Translate Pada Blog

Memasang translete pada blog sangat perlu karena mungkin saja ada pengunjung dari negara asing yang nyasar keblog anda, tapi yang harus diperhatikan agar tidak terjadi kesalahan translate maka blog anda harus menggunakan bahasa yang resmi, bukan bahasa pasaran atau gaul.

Nah caranya:

Merubah Posisi Sidebar & Main Pada Template Blogger

InsyaAllah kali ini saya ingin berbagi trik mudah bahkan sangat sederhana, yang saya temukan hasil dari otak-atik CSS saat mencoba mendesain template baru. Yaitu cara merubah posisi sidebar dan main (kolom utama tempat postingan) pada template blogger, sebagai contoh tampilan elemen halaman template default minima seperti image berikut:

Merubah Posisi Sidebar Dan Main Pada Template Blogger

Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer

Untuk menepati janji saya pada postingan sebelumnya dengan tema merubah posisi sidebar dan main pada template blogger, saya insyaAllah akan mengetengahkan tutorial menambahkan halaman baru diatas footer.

Sebelumnya saya sudah pernah membahas tutorial serupa tapi tak sama, karena elemen yang ditambahkan pada postingan terdahulu hanya tiga kolom, sekarang kita akan belajar bagaimana menambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut:

Cara Menambahkan Elemen Halaman Diatas Footer

Masih tentang desain template setelah sebelumnya saya posting cara menambah dua kolom elemen halaman dibawah sidebar utama dan menambah sebuah elemen halaman dibawah dua sidebar yg telah dibuat itu, agar lengkap kali ini akan saya paparkan lagi langkah-langkah menambah elemen halaman diatas footer seperti terlihat pada gambar berikut:

Menambahkan Elemen Halaman Baru Diatas Dua Kolom

Postingan ini khusus menjawab pertanyaan sobat Rahmatea, yang menanggapi postingan saya yang membahas cara menambahkan elemen halaman dibawah dua kolom. Bagaimana trik atau caranya jika elemen yang ditambahkan diatas dua kolom? Caranya mudah saja kebetulan postingan sebelumnya kita membahas cara menambahkan sebuah kolom pada sidebar, sehingga hasilnya template yang semula dua kolom menjadi tiga kolom.
menambahkan elemen halaman baru atau kolom baru pada sidebar
Sekarang kita lanjutkan...
Bagaimana cara menambahkan sebuah kolom elemen halaman diatas dua kolom

Menambahkan Kolom Elemen Halaman Baru Pada Sidebar

Setelah mempublikasikan template perdana yang saya hasilkan dari belajar otodidak desain template, beberapa teman minta diajarkan cara membuat template. maka pada postingan kali ini kita akan belajar lagi bagaimana menambahkan elemen baru pada sidebar atau membuat template dua kolom menjadi tiga kolom dengan dua kolom pada sidebar kanan.
Nah langsung saja seperti biasa template yang saya jadikan tempat eksperimen kecil adalah template default minima.

Menambah Elemen Dibawah Dua Sidebar

Sebelumnya saya pernah posting cara menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama.
 menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama
Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:
menambah elemen halaman dibawah dua kolom atau sidebar

Menambah Dua Kolom Elemen Halaman Dibawah Sidebar Utama

Kali ini saya ingin mengetengahkan cara menambah dua kolom elemen halaman dibawah sidebar utama.
Tidak panjang lebar lagi, berikut cara menambah elemen halaman dibawah sidebar utama yang saya jadikan tempat eksperimen blog saya lainnya yang menggunakan template default blogger yaitu minima...
Tampilan awal templateminime seperti gambar dibawah ini:

elemen halaman dasar minima
Bagaimana cara menambah elemen dibawah sidebar utama menjadi dua kolom seperti gambar dibawah ini:
menambahkan dua kolom dibawah sidebar utama
Ikuti langkah langkahnya:
Menambah elemen di bawah sidebar utama

Membagi Header Menjadi Dua Kolom

Alhamdulillah hari ini bisa update lagi setelah beberapa hari asyik ngotak ngatik CSS dan belajar menggunakan beberapa program (Adobe Photoshop, Corel Draw X4, DreamLight Photo Editor dan PhotoShine) yang baru saya instal dilaptop kesayangan, yang tentu program itu saya harapkan bisa membantu saya lebih kreatif lagi dalam mendesain template kedepan dan menggunakannya pada hal-hal lain yang juga memeberi maslahat.
Tutorial sebelumnya kita sudah pernah membahas cara menambahkan kolom atau elemen halaman diatas header dan dibawah header juga menambahkan dua dan tiga kolom dibawah header. Kali ini kita akan belajar menambahkan elemen halaman baru pada header atau membagi header menjadi dua kolom.
Hasilnya seperti screenshot berikut:
membagi header menjadi dua kolom
Berikut langkah-langkahnya:

Membuat Tabber Tab Menu Dengan JQuery #1

Saat ini tabber tab mulai banyak terkenal dalam dunia desain web. Banyak situs yang menggunakan tabber tab dan mengisinya dengan berbagai konten untuk menghemat ruang halaman web site. Diantara yang banyak saya lihat menggunakan tabber tab untuk kategori recent post, comments dan random posts adalah template atau theme wordpress.

InsyaAllah kali ini saya ingin mengetengahkan cara membuat tabber tab dengan JQuery untuk template blogger. Diantara ragam tabber tab satu diantara yang akan kita pelajari cara pembuatannya sekarang, adalah tabber tab dengan struktur menu menggunakan icons seperti screenshot diatas. Atau lihat demonya disini

Cara Menambahkan Elemen Halaman Atau Kolom Full Widgets Pada Sidebar

Tutorial kali ini kita akan belajar lagi tentang desain template (cieh)? Bagaimana menambahkan elemen halaman atau kolom full widget pada sidebar template blogger dengan menggunakan CSS, XHTML dan JavaScript hanya dalam empat langkah simple, kita juga bisa dengan mudah mengganti warna dan widget langsung pada area dashboard. Berikut sebuah screenshot simple hasil dari tuturial ini:


tab view versi 2 image. 
imagetab view versi 2

Tampilannya mirip tab view sederhana yang triknya pembuatannya pernah saya bahas sebelumnya hanya saja selain perbedaan yang sudah saya sebutkan diatas kolom widget ini ketika menu diklik tingginya akan menyesuaikan dengan tinggi widget. Untuk menguji dan meyakinkan sobat JavaScript ini bekerja silahkan lihat demonya dulu pada template yang masih dalam proses desain saya disini dan disini. Sekalian saya minta saran dan kritik teman-teman untuk kedua tampilan terbaik template sederhana itu!!!

O ya saya sarankan untuk mengetes tutorial ini pada minima template atau backup template sobat sebelum bereksperimen dengan template sobat saat ini.

Membuat Background Pada Teks Area

Anaa pernah posting cara membuat teks area, apa itu teks area? lihat aja lagi postingan itu disini.

Kali ini cara membuat agar teks areanya memiliki background dengan cara menambahkan kode berikut:

Letakkan kalimat yang ingin ditampilkan pada teks area disini

about terra-fertile.blogspot.com

terra-fertile.blogspot.com provides a variety of information, business and shopping online. This blog is perfect for those of you who do not want to bother with coming to a shopping mall or market, full of noise, congestion, through this social network, all your needs will be found. In addition, for those of you who wish to seek additional income on social networks, get information here. terra fertile derived from Italian language, which means fertile land. I mentediakan a very fertile land for all of you online network users ....