Customize nRelate Related Posts Widget with CSS For Blogger

Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding

2. Tidak Tahu Computer Programming

3. Tidak Paham Bahasa Pemrograman Android

4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...

Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan

2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan

3. Susun blok-blok kode programnya, dan

4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?

Mudah kok, karena sudah hadir untuk Anda Di Sini :

"Video Tutorial Android Tanpa Coding untuk Pemula"

Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 

Related Posts widgets are such an important plugin that every blog must have.Why i say it,to survive in Blogosphere and increase several aspects such as average time landing on a web page,page views per visitor and importantly Alexa rank,You should engage your readers to read related posts.Since starting a blog,you have to do many works till receiving some revenue to your pocket,even after that. In this case Related Posts widgets take a major place in your site as an assistant who introduces new relative posts to users. There are many third party sites out who present different types of Related posts widgets. nRelate recent posts widget is a great plugin with fully control to its users.You can customize its CSS codes and make attractive related posts widget for your site.

Customized nRelate Related Posts widget for Blogger:
Click on Image to Enlarge

Already i have explained you what is nRelate related posts widget and how to Install nRelate Related posts widget in blogger easily.If you didn't read that tutorial,i recommend you to check it out.It will be helpful to you to know some special features on nRelate related posts plugin and how to conflate them with your site . Now you know we can customize nrelate related posts plugin using CSS. But how to do it on Blogger ? It's an easy work,just like you add stylish cloud label gadget to blog,You need to add piece of CSS code to your template.Styling nrelate widget is quite easy task if you find out how to do it. Some people think that it's hard to style blogger widgets,But it is not true.I too thought it in first days when i came to Blogosphere. But after researching its source code and playing with them,i understood that it's not a hard work. Like creating navigation menu bars using CSS ,you need to use some unique CSS ids and class names of nRelate plugin to style related posts plugin. Look at above image,i have customized nRelate plugin with CSS. You can see it comparing two images. Now i will show you how to add this effect on your blog's nRelate related post widget.

Customized Related Posts Widget For Blogger

Step 1: Sign in to your Blogger account
Step 2: Go to Dashboard >> Template >> Edit HTML.
Step 3: Now Find below code in your template.

</head>

Step 4: Next just above/before </head> code,paste below one directly.

<style type="text/css">
/* ------Customized nRelate Related Post Widget CSS Codes------ */
.nr_post_title { color:#39AFEA !important !important;font-size:13px !important;font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif !important;}
.nr_post_title:hover { color:#EAB515 !important;}
.nr_title {font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif !important;font-size:20px !important;color:#D66A22 !important;}
.nr_title:hover { color:#22D633 !important;}
.nr_img  { border-radius:none!important; }
.nr_panel:hover .nr_img {outline:1px solid #3952C0 !important;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-moz-transition:all .1s ease;
-webkit-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;}
/* ------End CSS code------- */
</style>

• #D66A22    :-Replace with you desired color name/hexadecimal number.It specify the color of nRelate title,by default the title text is "You might Like Also :-".Here i have changed it to my own text( Don't Miss :- ).
• #22D633     :-Change the color number with your color that will be shown when nRelate title is hovered.
• #39AFEA    :-Define the color of post title.
• #EAB515    :-Post color when it is hovered.
• #3952C0     :-Outline color of image when mouse over.

Step 5: Now click on Save Template button.


That's all.Now refresh your blog and see how nRelate related posts widget is appearing on your blog.If you have any question,feel free to ask me anything in below commenting section.Happy blogging pals :)

Pengelola Blog : ABDUL WAHAB

Judul : Customize nRelate Related Posts Widget with CSS For Blogger
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Customize nRelate Related Posts Widget with CSS For Blogger
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
https://kejutaninternet.blogspot.com/2013/08/customize-nrelate-related-posts-widget.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait