Follow Google+

Part Of Blogger

Photobucket

Statistic

DMCA.com Protection Status

Popular Posts


Art dan Adhi adalah dua kata yang tidak akan pernah terpisahkan, dengan adanya dua kata tersebut terciptalah karya creative itulah awal mulanya artadhitive dilahirkan. Art Design memang luas kaitanya, tapi segala sesuatu itu bermula dari Art Design, Art Design bukan hanya coretan tinta, bukan hanya goresan garis dan bukan hanya gesturan mouse melainkan adalah kehidupan seni yang setiap orang memilikinya. Art Design adalah Seni yang berhak dimiliki setiap manusia karena goresan tangan yang bodoh sekalipun bisa menghasilkan karya seni yang luar biasa.
Art of Adhi Creative ...

Instagram

Instagram

Advertise 970x90

Panduan Design

Follow This Site

Google+ Followers

Butuh Apartment ?

Wednesday, 29 June 2016

Cara Membuat Zoom Effect Gambar Pada Postingan Blog


Gambar merupakan hal yang paling penting untuk mendeskripsikan segala sesuatunya pada orang lain, begitu juga dengan blog sebagian orang memanfaatkan gambar untuk menyampaikan secara jelas informasi yang terdapat pada postingan blog. Orang akan dengan mudahnya paham dan mengetahui informasi melalui gambar yang kita sisipkan pada blog kita.

Untuk menyisipkan gambar pada postingan blog bukanlah hal yang sulit untuk pemula blogging, tapi bagaimana dengan menambahkan zoom effect pada gambar yang ada pada postingan blog kita. Kali ini sahabat blogy akan share bagimana cara menambahkan zoom effect gambar pada postingan blog, untuk lebih jelasnya silahkan arahkan mouse anda ke gambar dibawah ini.




Tampilan gambar terlihat lebih menarik dan unik untuk effect gambar pada blog kalian. Gimana tertarik untuk mencobanya ?, ayo kita simak caranya.

Bagi kalian yang ingin menambah zoom effect gambar pada seluruh postingan blog sobat bisa menggunakan cara dibawah ini :

Cara yang pertama :

Step 1. Login pada blog anda

Step 2. Masuk pada menu Tamplate kemudian klik Edit HTML

Step 3. Kemudian anda cari kode ]]></b:skin> (gunakan ctrl+f untuk mempermudah pencarian)

Step 4. Letakan Code Script dibawah ini (Copy-Paste) tepat diatas kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}

Step 5. Simpan Tamplate dan lihat hasilnya

Bagi kalian yang ingin menambah zoom effect gambar pada postingan blog yang diinginkan sobat bisa menggunakan cara dibawah ini :

Cara yang Kedua :

Step 1. Login pada blog anda

Step 2. Masuk pada menu Tamplate kemudian klik Edit HTML

Step 3. Kemudian anda cari kode ]]></b:skin> (gunakan ctrl+f untuk mempermudah pencarian)

Step 4. Letakan Code Script dibawah ini (Copy-Paste) tepat diatas kode ]]></b:skin>

