kaos: Cara Menampilkan Widget Template Seluler Blogspot

CARA MENAMPILKAN WIDGET TEMPLATE SELULER BLOGSPOT

Cara Menampilkan Widget Template Seluler Blogspot – Memunculkan widget di tampilan template versi mobile sebenarnya cukup mudah yaitu cukup dengan menambahkan property mobile pada tag widget <b:widget>. Ada 3 input value pada property mobile ini yang mempunyai arti dan tujuan masing-masing. Berikut penjelasannya :
mobile=’yes’ : artinya widget akan ditampilkan pada template versi seluler/mobile dan desktop.
mobile=’no’ : artinya widget hanya akan tampil pada template versi desktop/web.
mobile=’only’: artinya widget hanya akan tampil pada template versi seluler/mobile.

Nah setelah memahami penjelasan diatas, sekarang kita masuk pada cara penerapannya. Langkah pertama kita tentukan dulu widget mana yang ingin ditampilkan pada template seluler. Saran saya sebaiknya cukup pilih 2 widget yang penting saja misalnya widget Artikel Terbaru dan Popular Post. Misalkan saya ingin menampilkan widget Artikel Terbaru dan Paling HOT Minggu Ini pada template seluler, maka caranya adalah sebagai berikut :
1. Login ke dashboard blogger, kemudian masuk ke menu Template > Edit HTML.
2. Pada template saya, kode kedua widget tadi adalah seperti dibawah ini :

<b:widget id='HTML12' locked='false' title='Artikel Terbaru' type='HTML'>

<b:includable id='main'>

dan seterusnya...

</b:widget>

<b:widget id='PopularPosts1' locked='false' title='Paling HOT Minggu Ini' type='PopularPosts'>

<b:includable id='main'>

dan seterusnya...

</b:widget>

3. Tambahkan property mobile=’yes’ pada masing-masing tag widget sehingga kode lengkapnya menjadi seperti dibawah ini :

<b:widget id='HTML12' mobile='yes' locked='false' title='Artikel Terbaru' type='HTML'>

<b:includable id='main'>

dan seterusnya...

</b:widget>

<b:widget id='PopularPosts1' mobile='yes' locked='false' title='Paling HOT Minggu Ini' type='PopularPosts'>

<b:includable id='main'>

dan seterusnya...

</b:widget>

4. Save/simpan template anda dan selesai.

Demikian sedikit tips singkat tentang Cara Menampilkan Widget Template Seluler Blogspot ini dan semoga bermanfaat untuk anda.

CARA MEMBUAT SLIDING HOVER BUTTON

Cara Membuat Sliding Hover Button – Button atau tombol yang bisa di klik mempunyai banyak kegunaan. Efek sliding (geser) yang ada pada button ini mirip dengan menu Rocking Rolling Rounded dengan jquery yang dulu pernah saya posting. Sobat dapat menggunakan button ini untuk tombol download, subscribe by email atau lainnya, terserah keperluan masing-masing.

Cara Membuat Button dengan Efek Sliding Hover

Login ke dashboard blogger Anda
Setelah itu pilih blog yang ingin anda tambahkan widget ini.
Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
Backup dulu template anda sebelum melakukan editing.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

.a-btn{
background:#80a9da;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
padding-left:20px;
padding-right:80px;
height:38px;
display:inline-block;
position:relative;
border:1px solid #5d81ab;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn-text{
padding-top:8px;
display:block;
font-size:18px;
white-space:nowrap;
text-shadow:0px 1px 1px rgba(255,255,255,0.3);
color:#446388;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.a-btn-slide-text{
position:absolute;
height:100%;
top:0px;
right:52px;
width:0px;
background:#63707e;
text-shadow:0px -1px 1px #363f49;
color:#fff;
font-size:18px;
white-space:nowrap;
text-transform:uppercase;
text-align:left;
text-indent:10px;
overflow:hidden;
line-height:38px;
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
-moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
-webkit-transition:width 0.3s linear;
-moz-transition:width 0.3s linear;
-o-transition:width 0.3s linear;
transition:width 0.3s linear;
}
.a-btn-icon-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:52px;
border-left:1px solid #5d81ab;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
width:38px;
height:38px;
opacity:0.7;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZrHL0ipsYWNwmXLKz0RtMvDIvHCjG1JdkFscluleRTP-4d0tOo2bUlfBmknbhyqmBzI9DEiAFVgzKPDJ9Kwo9A8AotV0NiY8RSH2AGpCm3rg5R6DM1HiUf026vopdRdg2i2tRLAafETs/s1600/arrow_right.png) no-repeat 50% 55%;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn:hover{
padding-right:180px;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
text-shadow:0px 1px 1px #5d81ab;
color:#fff;
}
.a-btn:hover .a-btn-slide-text{
width:100px;
}
.a-btn:hover .a-btn-icon-right span{
opacity:1;
}
.a-btn:active{
position:relative;
top:1px;
background:#5d81ab;
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color:#80a9da;
}

