Archive for 2015

Home » Archive for 2015

Macam Dan Fungsi Aplikasi Adobe

Oke, kali ini saya akan berbagi kepada kalian sebuah informasi mengenai macam dan fungsi beberapa produk keluaran Adobe yang biasa digunakan untuk desain. Pertama, kalian harus tahu mengenai Adobe terlebih dahulu. Adobe adalah perusahaan perangkat lunak yang bergerak di bidang grafis, animasi, video, dan pengembangan web. Adobe adalah salah satu perusahaan perangkat lunak yg paling besar di dunia. Perusahaan ini didirikan pada tahun 1982 dan berpusat di San Jose, California, AS. Beberapa dari produk-produknya yang terkenal dan mendunia adalah Photoshop, Flash, dan Acrobat.

Adobe telah berkembang pesat dalam beberapa tahun terakhir baik dari segi penjualan ataupun jumlah pengguna. Pada tahun 2005 perusahaan Macromedia telah dibeli oleh Adobe. Adobe terbaru adalah Adobe dengan jenis CS6. Oke, langsung saja, berikut ini adalah macam aplikasi dan fungsinya :

Adobe Photoshop

Adobe Photoshop atau biasa disebut Photoshop, adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak ini banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar/foto, dan bersama Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS (Creative Suite), versi sembilan disebut Adobe Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3 , versi kesebelas adalah Adobe Photoshop CS4 , versi keduabelas adalah Adobe Photoshop CS5 , dan versi yang terakhir (ketigabelas) adalah Adobe Photoshop CS6.

Adobe After Effect

Adobe After Effects adalah produk piranti lunak yang dikembangkan oleh Adobe, digunakan untuk film dan pos produksi pada video. pada awalnya merupakan sebuah software produk dari Macromedia yang sekarang sudah menjadi salah satu produk Adobe.

Adobe After Effects adalah sebuah software yang sangat profesional untuk kebutuhan Motion Graphic Design. Dengan perpaduan dari bermacam - macam software Design yang telah ada, Adobe After Effects menjadi salah satu software Design yang handal. Standart Effects yang mencapai sekitar 50 macam lebih, yang sangat bisa untuk mengubah dan menganimasikan obyek. Disamping itu, membuat animasi dengan Adobe After Effects, juga bisa dilakukan dengan hanya mengetikkan beberapa kode script yang biasa disebut Expression untuk menghasil pergerakan yang lebih dinamis.

Adobe Flash

Adobe Flash (dahulu bernama Macromedia Flash) adalah salah satu perangkat lunak komputer yang merupakan produk unggulan Adobe Systems. Adobe Flash digunakan untuk membuat gambar vektor maupun animasi gambar tersebut. Berkas yang dihasilkan dari perangkat lunak ini mempunyai file extension .swf dan dapat diputar di penjelajah web yang telah dipasangi Adobe Flash Player. Flash menggunakan bahasa pemrograman bernama ActionScript yang muncul pertama kalinya pada Flash 5.

Adobe Dreamweaver

Adobe Dreamweaver merupakan program penyunting halaman web keluaran Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 12 yang ada dalam Adobe Creative Cloud (sering disingkat Adobe Cc).

Adobe Firework

Adobe Fireworks (sebelumnya dikenal sebagai Macromedia Fireworks) adalah sebuah bitmap dan vector grapichs editor. Ia sebenarnya dikembangkan menggunakan bagian dari Macromedia xRes, yang telah Adobe peroleh pada tahun 2005. Fireworks dibuat untuk web designer agar membuat prototipe website dan application interface dengan cepat. Fiturnya memasukkan slices and kemampuan untuk menambahkan hotspot. Ia didesain untuk diintegrasikan dengan produk Adobe lainnya seperti Adobe Dreamweaver dan Adobe Flash. Ia tersedia sebagai salah satu produk yang berdiri sendiri atau dibundle dengan Adobe Creative Suite. Versi sebelumnya dibundle dengan Macromedia Studio.

Adobe Illustrator

Adobe Illustrator adalah program editor grafis vektor terkemuka, dikembangkan dan dipasarkan oleh Adobe Systems. Illustrator CS6 merupakan versi terkini program ini, generasi keenam belas untuk produk Illustrator.

Adobe InDesign

Adobe InDesign adalah perangkat lunak desktop publishing (DTP) yang diproduksi oleh Adobe Systems yang dapat digunakan untuk membuat poster, brosur, bahkan majalah atau buku.

Adobe Premiere Pro

Adobe Premiere Pro adalah sebuah program penyunting video. Itu adalah sebagian dari Adobe Creative Suite, walaupun bisa dibeli sendirian. Bahkan kalau dibeli sendirian, itu termasuk Adobe Encore dan Adobe OnLocation. Walaupun yang dua versi pertama hanya tersedia untuk Windows, versi CS3 tersedia baik untuk Windows maupun Mac OS X. CS3 tersedia dalam Bahasa Inggris, Bahasa Perancis, Bahasa Jerman, Bahasa Jepang, Bahasa Italia, dan Bahasa Spanyol.

Adobe Audition

Adobe Audition (sebelumnya Cool Edit Pro) berguna untuk Audio Editing (Edit Audio) dan penggunaanya sangat simple dan mudah dipelajari, Oleh Karena itu Adobe Audition cukup terkenal dikalangan masyarakat.

Adobe Prelude

Adobe Prelude (penerus Adobe OnLocation) adalah alat untuk Windows dan Mac untuk meninjau, impor, log, pilih, dan media ekspor tapeless. Perangkat lunak ini juga menawarkan fitur seperti transkripsi pidato dan dipotong penciptaan kasar.

Nah, untuk sementara itu dulu. Sebenarnya masih banyak lagi. Namun tidak mungkin saya jelaskan satu-persatu. Berikut ini daftar lengkapnya :

Adobe Acrobat 3D
Adobe Acrobat Capture
Adobe Acrobat Connect
Adobe Acrobat family
Adobe After Effects
Adobe AIR
Adobe Audition
Adobe Authorware
Adobe Bridge
Adobe Captivate
Adobe ColdFusion
Adobe Connect
Adobe Contribute Publishing Server
Adobe Contribute
Adobe Creative Suite
Adobe Dreamweaver
Adobe Director
Adobe Encore
Adobe Fireworks
Adobe Flash
Adobe Flash Lite
Adobe Flash Media Encoder
Adobe Flash Media Server
Adobe Flash Player
Adobe Flash Player for Pocket PC
Adobe Flash Paper
Adobe Flash Professional
Adobe Flash Remoting
Adobe Video Streaming Service
Adobe Flex
Adobe FrameMaker
Adobe FrameMaker Server
Adobe FreeHand
Adobe Graphics Server
Adobe Illustrator
Adobe InCopy
Adobe InDesign
Adobe InDesign Server
Adobe JRun
Adobe LiveCycle Enterprise Suite
Adobe PageMaker
Adobe OnLocation
Adobe PDF JobReady
Adobe PDF Print Engine
Adobe Photoshop
Adobe Photoshop Elements
Adobe Photoshop Lightroom
Adobe PostScript
Adobe Premiere Elements
Adobe Premiere Express
Adobe Premiere Pro
Adobe Presenter
Adobe Reader
Adobe Reader LE
Adobe RoboHelp
Adobe Scene 7
Adobe Shockwave Player
Adobe Soundbooth
Adobe Ultra
Adobe Version Cue
Adobe Visual Communicator
Macromedia HomeSite

Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk selalu meninggalkan komentar dan klik tombol like di bawah ini :

Cara Menggunakan Widget UCCW Di Android

Kali ini saya akan berbagi kepada kalian tentang bagaimana cara menggunakan widget UCCW yang kalian download di smartphone kalian. Nah pertama saya menggunakan UCCW dan mendownload sebuah widget keren, saya bingung bagaimana cara menggunakan widget tersebut. Kemudian saya mencoba-coba sendiri dan akhirnya bisa. Nah, sekarang saya akan membagikannya kepada kalian tentang bagaimana cara menggunakan widget UCCW downloadan di smartphone android. Langsung saja, berikut ini adalah caranya :

Pertama dan tentunya kalian harus sudah mempunyai UCCW. Jika kalian belum punya, kalian bisa mendownload versi barunya di sini.
Kalian juga harus sudah mendownload widgetnya. Widget UCCW berekstensi .uzip.
Jika sudah siap, kalian buka aplikasi UCCWnya. Saya menggunakan versi baru 3.3.1.

Klik ikon tambah di atas.
Pilih ikon seperti klip.

Pilih widget yang sudah didownload dan akan kalian gunakan.

Tunggu sebentar. Widget berhasil ditambahkan.

Jika widget belum muncul, kalian tutup dan buka kembali aplikasi UCCWnya.
Kemudian kalian tambahkan widgetnya ke layar home seperti biasanya. Di sana akan ada banyak, kalian pilih salah satu.

Letakkan di layar home.

Pilih widget yang tadi kita tambahkan.

Tinggal kalian sesuaikan tempat dan ukuranya.

Selesai.

Nah, bagaimana? Mudah bukan? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Slider Gambar Ringan Responsive Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial blogger sederhana tentang bagaimana cara membuat slider gambar sederhana, ringan, dan responsive di blogger. Slider gambar ini sangat berguna. Pengunjung dapat melihat artikel menarik yang kita tampilkan di sana. Langsung saja, berikut ini adalah sedikit previewnya :

Demo

Bagaimana? Kalian tertarik? Langsung saja. Berikut ini adalah cara membuatnya :

Pertama masuk ke dasboard blog kalian.
Masuk ke Tata Letak.
Pastikan ada Tambahkan Gadget di atas widget Blog Posts kalian.
Jika belum ada, masuk ke Template.
Pilih Edit HTML.
Cari kode <b:section class='main' id='main' showaddelement='no'>.
Ganti no dengan yes.
Jika sudah, sekarang akan ada Tambahkan Gadget di atas widget Blog Posts kalian.
Klik Tambahkan Gadget.
Pilih HTML/JavaScript.
Masukkan kode di bawah ini :

<style type="text/css">
.slider-box { background:none repeat scroll 0 0 #eff0ef; margin:0 auto; margin-bottom:-100px; width:100%; overflow:hidden; }
#slider-wrapper { margin:0 auto; padding:10px; }
#jslider-container { border:2px solid #FFFFFF; max-width:100%; position:relative; text-align:left; z-index:90; }
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin,latin-ext");
* html #jslider-container{ width: 100% }
.slider-box {
background: none repeat scroll 0 0 #eff0ef;
margin: 0 auto;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
}
#jslider-container {
border: 2px solid #34495e;
max-width: 100%;
position: relative;
text-align: left;
z-index: 90;
}
#jslider-container .jslider_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#jslider-container .jslider_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#jslider-container .jslider_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#jslider-container .jslider_images a{
width:100%;
display:block;
color:transparent;
}
#jslider-container img{
max-width: none !important;
}
#jslider-container .jslider_images img{
width:100%;
border:none 0;
max-width: none;
padding:0;
}
#jslider-container a{
text-decoration: none;
outline: none;
border: none;
}
#jslider-container .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#jslider-container .ws_bullets div{
position:relative;
float:left;
}
#jslider-container a.wsl{
display:none;
}
#jslider-container .ws_bullets {
padding: 10px;
}
#jslider-container .ws_bullets a {
margin-left:4px;
width:9px;
height:9px;
background: url(./bullet.png) left 50% no-repeat;
float: left;
text-indent: -4000px;
position:relative;
color:transparent;
}
#jslider-container .ws_bullets a.ws_selbull, #jslider-container .ws_bullets a:hover{
background-position: right 50%;
}
#jslider-container a.ws_next, #jslider-container a.ws_prev {
position:absolute;
display:none;
top:50%;
margin-top:-28px;
z-index:60;
height: 48px;
width: 48px;
background-image: url(../images/arrows.png);
}
#jslider-container a.ws_next{
background-position: 100% 0;
right:5px;
}
#jslider-container a.ws_prev {
left:5px;
background-position: 0 0;
}
#jslider-container a.ws_next:hover{
background-position: 100% 100%;
}
#jslider-container a.ws_prev:hover {
background-position: 0 100%;
}
* html #jslider-container a.ws_next,* html #jslider-container a.ws_prev{display:block}
#jslider-container:hover a.ws_next, #jslider-container:hover a.ws_prev {display:block}
/* bottom center */
#jslider-container .ws_bullets {
top:0;
right: 0;
}
/* separate */
#jslider-container .ws-title{
position: absolute;
display:block;
bottom:20px;
left:25px;
margin-right:25px;
z-index: 50;
color: #6E7476; font-family: 'Source Sans Pro',Arial,sans-serif;
font-size: 22px;
line-height: 24pxpx;
}
#jslider-container .ws-title div,#jslider-container .ws-title span{
display:inline-block;
margin-top:10px;
padding: 7px;
background:#FFFFFF;
font-weight: normal; border-radius:0;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
#jslider-container .ws-title div{
display:block;
margin-top:10px;
background:#6cbe42; color: #FFFFFF;
}
#jslider-container .jslider_thumbs {
font-size: 0px;
position:absolute;
overflow:auto;
z-index:70;
}
#jslider-container .jslider_thumbs a {
position:relative;
text-indent: -4000px;
color:transparent;
opacity:0.85;
}
#jslider-container .jslider_thumbs a:hover{
opacity:1;
}
#jslider-container .jslider_thumbs a:hover img{
visibility:visible;
}
#jslider-container .jslider_thumbs {
right: -106px;
top: 0;
width:101px;
height:100%;
}
#jslider-container .jslider_thumbs div{
position:relative;
width:100%;
}
#jslider-container .jslider_thumbs .ws_selthumb img{
border-color:#6cbe42;
}
#jslider-container .jslider_thumbs a img{
margin:3px;
text-indent:0;
border: 5px solid #FFFFFF;
max-width:none;
}
#jslider-container .jslider_images ul{
animation: wsBasic 24s infinite;
-moz-animation: wsBasic 24s infinite;
-webkit-animation: wsBasic 24s infinite;
}
@keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
@-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
@-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-100%} 25%{left:-100%} 37.5%{left:-200%} 50%{left:-200%} 62.5%{left:-300%} 75%{left:-300%} 87.5%{left:0%}}
#jslider-container .ws_bullets a img{
text-indent:0;
display:block;
top:16px;
left:-43px;
visibility:hidden;
position:absolute;
border: 5px solid #FFFFFF;
max-width:none;
}
#jslider-container .ws_bullets a:hover img{
visibility:visible;
}
#jslider-container .ws_bulframe div div{
height:48px;
overflow:visible;
position:relative;
}
#jslider-container .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:85px;
background-color:#DEDEDE;
}
#jslider-container .ws_bullets .ws_bulframe{
display:none;
top:15px;
overflow:visible;
position:absolute;
cursor:pointer;
border: 5px solid #FFFFFF;
}
#jslider-container .ws_bulframe span{
display:block;
position:absolute;
top:-11px;
margin-left:-7px;
left:43px;
background: url(triangle.png);
width:13px;
height:7px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box"><div id="slider-wrapper"><div id="jslider-container"><div class="jslider_images"><ul><li><a href="http://zenydroid.blogspot.com/search/label/Wallpaper"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir8MyRH0cF5JWm22x_d9GxfIWMybkT63ttDJESrqdoY_j24E66r-OcrMdduQba12wDklhV3cTKelMEy2cmFACQ5yfI2qxlIIR0s5TnjPOqvWwUSngAE4WWdijWiXf125lt4YgDVd4MCJU/s1600/sample3.png" title="Download Kumpulan Wallpaper Keren"/></a></li><li><a href="http://zenydroid.blogspot.com/2015/05/mezamashi-manager-apk-untuk-android.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikQc2fveRB9XKm4evGLO934M-idsgpaoi_BhTnJQZCnABadw6vykpyEpMnVipEBLl20o3Fag81t2EtmxvB30HDlwCHwzaDNKIoIjc0Z394DA2WMfcCvnpAoxfJtF8Ud9mRmFgLDjv_3Y/s1600/sample31.png" title="Download Mezamashi Manager Apk"/></a></li>
<li><a href="http://zenydroid.blogspot.com/2015/05/sao-launcher-sword-art-online-v304-pro.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0qG6UtlxPBlwxexlmp1MT33gBXOt65d3NW7t0fgs_iuQtFFmmfiG5KdIYZqMrKx6ocafX6hFcMkdn3v5GB57BmQkysgrvl_8eHXnbHsmh06crwTRQYfin6CBTdwtErcwfxpfobEfE88/s1600/sample3111.png" title="Download SAO Launcer Untuk Android"/></a></li><li><a href="http://zenydroid.blogspot.com/search/label/Lock%20Screen"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYPMM4Ktb_pacWq-CB1mlvdSwntChgguIUmxEfb5X40vMK04qa8jD90pwRlpPGmhMUQVuBYdoFQUQiRcyEy8paiPfqdkApRl4MVujBESXmUl8_pOyq8RWAsOqGbuSKFANYbHC_wAclF0/s1600/sample311.png" title="Download Kumpulan Lock Screen Anime"/></a></li></ul></div></div></div></div>