.art img{

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.art img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Step 5. Simpan Tamplate Jika sudah selesai

Step 6. Kemudian untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="art" pada kode HTML gambar, contohnya seperti ini:

<a class="art" href="http://twitter.com/artadhitive" ><img border="0" height="95" src="https://4.bp.blogspot.com/-i3fGR4AZ8V8/V3KyvpSTx8I/AAAAAAAAEsQ/MvapScUiXZQgL2KqDPZx6OS70zYtg6jKgCLcB/s1600/logo1.png" width="350" /></a>

Step 7. Untuk tulisan yang berwarna merah silahkan anda ganti dengan alamat url gambar dan url gambar, untuk yang berwarna biru silahkan disesuikan dengan ukuran gambar.

Silahkan mencoba, semoga berhasil dan tetap semangat.

Monday, 27 June 2016

Download Software CorelDraw X7 Full Version Terbaru

Download Software Coreldraw x7

CorelDraw X7 merupakan versi terbaru yang dikeluarkan oleh perusahaan design berbasis vector yang telah lama berkiprah di dunia design software. Melewati beberapa pengembangan teknik design akhirnya Corel menegeluarkan software design versi terbarunya, tampilan yang tidak begitu banyak berubah namun banyak tambahan tools yang membuat para designer harus segera mengupdate versi terbaru.

Bagi kalian yang belum mendapatkan versi terbarunya anda bisa download melalui link dibawah ini :

Download CorelDraw X7 [ Google Drive ] 

Biar gak penasaran lihat screenshootnya




Bagi kalian yang bingung cara instal CorelDraw X7 silahkan disimak

1. Matikan koneksi internet terlebih dahulu

2. Instal software seperti biasa, kemudian pilih " I do not have serial number and want to try the product", Isi username kalian.

3. Pilih typical, pilih costum untuk pilihan aplikasi yang ingin diinstal

4. Jika instalasi sudah selesai, silahkan jalankan CorelDraw X7 dan pilih register later. Kemudian exit.

5. Akan muncul kotak CorelDraw dan bisa anda gunakan sampai 30 hari lagi, kemudian klik tulisan “Already Purchased?” di pojok kanan bawah.

6. Selanjutnya Activasi buka keygen, pilih program di keygennya Corel Draw Graphics Suite X7 -- klik Generate Serial Number jika sudah copy kan serial tersebut ke kotak Corel Draw yang tadi.
Jika sudah di copy kan, klik Activate Offline, pastikan internet tidak terkoneksi.

7. Copy 24 digit Installation Code dengan tanda strip “-” ke keygen, jika sudah klik “Generate Activation” pada keygen.

8. Copy Activation Code yang didapatkan dari keygen ke kotak Corel Draw yang sebelumnya, dan klik Continue, jika ada error klik Ok.

Silahkan mencoba !

--- Always Pray and Stay Creative ---

Saturday, 18 June 2016

Sekilas Tentang Design Vector Dan Tips Design Vector

Sekilas tentang Vector Design

Gambar yang kalian lihat pada blog ini adalah jelmaan dari vector, secara garis besar vector merupakan rangkaian dari garis garis yang dihubungkan menjadi satu hingga terbentuklah sebuah gambar yang memiliki arti dan makna. Dalam dunia design graphic vector merupakan sebuah keharusan yang harus dimengerti dan dikuasai, karena bermula dari sinilah terciptalah sebuah gambar dan karya menarik dari seorang designer graphic.

Dalam dunia design graphic dikenal yang namanya istilah vector dan bitmap, kadang kita dibingungkan dengan istilah ini, tapi jangan khawatir saya akan menjelaskan perbedaan diantara kata ini :

1. VECTOR

2. BITMAP

 Perhatikan gambar dibawah ini :
Berdasarkan gambar diatas dapat kita simpulkan bahwa vector memiliki ketajaman gambar dibandingkan dengan bitmap, jadi jika kita editing design menggunakan vector tidak akan mengkhawatirkan penurunan kualitas dari gambar yang akan kita edit. Berbanding terbalik dengan vector, kualitas bitmap akan menurun jika kita tidak berhati hati dalam mengatur design menggunakan bitmap.

Kali ini saya akan membahas hanya tentang vector, lupakan saja si bitmap. Saat ini dunia vector memang sangat diminati oleh banyak kalangan masyarakat penggemar design, perusahaan yang bergerak dalam mengembangkan sofware berbasis vector kini berusaha memberikan versi terbaiknya untuk para pelaku design.

Beberapa perusahaan yang bergerak dibidang pengembangan sofware design berbasis vector antara lain Adobe, Corel, dan Xara. Vector design yang akan saya bahas kali ini adalah dengan menggunakan software CorelDraw, karena menurut saya software inilah yang simpel dan sangat mudah untuk digunakan. Oke bahasan selanjutnaya akan saya sharing sesuai materi yang akan diposting diartikel selanjutnya.

Jangan lupa untuk berkunjung ke panduan vector di blog ini!

Baca Juga: Design Vector tanpa Ribet dengan Panduan Vector

--- Always Pray and Stay Creative ---

Thursday, 16 June 2016

Cara Membuat Widget Iklan Melayang di Samping Blog

Menampilakn Iklan Melayang

Iklan pada blog merupakan media yang baik untuk promosi suatu produk dan jasa yang akan kita tawarkan ke costumer kita. Dengan adanya iklan baik penyedia layanan iklan maupun yang ingin memanfaatkan iklan merasa saling ketergantungan, maka dari itu tidak hanya pada media televisi, spanduk, tiang listrik yang terpampang iklan tapi juga media internet merupakan akses untuk bisa pasang iklan. Dari internet banyak situs saat ini yang menjadi penyedia layanan iklan, dan saat ini iklan menghampiri para pemilik blog, itulah alasanya kenapa seorang blogger bisa menghasilkan uang dari blog yang dikelola.

Untuk pemilik blog biasanya harus bekerja sama dengan google adsense agar bisa menampilkan iklan pada blog yang kita kelola, dari iklan yang terpampang diblog kita nantinya akan menampilkan iklan yang sudah diatur oleh google adsense, dan kita akan mendapatkan uang setelah orang memanfaatkan iklan yang berada pada blog kita. Namun tidak semua pemilik blog bisa bekerja sama dengan google adsense, harus memenuhi kriteria dan aturan khusus untuk menjadi patner google adsense.


Bicara soal iklan kali ini blogy akan memberikan tips untuk sahabat blogy, yah walaupun blog kita belum bisa menjadi patner google apa salahnya kita pajang iklan diblog kita sendiri, kita bisa tampilkan produk dan jasa yang kita punya, dimana saja dan kapan saja. Tapi inget kawan, iklan yang kita tampilakan kadang akan mengganggu pengunjung yang berkunjung diblog kita, jadi ya harap hati hati dalam menampilkan iklan pada blog kalian.

Pada sisi blog kita kadang masih terdapat space buat pasang iklan, nah kita bisa memanfaatkan layar yang kosong itu untuk menampilkan iklan melayang. Caranya sangat mudah mari ikuti langkah langkah berikut ini :

Step 1. Masuk ke pengaturan Tata Letak

Step 2. Pilih Add Gadget/Widget yang mana saja

Step 3. Pilih HTML / Javascript

Step 4. Copy Code Script dibawah ini, dan Pastekan pada kolom HTML / Javascript

Code Script
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(50);
});
});
</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<!--start: floating ads-->
<div id="teaser2" style="width:185px; height:650px; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://3.bp.blogspot.com/-8f0HiXbOxFE/V0NalglgjDI/AAAAAAAAESo/TOSag73PmYQcmDFWa65tjtT5sKTGP0_zACLcB/s1600/closemen.png' alt='close' title='close button'/></center></a></div>


