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.
Cara Menggunakan Widget UCCW Di Android
  • Klik ikon tambah di atas.
  • Pilih ikon seperti klip.
Cara Menggunakan Widget UCCW Di Android
  • Pilih widget yang sudah didownload dan akan kalian gunakan.
Cara Menggunakan Widget UCCW Di Android
  • Tunggu sebentar. Widget berhasil ditambahkan.
Cara Menggunakan Widget UCCW Di Android
  • 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.
Cara Menggunakan Widget UCCW Di Android
  • Letakkan di layar home.

Cara Menggunakan Widget UCCW Di Android
  • Pilih widget yang tadi kita tambahkan.
Cara Menggunakan Widget UCCW Di Android
  • Tinggal kalian sesuaikan tempat dan ukuranya.
Cara Menggunakan Widget UCCW Di Android

  • Selesai.
Cara Menggunakan Widget UCCW Di Android

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 :


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="http://4.bp.blogspot.com/-zcndJfv0Unk/VW-9AoUnb5I/AAAAAAAAAPc/z1-zTjybzSg/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="http://3.bp.blogspot.com/-4i4knahSx0Q/VW-85CgC9XI/AAAAAAAAAPM/iAC5W8NJMzs/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="http://3.bp.blogspot.com/-bNU0oiztNlc/VW_C2K8ET0I/AAAAAAAAAPs/m-7RIywbys8/s1600/sample3111.png" title="Download SAO Launcer Untuk Android"/></a></li><li><a href="http://zenydroid.blogspot.com/search/label/Lock%20Screen"><img src="http://4.bp.blogspot.com/-J9D3YCDGlFs/VW-89Li14TI/AAAAAAAAAPU/aXeXFeJIEq4/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'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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'>  <!-- only display title if it's non-empty -->  <b:if cond='data:title != &quot;&quot;'>    <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.