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.

<g:plusone size="small"></g:plusone>

<g:plusone size="medium"></g:plusone>

<g:plusone size="tall"></g:plusone>

<g:plusone ></g:plusone>

If there are not clear please visit the official website, here

hopefully help.

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

Displays Total Posts and Comments Automatically

To see the amount of any new posts and comments that come in, we can add a widget. This widget will automatically add directly. In addition to you as the owner of the blog, visitors can also see it. If you are interested in installing this widget, do the following steps:

• Login to your Blog
• Select Design
• Then Add Widget and select HTML / Javascript
• Enter the code below:

Replace the red text with a link to your blog.

• Save and please see the result.

May be useful.

Installing the ShareThis Button at the Post

Install a widget or of the ShareThis button on web/blog is useful to facilitate the visitors who want to share articles via facebook, twitter, etc., on this ShareThis facility. The advantages of the widget or button of this is that we can know the amount of each post that has been distributed. Examples like the picture below or at the end of each post that is on this blog.

If interested and would like to install or use the ShareThis widget or button like the one on this blog, follow these steps. But before, download full template first to keep from error.

1. Login blogger
2. Layout, Edit HTML,
3. Click the Expand Widget Templates
4. Find the code below:

<data:post.body/>

or

<p><data:post.body/></p>

5. Save the following code below the code you're looking for before:

<div style='padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:right;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:'63b83a98-def5-427f-ac7c-4b24bcff910d'});</script>
</div>
</div>

6. Save the template and see the results.

Note: If you've used readmore, this button will look and perform the full post.

May be useful.

How to Divide Labels List Becoming 2 or 3 Columns

Usually if there is a lot of labels on the blog. And if you select the label list, not a cloud then it will take a lot of places and the labels will look very long. So that the label does not look too long, we can change the label using the label list scroll divide into 2 or 3 columns. And on this occasion papatiti will share tricks to split the label that shaped the list into 2 or 3 columns, such as labels that exist on this blog, which papatiti divided into 3 columns.

If you are interested, please follow the following steps:

1. Login to your Blogger account
2. Click Design
3. Click Edit HTML
4. Put the following code above the ]]></b:skin>

# Label1 ul li {
float: left;
width: 33%;
}

Description:

Width is the width of the column. If the width was 33% as above, then the widget label will be divided into 3. If you want to divide it into two, just change its width 45%.

Selection # Label1 may vary, but by default, the label widget, if you only have one, then the code is correct. However, if you have more than 2 labels widget, then you will have the ID widget label 1, the widget label 2, and so on.

5. Click Save Template

Good luck and try it useful.

How to Put Save As PDF in Blog Postings

One way to pamper visitors is to install a widget Save As PDF. Widgets Save As PDF is placed under an existing blog postings. If the widget is clicked it will automatically saves the distinguished post was viewed in PDF form. Excess if we keep the blog page with a PDF format that is if the post was too much and long with a PDF format so we can keep these postings and read offline.

If interested in adding widgets Save As PDF, do as below:

1. Log in to blogger
2. Select Layout
3. Select Edit HTML
4. Click the small box on Expand Widget Templates
5. Find the code below:

<p><data:post.body/></p>

or this code, just the same

<data:post.body/>

Note: if the blog has been using the function read more, there will be two codes above. Select the first code

6. Put the code below, under the existing code above


<script type="text/javascript">
var authorId = "A8F3F9F6-42E1-4199-A551-9A7F17FE2189";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>


7. Save the template

Hopefully useful.

Adding Page Element in the Upper and Lower Post Blog

To add the above elements under very simple blog post. Need only do a little modification of the HTML template blogspot.

To not extend the width follow these steps:

1. Loggin into blogger.com with your id
2. Click Layout on the menu dashboar
3. Then click Edit HTML
4. Click Expand Widget Templates
5. Find the code below:

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>

6. If so, replace the words "no" to "yes". So the code becomes:

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='yes'>

7. Click Save Template
8. See results in a Page Element. There will be additional elements on the blog post.
9. To add an element under blog post, simply click the gadget and select the gadget add what you want to add. Then drag the gadget and place it under a blog post.

Hopefully Helpful.

How to Install Widgets on the Blog Back to Top