<!--Mulai disini-->


<!--Masukan Script Iklan Di sini Untuk Iklan Melayang di Kiri Blog-->
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.tokopedia.com/artadhitive ( Url yng ingin dituju )"imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="https://3.bp.blogspot.com/-gXQqVCDcxjs/V0NhmhwTMRI/AAAAAAAAETI/6hEm_xOi5No9zCudkCekIlBVmU6Zde60ACLcB/s1600/Iklan-Kiri.png( Url gambar untuk tampilan iklan )" /></a></div>
<br />
<!--Akhir disini-->
</div>
<!--end: floating ads-->

<!--start: floating ads-->
<div id="teaser3" style="width:185px; height:650; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://3.bp.blogspot.com/-8f0HiXbOxFE/V0NalglgjDI/AAAAAAAAESo/TOSag73PmYQcmDFWa65tjtT5sKTGP0_zACLcB/s1600/closemen.png' alt='close' title='close button'/></center></a></div>


<!--Mulai disini-->


<!--Masukan Script Iklan Di sini Untuk Iklan Melayang di Kanan Blog-->
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.tokopedia.com/kaosportive ( Url yng ingin dituju )" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="https://4.bp.blogspot.com/-Ck1Wfd2wZHs/V0NkYX1R43I/AAAAAAAAETU/mNaGsRt68wMOTnHg3LVOU3BHjM7TtPVSQCLcB/s1600/Sebelah-KLanan.png( Url gambar untuk tampilan iklan )" /></a></div>
<br />

<!--Akhir disini-->
<!--end: floating ads--></div>


Step 5. Ganti tulisan yang berwarna merah dengan alamat url yang ingin dituju
misalnya : https://www.tokopedia.com/kaosportive

Ganti tulisan yang berwarna biru dengan gambar yang ingin ditampilkan pada iklan

Ukuran gambar biasanya panjang 600 pixle dan lebar 185 pixle

Step 6. Klik Save dan kemulian lihat tampilan iklan pada blog kalian

Saran dari blogy agar iklan tidak terlalu menggangu pengunjung blog sebaiknya ditampilkan pada homepage saja, untuk postingan blog sebaiknya dihilangkan agar tidak terlalu mengganggu pengunjung blog saat membacanya artikel kita.

Baca Juga Artikel : Tips Cara Menampilkan Widget di Halaman Tertentu Pada Homepage

Silahkan ungkap kreasimu, Silahkan mencoba dan Semoga berhasil.


--- Always Pray and Stay Creative ---

Cara Membuat Widget Berlangganan Artikel Pada Sidebar Blog

Widget Subscribe Berlangganan Artikel

Meningkatkan minat pengunjung blog saat ini memang banyak sekali caranya, dengan munculnya widget baru dan menarik membuat kita semakin mudah untuk promosikan blog kita kemana saja yang kita inginkan.

Contohnya melalui widget share button kita lebih mudah untuk berbagi artikel hanya dengan sekali tekan button dan artikel dengan cepat tersebar di media sosial kita. Tidak hanya dengan widget share button saja, hadirnya widget yang satu ini juga merupakan jalan pintas agar para pengunjung blog dimudahkan dengan adanya informasi terbitan artikel terbaru dari sebuah blog yang kita tunggu tunggu kehadiranya.


Widget ini merupakan cara alternatif agar blog kita selalu dibanjiri pengunjung, namun pastinya dengan content yang menarik dan memberikan informasi yang baik untuk pengunjung, agar pengunjung blog kita bersedia untuk menjadi pelanggan dari artikel yang kita buat.

Kita sebut saja widget Subscribe Me !, dengan menambahkan widget subscribe me pada widget blog kita akan memudahkan pelanggan setia artikel kita mendapatkan informasi terbaru jika kita menerbitkan artikel paling anyar dari blog yang kita kelola.

Untuk demo tampilanya bisa dilihat pada gambar dibawah ini :

Demo Tampilan Subscribe Me !

Cara memasang widget seperti itu cukup mudah kalian tidak perlu susah susah edit html pada settingan template blog, hanya dengan menambah widget pada sidebar anda sudah bisa langsung terpasang pada blog anda. Untuk lebih detailnya mari kita simak langka berikut ini :

Step 1. Masuk ke pengaturan Tata Letak 

Step 2. Tambah Gadget/Widget pada sidebar widget

Step 3. Pilih HTML / Javascript

Step 4. Copy Code Script dibawah ini :

Code Script Widget


