Tips Membuat jQuery Slider Untuk Blogger - V3

 

Sesuai permintaan Anda, kami senang untuk menyajikan versi lain yang menakjubkan dari Widget Gambar slideshow untuk blog BlogSpot. Widget ini berbeda dari versi sebelumnya berkaitan dengan pilihan kecepatan, waktu buka, navigasi dan kontrol. Anda dapat menggunakannya untuk menampilkan bahkan Feature Posts Anda menggunakan judul Posting yang ditam dan deskripsi. Widget ini lagi kode diambil dari template WordPress. Slider dikodekan sedemikian rupa sehingga akan muncul di situs Anda saja. Jadi mari kita pertama melihat demo,

Live Demo

Adding the Slider To Blogger:selanjutnya

- Reviewer: Unknown - ItemReviewed: Tips Membuat jQuery Slider Untuk Blogger - V3

Tips Membuat Widget Artikel Terbaru dan Mantap cess..

Tips kali ini menjawab pertanyaan dari teman blogger SMANSA SINJAI 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

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   Keterangan :
   var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
   var urlblog = "http://newroelciptakreasindo.blogspot.com/"; >> ganti dengan URL blog Anda
   var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
   

   <div id="terbaru"></div>
   <div id="mas-navigasifeed"></div>

   Terakhir save dan lihat hasilnya.

Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat..... - Reviewer: Unknown - ItemReviewed: Tips Membuat Widget Artikel Terbaru dan Mantap cess..

Tips Membuat Smile pada postingan Blog

Sebenarnya sudah banyak postingan dari para blogger master tentang Menampilkan Smiley Pada Postingan, namun tidak ada salahnya saya memposting ini, 

Mungkin saja di antara kalian belum tau. XD...

Trik ini dapat membuat tampilan postingan sobat menjadi lebih menarik, karena kita dapat menampilkan pic smile seperti

 ,,, , , ,  dan lain lain.

Caranya gampang Sob, silakan ikuti tutorial berikut :

• Login ke blogger trus pilih Layout > Edit HTML.
• Beri tanda centang pada Expand Widget Templates.
• Cari kode ini ]]></b:skin> .
• Masukkan script berikut ini dibawah kode ]]></b:skin>
• <script src='http://wadah-tutorial.googlecode.com/files/ysmileys.js' type='text/javascript'/>
• Terakhir klik Save Template. Selesai...

Berikut beberapa kode yang dapat Anda gunakan :

:D		:P
:)		;)
:-S		:-B
:-h		:-a
:x		:(
:-t		:-bd
:-c		:-*
8-7		8-|
7:P		=D7
8-}		X(

Sumber Cah Dablong.....!! Jadilah Bloger sejadi Dengan Memberi sumber pada saat Copas..! :D - Reviewer: Unknown - ItemReviewed: Tips Membuat Smile pada postingan Blog

Tips Membuat Teks Berjalan di Menu Bar

alam tutorial saya sebelumnya mengenai membuat text berjalan (marquee), teman-teman semua sudah saya jelaskan bagaimana cara penggunaannya. Selain membuat teks berjalan di blog, kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1.  Pertama kali yang harus kita lakukan adalah login ke blogger
2.  Pada menu Design -> Edit HTML
3.  Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Roel Cipta Kreasindo Sinjai ";

msg = " |newroelciptakreasindo.blogspot.com/ -- " + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}
scrollMSG();
//]]>
</script>

Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4.  Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda.  Demikian tadi tutorial singkat membuat teks berjalan di menu bar, selamat mencoba.

Semoga bermanfaat

- Reviewer: Unknown - ItemReviewed: Tips Membuat Teks Berjalan di Menu Bar

Tips 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

Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Source : medienfreunde.com

Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   Keterangan :

   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

   Kode warna biru : 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212 adalah panjang dan lebar image yang ada di slider.
7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
   Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :

   /feeds/posts/default?max-results

   Menjadi :

   /feeds/posts/default/-/your label?max-results

   Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
8. Terakhir, save templates dan lihat hasilnya. 

Itu tadi tutorial membuat Slider image otomatis joss banget yang ada pada Johny Ganteng Banget, jika masih kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat sahur dan semoga bermanfaat. - Reviewer: Unknown - ItemReviewed: Tips Membuat Slider Image Otomatis Joss Banget

Tutorial 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 pada tutorial 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 situs detik.com.

DEMO

Cara membuatnya hampir sama dengan slider Carousel otomatis versi 1, disini saya hanya merubah kode CSS dan menambahkan timestamp diatas judul post. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Pertama Anda mesti login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   Keterangan :

   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

   Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.