Widget "Back to the Top" is very important in pairs on the blog, especially if the blog that we have to have post pages long. If we put this widget on your blog so visitors do not need to scroll the mouse to return to the top of the blog, but visitors can just click the button of the widget, and another advantage of this widget when the button is clicked then the page or on top of the blog will be directly appear.

Ok, so not long to put the widget back to top, follow these steps:

1. Log in to http://blogger.com
2. Click the Layouts in dashboar menu
3. Click Edit HTML
4. Do not forget to check the Expand Widget Templates
5. Backup first template that my friend had, click on Download Full Template
6. After that search for the code below </b:section>
7. You will find some of the same code from the code, but the search and make sure the code is the code that lies at the very end or bottom in the search.
8. Put the code below right under the code </b:section>

Make sure the code is code that is located on the far end or the bottom. Because in the search, you will find some of the same code. Once again make sure the code is the lowest.

Description:
1. URLs that red is the "Back to the Top" as below:

2. Replace the URL in red with owned. To create a logo or image can be created for example in photoshop or another, and then uploaded to an online storage service to Photobucket let's say, then grab the image URL code.

Hopefully useful.

How To Install The Widget Translation By Wearing The Flag Logo

The function of the widget is as translator language translation of your blog into other languages in the world. Because its function is very important, then your blog also need to display the widget.

With the translation widget, your visitors from countries that do not understand the language in your blog, they can change the language of your blog with their language.

How to install a blog with the logo flag translation:

1. Log in to Blogger with your ID
2. Click Design
3. Click Add Gadget and select HTML / Javascript
4. Copy the code below into the page that is available

5. Click Save.

Hopefully useful.

Creating Menu Blog With Scroll Function

A blog by the availability of the menu will certainly make it easier for visitors to find articles or postings that are needed. Menu a blog can be placed for example on the available space in the sidebar.

At this time I will share how to create a blog menu with scroll function without editing HTML, but few use the HTML code, which benefits can be used to put a blogroll or a list of posts held.

Well to make a blog menu with scroll function without editing HTML widgets plus live tracks and select HTML / JavaScript on the sidebar.

Here is the code that will be used to create menus with scroll function.

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

CONTENTS MENU

</div>

For example, blogs that I have a menu:

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

<li><a href="http://papatitionline.blogspot.com/2010/11/make-email-on-google.html">Make Email On Google</a></li>
<li><a href="http://papatitionline.blogspot.com/2010/11/how-to-make-blog-on-blogspot.html">How to Make a Blog On Blogspot</a></li>

</div>

Description:

-. width: 160px: width of the field is in want, of course, be adjusted with the existing width of the sidebar. However, to keep according to the sidebar then you should use a value of 100% (width: 100%).
-. height: 300px: height field is desired, this value can change as you wish, ie be 500px.
-. Change the color red with the url of the page that will be entered.

Hopefully useful.

Install Google translate on Your Blog

Translate is very important to be in pairs on a blog, the point to translate the contents or the content of posts made when there are visitors of different countries we can also read the writing / posting we are.

At this time will be shared on how to install google translate on the blog. How to install google translate on the blog quite simple as below:

1. Login to Blogger
2. Click the Layout
3. Click Page Element
4. Select the Add a Gadget
5. Choose HTML / Javascript
6. Copy and paste the code / script at the bottom to the place which provided

<script src = "http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

7. Click Save

Hopefully useful.

How to Put the IP Address on the Blog

IP Address Function is for flatform to show that we use (windows version that is in use), national origin and browsers in use.

To install the IP Address on the Blog, the following steps:

First

Visit the site http://www.wieistmeineip.de On the front page will have pictures like this:

Click on the picture, then will appear on IP address model selection page and its HTML code, then copy the HTML code on notepade.

Next Steps :

1. Login to Blogger
2. then click Layout
3. Click Page Element 4. Click Add a Gadget 5. Select the HTML / Javascript
6. Enter the HTML code into the blank field provided
7. Then Save.

Hopefully Helpful.

Blog Berita Terbaru Terkini Indonesia - Berita Hari Ini. Berita - Artikel - Download - Tips Trik - Kumpulan Cara - Informasi Terbaru