www.maskolis.com

Modifikasi Popular Post untuk Template Gallery

 

DEMO

 

 

Slider Otomatis Untuk Template Toko Online

Kemarin ada teman yang meminta via email untuk dibuatkan sebuah slider otomatis untuk toko online yang dikelolanya. Bisnis jualan barang atau jasa dengan memanfaatkan fasilitas internet sekarang lagi ngetrend, dan permintaan untuk membuat sebuah template toko online pun juga banyak, tapi kok susah banget ya? Saya tidak akan membahas itu sekarang, saya akan mencoba untuk memenuhi permintaan dengan membuat sebuah Featured Slider sederhana dengan tambahan paginasi berupa deretan gambar kecil dibawah summary atau ringkasan artikel. Prinsip kerja dari slider ini sama dengan slider yang ada pada template Johny Bingung, disini saya hanya modifikasi background dan menambahkan logo shopping pada bagian bawah gambar.

DEMO

Membuat Slider Image Otomatis Joss Banget

Tutorial ini menjawab pertanyaan dari teman debbie irlando manurung alias Zondim, meminta untuk dibuatkan tutorial slider yang ada di Johny Ganteng Banget. Template yang dipakai di blog itu nantinya juga akan saya share, cuma sekarang lagi massa sibuk nguli jadi nanti aja kalau sudah luang waktunya. Ada beberapa template yang nantinya akan saya share tapi kali ini saya buat sederhana, dengan sedikit menggunakan javascript, ya yang pasti lebih enteng dari biasanya. Oke kembali ke tutorial yang akan saya buat, kali ini saya akan membahas tentang cara membuat slider image otomatis sederhana yang akan menampilkan postingan terbaru Anda.

DEMO

 

Membuat Tab View Widget Kategori Mantab Banget

Kali ini saya akan membuat satu lagi tutorial mengenai salah satu fitur yang ada pada template Johny Sompret Banget, yaitu membuat tab view widget per kategori. Sebelumnya saya juga pernah membahas cara membuat simple tabber pada sidebar. Ya rencananya saya nanti akan membuat semua tutorial tentang berbagai fitur yang ada pada template-template buatan saya. Tidak ada yang mesti dirahasiakan, semua fitur akan saya jelaskan satu persatu cara pembuatannya, sehingga ke depannya diharapkan Anda mampu membuat template sendiri, syukur bisa dibagikan kepada teman-teman blogger yang lain atau minimal dipakai sendiri. Dan siapa tahu setelah itu ada yang mau menjadi partner saya dalam membuat template blogger atau paling tidak membuat sebuah tutorial baru untuk bisa dibagikan kepada pengguna blogger, karena selama ini saya bekerja sendirian, bikin tutorial sendiri, bikin template juga sendiri, jadi kalau ada yang mau bantu, silahkan saya sangat berterima kasih sekali.

Kembali ke tutorial tab view widget per kategori, widget ini menampilkan 4 post dengan thumbnail dalam tiap satu label atau kategori, untuk lebih jelasnya silahkan lihat gambar di bawah, dan klik demo biar lebih jelas.

DEMO

 

Membuat Widget Artikel Terbaru Joss Banget

Tutorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.

DEMO

 

Membuat Widget Label Tertentu dengan Satu Thumbnail

Wah judulnya kurang pas kayaknya ya...? Bodo amat, yang penting isinya. Kali ini saya akan memberikan satu lagi tutorial blogger tentang membuat widget per label dengan hanya satu thumbnail pada bagian paling atas dan di bawahnya menampilkan judul saja, untuk lebih jelasnya silahkan lihat screenshot gambar dibawah.  Biasanya widget ini banyak digunakan oleh blog konten berita, salah satu fungsi widget ini untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Sebenarnya tutorial ini sudah lama tapi karena banyak yang tanya di kotak komentar maupun di email, tidak ada salahnya jika saya perjelas lagi di artikel ini. Cara membuat widget per label yang saya gunakan disini sebenarnya mudah dan hanya menggabungkan antara tutorial membuat label atau kategori dengan thumbnail dan membuat widget label yang hanya menampilkan judul saja. 

DEMO

 

Membuat Slider Carousel Otomatis Versi 2

Sebenernya sudah lama sekali saya diminta oleh seorang teman blogger Ronny Dee untuk membuat tutorial slider Carousel seperti pada template Mas Paper 2. Kali ini saya akan membuat tutorialnya tapi hanya memakai slider carousel sederhana yang sudah pernah saya buat padatutorial sebelumnya, disini saya hanya memodifikasi kode CSS nya saja, sehingga tampilannya mirip dengan slider Carousel yang ada di template Mas Paper 2. Tapi kalau dilihat sepintas, justru slider ini lebih mirip dengan slider Carousel yang ada di bagian atas (bawah navigasi) halaman depan situsdetik.com.

DEMO

 

Membuat Content Slider Image Otomatis

Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya tentangmembuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

Banyak sekali tutorial membuat image slider yang sudah beredar di internet, dari beberapa kasus yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya memberikan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger.  Tampilan image slider seperti gambar dibawah, jika anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda bisa modifikasi sendiri sesuai selera.

DEMO

 

 

Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

DEMO

 

Hình thu nhỏ của bài viết liên quan và Hộp Feedburner

Mộtyêu cầu vài rtikel này bạn bè blogger, những người muốn làm cho tính năng Thumbnail Bài viết liên quan một lần với Feedburner hộp. Các tính năng liên quan thumbnail bài viết và Feedburner hộp trở thành một phần nguyên vẹn và nằm thường là dưới niêm. Trước đây, tôi cũng không bao giờ thảo luận về hướng dẫn bổ sung thêm hai cột dưới niêm, nhưng kết quả là quá đơn giản và có thể ít hấp dẫn du khách quan tâm để nán lại trên blog, hãy để một mình phát triển blogger hôm nay, một nhiều hướng dẫn tuyệt vời mới bằng cách sử dụng jQuery là một trong những blogger CMS có thể không nhìn thấy một mắt.

Tôi thực sự vẫn còn pengin nán lại để trò chuyện ngalor ngidul, nhưng bởi vì có một đêm nay bóng giữa Barcelona vs AC Milan cepet-cepet phải cho giấc ngủ có thể thức dậy malem. Chỉ trực tiếp Được rồi, tôi sẽ cung cấp cho một hướng dẫn để làm cho nó, chẳng hạn như một bức tranh trên bản demo có thể được nhìn thấy ở đây theo đăng:

1. Trước tiên, bạn phải đăng nhập vào các blogger đầu tiên
2. Sau đó bấm vào Template > chọn Edit HTML kiểm tra mở rộng mẫu tiện ích con
3. Đừng quên sao lưu đầu tiên templatenya, cảnh giác nếu có một lỗi trong việc chỉnh sửa sau này.
4. Sau đó, đặt các mã sau đây trên mã ]]> </ b: skin>
   
5. Vẫn còn ở vị trí Edit HTML , đặt mã dưới đây sau khi <data:post.body/> (nếu có 2 hoặc 3 lựa chọn mã cuối cùng)
   Mô tả:
   màu xanh : thay đổi địa chỉ của thức ăn 
   màu đỏ : thay thế bằng URL của bạn.
6. Lần Lưu Templates , và xem kết quả dưới đây gửi bài của bạn.

Hướng dẫn để tạo ra tính năng liên quan đến bài thumbnail trên FeedBurner phù hợp cho các blog có một màu nền đen hoặc nền. Nhưng nếu blog của bạn có màu nền trắng hoặc màu sắc tươi sáng bạn sống thay đổi bảng xếp hạng mã CSS top 4 ở trên. Hướng dẫn để được an toàn vì vậy hãy thử và hy vọng hữu ích.

 

Membuat Recent Comment Avatar Tanpa Edit HTML

Tutorial ini sebenarnya sudah banyak sekali beredar di internet, tapi karena ada salah satu teman blogger yang menanyakan via email cara membuat komentar terbaru dengan avatar, tidak ada salahnya kalau pada malam hari ini saya akan berbagi satu lagi tutorial blog mengenai cara membuat komentar terbaru dengan avatar. Meletakkan widget recent comment akan sangat berguna jika blog yang anda kelola sudah ramai pengunjung, karena terkadang kita sulit untuk mengetahui komentar-komentar yang baru masuk. Kecuali jika pemberitahuan komentar baru atau recent commentsdiarahkan pada satu email yang sudah kita setting di bagian "Comment Notification Email". Jika sudah diatur, maka dengan sendirinya anda dapat membaca tiap komentar yang masuk hanya dengan membuka email.

Sebenarnya ada alternatif lain untuk mengetahui komentar baru di blog kita, yaitu dengan cara mengecek satu persatu artikel dan melihat komentar yang masuk. Apakah Anda sanggup dan punya banyak waktu untuk melakukan itu? Nah, cara yang ini tentu saja sangat merepotkan karena harus melihat satu-persatu artikel yang ada komentarnya. Untuk itu agar lebih mudah mengetahui komentar terbaru yang masuk ke blog, anda bisa menambahkan widget "Recent Commets" yang sudah disediakan blogger. Selain widget recent comments yang disediakan blogger, anda juga dapat membuat sendiri widget recent comment ini dengan menambahkan fitur avatar agar lebih memperindah tampilan widget tersebut.

 

 

Membuat Simple Tabber di Sidebar

Tabber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.

Nah kali ini saya akan memberikan satu tips untuk Anda semua dalam membuat tabber, sangat sederhana dan tidak memperberat loading blog. Tips ini saya dapat dari Pak Abu Farhan, master blogger Indonesia yang sudah malang melintang di dunia persilatan.. eh dunia perbloggeran. Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.

Membuat Image Slider Berdasarkan Kategori Tertentu

Gambar slideshow yang sering kita lihat di bawah header atau sering disebut sebagai image slider banyak sekali menghiasi halaman pada sebuah blog. Sekarang ini banyak sekali template blogger yang bagus dan dihiasi dengan berbagai macam slider yang tujuannya untuk memperindah tampilan. Permasalahan yang timbul sekarang adalah kita terkadang malas atau kurang teliti dalam memasukkan satu persatu keterangan dalam slider tersebut, baik itu URL gambar maupun URL post yang dituju. Seperti pada tutorial saya sebelumnya mengenai cara membuat slider gambar ala Yahoo, disitu anda harus memasukkan URL dan keterangan slider satu persatu.

 

Remove Automatic Readmore at Static Page Blogger

There's some questions in my box comment and in my email tells that static page in my every templates didn't work well. Okay, I will give you some reasons, because most Blogger template that I created or modified still using the old version of "automatic readmore" feature. So, if you're using my blogger templates than you need to edit the template manually to remove read more option from the static pages. You need to follow the instructions below to remove automatic read more from blogger static pages.