vCard Responsive Profile & Portfolio Blogger Template

vCard portfolio dan profile blogger template terbaik terbaru yang bisa digunakan untuk berbagai kebutuhan profile Anda, desain tema blogspot yang responsive dan modern serta tampilan yang premium.

Pediaku ID kali ini akan membagikan sebuah tema blogspot premium gratis bernama vCard Portfoloio blogger template, yang merupakan sebuah template blog populer yang digunakan untuk menampilkan profile dan halaman landing portfolio dan cocok untuk pribadi ataupun perusahaan.

Deskripsi vCard Portfolio Blogger Template

vCard template adalah sebuah template blogspot yang didesain khusus untuk digunakan sebagai halaman landing profile atau portfolio yang cocok digunakan oleh setiap kalangan, baik itu personal ataupun untuk perusahaan.

Template ini didesain khusus dengan mengedepankan tampilan yang profesional, dengan tambahan widget slider yang elegant, halaman resume dan portfolio serta halaman kontak yang responsive

Fitur vCard Portfolio Blogger Template

1. Responsif
2. Ramah SEO
3. CSS3 yang valid
4. HTML5 yang valid
5. Data Valid Direstrukturisasi
6. Pemuatan Cepat
7. Melanjutkan
8. Blog Pribadi
9. Media sosial
10. Skema Breadcrumbs yang valid.org
11. Pos terkait
12. Komentar Blogger

Selain fitur unggulan diatas, ada beberapa kelebihan lain dari template vcard blogger template terbaru ini

vCard Profile Template Cocok Untuk Apa

Template vcard sangat cocok bagi Anda yang membutuhkan dan ingin membuat halaman landing page untuk profile pribadi atau perusahaan, serta membuat halaman portfolio gratis namun tetap terlihat elegant dan profesional.

Pediaku ID sangat merekomendasikan template ini karena memiliki banyak keunggulan dibandingkan template lainnya.

Download Template vCard Terbaru

Berikut adalah link untuk mengunduh template vcard premium gratis, atau silahkan klik live preview untuk melihat tampilan dari tema blog ini terlebih dahulu.

1. Membuat Halaman Contact

Untuk membuat halaman contact form, Buat halaman baru > beri judul (Contact) > Publish Maka halaman contact akan secara otomatis dibuat oleh template.

2. Membuat Halaman Resume dan Riwayat Pendidikan

Gunakan code berikut untuk membuat halaman resume dan riwayat pendidikan, Anda hanya perlu menyesuaikan isinya sebelum dipublikasikan.

 						 						<!-- Experience -->						<div class="row">							<div class="col-12">								<h2 class="title title--h3"><img class="title-icon" src="https://cdn.jsdelivr.net/gh/minhkhoi2001/code/vcard/icon-education.svg" alt="" /> Education</h2>								<div class="timeline">									<!-- Item -->									<article class="timeline__item">									    <h5 class="title title--h5 timeline__title">University School of the Arts</h5>										<span class="timeline__period">2007 — 2009</span>										<p class="timeline__description">Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.</p>									</article>                                         									<!-- Item -->									<article class="timeline__item">									    <h5 class="title title--h5 timeline__title">New York Academy of Art</h5>										<span class="timeline__period">2005 — 2007</span>										<p class="timeline__description">Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est omnis..</p>									</article>                                         									<!-- Item -->									<article class="timeline__item">									    <h5 class="title title--h5 timeline__title">High School of Art and Design</h5>										<span class="timeline__period">2003 — 2005</span>										<p class="timeline__description">Duis aute irure dolor in reprehenderit in voluptate, quila voluptas  mag odit aut fugit, sed consequuntur magni dolores eos.</p>									</article>								</div>	 							</div>								 							<div class="col-12">								<h2 class="title title--h3"><img class="title-icon" src="https://cdn.jsdelivr.net/gh/minhkhoi2001/code/vcard/icon-experience.svg" alt="" /> Experience</h2>								<div class="timeline">									<!-- Item -->									<article class="timeline__item">									    <h5 class="title title--h5 timeline__title">Creative Director</h5>										<span class="timeline__period">2015 — Present</span>										<p class="timeline__description">Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas molestias exceptur.</p>									</article>                                         									<!-- Item -->									<article class="timeline__item">									    <h5 class="title title--h5 timeline__title">Art Director</h5>										<span class="timeline__period">2013 — 2015</span>										<p class="timeline__description">Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.</p>									</article>                                         									<!-- Item -->									<article class="timeline__item">									    <h5 class="title title--h5 timeline__title">Web Designer</h5>										<span class="timeline__period">2010 — 2013</span>										<p class="timeline__description">Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.</p>									</article>								</div>							</div>						</div>						 						<!-- Skills -->						<div class="row">							<div class="col-12">						        <h2 class="title title--h3">My Skills</h2>								<div class="box box__border">									<!-- Progress -->									<div class="progress">                                        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">											<div class="progress-text"><span>Web Design</span><span>80%</span></div>										</div>										<div class="progress-text"><span>Web Design</span></div>                                    </div>										 									<!-- Progress -->									<div class="progress">                                        <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">											<div class="progress-text"><span>Graphic Design</span><span>75%</span></div>										</div>										<div class="progress-text"><span>Graphic Design</span></div>                                    </div>										 									<!-- Progress -->									<div class="progress">                                        <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">											<div class="progress-text"><span>Photoshop</span><span>90%</span></div>										</div>										<div class="progress-text"><span>Photoshop</span></div>                                    </div>										 									<!-- Progress -->									<div class="progress">                                        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">											<div class="progress-text"><span>Illustrator</span><span>50%</span></div>										</div>										<div class="progress-text"><span>Illustrator</span></div>                                    </div>								</div>                            </div>						</div>

