All Template

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
 
<img alt="Virtuale Blogger Template" class="topsypost alignnone size-full wp-image-4165" id="topsypost" src="http://cdn.premiumbloggertemplates.com/wp-content/uploads/2013/01/Virtuale-Blogger-Template.jpg" title="Virtuale Blogger Template" /> </div>
 
<div class="tdemo" style="text-align: center;">
<a class="tdemo" href="http://www.premiumbloggertemplates.com/2013/01/virtuale-premium-blogger-template.html/demo/" rel="follow" target="_blank">Demo</a>    <a href="http://www.premiumbloggertemplates.com/downloads/download/398">Download</a></div>
 
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". 
 
 
<div class="rcorner">
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 : <a href="http://www.premiumbloggertemplates.com/2010/02/how-to-uploadinstall-blogger-template.html">How to install a Blogger template</a> 
Advanced Details : http://www.premiumbloggertemplates.com/2013/01/virtuale-premium-blogger-template.html</div>
Configure Meta tags 
Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below codes : 
<pre style="border: 1px solid black; height: 60px; overflow: auto; width: 90%;"><meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/></pre>
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 : 
<pre style="border: 1px solid black; height: 50px; overflow: auto; width: 90%;"><link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/></pre>
Now replace "YOUR-FAVICON-URL" with your Favicon address/url. 
Configure Featured Content Slider: 
Login to your blogger dashboard--> layout- -> Edit HTML.Find .Now scroll down slowly and you can see each featured slide codes between <div class='fp-slides-items'> and </div> . 
Now replace, 
<ul>
<li>"This is default featured post X title" with your featured post title.</li>
<li>"#" with your featured post URL.</li>
<li>"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.</li>
<li>Slider image address with your slider image.</li>
</ul>
for 
<ins>each featured slide</ins>. 
How To Change Tab Names of Tab Widget 
If you want to change your tab names of your tab widget then find this: 
<pre style="border: 1px solid black; height: 120px; overflow: auto; width: 90%;"><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></pre>
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/</div>

Virtuale Blogger Template

Demo Download Description : "Virtuale" is a free blogger template with features such as 1 Sidebar, 2 Column, Adapt...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content" id="post-body-8460176464257844379" itemprop="articleBody">
<div class="separator" style="clear: both; text-align: center;">
<img alt="MXfluity Responsive Blogger Template by MKR" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKWdbgegWDr3I84WzSfbAvcZzDH0-p29nsEKmzlw506bMMuPzqvvYD5I-5bZlFz9NHffeSRQV3oM_qoI8IJ3LPLfSfSrLNtQhnqrz3u0OKQO7HknV6kXpKVOnu5DYzbxUHC8m1n34W0dqz/s500/MXfluity-Cover.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKWdbgegWDr3I84WzSfbAvcZzDH0-p29nsEKmzlw506bMMuPzqvvYD5I-5bZlFz9NHffeSRQV3oM_qoI8IJ3LPLfSfSrLNtQhnqrz3u0OKQO7HknV6kXpKVOnu5DYzbxUHC8m1n34W0dqz/s500/MXfluity-Cover.jpg" /></div>
 
 
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 <a class="intrn tooltipmkr" href="http://mkr-site.blogspot.com/2013/03/myextranews-responsive-blogger-template.html" title="<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCgA8xW_dOJ6e4rD_HOlqS6qOrDETfx6xAEt0TV4XGrk-tUkVd7NJk-9G1Ms2Bqoz9LYB2M20WdrHREXjgskgnGDTNlnFFlT3KWjvQ5LNzWE0ImoWX0-sgB32DHQ6dsGJK5ahOChK26njn/s72-c/MyExtraNews-cover.jpg'/><h6>MyExtraNews Responsive Blogger Template by MKR</h6>myextranews responsive blogger template merupakan template yang bertemakan magazine dengan warna biru, hitam, dan putih. template ini di lengkapi banyak fitur diantaranya JSON search result, recent comment, recent post, related post, emoticon dan lain-lain..">MyExtraNews</a> dan <a class="intrn tooltipmkr" href="http://mkr-site.blogspot.com/2013/03/mytimeline-responsive-blogger-template.html" title="<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_P-lMZFtn8GrMOHYoIHFdDmfmhXYyzpBD1nyEDJzTjiEP7KvLaivH10Buhwmk5t6uxfvThzca3nMO9JYpZwV2-5Qx_hGONxKJVeA7R-kLVGgsyGyQybNEgvnZRPcx-O81iABjzvAEQT9F/s72-c/MyTimeLine-cover.jpg'/><h6>MyTimeLine Responsive Blogger Template by MKR</h6>Bagi anda yang ingin memiliki tampilan template blogger yang responsive, MyTimeLine responsive blogger template ini mungkin bisa menjadi salah satu pilihan anda. Dengan tampilan yang menarik serta banyaknya fitur yang ada pada template ini diantaranya featured post, random post, recent post, recent comments, related post JSON search dan masih banyak lagi.">MyTimeline</a> 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. 
 
<h2>
Fitur-Fitur dari Aware Blogger Template</h2>
<ol>
<li>Responsive blogger Template.</li>
<li>JSON Search Result.</li>
<li>Sidebar dikanan atau dikiri dengan accordin slider</li>
<li>Related Post/Artikel terkait dengan jQueru get() sehingga loadingnya agak cepat (script dari moretechtips saya modifikasi sesuai templatenya). </li>
<li>Emoticon pada bagian komentar.</li>
<li>Ajax Recent Comments / Komentar terbaru dengan fitur untuk menghilangkan komentar Admin blog(dengan Animasi)</li>
<li>Optimasi SEO (schema.org).</li>
<li>Plugin jQuery Isotope untuk menyusun layout/tata letak elemen pada halaman beranda.</li>
<li>script loadmore jQuery get() untuk mendapat artikel pada halaman berikutnya sehingga tidak perlu berpindah kehalaman selanjutnya</li>
<li>Breadcrumd pada halaman artikel.</li>
<li>Support modern browser IE9, Mozilla, Chrome</li>
<li>Warna dasar Hitam, Putih, Merah dan Abu-abu.</li>
</ol>
<style scoped="scoped" type="text/css">
.box.cnter {width: 50%;float: left;text-align: center;margin: 10px 0;}
.notexx {background-color: #B9F3C9;padding: 10px;border: 1px solid #59C466;width: 97%;margin: 15px auto 0;}
.warn {width: 97%;margin: 10px auto;background-color: #970707;padding: 10px;color: #FFF;}
.warn a {color: #59FF6D;}
.warn img {display: block;border: 0;margin: 0 auto;}
pre code.javascript {color: #006383;}
@media only screen and (max-width: 989px) and (min-width: 768px) {.box.cnter{width: 100%;float: none}}
@media only screen and (max-width: 767px) {.box.cnter{width: 100%;float: none}}
</style> 
<div class="mkrbut-grup">
<a class="button demo" href="http://mxfluity-mkr.blogspot.com/" rel="nofollow" target="_blank">Demo MXfluity</a></div>
<div style="overflow: hidden;">
<div class="box cnter">
<div class="mkrbut-grup">
<a class="button download" href="http://ivy-hosting.googlecode.com/files/MXfluity-right.zip">Download MXfluity Right</a></div>
<div class="gambarnya">
<a class="colorbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3H4P_gwAXV8luArA5d5F3PclO8z34xS1SnWgmk7BaVnJyyks6GU-vDcmdFO6G6zNVqQ1neqtY_oS-M3kp7E3uRXHJANMrjmBp431vl_ko_XM9pQhaYvg9G7KGCbtupGnW0g8VNR5vvf5/s1600/MXfluity+Right.png" title="MXfluity Responsive Blogger Template (Right Sidebar)"><img alt="MXfluity Responsive Blogger Template (Right Sidebar)" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3H4P_gwAXV8luArA5d5F3PclO8z34xS1SnWgmk7BaVnJyyks6GU-vDcmdFO6G6zNVqQ1neqtY_oS-M3kp7E3uRXHJANMrjmBp431vl_ko_XM9pQhaYvg9G7KGCbtupGnW0g8VNR5vvf5/w250/MXfluity+Right.png" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3H4P_gwAXV8luArA5d5F3PclO8z34xS1SnWgmk7BaVnJyyks6GU-vDcmdFO6G6zNVqQ1neqtY_oS-M3kp7E3uRXHJANMrjmBp431vl_ko_XM9pQhaYvg9G7KGCbtupGnW0g8VNR5vvf5/w250/MXfluity+Right.png" /></a></div>
ScreenShot MXfluity Right Sidebar</div>
<div class="box cnter">
<div class="mkrbut-grup">
<a class="button download" href="http://ivy-hosting.googlecode.com/files/MXfluity-left.zip">Download MXfluity Left</a></div>
<div class="gambarnya">
<a class="colorbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8DG84Lqbl0Vec-Dc3y5T6e7TKEplt2Q4l2VVCVJYyIZ7cQdF4mkyEybvM3R_de3O_-M0mHHVpmAvrU5FbrkuivQbbiLJHrJvY_0K-o84mvP5-y29H0kRTdM_74-Y5IcZeA96htNDwA5oF/s1600/SS_mymagazine_GREEN.png" title="MXfluity Responsive Blogger Template (Left Sidebar)"><img alt="MXfluity Responsive Blogger Template (Left Sidebar)" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ltiv9_aMNvr_MHpGuG8opjzKw75OFNy9nI9bcvJJvfFepChZY9pn95HS8Mn58doi99XkqCWqC1u6EKhkclVY7mbSKpELvb38HMQnlEZjoh31UaAb_YDG6nci6bJSTfts4Xx4k1fUs6R5/w250/MXfluity+Left.png" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ltiv9_aMNvr_MHpGuG8opjzKw75OFNy9nI9bcvJJvfFepChZY9pn95HS8Mn58doi99XkqCWqC1u6EKhkclVY7mbSKpELvb38HMQnlEZjoh31UaAb_YDG6nci6bJSTfts4Xx4k1fUs6R5/w250/MXfluity+Left.png" /></a></div>
ScreenShot MXfluity Left Sidebar</div>
</div>
<h3>
Konfigurasi pada Top Menu</h3>
Masuk dashboard blogger --> layout/tata letak --> Edit HTML 
 
Lalu gulung layar kebawah hingga mendapatkan kode berikut ini: 
 
<pre data-codetype="CSS+HTML+JQuery"><code class="xml"><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></code></pre>
Ganti # dengan alamat link anda 
 
<h3>
Script Komentar Terbaru(Recent Comment)</h3>
Masukkan kode dibawah pada widget HTML 
 
<pre data-codetype="CSS+HTML+JQuery"><code class="xml"><div id="rcentcomnets"></div>
<script type='text/javascript'>
RecentComment({
adminBlog:""
});
</script></code></pre>
Pengaturan lengkap (default) untuk Script Komentar Terbaru(Recent Comment) 
 
<pre data-codetype="JQuery"><code class="javascript">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: ""
});</code></pre>
<h3>
Pengaturan Emoticon</h3>
Masuk dashboard blogger --> layout/tata letak --> Edit HTML 
 
Lalu gulung layar kebawah hingga mendapatkan kode berikut ini: 
 
<pre data-codetype="JQuery"><code class="javascript">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."
});</code></pre>
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 <a class="intrn tooltipmkr" href="http://mkr-site.blogspot.com/2012/09/apa-itu-tag-kondisional.html" title="<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxhRi72cO_mZce_DMGBHj_PVZMqs1WoETVdo80uoK72X818PrBcLgsb7NyZfQv-fE5VfUqVPrzHC3bnYIrQlFfaTFy3lxOS9FATc1Pg1OZGe5U8c2mDCESeZz76R1xE_2Z4Z6v_ubcSFlj/s72-c/apa+itu+tag+konditional.jpg'/><h6>Apa itu Tag Kondisional?</h6>Apa itu tag kondisional/conditional tag pada blogspot dan bagaimana penerapannya sehingga dapat dengan mudah diterapkan dalam modifikasi template...">tag kondisional</a> yang berbeda. 
 
<h3>
Pengaturan Artikel Terkait (Related Post)</h3>
Masuk dashboard blogger --> layout/tata letak --> Edit HTML 
 
Lalu gulung layar kebawah hingga mendapatkan kode berikut ini: 
 
<pre data-codetype="JQuery"><code class="javascript">relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#related_posts",
maxPosts: 6,
loadingClass: "loadingxx",
rlt_thumb: 70
});</code></pre>
Itu merupakan minimal konfigurasi untuk menampilkan artikel terkait pada template ini. Pengaturan lengkap (default) untuk Script Artikel terkait (Related Post) seperti berikut: 
 
<pre data-codetype="JQuery"><code class="javascript">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
});</code></pre>
<h3>
Pengaturan JSON Search</h3>
Masuk dashboard blogger --> layout/tata letak --> Edit HTML 
 
Lalu gulung layar kebawah hingga mendapatkan kode berikut ini: 
 
<pre data-codetype="JQuery"><code class="javascript">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
};</code></pre>
<div class="notexx">
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 <a class="intrn" href="http://mkr-site.blogspot.com/p/tool-untuk-melihat-kode-warna-hex.html" rel="nofollow">Generator Kode Warna Heksa</a>. Kode warna #C20404 ada 6, jadi harus diganti semua.</div>
<div class="warn">
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 <a href="http://mkr-site.blogspot.com/" property="cc:attributionName" rel="cc:attributionURL" xmlns:cc="http://creativecommons.org/ns#">MKR</a> is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US" rel="license">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.</div>
<div style="clear: both;">
</div>
</div>
</div>

MXfluity Responsive Blogger Template by MKR

Membuat template menggunakan masonry/isotope tidaklah terlalu sulit. Tetapi ketika ingin menyatukannya dengan script load more/infinit...