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

TIPS MEMBUAT WIDGET FLOATING SOSIAL TABS

Apakah Anda ingin mengkonversi Pengunjung Anda ke Pengikut Sosial? Nah, itu adalah impian setiap blogger untuk mendapatkan pengikut sosial yang mereka bisa.Kebanyakan mereka menggunakan layanan yang berbeda untuk membeli Fans nyata Jaringan Sosial, tetapi mereka penggemar tidak Komentar atau seperti update status.Oleh karena itu, cara yang ideal untuk mengkonversi pengunjung baru ke Pengikut Sosial adalah dengan memanfaatkan widget yang berbeda Jaringan Sosial sehingga siapapun dengan mudah dapat menggunakannya tanpa ragu-ragu apapun. Di sisi lain, dengan menambahkan banyak Widgets Sosial itu bisa mempengaruhi kecepatan dari sebuah situs web. Menjaga bahwa dalam pikiran, MBL Pengembang kami telah menciptakan sebuah Widget Remarkable yang memiliki semua situs populer Jaringan Sosial. Kedengarannya bagus? Memang. Hari ini di Tutorial ini, kita akan mengintegrasikan Tab Social Media di Website Blogger Diaktifkan.


Untuk lebih Lengkapnya Baca sumbernya : TIPS MEMBUAT WIDGET FLOATING SOSIAL TAB - Reviewer: Unknown - ItemReviewed: TIPS MEMBUAT WIDGET FLOATING SOSIAL TABS

HOW TO CREATE A CUSTOMIZED MOBILE FRIENDLY WEBSITE FOR BLOGGER BLOGSPOT

Blogger BlogSpot blogs are becoming extremely old-fashioned in terms of designing and optimizing although Blogger does allow you to enhance freely in your main website template, but it doesn’t have that many features in their Mobile Templates. These days everyone prefers to use Smartphones, so it’s getting extremely essential to optimize your website for mobile users. If the ratio of your mobile users is superior to your desktop users, then you have to develop a Mobile responsive template for your Blogger Blog this will not only increase your reliability, but your main mobile audience could take breath effortlessly with your Friendly mobile template. Do you still think it is impossible to optimize Blogger BlogSpot Blogs for Mobile users? Then all these clutching questions would be answered when we will create a Customized Mobile template for our Blogger BlogSpot Blogs.

Analyzing OLD Blogger Mobile Theme Functions:

Before we get on with our tutorial let us look at our existing Mobile template for our Blogger Blog, in the subsequent screenshot, you can easily determine that the excellence is not up to the mark and the designing is not according to the expectation. Moreover, it looks dull and lacks the inspiration which is extremely crucial to engage mobile visitors. Blogger has 7 built in mobile templates but unluckily they are identical to each other, which make it quite useless.

How to Build a Customized Responsive Mobile Website on BlogSpot Blog: 

This whole tutorial is extremely straightforward, and would hardly take 20 minutes to design a perfect mobile responsive template for your BlogSpot blog. Moreover, you don’t need to learn HTML, CSS or JavaScript coding to design a Mobile-friendly template for your blog because we can handle each and everything with the help of a platform called GOMO an initiative of Google.

GoMo by Google Get Ready To GO MO:

GoMo and DudaMobile have come together to make your desktop blog more powerful and mobile-friendly. Do you know almost 70% mobile users abandon a mobile site only because of its designing and less responsiveness? Do you own a blog and want to create a friendly mobile responsive theme then you have come to the right place to get started.

Getting Started With your First Ever Mobile Responsive Template:

Step#1 Getting Started: 

First go to a website http://www.howtogomo.com now once it gets load scroll down and you will be able to see a picture which says “CREATE YOUR MOBILE SITE NOW” just select it and move to the next step.

Step#2 Claim your Website:

Then you have to enter your website/blog URL so system can easily detect the data which is currently hosted at your blog. After entering your complete URL along with http:// press the green button which says “MAKE MY SITE MOBILE”.

Step#3 Selecting the Type of your Site: 

Now the system will automatically detect whether you are running a website or a Blog, though you can change it anytime you like. Go ahead, and according to your interest select either Blog Templates, or Website templates (We personally think you should select Blog Templates because it gives you wide range of mobile responsive themes for your blog). 

Step#4 Choosing a Flawless Mobile Theme:

If you have chosen Blog Templates as your mobile theme category then you will witness an enormous list of themes, now you can select any theme that has the potentials to amuse your mobile readers. Additionally, with the help of interactive preview you can apply a theme and can examine how it will appear to your mobile users.  

To select a theme for your mobile-friendly website just double click on any template and it will be applied to your interactive live preview. The interactive preview allows you to test your mobile theme directly from your desktop. You can navigate through different pages and can test out each and every feature from top to bottom.

Now after testing out your theme on live preview it’s time to customize the color scheme of your mobile theme, so it looks identical to your Desktop version website Press next and move ahead. 

Step#5: Customizing and Stylizing Your Mobile-Friendly Theme:

Now you will be to witness an entire new interface from where you can customize your theme from header to footer without any hesitancy whatsoever. Just Press the “Full” tab present at the top and you will be able to see a list of thing which you can do with your mobile theme i.e. Edit Header & Logo, Edit Blog Homepage, Edit Blog Posts Style, Edit Blog Comment Style, Edit Footer and Much more.

 

• Edit Header & Logo: When you will select “Header & Logo” tool a new widow will pop out from where you can customize your header or logo. You can either use Image Logo or can use Text based logo according to your needs.

• Blog Homepage: If you want to change your background color or you want your customized background image then you can use this tool and can make your mobile theme more powerful in designing.

• Blog Post: Using this tool you can change font size, background color, the color of your main post heading and much more.

• Blog Comments: If you don’t have an interactive commenting system your visitors will never leave a comment so this tool will allow you to customize your comment style. You can change color, add avatar and much more.

• Footer: As we all know Footer is the place where we give credits to the developer of the website so you can use it for that purpose. However, you can also use it to increase your width and height and much more.

Now After customizing your theme according to your needs go ahead and press Next button and you are almost done!

Step#6: Register Your Free Account:

Now enter your email address along with your password to register your Free account and Press Save My Site button to move to the next step.

Step#6: Redirecting Your OLD Mobile Site To New Mobile Friendly Site: 

Now you will be provided with the link where you can preview your mobile site with different mobile operating system i.e. Android, iPhone, Windows Mobile and Blackberry. Now Scroll down and you will see a button which says “SETUP MY MOBILE WEBSITE REDIRECT” just press it and move to the next step.

• Now a new page will be opened now scroll down once again and you will see a chunk of JavaScript coding just Copy it with CTRL+C.

• Then Go to Blogger.com >> Template >> Edit HTML >> Proceed

• Now Search For <head> and just below it paste the code which you copied earlier and then save your Template.

That’s it your Customized mobile template is implemented to your Blogger BlogSpot blog. Now Go and enjoy playing with your mobile website on your Smartphones. 

mybloggerlab.com

- Reviewer: Unknown - ItemReviewed: HOW TO CREATE A CUSTOMIZED MOBILE FRIENDLY WEBSITE FOR BLOGGER BLOGSPOT