Terakhir tinggal disimpan.

Keterangan :

Ganti kode yang berwarna ORANGE dengan link url postingan atau halaman kalian.

Ganti kode yang berwarna BIRU dengan link url gambar yang ingin ditampilkan.

Ganti kode yang berwarna UNGU dengan judul.

Jika kalian ingin Slider hanya tampil di halaman utama saja, kalian bisa mengikuti langkah berikut :

Masih di dasboard, pilih Template.
Masuk ke Edit HTML.
Cari kode yang mirip seperti kode di bawah ini :

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Keterangan :

Kode yang berwarna CYAN adalah ID widget yang tadi kalian buat untuk slider.

Letakkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah <b:includable id='main'> dan </b:if> di atas kode </b:includable> seperti berikut :

<b:widget id='HTML5' locked='false' title='' type='HTML'> <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/></b:if>
</b:includable> </b:widget>

Terakhir tinggal disimpan.

Bagaimana? Agak ribet ya? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Tombol Surprise Me (Random Post) Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutrial tentang bagaimana caranya membuat tombol atau link random post atau yang lebih dikenal dengan surprise me. Ketika kalian menekan tonbol tersebut, secara otomatis akan diarahkan ke sebuah postingan secara acak. Jika kalian belum mengerti, kalian bisa melihat contohnya di link di bawah ini :

Demo

Bagaimana? Kalian tertarik? Langsung saja. Berikut ini adalah cara membuatnya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke Template.
Pilih Edit HTML.
Masukkan kode JavaScript di bawah ini tepat di atas kode </body> :

<script type='text/javascript'>

//<![CDATA[

function showLucky(root){

var feed = root.feed;

var entries = feed.entry || [];

var entry = feed.entry[0];

for (var j = 0; j < entry.link.length; ++j) {

if (entry.link[j].rel == "alternate") {

window.location = entry.link[j].href;

}

}

}

function fetchLuck(luck){

script = document.createElement('script');

script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';

script.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);

}

function readLucky(root){

var feed = root.feed;

var total = parseInt(feed.openSearch$totalResults.$t,10);

var luckyNumber = Math.floor(Math.random()*total);

luckyNumber++;

fetchLuck(luckyNumber);

}

function feelingLucky(){

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';

document.getElementsByTagName('head')[0].appendChild(script);

}

//]]>

</script>

Simpan perubahan Templatenya.

Untuk menggunakannya, kalian hanya perlu menambahkan kode di bawah ini di menu blog kalian :

<li class='ranpost'><a onclick='feelingLucky();'><i/>Random Post</a></li>

Saya mendapatkan tutorial ini dari idblanter.com. Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Cara Mudah Mengetahui ID Widget Blogger

Kali ini saya akan berbagi kepada kalian sebuah trik mudah tentang bagaimana cara mengetahui ID sebuah widget di Blogger. Setiap widget di Blog kita mempunyai ID berbeda. Sebagai blogger, kalian wajib mengetahuinya. Nah, mungkin saat kita ingin memodifikasi sebuah widget dan kita perlu mengetahui IDnya seperti saat membuat widget menjadi melayang atau fixed saat halaman discroll kebawah. Lalu bagaimana cara melihat IDnya? Berikut ini adalah caranya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke Tata Letak.
Klik Edit pada widget yang ingin kita ketahui IDnya.
Kemudian akan muncul jendela pop up seperti di bawah ini :

Nah, lihat di addres bar dari jendela pop up tersebut. Disana akan ada url seperti ini :

Nah, teks yang saya block di atas adalah ID widget tersebut.
Selesai.

Bagaimana? Sangat mudah bukan? Kalian bisa melihat berbagai cara modifikasi blog di blog saya ini. Sekian artikel pendek saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Widget Blog Menjadi Melayang (Fixed) Setelah Halaman Discroll

Kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat widget yang ada di blog kita menjadi melayang atau posisi fixed saat halaman discroll ke bawah kemudian kembali ke tempat semula saat halaman discroll ke atas. Widget ini tidak akan melayang jika halaman belum discroll ke bawah. Untuk lebih jelasnya, kalian bisa melihat contohnya dengan mengklik link demo di bawah ini :

Demo

