Informations Sharing Place: Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

20.09

Cara Menanbahkan 3D Tombol Sosial Dengan Efek Rotasi Spin Untuk Blogspot

Jumat, 14 September 2012

Hari Ini Saya bakalan Share Cara Menambahkan 3D Tombol Sosial Dengan Efek Rotasi Spin Untuk Blogspot, Widget ini di buat dengan trik CSS
Lihat disini!!
Jadi banyak cing cong nih, Langsung ja....cekidot

Cara Menambahkan 3D Tombol Sosial Dengan Efek Rotasi Spin
1. Login ke Blogger Dashboard > Layout.
2. Klikn 'Add A Gadget' > HTML Javascript.
3. Copas Kode HTML di bawah ini.

<style>
#social a:hover {
background-color: transparent;opacity:0.7;
}
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center>
<div id="social"><a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-tJ7q2qnMUys59YemNbz_AHwsseYSMyQVc5cTclpZEpBLv3ddJR2jZhFJ40Rb5Gmnf8B98zCiORsPlRX3jyZHzx8ORMrRpgI9cK0TDkErbUP-wu7RCBBIZuqkGfCRm13f9hgtD9RV_sU/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVLXb0qH6Fypy8-hHapukfykpUHvBS3Jch1EQG9D2tgUSn4u2zAC_g1G91pX6jNU5Svm692TjKr8_x81GBdgEzGbiefTjy6Kv9bEa9fSAf02K73hPtMAfOiPFVjz8QkUqM0NOk2XNrcv7n/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPMcLuraygMWXdwagr69EWDazg8nYgTN7MoVQv0itpP37HS-JY7XJ-HDROJdCj979nZ5vClV8bB_abMwHDqOurpNrHU2M5NZGb1woYHG0nWHJ506mGi89DeZtfd0SazXgDqXIIYZDoisxH/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8KJEFtcyd9OH8MnzuJfeqk5d0g7HfkRpvtqEKPZFYTvk9xQb3IpWp4E1Qx_N_MvX-ev-gnB0AS4BmSMnGcStkKhQZ9l5kZErWZMrNdM04DBGH8Puc94OvlgM6XZ2r-U7OPPcqxkxJOCy/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5qzE8YZ52uT49pBBzlfAstCpexe6P4tRGt5PWlq88zvQNlFjdDjiTdmOq0-Axty1XuzFU-q3o-I6oCyFzsQuoitl1qv-k6exbLJmsDeqZ3tgNHBkIHP5lkxXZMXg010SVSu-J88oz-e5/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div>
<br/>
<a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Beautiful Blogger Widgets" src="http://feeds.feedburner.com/~fc/beautifulbloggerwidgets?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
</center>

Catatan: Ganti Bagian ini Dengan URL Sosial Profil anda


YOUR-FEED-URL-HERE
YOUR-EMAIL-RSS-URL-HERE
YOUR-FACEBOOK-PAGE-URL-HERE
YOUR-TWITTER-URL-HERE
YOUR-GOOGLE-PLUS-URL-HERE
YOUR-PINTEREST-URL-HERE
YOUR-FEEDBURNER-URL-HERE

4. dan terakhir Simpan.

Itulah Cara Menambahkan 3D Tombol Sosial Dengan Efek Rotasi Spin Untuk Blogspot. Sebelumnya saya berterimakasih kepada Paul Crowe dan BeautifulBloggerWidget.

23.08

Puluhan Backlink Dofollow Gratis, Cuma Dengan Satu Script

Sabtu, 08 September 2012

Banyak cara untuk mendapatkan backlink, kita bisa menggunakan berbagai cara untuk mendapatkan backlink seperti blogwalking, submit blog dll. Tapi hal tersebut belum tentu bisa meningkatkan traffic blog kalian, karena saya ambil contoh blogwalking, kita memberikan komentar pada sebuah blog atau website apalagi jika website itu mempunyai Rank dan Traffic yang tinggi belum tentu komentar kita bisa di publikasi sebab mayoritas blog atau website seperti itu menggunakan mode moderasi. Nah dengan script yang saya akan berikan ini kalian tidak perlu repot untuk memberikan komentar dari blog ke blog lain, cukup dengan dengan menggunakan script ini kalian bisa mendapatkan puluhan backlink blog dofollow secara gratis dan otomatis tanpa harus melakukan komentar.

Sebelumnya saya akan menjelaskan pengertian backlink, Backlink adalah link atau tautan yang mengarah ke website kita. Backlink mempunyai peranan yang amat sangat penting terhadap website atau blog kita. Karena
sang raja search engine dunia memberikan nilai berupa pagerank ke website kita berdasarkan backlink (tentu saja dengan algoritma perhitungan nya yang rumit dan rahasia). Jadi semakin banyak backlink secara otomatis semakin mudah orang menemukan website kita. Bahkan backlink juga bisa dijual. Tentu saja jika website atau blog anda punya pagerank yang bagus,semakin bagus bisa semakin mahal. Walaupun google melarang jual-beli link.Salah satu program menjual link adalah paid review.Jadi apabila website atau blog kita sebagus apapun tampilanya tanpa ada dukungan backlink dari website atau blog lain. Sama aja bohong. Dan hasilnya nol.

Saya akan memberikan script puluhan backlink website dofollow secara otomomatis gratis dan mayoritas webisite di bawah ini menganut mode dofollow pasti kalian udah tahukan manfaatnya dari blog dofollow dan tambahan lagi semua website ini mempunyai pagerank google 1 sampai 4. Bagi yang berminat silahkan kalian ikuti langkah dibawah ini :

1. Silahkan Kalian Copy Script Di Bawah ini :

<b><a href="http://planetdiponk.blogspot.com/2011/04/backlink-gratis-hanya-dengan-satu.html" target="_blank">Klik disini untuk mendapatkan puluhan backlink seperti ini</a></b>

</center>

2. Pasang Script Di Atas Di Blog Anda

3. Klik Satu Persatu dari blog anda untuk mendapatkan Backlink secara otomatis

Itulah tips dari saya untuk mendapatkan puluhan Backlink otomatis dari website dofollow secara gratis hanya dengan satu script, buktikan sendiri kalo anda tidak percaya. Semoga Bermanfaat

Sumber

Harap di Pehatikan!! Jangan Anda Edit Script-nya

20.15

Parse HTML

Bagi Anda yang memerlukan Parse HTML seperti kode iklan, dll. agar sesuai atau dapat diterapkan pada template blog Anda, silahkan paste kan kode tersebut pada kotak di bawah ini, kemudian tekan tombol Parse, selanjutnya copy kode yang didapat dan pastekan pada template blog Anda.

Sumber

19.01

Membuat Breadcrumbs Di Blogger Agar Terindeks Google

Secara sederhana breadcrumbs adalah menu navigasi suatu dokumen atau postingan dari suatu web atau blog. Biasanya breadcrumbs diletakan di atas title postingan blog sehingga mudah diketahui oleh pengunjung atau pembaca postingan blog. Sebagai contoh bisa Anda lihat pada bagian atas title postingan blog ini.

Dan konon katanya Om Google menyukai web atau blog yang mempunyai breadcrumbs sehingga breadcrumbs dipakai sebagai salah satu trik SEO. Namun bagaimana kalau kita sudah pasang breadcrumbs di blog kita, tapi breadcrumbs-nya tidak terindeks Google. Nah untuk itu saya share cara Membuat Breadcrumbs Di Blogger Agar Terindeks Google agar blog kita lebih SEO.

Seperti yang saya alami, blog saya sudah memakai breadcrumbs namun yang tampil di hasil pencarian Google bukan breadcrumnya melainkan url dari postingan.

Setelah saya searching di Google, akhirnya saya menemukan kodenya agar breadcrumbs dapat terindek Google. Nah bagi Anda yang belum memasang breadcrumbs atau mungkin sudah memasang breadcrumbs namun tidak terindeks Google, silahkan simak tutorial Membuat Breadcrumbs Di Blogger Agar Terindeks Google di bawah ini.

Silahkan masuk ke dashboard blog Anda >> Template >> Edit HTML >> centang Expand Widget Templates. Namun untuk menjaga terjadi kesalahan, alangkah baiknya Anda back up dulu templatenya sehingga apabila terjadi kesalahan dapat kembali ke template sebelumnya.

Kemudian cari kode <div class='post hentry'> Gunakan CTRL + F pada keyboard untuk memudahkan pencarian. Setelah ketemu silahkan copy kode di bawah ini SETELAH / DI BAWAH kode tadi.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px 8px;margin:4px 0px;line-height:1.4em;'>
<span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> &gt; </span>
<span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'>
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a> <b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if> </b:loop> </b:if> &gt; </span><span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><span itemprop='title'><data:post.title/> </span></span>

</div>
</b:if>
</b:if>

Kode yang berwarna merah itu untuk kode kotak breadcrumbs-nya, silahkan Anda rubah dan sesuaikan dengan tema blog Anda.

Bagi yang sudah mempunyai breadcrumbs namun belum atau tidak terindeks Google silahkan coba dengan kode di atas.

Setelah itu silahkan Anda save templatenya dan coba cek di Google Rich Snippets Testing Tools Silahkan coba masukan salah satu url postingan blog Anda pada kotak yang disediakan. Apabila penempatannya benar, maka penampakannya akan seperti gambar di bawah ini.

Sekarang yang nampak di hasil pencarian Google adalah breadcrumbs dan bukan lagi url dari postingan tersebut.

Namun perubahan ini tidak dapat langsung tampil di hasil pencarian Google untuk postingan yang kita terbitkan sebelum kita membuat breadcrumbs ini, kita harus menunggu karena Google memerlukan waktu untuk menampilkannya. Untuk postingan yang kita terbitkan setelah kita Membuat Breadcrumbs Di Blogger Agar Terindeks Google ini, maka Google akan langsung menampilkan breadcrumbs-nya.

Nah demikian saja sharing Membuat Breadcrumbs Di Blogger Agar Terindeks Google kali ini mudah-mudahan bermanfaat.

22.18

Membuat Tab View di Blog

Jumat, 07 September 2012

Membuat Tab View Di Blog

Pagi ini saya akan share cara Membuat Tab View Di Blog seperti yang Anda lihat pada gambar di atas atau pada Tab View blog saya di samping kanan. Sebenarnya saya dapat kode scriptnya dari Maskolis (pembuat template blog ini), namun karena ada temen yang request scriptnya, sekalian saja saya buat postingannya.

Cara Membuat Tab View Di Blog sedikit gampang karena kita tidak usah mengobok-obok kode HTML blog kita, cukup menambahkan kode scriptnya di gadget HTML sidebar blok kita. Bagi yang ingin mencobanya, silahkan copy kode script Tab View di bawah ini, kemudian paste di gadget HTML sidebar blog Anda.

<style type="text/css">

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Lebar Kotak Tab */

height: 22px; /* Tinggi Menu Utama Atas */

text-align: center; /* Posisi Teks Menu Tab */

margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */

background-color: #000; /* Warna background Kotak Tab */

padding-top: 2px; /* Spasi Atas */

border: 2px solid #393939; /* Warna border kotak Tab */

border-bottom: 2px solid #393939; /*Warna border bawah kotak tab */

font-family: "Arial, Helvetica, sans-serif", Arial; /*Font Kotak Tab */

font-weight: 900; /* Ketebalan Teks kotak tab */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #736F6E; /* Warna background utama kotak tab */ }

div.TabView div.Pages

{

clear: both;

border: none; /* Warna border Kotak Konten */

overflow: hidden;

background-color: none; /* Warna background Kotak konten*/

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 5px; /* Jarak teks dalam kotak content */

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

</style>

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a><span style="color: #fff">Title Tab 1</span></a>

<a><span style="color: #fff">Title Tab 2</span></a>

<a><span style="color: #fff">Title Tab 3</span></a>

</div>

<div style="width: 300px; height: 350px;" class="Pages">

<div class="Page">

<div class="Pad">

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/All Trik?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://share-inf.blogspot.com/feeds/posts/summary/-/All Trik?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://share-inf.blogspot.com/search/label/All Trik" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

</div>

</div>

<div class="Page">

<div class="Pad">

Kode HTML Anda Di Sini

</div>

</div>

<div class="Page">

<div class="Pad">

Kode HTML Anda Di Sini

</div>

</div>

</div></div></form>

<script src="http://kompiajaib.googlecode.com/files/tab_view2.js">

</script>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Perry Porsche <a href='http://share-inf.blogspot.com/2012/09/membuat-tab-view-di-blog.html' target='_blank'>bikin widget</a></div>

Keterangan:

Perhatikan tulisan yang berwarna hijau, itu keterangan untuk tiap kode di sampingnya, silahkan rubah kode-kodenya dan sesuaikan dengan theme blog Anda.

Tulisan 300px merupakan lebar widget tab view ini, sesuaikan dengan lebar sidebar blog Anda.

Tulisan 350px merupakan tinggi untuk widget tab view, silahkan sesuaikan dengan keinginan Anda.

Tulisan berwarna ungu muda adalah kode script untuk recent post berdasarkan katagori/label dengan 1 buah thumbnail untuk postingan terakhir. Tulisan All Trik untuk label postingan Anda yang ingin ditampilkan. share-inf.blogspot.com silahkan ganti dengan blog Anda. 30 merupakan banyaknya recent post yang ditampilkan, danhttp://share-inf.blogspot.com/search/label/Software silahkan ganti dengan URL label yang Anda tampilkan.

Kode HTML Anda Di Sini silahkan ganti dengan kode script widget yang lain seperti recent comment atau yang lainnya. Atau Anda bisa isi semua tab dengan kode script recent post yang warna ungu muda di atas, tinggal ganti nama labelnya saja. Seperti pada tab view di blog saya ini.

Jika Anda ingin membuat dua buah tab view seperti pada blog saya ini, hapus kode <script src="http://kompiajaib.googlecode.com/files/tab_view2.js"> </script> pada tab view kedua. Kemudian tambahkan angka 2 pada setiap tulisan TabView sehingga menjadi TabView2. Begitu juga kalau Anda ingin membuat tiga buah tab view di sidebar blog Anda.

Demikian sharing cara Membuat Tab View Di Blog kali ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu yang baru, setiap orang pasti melakukan try and error.

Sumber