7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
   Perhatikan kode warna merah diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Demikian tadi tutorial membuat slider Carousel otomatis versi 2, seperti biasa jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat - Reviewer: Unknown - ItemReviewed: Tutorial Membuat Slider Carousel Otomatis Versi 2

Tips Membuat Slider Carousel Otomatis

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

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   Keterangan :
   
   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
   Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

- Reviewer: Unknown - ItemReviewed: Tips Membuat Slider Carousel Otomatis

Membuat Multi Widget Pos Populer Di blogger blog

Tim Blogger memperkenalkan Pasca resmi mereka widget populer yang bisa menampilkan potongan posting Anda yang paling dilihat bersama dengan gambar thumbnail berdasarkan statistik Anda Analytics. Hal ini juga menampilkan tiga mode: tampilan judul saja, menampilkan judul dengan thumbnail gambar atau judul layar bersama dengan potongan posting. Tapi ini widget default tidak menarik, untuk membuatnya menarik dan terlihat sidebar Anda lebih indah kita harus menyesuaikan dan menambahkan variabel baru dan beberapa kode CSS ke template blogger Anda. Anda mungkin telah melihat widget ini di blog wordpress atau website, sekarang saya telah dikonversi untuk blogger. Sekarang Tutorial ini akan menunjukkan kepada Anda Cara Tambah Berbeda / Multi Widget Pos berwarna Populer Di blogger.

Popular Post Widget Series

1. Multi Colored Popular Post Widget For Blogger

2. Multi Colored Popular Post Widget V2 With Spinning Hover Effects For Blogger

3. Multicolored Popular Post Widget V3 For Blogger

4. Popular Post Widget With Spinning Hover Effects For Blogger

5. Popular Post Slider/Image Gallery For Blogger

BACA SELENGKAPNYA...... - Reviewer: Unknown - ItemReviewed: Membuat Multi Widget Pos Populer Di blogger blog

Tips Praktis memasang Kotak berlangganan Email Di Blogger

Jaringan Sosial raksasa yaitu Google plus, Facebook, Twitter, dan RSS yang tidak menyediakan kualitas lalu lintas ke situs web tanpa membangun Backlinks atau menghabiskan uang untuk Search Engine Optimization. Hal ini semakin penting untuk mensosialisasikan blog Anda di situs jaringan sosial yang berbeda karena tidak hanya memberikan paparan tetapi membangun kualitas pembaca. Dengan cara yang sama, Anda harus mempromosikan Pages Sosial Anda pada website Anda, sehingga siapapun yang datang baik secara langsung maupun Dari mesin pencari bisa menjadi widget readers.This biasa berisi link dari halaman Fan Facebook, Google + page dan twitter mengikuti tombol, dan RSS bentuk yang menarik langganan yang akan meningkatkan jumlah pelanggan email Anda. Ketika Anda membawa mouse Anda ke ikon ini ikon berputar dengan 360 derajat dan menyediakan sebuah hover efek yang indah. Ketika itu reader tampak sebuah kotak berlangganan sederhana, mereka tidak akan berlangganan. Tapi ini kotak subscribe memiliki tampilan menarik dan mengagumkan, sehingga blog Anda pembaca akan berlangganan, yakin. Anda dapat menambahkan kotak berlangganan ke blogger sangat mudah dan sederhana.

Stylish Email Subscription Box Demo

LIVE DEMO

How To Add Stylish Email Subscription Box to Blogger

- Klik pada tombol Generator Widget widget ditunjukkan di bawah ini
- Sesuaikan Pengaturan yang Anda butuhkan
- Kemudian klik tombol Generate kemudian akhirnya klik tombol Add To        Blogger Widget Generator      source - Reviewer: Unknown - ItemReviewed: Tips Praktis memasang Kotak berlangganan Email Di Blogger

Tips Membuat Related Post Thumbnails

Menambahkan widget posting ke blog Terkait selalu terbukti sangat bermanfaat bagi mereka blogger yang konsisten mendapatkan tingkat yang lebih tinggi Bounce. Related posts selalu dapat diakses di akhir posting, sehingga pengunjung tidak akan merasa gangguan saat membaca artikel. Selain itu, setelah membaca artikel keluar pengguna dapat merasa bebas untuk mengunjungi beberapa posting terkait. Ini mengurangi tingkat Bounce cukup mahal dan memainkan peran penting dalam menarik pengunjung. Namun, Blogger tidak memiliki built-in fungsi related post. Oleh karena itu, kita harus bergantung pada sumber-sumber eksternal. Setelah merilis sistem komentar berulir profesional, hari ini kita akan mengungkapkan sistem Thumbnail pasca Terkait kami dengan tooltips untuk platform Blogger Diaktifkan. Baca selengkapnya....  - Reviewer: Unknown - ItemReviewed: Tips Membuat Related Post Thumbnails