Langkah-langkahnya :
1. Login ke Blogger.com
2. Masuk ke Rancangan ~> Edit HTML
3. Cari kode berikut...
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='contoh (Header)' type='Header'>
<b:includable id='main'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='contoh (Header)' type='Header'>
<b:includable id='main'>
4. Bila sudah ketemu pastekan kode berikut tepat di bawahnya.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>body{background-color:#000000;background-image:none;}#intro-blog{font-size:80px;padding-top:220px;text-align:center;color:#ff0000;}#navbar-iframe{display:none;}#layout_wrapper{display:none;}#outer-wrapper{display:none;}#es{padding-top:30px;text-align:center;font-size:14px;font-weight:bold;</style><b:else/><style>#es{display:none;}#intro-blog{display:none;}</style></b:if>
<style>body{background-color:#000000;background-image:none;}#intro-blog{font-size:80px;padding-top:220px;text-align:center;color:#ff0000;}#navbar-iframe{display:none;}#layout_wrapper{display:none;}#outer-wrapper{display:none;}#es{padding-top:30px;text-align:center;font-size:14px;font-weight:bold;</style><b:else/><style>#es{display:none;}#intro-blog{display:none;}</style></b:if>
Ganti text #000000 dengan warna background yang Anda inginkan.
5. Lalu pastekan kode berikut tepat di bawah kode <body>.
<div id='intro-blog'><data:blog.pageTitle/></div><div id='es'><a expr:href='data:blog.homepageUrl + "search/label/?max-results=3"'><blink>Enter Site</blink></a></div>
Jika Anda ingin mengganti text menjadi Flash Player atau gambar Anda bisa mengganti kode <data:blog.pageTitle/>.
6. Simpan.
Real Page http://alprablog.blogspot.com/
Konten
Terlepas dari kenyataan bahwa para ahli SEO terus-menerus berbicara tentang pentingnya konten, web master yang paling mengabaikan saran mereka untuk memastikan situs mereka memiliki kualitas konten. Ini benar-benar gila, terutama ketika Anda mempertimbangkan kenyataan bahwa Google melihat isi pesan saat menentukan PageRank. Jadi, salah satu teknik terbesar untuk memperbaiki PageRank adalah hanya untuk memastikan bahwa situs Anda memiliki konten yang berkualitas. Konten ini harus SELALU relevan dengan topik situs. Konten tidak boleh terlalu lama (lebih dari 2500 kata halaman) atau terlalu pendek, harus informatif dan harus berisi jumlah kata kunci yang tepat (kepadatan kata kunci dari 2-5%). Jika konten Anda memiliki semua ini, Anda harus dalam kondisi sangat baik untuk meningkatkan PageRank Anda.
Back link
Faktor penentu utama dalam PageRank Google adalah link kembali. Ini adalah link masuk dari satu situs ke situs Anda. Apa link ini memberitahu Google bahwa situs Anda harus memiliki konten yang baik di dalamnya, atau pun situs lain tidak akan menghubungkan ke sana. Sekarang Anda mungkin berpikir bahwa semua yang penting adalah link, kan? Tidak persis. Google telah menjadi sangat cerdas dan akurat dengan PageRank, sehingga mereka dapat memberitahu link yang buruk (yaitu Link dari koleksi link, situs yang tidak relevan dan sebagainya) dari hubungan baik (link di artikel, link dari situs yang relevan dll). Teknik yang paling efektif dalam meningkatkan PageRank adalah dengan mengumpulkan link kembali baik. Dua teknik selanjutnya kesepakatan dengan daftar ini.
Forum dan Blog
Google dikenal untuk cepat mengindeks forum dan blog. Secara harfiah cara tercepat untuk mendapatkan link kembali baik adalah hanya posting link ke situs Anda pada forum atau blog. Kebanyakan forum mempertimbangkan akan langsung terhubung ke spam, sehingga Anda harus pastikan Anda melakukan ini dengan cara yang benar. Cobalah bergabung dengan forum yang relevan dengan topik situs Anda dan menempatkan link ke situs Anda dalam tanda tangan Anda, jika itu diperbolehkan. Juga, menempatkan link ke situs Anda dalam profil Anda. Kemudian posting 1-10 kali. Posting Anda harus menyumbangkan sesuatu ke forum sehingga mereka tidak diedit atau lebih buruk lagi, dihapus.
Seperti untuk menggunakan blog untuk mendapatkan link lebih, Anda dapat mencoba untuk membuat blog sendiri dan santai menempatkan link ke situs Anda di atasnya. Anda juga dapat mencoba komentar pada blog terkait lainnya dan termasuk link ke situs Anda dalam komentar ini. Sekali lagi, Anda perlu berhati-hati dalam cara Anda melakukan ini-Anda tidak ingin membuat komentar yang langsung mempromosikan situs Anda.
Artikel
Sebuah cara yang populer untuk mendapatkan Google PageRank yang lebih baik adalah dengan menulis artikel. Artikel ini didasarkan dari situs Anda. Misalnya, jika Anda menjalankan situs fotografi, Anda dapat menulis artikel tentang fotografi digital. Pada akhir artikel, Anda mungkin termasuk sesuatu seperti 'untuk lebih lanjut tentang fotografi digital, mengunjungi insert site.com ". Pasal link kembali sangat efektif karena mereka dianggap kredibel oleh Google. Satu hal yang perlu diingat adalah untuk tidak menyebutkan situs Anda kali terlalu banyak, satu atau dua menyebutkan per artikel baik-baik saja.
Real Page http://alprablog.blogspot.com/
Pag Navi adalah navigasi halaman yang berguna untuk memudahkan kalian dalam melihat-lihat artikel. Blogger biasanya hanya menyediakan navigasi 'posting lama' , 'beranda' dan 'posting baru'. Namu semua itu dapat di ganti menjadi seperti ini.
Bedanya navigasi ini adalah dengan dilengkapi fitur scroll. Yaitu nomor halaman dapat di tampilkan semua... Untuk lebih jelasnya silahkan di coba.
1. Login Blogger.com.
2. Masuk ke Rancangan ~> Edit HTML.
3. Cari kode ]]></b:skin>.
4. Letakkan kode berikut tepat di atasnya.
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMXwrNYnzg_fWdmqh0ZCxKLEMk_SEqzRTHYxUxNpb2mH2B5uhcTFpCyp-nDPq682YQjPgdky9Mk8kU5vvG_BgdltqyyZ3B7pcakRBTXMApPBM_2Dpk7c4OB3iBrrGav1HrCWuqn4CHZ1Q/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMXwrNYnzg_fWdmqh0ZCxKLEMk_SEqzRTHYxUxNpb2mH2B5uhcTFpCyp-nDPq682YQjPgdky9Mk8kU5vvG_BgdltqyyZ3B7pcakRBTXMApPBM_2Dpk7c4OB3iBrrGav1HrCWuqn4CHZ1Q/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
5. Kemudian cari kode </body>, lalu pastekan kode berikut tepat di atasnya.
<script src='http://www.geocities.ws/alprablog/user/js/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://www.geocities.ws/alprablog/user/js/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://www.geocities.ws/alprablog/user/js/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
6. Simpan. Semoga berhasil :D
Real Page http://alprablog.blogspot.com/
Ga pake panjang lebar lagi deh, nih saya kasih tahu cara mengatasi jika ada yang mengalami alexa rank no data.
1. Login alexa kamu
2. Cari pilihan SITE TOOL, maka akan kit atemukan pilihan “Cllaim Your Site” di pojok kiri bawah
Judul Spoiler:
3. Setelah kita klik Claime Your Site, maka kita akan diminta untk memasukan URL blog kita.
Judul Spoiler:
4. Setelah itu kita akan diberikan
Selamat malam, kali ini saya akan melanjutkan postingan sebelumnya yaitu cara desain plugin like box dan dasar-dasar desain plugin facebook likeboox. Sebelumnya saya ingin minta maaf kepada kalian semua karena postingannya telat. Sebenarnya plugin facebook ini hanya bisa di gunakan pada blog Wordpress.com. Tapi saya sudah bisa mencobanya pada blog Blogspot. Maaf kalau caranya agak rumit -___-
Langsung ke langkah-langkahnya...
1. Buka Notepad.
2. Masukan kode berikut pada Notepad Anda.
<html>
<head>
</head>
<body>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><script type='text/javascript'>FB.init("142764049144880");</script><fb:fan connections='8' css='http://www.geocities.ws/alprablog/css/fb-style.css?1' height='254' logobar='0' profile_id='209688125727652' stream='0' width='250'/>
</body>
</html>
<head>
</head>
<body>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><script type='text/javascript'>FB.init("142764049144880");</script><fb:fan connections='8' css='http://www.geocities.ws/alprablog/css/fb-style.css?1' height='254' logobar='0' profile_id='209688125727652' stream='0' width='250'/>
</body>
</html>
Ganti text yang berwarna merah dengan kode Script Plugin Faceboox Anda.
3. Simpan file dengan format .html.
4. Upload File tersebut ke file hosting gratis seperti ripway.com setelah di upload maka hasilnya akan seperti ini.
5. Masukan kode berikut pada sidebar blog Anda.
<iframe src="http://alpra.at.ua/demo/v1/plugin-fb.html" height="270"/></iframe>
Ganti text yang berwarna biru dengan alamat file hosting Anda tadi..
6. Simpan.
Real Page http://alprablog.blogspot.com/
Artikel ini adalah lanjutan dari artikel sebelumnya. Mulai dari mengubah warna background, fonts serta penempatan atribut-atribut pada plugin Like Box tersebut.Di sini kita akan membuatnya menggunakan XFBML Script.
Like Box XFBML script
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("12345");</script>
<fb:fan profile_id="ID-HALAMAN" stream="0" connections="12" logobar="0" width="288" height="274" css="http://www.alpra.cc.cc./style.css?1"></fb:fan>
<script type="text/javascript">FB.init("12345");</script>
<fb:fan profile_id="ID-HALAMAN" stream="0" connections="12" logobar="0" width="288" height="274" css="http://www.alpra.cc.cc./style.css?1"></fb:fan>
Perhatikan text yang berwarna merah. ID-Halaman di ganti dengan Id Halaman Facebook Anda.
Penting !
Perhatikan text "http://www.alpra.cc.cc./style.css?1" script tersebut untuk memanggil file script CSS yang anda simpan di file styles.css themes wordpress. Dan saya tekankan kepada anda, setiap kali mengubah kode script CSS maka anda harus mengubah juga angka >?1″ menjadi >?2″, >?3″ dan seterusnya hingga anda mendapatkan hasil tampilan like box yang cocok.
Dasar - Dasar Mendesain.
Berikut ini merupakan dasar script CSS untuk mendesain plugin Like Box, anda bisa mengatur atau menyesuaikannya dengan tema yang digunakan pada website atau blog.
1. Desain border dan background widget utama
/*Langkah 1 */
.fan_box .full_widget {
border: 2px solid #FF5000;
background: #FFF;
}
.fan_box .full_widget {
border: 2px solid #FF5000;
background: #FFF;
}
2. Desain teks, link, fans teks dan background top attribute
/* Langkah 1 */
.fan_box .full_widget {
border: 2px solid #FF5000;
background: #FFF;
}
/* Langkah 2 */
.fan_box .full_widget .connect_top {
border: 2px solid #FFF;
background: #FF5000;
}
.fan_box .connect_top .name_block a {
color: #FFF;
text-shadow: 1px 1px 0 #666;
font-family: Tahoma;
}
.fan_box .profileimage {
width: 50px;
height: 50px;
}
.fan_box .connect_widget {
margin-top: 10px;
color: #FFEA02;
}
.fan_box .connect_action {
padding: 0 !important;
}
.fan_box .connections {
border: 0 !important;
padding-top: 5px;
}
span.total {
font: Normal 12px Trebuchet MS;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
.fan_box .full_widget {
border: 2px solid #FF5000;
background: #FFF;
}
/* Langkah 2 */
.fan_box .full_widget .connect_top {
border: 2px solid #FFF;
background: #FF5000;
}
.fan_box .connect_top .name_block a {
color: #FFF;
text-shadow: 1px 1px 0 #666;
font-family: Tahoma;
}
.fan_box .profileimage {
width: 50px;
height: 50px;
}
.fan_box .connect_widget {
margin-top: 10px;
color: #FFEA02;
}
.fan_box .connect_action {
padding: 0 !important;
}
.fan_box .connections {
border: 0 !important;
padding-top: 5px;
}
span.total {
font: Normal 12px Trebuchet MS;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
3. Desain image profil, nama user dan image grid
Dan berikut adalah CSS lengkap dari langkah 1 hingga langkah 3 dan simpanlah di styles.css themes file hosting Anda..
/* Langkah 1 */
.fan_box .full_widget{
border: 2px solid #FF5000;
background: #FFF;
}
/* Langkah 2 */
.fan_box .full_widget .connect_top {
border: 2px solid #FFF;
background: #FF5000;
}
.fan_box .connect_top .name_block a {
color: #FFF;
text-shadow: 1px 1px 0 #666;
font-family: Tahoma;
}
.fan_box .profileimage {
width: 50px;
height: 50px;
}
.fan_box .connect_widget {
margin-top: 10px;
color: #FFEA02;
}
.fan_box .connect_action {
padding: 0 !important;
}
.fan_box .connections {
border: 0 !important;
padding-top: 5px;
}
span.total {
font: Normal 12px Trebuchet MS;
color: #FF5000;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
/* Langkah 3 */
.fan_box .connections .connections_grid {
padding-top: 0 !important;
)
.fan_box .connections_grid .grid_item .name {
color: #FF5000;
font-family: tahoma;
}
.fan_box .connections_grid .grid_item {
padding: 0 5px 5px 0 !important;
color: #FF5000;
}
.fan_box .full_widget{
border: 2px solid #FF5000;
background: #FFF;
}
/* Langkah 2 */
.fan_box .full_widget .connect_top {
border: 2px solid #FFF;
background: #FF5000;
}
.fan_box .connect_top .name_block a {
color: #FFF;
text-shadow: 1px 1px 0 #666;
font-family: Tahoma;
}
.fan_box .profileimage {
width: 50px;
height: 50px;
}
.fan_box .connect_widget {
margin-top: 10px;
color: #FFEA02;
}
.fan_box .connect_action {
padding: 0 !important;
}
.fan_box .connections {
border: 0 !important;
padding-top: 5px;
}
span.total {
font: Normal 12px Trebuchet MS;
color: #FF5000;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
/* Langkah 3 */
.fan_box .connections .connections_grid {
padding-top: 0 !important;
)
.fan_box .connections_grid .grid_item .name {
color: #FF5000;
font-family: tahoma;
}
.fan_box .connections_grid .grid_item {
padding: 0 5px 5px 0 !important;
color: #FF5000;
}
Anda dapat mengedit kode CSSnya sesuka Anda.
Baca juga...
Real Page http://alprablog.blogspot.com/
Facebook adalah salah satu saran untuk mempromosikan website/blog. Anda dapat membuat halaman pada facebook dan mulai mempromosikan website/blog Anda. Sudah taukan apa itu facebook like box? Kalau belum tau berikut screen shotnya...
Gambar di atas adalah tampila plugin facebook standard. facebook hanya menyediakan 2 tampilan yaitu light dan dark. Bosen juga liat tampilan facebook like boxnya. Kali ini saya akan mendesain facebook like box sendiri dengan cara mengubah kode CSS nya. Mendesain plugin facebook ini bukan lah hal yang gambang. Langsung saja menuju materi hari ini.
1. Main Widget.
Main widget merupakan inti dari plugin ini, pada script bawaannya (default) terdapat dua pilihan warna yakni Light dan Dark. Berikut contoh tampilan main widget beserta CSS script yang sudah saya buat.
Berikut kode CSSnya
2. Top Element
Terdapat 3 atribut penting pada elemen ini, diantaranya Image Profile Page, Profil Page Name dan Connect Widget Button.
Keterangan :
Berikut Kode CSSnya
3. Fans Connections
Disini anda akan melihat atribut Total Count User dan daftar User Profil (nama dan foto).
Keterangan:
Berikut kode CSSnya.
Dengan keterangan atribut diatas akan sedikit mempermudah pengeditan CSS script untuk plugin Like Box yang akan anda desain.
Baca juga...
Gambar di atas adalah tampila plugin facebook standard. facebook hanya menyediakan 2 tampilan yaitu light dan dark. Bosen juga liat tampilan facebook like boxnya. Kali ini saya akan mendesain facebook like box sendiri dengan cara mengubah kode CSS nya. Mendesain plugin facebook ini bukan lah hal yang gambang. Langsung saja menuju materi hari ini.
1. Main Widget.
Main widget merupakan inti dari plugin ini, pada script bawaannya (default) terdapat dua pilihan warna yakni Light dan Dark. Berikut contoh tampilan main widget beserta CSS script yang sudah saya buat.
Berikut kode CSSnya
/* Main Widget */
.fan_box .full_widget{
height: 250px;
border: 2px solid #084E96;
background: #f2f2f2;
position: relative;
}
.fan_box .full_widget{
height: 250px;
border: 2px solid #084E96;
background: #f2f2f2;
position: relative;
}
2. Top Element
Terdapat 3 atribut penting pada elemen ini, diantaranya Image Profile Page, Profil Page Name dan Connect Widget Button.
Keterangan :
- .connect_top
- .connect_action
- .profileimage
- .name_block
- .connect_widget,.connect_widget_interactive_area dan td.connect_widget_vertical_center
Berikut Kode CSSnya
/* Top Element */
.fan_box .full_widget .connect_top{
border: 2px solid #f2f2f2;
background: #FFEA02;
}
.fan_box .full_widget .connect_action{
background: #BDC7D8;
}
.fan_box .connect_action .profileimage {
}
.fan_box .connect_action .name_block{
}
.fan_box .connect_action .connect_widget{
}
.fan_box .connect_widget .connect_widget_interactive_area {
background: #FFBB00;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
background: #109504;
}
.fan_box .full_widget .connect_top{
border: 2px solid #f2f2f2;
background: #FFEA02;
}
.fan_box .full_widget .connect_action{
background: #BDC7D8;
}
.fan_box .connect_action .profileimage {
}
.fan_box .connect_action .name_block{
}
.fan_box .connect_action .connect_widget{
}
.fan_box .connect_widget .connect_widget_interactive_area {
background: #FFBB00;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
background: #109504;
}
3. Fans Connections
Disini anda akan melihat atribut Total Count User dan daftar User Profil (nama dan foto).
Keterangan:
- .connections
- .total
- .connections_grid
- .grid_item
- .name
Berikut kode CSSnya.
/* Fans Connection */
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{
}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}
/* 3 */
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{
}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{
}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}
/* 3 */
.fan_box .connections{
background: #A3D98A;
}
.fan_box .connections span.total{
}
.fan_box .connections .connections_grid {
background: #0281FF;
}
.fan_box .connections_grid .grid_item{
background: #FFE5FF;
}
.fan_box .connections_grid .grid_item .name{
color: #000;
}
Dengan keterangan atribut diatas akan sedikit mempermudah pengeditan CSS script untuk plugin Like Box yang akan anda desain.
Baca juga...
Real Page http://alprablog.blogspot.com/
Selamat malam sahabat blogger :D Kali ini saya ingin membuat request yang di berikan oleh sobat Adhi, yaitu membuat tooltip. Seperti apa tooltip yang di inginkannya? Silahkan lihat sendiri screen shotnya...
Tooltipnya juga lumayan keren sih... Jadi saya langsung membuatnya, Sebelum kita lanjut ke bawah saya ingin mengabadikan gambar berikut...
Langsung ikuti langkah-langkah berikut... :)
1. Login Blogger.com
2. Masuk ke Rancangan ~> Edit HTML
3. Cari kode </body>..
4. Pastekan kode berikut tepat di atasnya...
5. Kemudian Cari kode ]]></b:skin>.
7. Letakan kode berikut tepat di atasnya...
8. Simpan template...
Untuk memasang tooltipnya silahkan edit sendiri HTML berikut...
Silahkan ganti sendiri text yang berwarna merah dengan url blog Anda dan url gambar Anda.
Sekian Terima kasih
Salam Blogger....
Tooltipnya juga lumayan keren sih... Jadi saya langsung membuatnya, Sebelum kita lanjut ke bawah saya ingin mengabadikan gambar berikut...
Langsung ikuti langkah-langkah berikut... :)
1. Login Blogger.com
2. Masuk ke Rancangan ~> Edit HTML
3. Cari kode </body>..
4. Pastekan kode berikut tepat di atasnya...
<script src='http://www.alprasite.cc.cc/js/tooltip.js' type='text/javascript'/>
<script type='text/javascript'>
$(".bonce a[title]").tooltip({effect: 'bouncy'});
$(".bonce img[title]").tooltip({effect: 'bouncy'});
$(".download").tooltip({ effect: 'slide'});
$(".fade img[title], .fade a[title]").tooltip({offset: [10, 2], effect: 'slide'})
.dynamic({ bottom: { direction: 'down', bounce: true }
});
</script>
<script type='text/javascript'>
$(".bonce a[title]").tooltip({effect: 'bouncy'});
$(".bonce img[title]").tooltip({effect: 'bouncy'});
$(".download").tooltip({ effect: 'slide'});
$(".fade img[title], .fade a[title]").tooltip({offset: [10, 2], effect: 'slide'})
.dynamic({ bottom: { direction: 'down', bounce: true }
});
</script>
5. Kemudian Cari kode ]]></b:skin>.
7. Letakan kode berikut tepat di atasnya...
.tooltip{display:none;border: 5px solid #2379d7; background:url(http://i1202.photobucket.com/albums/bb372/alprablog/others/bluegrad.png) top left repeat-x; font-size:12px;width:200px;padding:10px;color:#fff;outline: 1px solid #777;outline-offset:0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:0px 0px 20px rgba(125,124,250,.9);-moz-box-shadow:0px 0px 20px rgba(125,124,250,.9);-webkit-box-shadow:0px 0px 20px rgba(125,124,250,.9);filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=7);
font:12px Georgia;font-weight:bold;text-shadow:.2em .2em 0.2em #000000;}
font:12px Georgia;font-weight:bold;text-shadow:.2em .2em 0.2em #000000;}
8. Simpan template...
Untuk memasang tooltipnya silahkan edit sendiri HTML berikut...
<div class="bonce">
<li><a href="http://alprablog.blogspot.com/" target="_blank" title="Alprablog™">Alprablog™</a></li>
</div>
<li><a href="http://alprablog.blogspot.com/" target="_blank" title="Alprablog™">Alprablog™</a></li>
</div>
<div class="bonce">
<a href="http://alprablog.blogspot.com/" target="_blank" title="Alprablog™"><img src="http://i1202.photobucket.com/albums/bb372/alprablog/banner.jpg"/></a>
</div>
<a href="http://alprablog.blogspot.com/" target="_blank" title="Alprablog™"><img src="http://i1202.photobucket.com/albums/bb372/alprablog/banner.jpg"/></a>
</div>
Silahkan ganti sendiri text yang berwarna merah dengan url blog Anda dan url gambar Anda.
Sekian Terima kasih
Salam Blogger....
Real Page http://alprablog.blogspot.com/
Langganan:
Postingan (Atom)
Recent Comments