6. Kemudian pilih menu Layout, klik Add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya (pilih salah satu saja) :

<div class="button-wrapper">
<a href="Button URL" class="a-btn">
<span class="a-btn-text">Register now</span>
<span class="a-btn-slide-text">It's free!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="Button URL" class="a-btn">
<span class="a-btn-text">Become a member</span>
<span class="a-btn-slide-text">Sign up!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="Button URL" class="a-btn">
<span class="a-btn-text">Enter</span>
<span class="a-btn-slide-text">Log in!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="Button URL" class="a-btn">
<span class="a-btn-text">Get an account</span>
<span class="a-btn-slide-text">For free!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div>

<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>

</b:if>

Keterangan :
Ganti tulisan "Button URL"; >> dengan link URL yang Anda tuju.

7. Setelah itu save templates anda, jika ingin meletakkan button di dalam postingan sobat dapat langsung mengcopy kode button dan meletakkannya didalam area posting tanpa perlu di parse

<div class="button-wrapper">
      <a href="Button URL" class="a-btn">
      <span class="a-btn-text">Register now</span>
      <span class="a-btn-slide-text">It's free!</span>
      <span class="a-btn-icon-right"><span></span></span>
      </a>
</div>

Terakhir save dan lihat hasilnya.

Semoga Cara Membuat Sliding Hover Button ini bermanfaat !

CARA MEMBUAT WIDGET ARTIKEL TERBARU DENGAN FUNGSI PREVIOUS DAN NEXT

Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next – Widget artikel terbaru ini sama saja sebenarnya dengan widget recent post dengan thumbnail. Fitur modifikasi yang ditambahkan pada widget ini adalah adanya tombol fungsi previous dan next dibagian bawah widget. Nah inilah yang menjadi keistimewaan widget artikel terbaru ala Creating Website ini. Dengan tambahan tombol previous dan next ini maka pengguna dapat mengetahui artikel terbaru apa saja yang ada di blog anda tanpa harus repot membuka daftar isi blog. Kebetulan saya memang juga suka dengan karya-karya Maskolis terutama template-template buatannya yang keren banget, maka pada tips blogging kali ini saya kepingin share tutorial cara membuat widget artikel terbaru ini.

Cara Membuat Artikel Terbaru dengan Fungsi Previous dan Next :

Login ke dashboard blogger Anda
Setelah itu pilih blog yang ingin anda tambahkan widget ini.
Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
Backup dulu template anda sebelum melakukan editing.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXDJzgbVfFeII8FQMNtFUEz-T2SBgMC2_-cxMUICmcY_otouxtWTzZXzDohH9aF1ks4jcmKmT5pyk1BI89z5V_AmQ12oIf2-dHmg3KkHsWMZTrtGCi-YE2_IjW7XXor6taTMqe39C6Su0/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
6, Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://infoheadline.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_2DeADdpmqxeoaiBY74cIb2w0augxbu-6VoL18_Qtdl9vhqRwaSGbf22dmoVXw3nZJqvD6Xa5wvPB-kCuJzD1tKM17OdE6rSulHoeeeWUO2nuI0A54Y_PwN1SgSJocmSo09yXboh3l8/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan :

var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
var urlblog = "http://infoheadline.blogspot.com/"; >> ganti dengan URL blog Anda
var charac = 100; >> Jumlah karakter atau huruf pada setiap post.

7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :