Blog Situlah

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Cara Menampilkan Widget Pada Template Seluler Blogspot

Cara Menampilkan Widget Pada 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 Pada 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/AVvXsEh4-DQeGuxlyr9lvdqYDOkzQTVJ1W-dnPRl8xR4FETOc7PeEp8pZwjZa9zmcYLfI9Vs47ghPydadtuY8ZNpcA41tPcrfoIvLL1JEcWu3GXAvmGMExphbWxQPgz7Qwi4sQHJCRhEZwlG41I/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;
}
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>
Keterangan :

Ganti tulisan "Button URL"; >> dengan link URL yang Anda tuju.
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 !

Install Google +1 Button in a Corner of the Blog

Previous already posted how to Install the Google +1 button on blogspot, and on this occasion I will share how to Install google +1 button in a corner of the blog at blogspot.

Install google +1 button in a corner of the blog serves to share in the home page, label, as well as posts, everywhere these buttons can appear, not as in the Google +1 button which previously, could only be to share in part in any post . Meanwhile, if installed in a corner of the blog, then Google +1 botton share will remain in place if the blog in drag upward or downward, as seen on this blog PapaTiti Online.

Well if you are interested in installing this way, please follow the steps on below.

1. Login to Blogger
2. Click Design and select Edit HTML
3. Search Code </head>
4. Enter the code below, just above the </head>

Note: If you previously already activate this button, way 3 and 4 are skipped only.

5. Find this code ]]></b:skin>
6. Enter the code below just above the ]]></b:skin>

#G_plusone {
position:fixed;_position:absolute;top:10px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }

Description:
Top: 10px; = position G +1 button and the distance of the up or down
right: 0px; = position G +1 button and distance of the right or left
(Please arrange themselves according to taste)

7. Enter the code below just above the code </body>

Note: For sizes, please see here Install the Google +1 button on blogspot.

8. Save the template and see the results

If you feel that any article on this blog useful and liked it, please click the +1 button on the right sidebar this blog.

May be useful

Install Google +1 Button on Blogspot

As has been reported in the crowded world of the Internet, Google has made a new feature of Google +1, which is a tool for visitors to the blog / web and search engines to provide an assessment for a blog page / website that has a value greater benefits.

The benefits of installing the Google +1 button is able to influence the search engine to get the best results on the basis of a lot or not Google +1 buttons provided by the visitor on our blog. If the search results on search engines put on the first page article, a visit will be even greater, so that it can affect the visitor traffic on our blog.

To install Google +1 Button, the following steps:

Method One:

For a default blogger template is a congenital blogger, this feature can be made easily through the page elements / gadgets edit, because this feature has been officially added to Blogger. see on the picture below:

Google +1 Button, can be easily displayed by checking the "Show Share Button". Sign in to your dashboard > design > then click edit post on the template, and will appear as shown above.

Method two:

To modify a template instead of the default templates, the feature "share button" usually has been deleted. Therefore, it needs editing HTML templates to add the Google +1 Botton.

1. Edit HTML on the template and search <head> code, then copy the code below and put it under the code <head>

2. Then the next step is to put a Google +1 Button on your blog, whether in the sidebar or on the post area, it's up to you, just enter the following code in the position you want.