Bagaimana? Apakah kalian tertarik untuk menggunakannya di blog kalian? Berikut ini adalah cara menggunakannya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke menu Template dan pilih Edit HTML.
Masukkan kode di bawah ini tepat di atas kode </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Jika sudah ada kode semacam itu, kalian bisa melompati langkah di atas.
Masukkan kode di bawah ini tepat setelah kode di atas :

<script type='text/javascript'>
$(window).scroll(function(){
if ($(window).scrollTop() >= 560){
$('#PopularPosts1').css({position:'fixed',top:30});
} else {
$('#PopularPosts1').css({position:'relative',top:0});
}
});
</script>

Terakhir tinggal kalian simpan.

Keterangan :

Kode yang berwarna ORANGE adalah jarak widget akan melayang, makdsudnya setelah halaman blog di scroll 560px ke bawah, maka widget baru akan melayang.

Kode yang berwarna BIRU adalah jarak widget akan melayang dari atas layar.

Kode yang berwarna HIJAU adalah kode ID widget. Kalian bisa menggantinya sesuai dengan ID widget yang akan kalian buat melayang. Untuk mengetahui ID widget tersebut, kalian bisa melihatnya di sini.

Bagaimana? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Apa Yang Dimaksud Dengan Material Design?

Material Design adalah sebuah bahasa pemrograman visual yang dibuat oleh Google. Dengan Desain Material ini, Google mengharapkan agar para developer mampu mengembangkan sebuah sistem yang memberikan kenyamanan kepada user mengakses dari berbagai perangkat dan ukuran layar yang berbeda. Prinsip yang digunakan hampir sama dengan Responsive Design (Buka di sini : Apa Itu Template Blog Responsive?). Google ingin memberikan layanan terbaik bagi para pengguna layanannya. Ciri visual dari Desain material hampir sama dengan Desain Flat (Baca juga tentang Flat Design dan Flat Long Shadow) yaitu, simple, warna bersih dan lembut, efek animasi yang lembut, serta penggunaan shadow yang membedakannya dengan Desain Flat. Untuk lebih jelasnya kalian bisa melihat video berikut :

Fungsi utama yang diharapkan dapat berfungsi maksimal pada material design ini adalah fungsi pada mobile user (swiping dan tapping) tetapi tentunya tetap memperhatikan perangkat input pada komputer seperti mouse, keyboard, touch screen jadi tetap nyaman digunakan oleh pengguna Desktop. Berikut ini adalah beberapa contoh dari Material Design :

Gmail Inbox

Music Player

Calculator

Android Wear

Phone Contact

Bagaimana? Apakah kalian tertarik ingin menggunakan Desain Material? Saya sudah pernah membuatnya. Karena sederhana, saya bisa membuat beberapa animasi dengan Desain Material hanya dengan menggunakan PowerPoint. Sekian artikel dari saya. Semoga bermanfaat bagai kita semua. Jangan lupa tinggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Animasi Progress Loading Bar Seperti Youtube Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial Blogger tentang bagaimana cara membuat animasi progress loading bar seperti pada situs Youtube di blog. Jika kita jeli, saat membuka situs Youtube, saat proses loading akan ada bar berwarna merah yang menunjukkan proses load. Jika kalian belum mengerti, kalian bisa melihat contohnya dengan mengklik link demo di bawah ini :

Demo

Nah, bagaimana kalau kita juga membuatnya dan memasangnya di blog kita. Tentu akan sangat bagus dan blog kita akan terlihat seperti profesional. Kita juga tidak perlu terlalu takut akan memperberat blog karena loading bar ini sangat ringan. Bagaimana? Apakah kalian tertarik membuatnya? Berikut ini adalah caranya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke bagian Template dan pilih Edit HTML.
Masukkan kode di bawah ini tepat di atas kode </body> :

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

Jika sudah, tinggal kalian simpan dan lihat hasilnya.

Keterangan :

Kode yang berwana BIRU adalah kode tebal bar. Kalian bisa menyesuaikannya.

Kode yang berwana HIJAU adalah kode warna bar. Kalian bisa menyesuaikannya.

Bagaimana? Berhasil bukan? Sekian artikel dari saya. Semoga bermanfaat bagi kita semua. Jangan lupa tinggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Efek Berjalan (Marquee) Pada Objek Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial blog. Sebenarnya tutorial ini sudah umum diketahui banyak blogger. Tetapi tidak masalah, saya akan membagikanya. Pertama, kalian haruslah tahu apa sebenarnya yang saya maksud dengan efek berjalan atau marquee itu. Marquee adalah kode HTML agar objek bisa bergerak atau berjalan. Marquee ini banyak diminati dan dipakai oleh para Blogger di dalam blognya karena sifatnya yang dinamis serta menarik untuk di lihat, efek ini juga biasa dipakai untuk menghemat tempat pada halaman blog. Untuk lebih jelasnya, kalian bisa mengklik link demo di bawah ini :

Demo

Bagaimana? Apakah kalian tertarik menggunakannya di blog kalian? Berikut ini adalah cara membuatnya :

Pertama, masuk ke dasboard blog kalian.
Masuk ke bagian Template dan klik Edit HTML.
Letakan kode jQuery Library bawah ini tepat di atas kode </head> (Jika sudah ada kode yang sama atau sejenis, maka langkah dilewati saja).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/>

Simpan kode CSS dibawah ini di atas kode </head> atau letakan tepat di atas kode ]]></b:skin> (Jika diatas kode ]]></b:skin> silahkan hilangkan kode <style> dan </style>) :

<style>
.marquee { overflow: hidden; width:95%; /* Atur Lebar Marquee */ border:1px solid #ddd; /* Tambahan Border Atau Garis Tepi */ background:#eee; /* Kode Warna Background */ color:#333; /* Kode Warna Teks */ padding:5px; /* Kode Jarak Paddding */ }
</style>

Letakan kode Plugin Jquery Marquee external dibawah ini tepat di atas kode </head> :

<script src='https://seocipsokbanget.googlecode.com/svn/jquery-marque.js' type='text/javascript'/>

Letakkan kode JavaScript di bawah ini tepat sebelum kode </body> :

<script type='text/javascript'>
//<![CDATA[
// Settingan Default Marquee nya disini bro!
$('.marquee').marquee({
//Atur kecepatan marquee ( Hitungan Milisecond ) :
duration: 9000,
//Atur 'Delay' Waktu Sebelum Marquee dimulai :
delayBeforeStart: 0,
//Atur Arah Marquee 'left' atau 'right' :
direction: 'left',
//Aktifkan Duplikat Marquee 'true' atau 'false'
duplicated: false,
//Atur Jarak Duplikat Marquee ( Hitungan Pixel ) :
gap: 10,
//Hentikan Marquee ketika di sentuh 'true' atau 'false'
pauseOnHover: true
});
//]]>
</script>

Kemudian simpan.

Untuk menggunakannya, kalian bisa memanggilnya. Untuk teks kalian bisa memasukkan kode dibawah ini di post atau tempat lain :

<div class="marquee" data-duration='10000' data-direction="left/right/up/down"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></div>

Untuk menggunakannya pada gambar, kalian bisa menggunakankode di bawah ini :

<div class="marquee gambar" data-duplicated="true" data-duration="9000" data-direction="left/right/up/down">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy54TMVOBreeqHWE5kyDm4PObGnypR3GJ4EDGekmhytxV4t0xtfugBVrdofGblBxwe6gc-o1ult9F8xlMAA3_IThwQW6VirP0INtEtHK69qrtGQ37vGxetluIu_tbthodU7j95h3T5q8I/s1600/marquee2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy54TMVOBreeqHWE5kyDm4PObGnypR3GJ4EDGekmhytxV4t0xtfugBVrdofGblBxwe6gc-o1ult9F8xlMAA3_IThwQW6VirP0INtEtHK69qrtGQ37vGxetluIu_tbthodU7j95h3T5q8I/s1600/marquee2.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxTc_vxIMjUQnTxMHOjqaqrhYh53btzyCnbWbYkDZg4NLn01kFzD0S8UMOotr1rrIJCxNU2dfZ7Sl7jpHQZNh1uWxxyfyj_ptw06xn7tIdaYkB3dUSDvBn4JsExdUlnVZacWLZmuh8Gs/s1600/marquee3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxTc_vxIMjUQnTxMHOjqaqrhYh53btzyCnbWbYkDZg4NLn01kFzD0S8UMOotr1rrIJCxNU2dfZ7Sl7jpHQZNh1uWxxyfyj_ptw06xn7tIdaYkB3dUSDvBn4JsExdUlnVZacWLZmuh8Gs/s1600/marquee3.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRSRuWal6olrMwgjJYL0WbRqmep_x3KW-yP2VmjVO5zmH8YvrAxPxMIRVKhuNDqDKR-OcV7NPJlwTgef7LfB8ZRvEaCMfov27TPBx520iT5SKreiu6dNlSYwUfNtFOBWXf0ovpUA-01w/s1600/marquee4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRSRuWal6olrMwgjJYL0WbRqmep_x3KW-yP2VmjVO5zmH8YvrAxPxMIRVKhuNDqDKR-OcV7NPJlwTgef7LfB8ZRvEaCMfov27TPBx520iT5SKreiu6dNlSYwUfNtFOBWXf0ovpUA-01w/s1600/marquee4.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKzOEZigWqGK9zFFEX-Z_0J6Qj78cXTUyVpG3Fnl_Zy2Gh_MBS15COuDP2ZnWfq-EnlxyKC-MPYiVv0uK91Z5jEptqg3Ggfmt3kAqa4WNGsg9jLCyFBBXFOc4EgUZ95v5JHiM7qrnbsM/s1600/marquee5.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKzOEZigWqGK9zFFEX-Z_0J6Qj78cXTUyVpG3Fnl_Zy2Gh_MBS15COuDP2ZnWfq-EnlxyKC-MPYiVv0uK91Z5jEptqg3Ggfmt3kAqa4WNGsg9jLCyFBBXFOc4EgUZ95v5JHiM7qrnbsM/s1600/marquee5.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNtMfE7FxIRhhmSlsh50cRB8BTzZAKpg7fEGmO7zxbXZb6wXceHWHCXYGAViT5U9WU295jkxas295-tDBuEYjY6EpQEehE-jjWF1Q1ZV2yiUa_keMff8mvbxsyKo7u-KdVLiKso_yMtw/s1600/marquee6.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNtMfE7FxIRhhmSlsh50cRB8BTzZAKpg7fEGmO7zxbXZb6wXceHWHCXYGAViT5U9WU295jkxas295-tDBuEYjY6EpQEehE-jjWF1Q1ZV2yiUa_keMff8mvbxsyKo7u-KdVLiKso_yMtw/s1600/marquee6.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRElPtSIuEPSCVzwAY33S2qoB80NXrfNMLcx3Lq3_6638r4rlaAAmRmq-9c8BNVMtZmoKU7rzKfWYevzffW9nY3iE2ZGwMQ3PxZ_p7zIwIVSZPKGK9ZbMLLv-RfGllXTNwmoAQATFsU/s1600/marquee7.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRElPtSIuEPSCVzwAY33S2qoB80NXrfNMLcx3Lq3_6638r4rlaAAmRmq-9c8BNVMtZmoKU7rzKfWYevzffW9nY3iE2ZGwMQ3PxZ_p7zIwIVSZPKGK9ZbMLLv-RfGllXTNwmoAQATFsU/s1600/marquee7.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn2i8jXxt73RPsAFb1YAo5kPQs6G0d0MAVqlO20vwzlgJwTsVCksA8FjKkwQc5CP_b_dtELfzagbfuFFFKIKsIGxq3w3rgQ4MjVZoltONb0z_Qlvpn6rLqQyK2WpGUXVa0zG-gp73bSc/s1600/marquee8.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn2i8jXxt73RPsAFb1YAo5kPQs6G0d0MAVqlO20vwzlgJwTsVCksA8FjKkwQc5CP_b_dtELfzagbfuFFFKIKsIGxq3w3rgQ4MjVZoltONb0z_Qlvpn6rLqQyK2WpGUXVa0zG-gp73bSc/s1600/marquee8.jpg" /></a></div>

Keterangan :

Duplikat marquee menggunakan atribut data-duplicated="true/false".

Menentukan kecepatan marquee menggunakan atribut data-duration="value" ( Hitungan Milisecond ).

Menentukan arah Marquee menggunakan atribut data-direction="left/right/up/down" ( Ke kiri , kanan, atas, bawah ).

Kode berwarna CYAN adalah kode link tujuan ketika objek diklik. Kalian bisa ,menyesuaikannya sendiri.

Kode berwarna KUNING adalah kode link gambar. Kalian bisa ,menyesuaikannya sendiri.

Bagaimana? Mudah bukan? Sekian artikel saya kali ini. Semoga bermanfaatbagi kita semua. Jangan lupa meninggalkan komentar dan like di bawah ini.