Virtuale Blogger Template

 

Demo    Download

Description : "Virtuale" is a free blogger template with features such as 1 Sidebar, 2 Column, Adapted from WordPress, Black, Blue, Elegant, Featured Section, Fixed width, Fresh, Header Banner, Magazine, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White.
File size : 186.98 kB.
Template URL : http://www.premiumbloggertemplates.com/2013/01/virtuale-premium-blogger-template.html
Did you face any problem with templates? Check our tutorials using "Blogger Tutorials".

Template name : Virtuale
Template type : 1 Sidebar, 2 Column, Adapted from WordPress, Black, Blue, Elegant, Featured Section, Fixed width, Fresh, Header Banner, Magazine, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White
Release date : January 4, 2013
Author Name and URL : Lasantha Bandara / http://www.premiumbloggertemplates.com/
Original Designer URL : http://fthemes.com/virtuale-free-wordpress-theme/
Basic Instructions : How to install a Blogger template
Advanced Details : http://www.premiumbloggertemplates.com/2013/01/virtuale-premium-blogger-template.html

Configure Meta tags
Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below codes :

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>

Replace DESCRIPTION HERE,KEYWORDS HERE as below.
DESCRIPTION HERE:Write your blog description
KEYWORDS HERE:Write the keywords of your blog separated by comma.
How To Configure Favicon:
Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below code :

<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Now replace "YOUR-FAVICON-URL" with your Favicon address/url.
Configure Featured Content Slider:
Login to your blogger dashboard--> layout- -> Edit HTML.Find <!-- Featured Content Slider Started -->.Now scroll down slowly and you can see each featured slide codes between <div class='fp-slides-items'> and </div> .
Now replace,

• "This is default featured post X title" with your featured post title.
• "#" with your featured post URL.
• "Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com." with your slider description.
• Slider image address with your slider image.

for
each featured slide.
How To Change Tab Names of Tab Widget
If you want to change your tab names of your tab widget then find this:

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>

Now change the names "Popular", "Tags" and "Blog Archives" as you like.
How To Add a Header Logo
You can add a header logo for this template easily in the "Page Elements" section(Blogger Default Method).Logo image size must be 408px width and 68px height.
If you have any problem regrading this template,leave a comment below.
Important !!!:
Please do not remove the footer credit. I spend several hours to create this blogger template. So that you can use it for your blog. All I ask is, stay the credit intact.
License:
This free Blogger template is licensed under the Creative Commons Attribution 3.0 License,which permits both personal and commercial use.
However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
http://creativecommons.org/licenses/by/3.0/

MXfluity Responsive Blogger Template by MKR

Membuat template menggunakan masonry/isotope tidaklah terlalu sulit. Tetapi ketika ingin menyatukannya dengan script load more/infinity scroll barulah sering terjadi masalah. Dari beberapa uji coba yang saya lakukan akhirnya saya dapat menyatukan keduanya seperti yang pada template kali ini.

Template yang saya beri nama MXfluity ini menggunakan isotope untuk mengatur tata letak elemennya sehingga tersusun dengan baik dan saya gabungkan dengan load more yang hampir sama yang ada pada MyExtraNews dan MyTimeline Serta fitur yang ada pada template kali ini tidaklah jauh berbeda.

Desain yang sederhana sangat cocok bagi website/blog dengan tema photografi maupun personal. Sehingga membuat blog dapat terlihat dan terkesan lebih profesional. Kenapa saya katakan demikian. Karena menurut saya penggabungan isotope dengan load more pada platform CMS (content management system) selain blogger misalnya pada wordpress umumnya ada pada themes premium.

Pada template ini cara menampilkan gambar pada halaman beranda yaitu dengan menggunakan 'data:post.thumbnailUrl' sehingga jika gambar pada artikel anda bukan pada hosting picasa web/blogspot maka yang akan tampil hanya gambar backupnya.

Ingat karena template ini saya bagikan secara gratis serta menggunakan license Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License maka bagi anda yang ingin menggunakan template ini jangan menghilangkan kredit link yang ada di bagian footer serta bukan untuk diperjual belikan. Jika anda melakukan sedikit modifikasi silahkan tambahkan tulisan redesign by tapi jangan menghilangkan kredit linknya untuk menghargai hasil kreatifitas seseorang.

Fitur-Fitur dari Aware Blogger Template

1. Responsive blogger Template.
2. JSON Search Result.
3. Sidebar dikanan atau dikiri dengan accordin slider
4. Related Post/Artikel terkait dengan jQueru get() sehingga loadingnya agak cepat (script dari moretechtips saya modifikasi sesuai templatenya).
5. Emoticon pada bagian komentar.
6. Ajax Recent Comments / Komentar terbaru dengan fitur untuk menghilangkan komentar Admin blog(dengan Animasi)
7. Optimasi SEO (schema.org).
8. Plugin jQuery Isotope untuk menyusun layout/tata letak elemen pada halaman beranda.
9. script loadmore jQuery get() untuk mendapat artikel pada halaman berikutnya sehingga tidak perlu berpindah kehalaman selanjutnya
10. Breadcrumd pada halaman artikel.
11. Support modern browser IE9, Mozilla, Chrome
12. Warna dasar Hitam, Putih, Merah dan Abu-abu.

Demo MXfluity

Download MXfluity Right

ScreenShot MXfluity Right Sidebar

Download MXfluity Left

ScreenShot MXfluity Left Sidebar

Konfigurasi pada Top Menu

Masuk dashboard blogger --> layout/tata letak --> Edit HTML

Lalu gulung layar kebawah hingga mendapatkan kode berikut ini:

<ul id='navinti'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Comments</a></li>
<li class='dgnsub'><a href='#'>With Sub Menu</a>
<ul class='sub-menu hidden'>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
</ul>

Ganti # dengan alamat link anda

Script Komentar Terbaru(Recent Comment)

Masukkan kode dibawah pada widget HTML

<div id="rcentcomnets"></div>
<script type='text/javascript'>
RecentComment({
adminBlog:""
});
</script>

Pengaturan lengkap (default) untuk Script Komentar Terbaru(Recent Comment)

RecentComment({
url_blog: "",
id_containrc: "#rcentcomnets",
numComments: 5, 
avatarSize: 50,
characters: 100,
loadingClass: "loadingxx", 
defaultAvatar:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcMbpyRDS3m9RTucb6jJkooVZp5ohoi5ezJldGKqgXiDMnRlxQac2HFEALUCz-OuQrOS3BSrqCsbQtG2ZfbXHRiOWKnBBmTPmYomI8mIXrpEC5iuLug6AP11_i6B8rnAQ-yTJk7MD_gjU/s70/user-anonymous-icon.png", 
maxfeeds:50,
MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], 
adminBlog: ""
});

Pengaturan Emoticon

Masuk dashboard blogger --> layout/tata letak --> Edit HTML

Lalu gulung layar kebawah hingga mendapatkan kode berikut ini:

emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
});

emoRange = dimana efek emoticon akan ditampilkan.

putEmoAbove = dimana contoh gambar emoticon mau ditampilkan.

topText = Tulisan dibawah contoh gambar emoticon.

emoMessage = Tulisan pesan yang akan muncul ketika gambar contoh gambar emoticon diklik

NB: kode pemanggilan emoticon terdapat 2 kali yang masing-masing dibungkus dengan tag kondisional yang berbeda.

Pengaturan Artikel Terkait (Related Post)

Masuk dashboard blogger --> layout/tata letak --> Edit HTML

Lalu gulung layar kebawah hingga mendapatkan kode berikut ini:

relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#related_posts",
maxPosts: 6,
loadingClass: "loadingxx",
rlt_thumb: 70
});

Itu merupakan minimal konfigurasi untuk menampilkan artikel terkait pada template ini. Pengaturan lengkap (default) untuk Script Artikel terkait (Related Post) seperti berikut:

relatedPostsWidget({blogURL:'',
maxPosts:5,
maxTags:5,
maxPostsPerTag:5,
containerSelector:'',
tags:null,
loadingText:'',
loadingClass:'',
relevantTip:'',
rlt_summary:100,
relatedTitle:'Related Posts',
readMoretext:'Read more',
rlpBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
rlt_thumb:55,
recentTitle:'Recent Posts',
postScoreClass:'',
onLoad:false
});

Pengaturan JSON Search

Masuk dashboard blogger --> layout/tata letak --> Edit HTML

Lalu gulung layar kebawah hingga mendapatkan kode berikut ini:

var searchFormConfig = {  
numPost: 9999, // Jumlah maksimal temuan
summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
summaryLength: 100, // Jumlah karakter ringkasan posting
resultTitle: "Result For Keyword", // Judul hasil pencarian
noResult: "No result", // Deskripsi 'tak ditemukan'
resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
thumbSize: 50, // Ukuran & resolusi thumbnail
fallbackThumb: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif" // Fallback thumbnail untuk posting tak bergambar
};

NB: Jika ingin merubah warna merahnya dengan warna yang lain silahkan ganti kode warna #C20404 dengan kode warna Heksa yang anda inginkan menggunakan tool ini Generator Kode Warna Heksa. Kode warna #C20404 ada 6, jadi harus diganti semua.

Semoga bermanfaat untuk semuanya,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan.

Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

MXfluity Responsive Blogger Template by MKR is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.