3. Membuat Halaman Portofolio dan Hasil Pekerjaan

Jika ingin menambahkan halaman portofolio dan works yang pernah dilakukan, gunakan script di bawah ini, sesuaikan dengan kebutuhan

 						<!-- Filter -->                        <div class="select">			                <span class="placeholder">Select category</span>			                <ul class="filter">			                    <li class="filter__item">Category</li>				                <li class="filter__item active" data-filter="*"><a class="filter__link active" href="#filter">All</a></li>				                <li class="filter__item" data-filter=".category-concept"><a class="filter__link" href="#filter">Concept</a></li>				                <li class="filter__item" data-filter=".category-design"><a class="filter__link" href="#filter">Design</a></li>				                <li class="filter__item" data-filter=".category-life"><a class="filter__link" href="#filter">Life</a></li>			                </ul>			                <input type="hidden" name="changemetoo"/>		                </div> 						<!-- Gallery -->				        <div class="gallery-grid js-grid-row js-filter-container">					        <div class="gutter-sizer"></div>					        <!-- Item 1 -->					        <figure class="gallery-grid__item category-concept">						        <div class="gallery-grid__image-wrap">                                    <img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_01.jpg" data-zoom alt="" />						        </div>                                <figcaption class="gallery-grid__caption">							        <h4 class="title title--h6 gallery-grid__title">Half Avocado</h4>							        <span class="gallery-grid__category">Concept</span>						        </figcaption>                            </figure> 					        <!-- Item 2 -->					        <figure class="gallery-grid__item category-concept">						        <div class="gallery-grid__image-wrap">									<img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_02.jpg" data-zoom alt="" />								</div>	 								<figcaption class="gallery-grid__caption">									<h4 class="title title--h6 gallery-grid__title">Pink Flamingo</h4>									<span class="gallery-grid__category">Concept</span>								</figcaption>							</figure> 							<!-- Item 3 -->							<figure class="gallery-grid__item category-design">								<div class="gallery-grid__image-wrap">									<img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_03.jpg" data-zoom alt="" />								</div>	 								<figcaption class="gallery-grid__caption">									<h4 class="title title--h6 gallery-grid__title">Abstract</h4>									<span class="gallery-grid__category">Design</span>								</figcaption>							</figure> 							<!-- Item 4 -->							<figure class="gallery-grid__item category-design">								<div class="gallery-grid__image-wrap">									<img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_04.jpg" data-zoom alt="" />								</div>								<figcaption class="gallery-grid__caption">									<h4 class="title title--h6 gallery-grid__title">Abstract #2</h4>									<span class="gallery-grid__category">Design</span>								</figcaption>							</figure> 							<!-- Item 5 -->							<figure class="gallery-grid__item category-design">								<div class="gallery-grid__image-wrap">									<img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_05.jpg" data-zoom alt="" />								</div>								<figcaption class="gallery-grid__caption">									<h4 class="title title--h6 gallery-grid__title">Abstract #3</h4>									<span class="gallery-grid__category">Design</span>								</figcaption>							</figure> 							<!-- Item 6 -->							<figure class="gallery-grid__item category-life">								<div class="gallery-grid__image-wrap">									<img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_06.jpg" data-zoom alt="" />								</div>								<figcaption class="gallery-grid__caption">									<h4 class="title title--h6 gallery-grid__title">Golden Gate</h4>									<span class="gallery-grid__category">Life</span>								</figcaption>							</figure> 							<!-- Item 7 -->							<figure class="gallery-grid__item category-concept">								<div class="gallery-grid__image-wrap">									<img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_07.jpg" data-zoom alt="" />								</div>								<figcaption class="gallery-grid__caption">									<h4 class="title title--h6 gallery-grid__title">Peach</h4>									<span class="gallery-grid__category">Concept</span>								</figcaption>							</figure> 							<!-- Item 8 -->							<figure class="gallery-grid__item category-design">								<div class="gallery-grid__image-wrap">									<img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_08.jpg" data-zoom alt="" />								</div>								<figcaption class="gallery-grid__caption">									<h4 class="title title--h6 gallery-grid__title">Abstract #4</h4>									<span class="gallery-grid__category">Design</span>								</figcaption>							</figure> 							<!-- Item 9 -->							<figure class="gallery-grid__item category-life">								<div class="gallery-grid__image-wrap">									<img class="gallery-grid__image cover lazyload" src="http://netgon.net/artstyles/v-card3/assets/img/image_09.jpg" data-zoom alt="" />								</div>								<figcaption class="gallery-grid__caption">									<h4 class="title title--h6 gallery-grid__title">Hedgehog</h4>									<span class="gallery-grid__category">Life</span>								</figcaption>							</figure>						</div><!-- Gallery End -->