<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='byard-emailsubsocial'>
              <div class='heading'>
               Ayo SUBSCRIBE !
              </div>
                 <p>Daftarkan Email kamu untuk dapatkan update-an artikel terbaru tentang design.</p>
             <div class='emailsub'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Ganti', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Your Name' />
               <input type='text' name='email' placeholder='Your Email' />
               <input type="hidden" value="Ganti" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
                        <input value="Subscribe Now!" class="button" type="submit" />
              </form>
              </div>
<p id='credits'>Powered By : <a href='http://www.artadhitive.com'>Artadhitive</a></p>

             </div>
 <style type='text/css'>
     #byard-emailsubsocial {
      width: 335px;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     }
   #byard-emailsubsocial p {
    font-family: open sans;
    font-size: 13px;
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #byard-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #byard-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #byard-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #byard-emailsubsocial .emailsub .button {
    background: #45b7c1;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #2e7e85;
    transition:background .4s linear;
    width: 90%;
margin-top: 5%;   
margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #byard-emailsubsocial .emailsub .button:hover{
    background: #4ddce7;
   }
#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}

     </style></div></div>

Step 4. Paste kan pada widget HTML / Javascript dan ganti tulisan Ganti dengan Feedburner Username Kamu  

Step 5. Selanjutnya Save dan lihat hasilnya.

Sekian berbagi widget artikel berlangganan, jika ada yang ingin ditanyakan atau berbagi tutorial widget baru silahkan komentar pada kolom dibawah ini. Silahkan exspresikan kreasimu, Selamat mencoba, dan Semoga berhasil.

--- Always Pray and Stay Creative ---

Wednesday, 15 June 2016

Cara Memasang Share Button + Counter Sumome Pada Blog

Share Button by SumoMe

Sebut saja namanya Share Button alias tombol untuk berbagi, memang sangat diperlukan untuk para pelaku blog, tidak hanya pelaku blog saja portal berita, web perusahaan, bahkan toko online pun semua dilengkapi dengan share button.

Mengingat manfaat dari share button sangat penting untuk meningkatkan traffic pengunjung, bahkan peluang untuk dibaca pengunjung situs sosial sangat besar. Misalnya saja facebook, jika kita share artikel blog kita dengan facebook kemungkinan orang akan tertarik untuk membacanya lewat sosial media.

Terkait blog design kadang kita menginginkan sesuatu yang menarik untuk tampilan share button, dengan tampilan share button yang menarik dan juga mudah digunakan pengunjung tidak akan segan segan untuk share informasi yang kita berikan kepada teman, sahabat, keluarga bahkan orang lain sekalipun melalui sosial media mereka.

Kali ini blogy akan share mengenai informasi widget yang cocok untuk tampilan share button yang baru didapat dari sahabat blogy. Tampilan share button yang menarik dan mudah digunakan mungkin itu prioritas utama agar orang lain dengan mudahnya share artikel kita. Tampilan share button yang melayang juga membuat tampilan semakin menarik. Contoh tampilan bisa dilihat di sebelah kiri artikel ini, gimana ? tampilan yang unik, menarik dan mudah digunakan bukan. Pasti sahabat blogy bakal share artikel ini dengan mudah melalui share button itu. ( iyaaa kannn....)


Langsung saja sob, Oh iya perlu diketahui pelopor share button ini adalah SumoMe.com jadi ya sobat harus registrasi terlebih dahulu. Perhatikan langkah berikut ini :


Step 1. Kunjungi link berikut SUMOME.COM

Step 2. Lakukan Sign Up dengan mengisi semua data yang diperlukan

Create an Account


Step 3. Konfirmasi E-mail dan silahkan kembali ke SumoMe.com

Step 4. Klik Add New Site dan masukkan alamat Url Blog kamu

Copy Code Script

Step 5. Copy Code Script di dalam kotak dan kemudian Pastekan dibawah kode <head> pada template html blog kamu.

Step 6. Log In SumoMe lagi dan Klik Visit Site warna hijau

Visit Site

Step 7. Perhatikan simbol sumome sebelah kanan warna biru, kemudian klik logo seperti mahkota nanti akan muncul tampilan seperti ini

Klik Icon Mahkota

Step 8. Klik Icon Sumo Store -- Browse -- Sharing -- Share ( Download Icon Ini ) 


Download Share Icon

Step 9. Setelah download kemudian klik Open, lanjut pilih yang Free Acces dan yang terakhir klik setting silahkan diatur sesuai dengan keinginan kalian

Setting Icon

Step 10. Jangan lupa di klik Save

Kunjungi website kalian dan lihat tampilannya. Jika kurang jelas untuk ditanyakan silahkan komentar dibawah ini, akan blogy bantu untuk setiap permasalahan yang muncul. Silahkan ungkap kreasimu, selamat mencoba dan semoga bermanfaat.


Ayo Lanjutkan Kreasimu di SumoMe.com

--- Always Pray and Stay Creative ---

Tuesday, 14 June 2016

Cara Membuat Widget Sidebar Zoom-Out Unik dan Menarik


Widget sidebar memang sangat diperlukan untuk informasi atau jalan pintas pengunjng blog untuk menelusuri lebih jauh tentang isi blog. Isi dari widget bermacam macam ada yang berisi iklan, popular pos, label, ada juga yang memasang widget seperti jam, tanggal dan profile pribadi.

Untuk memasang widget juga sangat mudah kalian tinggal masuk kepengaturan Tata Letak --> Tambah Widget / Gadget --> HTML/ Javascript dan Copy Code.

Nah kali ini blogy ingin membagi costum widget yang beda dari yang lainnya contohnya bisa dilihat di sidebar sebelah kanan atas, jika kalian menyentuh gambarnya akan berubah menjadi besar. Terlihat lebih unik kan dari yang lainya, untuk lebih jelasnya langsung saja kita praktek.

Baca Juga Artikel :

Step 1. Masuk ke pengaturan Template blog --> Edit HTML 

Step 2. Masukkan Code Script ini dibawah kode  ]]></b:skin>
agar lebih mudah mencari kodenya tekan C + F dan pastekan kode ]]></b:skin> 

Code Script


.sidebar-blogdesign {
    background: url('https://4.bp.blogspot.com/-QCUVk3n6uWQ/V1xm_xk8okI/AAAAAAAAEhI/BUuKcstQ78A25kKsvpePBcuVGne1AEMQgCLcB/s1600/mall%2Bblog8.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-blogdesign:hover {
 background-size: 120% auto;
}
.sidebar-vectordesign {
    background: url('https://4.bp.blogspot.com/-ZGkmKJuBWOk/V10GtXOpQKI/AAAAAAAAEh4/Vo-82ioW4-IVmtJQuJYPefckkQibKF5TACKgB/s1600/vector2.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-vectordesign:hover {
 background-size: 120% auto;
}
.sidebar-motiondesign {
    background: url('https://1.bp.blogspot.com/-cH5kR15zKWg/V10KhnSVBKI/AAAAAAAAEiE/O4FN2_IXL8QLmq6n_1AxoANn4nD6dp8BwCKgB/s1600/motions.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-motiondesign:hover {
 background-size: 120% auto;
}
.sidebar-biznisdesign {
    background: url('https://3.bp.blogspot.com/-iN2HXj6LgDM/V10PefbUSiI/AAAAAAAAEiU/U4Q-xe4a3WU5yHK8Q70_XqL1xW-T2k87gCLcB/s1600/busines.png') no-repeat 50% 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-biznisdesign:hover {
 background-size: 120% auto;
}


Step 3. Ganti Url gambar yang berwarna Merah Tua sesuai dengan gambar yang kalian inginkan

Step 4. Simpan Tamplate

Step 5. Masuk  ke pengaturan Tata Letak kemudian Tambah Gadget/Widget tempatkan sesuai dengan yang kalian inginkan

Step 6. Pilih HTML / Javascript dan pastekan Code Script berikut ini

Code Script


<a href="http://artadhitive.com/" target="_blank"><div class="sidebar-blogdesign"></div></a>
<a href="http://artadhitive.com/" target="_blank"><div class="sidebar-vectordesign">e</div></a>
<a href="http://artadhitive.com/" target="_blank"><div class="sidebar-motiondesign"></div></a>
<a href="http://artadhitive.com/" target="_blank"><div class="sidebar-biznisdesign"></div></a>

Step 7. Ganti Url link yang berwarna Biru sesuai halaman yang ingin dituju

Step 8. Simpan Gadget/ Widget

Dan sekarang lihat hasilnya, lebih unik dan menarikkan pastinya. Silahkan berkreasi, semoga berhasil dan tetap semangat.

--- Always Pray and Stay Creative ---

Monday, 13 June 2016

Cara Mengubah Atau Menampilkan Favicon Blog Yang Hilang

Favicon adalah langkah kecil dan pertama saat orang mulai mendesign blog. Fungsi dari favicon itu sendiri adalah sebagai jadi diri atau identitas yang memiliki ciri khas dari suatu blog.

Favicon memang perlu untuk setiap tampilan design blog, walau bentuknya kecil tapi memiliki identitas yang sangat kuat terhadap jatidiri blog kalian. Agar terlihat unik dan memiliki karakter tersendiri designlah favicon / logo kecil yang mudah dan gampang untuk diingat orang, karena dengan favicon orang akan lebih terbiasa menggingat blog kalian.

Baca Juga Artikel : Tips Mengubah Gambar Saat Disentuh Kursor Mouse

Untuk memasang favicon sangatlah mudah kalian tinggal kunjungi :

Menampilkan Favicon : Tata Letak -- Edit Favicon -- Upload -- Jadi Deh
* Inget ya untuk ukuranya 16*16,,32*32,,48*48,,64*64 dan tidak lebih dari 100 Kb ( Pixle )

Nah jika masalah datang melanda tiba tiba favicon berubah menjadi logo blogger atau berubah menjadi logo kertas berwarna hitam. Biasanya hal yang sering terjadi setelah kalian berkomentar atau ketika kalian mengubah status blogspot.com menjadi .com ( beli domain ).

Jika hal itu terjadi maka kalian harus mengambil tindakan dengan cara mengubahnya melalui edit html pada tamplate kalian. Caranya adalah :

  • Masuk pada pengaturan tamplate Edit HTML
  • Pastekan kode berikut dibawah kode <head> biasanya dibawahnya kode <meta tag>
<link href='URL FAVICON ANDA' rel='shortcut icon' type='image/x-icon'/>

  • Ganti URL FAVICON ANDA  dengan mengambil url favicon pada blog yang sebelumnya.
Tapi blogy sarankan untuk mengubah favicon anda dengan menggunakan edit via html, agar favicon pada blog sobat tidak mudah berubah. Menurut pengalaman ku ketika mengupgrade status blog menjadi .com favicon blogy berubah menjadi logo kertas berwarna hitam dan sangat menggangu sekali dan akhirnya menggantinya dengan edit via html.

Sekian sharing dari blogy terkait favicon yang hilang kabur entah kemana, selamat berkreasi sampai berhasil dan semoga bermanfaat.

--- Always Pray and Stay Creative ---

Sunday, 12 June 2016

Cara Gambar Berubah Saat Disentuh Kursor Mouse / Mouseover


Seringkali kita ingin menampilkan banyak gambar namun hanya ada satu widget yang tersisa, atau mungkin dalam postingan yang memerlukan banyak gambar dan kita tidak punya banyak space untuk menempatkan gambar, karena gambar memang setidaknya sangat diperlukan untuk memperjelas visualisasi dari apa yang kita maksud.

Bagaimana dengan tips dari blogy untuk menampilkan gambar yang apabila disentuh mouse gambar nya akan berubah menjadi gambar lain. Caranya cukup mudah dan tidak memerlukan banyak waktu, langsung saja mari kita simak baik baik.

Step 1. Upload gambar dan temukan url gambar

Contoh :

Url gambar pertama :

https://lh3.googleusercontent.com/-sGHqTJUR8vw/V1cPl4MiECI/AAAAAAAAEdE/rLWUfXiEqpsJVfwjAUGsyNo4ir_PsvidwCKgB/w140-h47-p/Arta.jpg

Url gambar kedua :

https://lh3.googleusercontent.com/-dgI2eaqfbLw/V1cPT-mn_NI/AAAAAAAAEdA/qfp2LpYFWu8YAcZCjyQZLKTK5PhT1bxPwCKgB/w140-h47-p/Arto2.png

Step 2. Masukkan kode berikut pada Widget / Postingan blog

Memasang pada Widget --> Tata Letak - Klik Tambahkan Gadget - Pilih HTML / Javascript - Pastekan Code Script Gambar

Memasang pada Postingan  --> New Entri - Pada menu tab pillih mode HTML - Pastekan Code Script Gambar

CODE SCRIPT GAMBAR
<a href="Masukkan Url Gambar Pertama"><img src="Masukkan Url Gambar Pertama" onmouseover="this.src='Masukkan Url Gambar Kedua'" onmouseout="this.src='Masukkan Url Gambar Pertama'" /></a>

Contohnya seperti ini :

<a href="https://2.bp.blogspot.com/-dgI2eaqfbLw/V1cPT-mn_NI/AAAAAAAAEck/Dkbm0K5SWTU6muUFRgmgJ34k-CnnSP0wQCLcB/s1600/Arto2.png"><img src="https://2.bp.blogspot.com/-dgI2eaqfbLw/V1cPT-mn_NI/AAAAAAAAEck/Dkbm0K5SWTU6muUFRgmgJ34k-CnnSP0wQCLcB/s1600/Arto2.png" onmouseover="this.src='https://2.bp.blogspot.com/-QBt47bIp0zA/V1cPo0_zm0I/AAAAAAAAEcw/ATpvwOP1Sp0h20kbUBJMyXUNhqP1WmgewCLcB/s1600/Arto1.png'" onmouseout="this.src='https://2.bp.blogspot.com/-dgI2eaqfbLw/V1cPT-mn_NI/AAAAAAAAEck/Dkbm0K5SWTU6muUFRgmgJ34k-CnnSP0wQCLcB/s1600/Arto2.png'" /></a>

Dan hasilnya akan seperti ini :



Silahkan pindahkan kursor kalian kearah gambar diatas pasti akan berubah gambarnya.

Oh iya jika kalian tidak ingin merubah menjadi gambar menjadi seperti semula kalian bisa mengganti url gambar yang terakhir menjadi url gambar yang kedua. Silahkan ungkap kreasimu, semoga berhasil dan tetap semangat.

--- Always Pray and Stay Creative ---

Saturday, 11 June 2016

Cara Menampilkan Widget Tertentu Pada Homepage Blog


Tampilan widget memang sangat diperlukan untuk design blog yang kita miliki, tapi akan sangat mengganggu pengunjung blog apabila banyak widget yang memuat informasi yang sebenernya tidak diperlukan oleh pengunjung blog. Widget yang terlalu banyak juga akan memperlambat loading blog dari postingan yang akan kita tampilkan, oleh karena itu kita harus lebih bijak dalam menampilkan widget pada blog kita.

Artikel kali ini akan membahas mengenai bagaimana cara menampilkan widget di halaman tertentu pada blog, misalkan jika kalian ingin menampilkan widget hanya ada pada halaman homepage saja dan tidak ingin menampilkan dihalaman postingan, atau kalian hanya ingin menampilkan widget iklan hanya pada halaman tertentu. Dengan menampilkan widget di halaman tertentu mungkin loading blog tidak akan lemot dan lebih nyaman dikunjungi oleh pengunjung blog shobat.

Caranya untuk menampilkan widget di halaman tertentu pada blog cukup mudah, terlebih dahulu sobat harus mengerti maksud adanya code html dan css pada tamplate blog, misalkan pada widget yang ada di sidebar, pastinya terdapat code script pada tamplate. Selanjutnya kalian bisa mencobanya dengan menambahkan code script dibawah ini, sangat disarankan agar dibackup terlebih dahulu tamplate yang sebelumnya agar jika terjadi kesalahan yang tidak diinginkan bisa diperbaiki kembali. Jika sobat masih bingun kalian bisa lihat pelajaran singkat design blog dibawah ini.

Step 1. Login Blog dan langsung kepengaturan tamplate edit html

Step 2. Cari kode widget pada html seperti contoh :

Cari kode widget seperti gambar

Step 3. Pastekan kode yang diinginkan diantara kode html perhatikan gambar berikut :
Pastekan kode diatas html widget

Baca Juga Artikel : Tips Mengubah Gambar Saat Disentuh Kursor Mouse

Mudah bukan, saatnya sekarang buat kalian mencobanya dengan kode berikut ini pada widget kalian :

1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
........................Script Widget..............................
</b:if>

Nah kadang kita terlalu banyak widget yang ingin dihilangkan dihalaman depan atau homepage bisa pakai cara cepat seperti ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>#HTML1,#HTML2,#Popular Post,#About Me{display:none;}
</style>
</b:if>

 Kalian tinggal mengganti tulisan berwarna merah dengan html widget yang ingin dihilangkan.

2. Menampilkan di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
........................Script Widget..............................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
........................Script Widget..............................
</b:if>

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
........................Script Widget..............................
</b:if>

5. Menampilkan widget hanya di halaman posting.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
........................Script Widget..............................
</b:if>

6. Menampilkan widget di semua halaman, kecuali halaman posting.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
........................Script Widget..............................
</b:if>

7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
........................Script Widget..............................
</b:if>

8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
........................Script Widget..............................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
........................Script Widget..............................
</b:if>

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
........................Script Widget..............................
</b:if>

Nah itulah beberapa script code yang bisa kalian gunakan untuk menghilangkan dan menampilkan widget tertentu sesuai dengan yang anda inginkan. Silahkan berkreasi dan selamat mencoba, semoga bermanfaat.


--- Always Pray and Stay Creative ---

Thursday, 9 June 2016

Cara Membuat Box Script Untuk Code Pada Postingan Blog


Pengalaman adalah guru yang terbaik, kali ini saya akan berbagi pengalaman untuk pertama kalinya dan langsung saya share tutorialnya diblog ini. Pastinya yang namanya blog itu tidak jauh dengan namanya HTML dan CSS juga script nya yang begitu banyak dan panjang.

Waktu itu saya mencampurkan antara script dengan tulisan menjadi satu paragraf, ternyata banyak sahabat blog yang protes, ada yang bilang gagal saat editing tamplate, ada yang tulisanya ikut kesalin dengan scriptnya dan ada juga yang baca blog sampe dibaca itu tulisan html dan css nya.

Untuk mengatasi masalah tersebut makanya perlu ada yang namanya benteng atau box script yang membedakan antara script dan juga bacaan artikel yang kita buat.

Box Script memiliki kegunaan agar tampilan blog terlihat rapi dan mudah dipahami. Tampilan box script juga bermacam macam ada yang hanya berbentuk kotak ada juga yang ditambah dengan scroll, bisa juga diganti backgroundnya dan ditambahkan dengan border.

Caranya tidak begitu sulit tinggal copas script yang ada dibawah dan akan muncul tampilan kotak pada postingan kita, ikuti langkah langkah berikut :

Step 1. Copy Box Script yang kalian inginkan

Contoh Box Script yang bisa diisi code script

Step 2. Pastekan ke entri pada menu tab HTML

Pastekan code ke entri html blog

Step 3. Pilih mode compose dan pastekan code script didalamnya

Blog Compose pastekan isi Script pada kotak


Silahkan pilih tampilan box script yang kalian inginkan :


<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;"> 
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;"> 
Pastekan Code Script Di Sini </div>


<div style="background-color: #36e4fd; border: 2px #610b38 dashed; padding: 10px;">
Pastekan Code Script Di Sini </div>


<div style="background-color: #c2c2c2; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>


<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>


<div style="background-color: #d5839f; border: 2px #006400 inset; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: #00b8ff; border-radius: 10px; border: 7px outset #fff; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>

Kalian bisa modifikasi box script sesuai kreasi kalian dengan cara :

- Mengganti ukuran sudut lengkungan contohnya: border-radius: 10px ada 3 ganti semua
- Mengganti warna background contohnya : background-color: #00B8FF ( Kode Warna )
- Merubah ketebalan border / garis tepi kolom contohnya : border: 4px

Bagi kalian yang ingin menambahkan scroll pada box script bisa menggunakan code dibawah ini :


<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">


Isi Scroll Box

</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; height: 100px; overflow: auto; padding: 10px; padding: 10px; width: 600px;">


Isi Scroll Box



</div>

Itu aja share pengalaman pertama untuk sahabat setia blog artadhitive. Silahkan berkreasi dan selamat mencoba, semoga bermanfaat.

--- Always Pray and Stay Creative ---

Monday, 6 June 2016

Sekilas Tentang Blog Design dan Tips Blogging


Blog design memang sangat mendapat perhatian khusus bagi para blogger pemula. Tidak hanya para pemula saja, tetapi bagi para ahli blog pun kadang beralih kembali untuk mendesign blognya. Sekilas tentang blog design, ini bukan soal penampilan saja tapi juga soal attitude para pelaku design itu sendiri.

Mungkin bagi para pemula blog awalnya memang tidak begitu penting soal tampilan, karena dengan tampilan sederhana saja kita pun merasa nyaman, daftar akun blog - cari tamplate sederhana - mulai menulis - sharing ke teman-teman ( Clear Masalah ). Yang jadi pertanyaan adalah ketika kita mulai jalan-jalan melihat blog-blog para pendahulu atau biasa sering disebut blogwalking, pasti deh mulai terhipnotis dengan tampilan blog teman-teman yang terlihat lebih keren, lebih responsive, dan lebih nyaman dilihatnya. ( Iya Kan... )

Tidak bisa dipungkiri blog design adalah ajang yang penting gak penting tapi tetap memiliki peranan penting bagi para blogger. Kadang para pemula blogger juga sangat disibukkan dengan tampilan blog ( bahasa gaulnya tamplate ) alhasil tak satu pun artikel dibuat, alias mager kalo udah otak atik tamplate blog.

Padahal kalo kita lebih telaah fungsi dari blog itu sebenarnya adalah sebagai sumber informasi untuk orang lain, lah kalo tampilanya keren tapi isi content yang kita buat tidak bermanfaat untuk orang lain ya sama aja kita hanya sekedar ngblog asal blo og dong. ( Padahal mah suka suka yang punya blog dong maunya apa, kok blogy yang repot  )

Nah sebenernya nih blogy cuma mau sharing aja mengenai masalah blog design kalo ternyata untuk masalah tampilan itu memang penting, agar teman teman tidak ngelatur masalah design mungkin blogy bisa bantu dengan beberapa tips yang nantinya blogy bakal sharing di lain tempat dan kesempatan. Kali ini yang akan blogy sharingin adalah sekilas tentang blog design, seperti apa dan bagaimana itu blog design.

Flashback dulu mas/mbak , sejauh ini kita membaca apakah ada yang tahu apa itu blog ?
nah mungkin bagi para blogger pemula masih bingung tentang blog. Jadi blog itu adalah lihat gambar dibawah ini.
Blog bagian dari internet network

Silahkan coba anda simpulkan sendiri apa yang kalian ketahui mengenai makhluk yang bernama blog ?

                Web Log = Blog

Seperti yang sudah dijelaskan oleh mas sugeng.id sebelumnya kalo ternyata blog itu adalah bagian informasi dari internet.

Bisa juga dikatakan website pribadi karena sesuai dengan fungsinya adalah untuk catatan pribadi di internet.



kegunaan blog tidak hanya untuk catatan pribadi
Bagi yang belum tahu fungsi dan apa saja sih manfaat dari blog itu sendiri kita bisa melihat bagan disamping ini .

Jika kita sudah memahami apa itu maksud dan tujuan blog tidak perlu lagi kita berhenti ngeblog karena cuma sekedar tamplate yang tidak sesuai dengan yang kita inginkan.

Design itu sendiri adalah memiliki arti sebagai rancangan/perencanaan/reka rupa dalam membuat sebuah objek.

Lantas apa hubungannya antara design dengan blog ?

Terkadang bagi pemula untuk membuat blog itu tidak akan terbebani dengan yang namanya design blog, tapi bagi para medium blogger hal ini menjadi sangat sakral karena tidak bisa dipungkiri setelah blogwalking mereka akan banyak melihat tampilan-tanpilan blog orang lain yang lebih kece dari pada blog kita. Alhasil niat untuk memperbaiki tampilan blog mulai muncul dan tersita dengan waktu yang panjang untuk memahami tampilan tersebut.

Nah, agar tidak berlama-lama dalam memperbaikai tampilan blog kalian bisa berkunjung pada halaman design blog pada blog ini atau silahkan klik link dibawah ini!


Kalian akan temukan beberapa kemudahan untuk mencari artikel atau tutorial design blog untuk memperbaiki tampilan blog kalian. Semoga informasi ini bermanfaat dan memberikan hasil yang maksimal untuk menarik pengunjung diblog kalian!

--- Always Pray and Stay Creative ---

Interested for our works and services?
Get more of our update !