muraicantik: Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Minggu, 30 September 2012

Cara Membuat Tombol Share Button | Tutorial Blogger

Cara Membuat Tombol Share Button - Cara Membuat Tombol Share Button di Blogger - Cara Memasang Share Button Facebook, Twitter, Google - Membuat Share Button dalam Postingan Blog - Kali ini saya akan berbagi kategori Tutorial Blogger, artikel kali ini adalah Cara Membuat Tombol Share Button di Blog, artikel ini sudah sangat banyak di bahas oleh blogger lainnya, tapi tidak ada salah nya juga untuk saya kembali memposting Cara Membuat Tombol Share Button ini. Langsung saja bagi anda yang ingin mencoba, mari ikuti langkah-langkah berikut ini

1. Template > Edit HTML > Lanjutkan > Lalu Centang Expand Template Widget
2. Cari kode <data:post.body/>
3. Masukan kode berikut ini tepat dibawah <data:post.body/>

<div style='background:#f9f9f9;border-top:3px solid #bbb;border-bottom:1px solid #bbb;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>

<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#666'>
<strong>Bagikan Artikel Ini</strong> :
</div>

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count' title='Facebook'/>
<a class='addthis_button_tweet' title='Twitter'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium' title='Google Plus'/>
<a class='addthis_counter addthis_pill_style' title='Share'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f57432236fb4dee' type='text/javascript'/>
</div>

Catatan:
- Jika anda ingin memasang Tombol Share Button di atas postingan, simpan kodenya sebelum <data:post.body/>

- Jika tombol Tombol Share Button tidak ingin ditampilkan di halaman Home atau hanya ingin ditampilkan di halaman postingan saja, cukup tambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode tombol tadi. Dan hasilnya menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
Kode Tombol Share Button
</b:if>

Demikian untuk Cara Membuat Tombol Share Button | Tutorial Blogger kali ini, selebihnya bisa anda edit sendiri CSS nya menurut selera masing-masing. semoga bisa bermanfaat bagi sobat blogger..

Selasa, 04 September 2012

Membuat Like Page Melayang Dengan Tombol Close

Membuat Like Page Melayang Dengan Tombol Close - Jika anda tertarik ingin Membuat Like Page Melayang Dengan Tombol Close berikut ini akan saya jelaskan langkah demi langkah nya. Untuk Contohnya anda bisa lihat sendiri diblog aldio blog ini, Langsung saja berikut ini Membuat Like Page Melayang Dengan Tombol Close yang bisa langsung anda coba di blog anda masing-masing

1. Masukan kode berikut ini di atas </body>

<style type='text/css'> .notification{position:fixed;left: 35%;padding: 10px;background:white;box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);right: 30%;width: 300px;top: 35%;z-index: 9999;} .notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg30CaHG8vxGymWjiAwnj9HMdSWjwCI2lc5-Rhb0ANaGCP44JZd7qE9VEVQrA0h_ppGSXJ9xW3ufYiHgUeER-Pj0WdV_1CxhP-cRfdUzLSt7sC2LFTqloQs9emsmAs4mIL6TnyVigHioFU/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-2px;right:-5px} .notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9} .notification:after{background: rgba(0, 0, 0, 0.77);content: '';position: absolute;top: -500%;bottom: 0;right: 0;left: -500%;z-index: -1;width: 1000%;height: 1000%;} </style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){$('.notification').hover(function(){$(this).css('cursor','auto');});$('.notification span').click(function(){$(this).parent().fadeOut(800);});});</script> <div class='notification warning'><span/>

<div style='text-align:center;color:Red;font-weight:bold;font-size:14PX'> Like FP Aldio Blog yah.. Thanks...</div> <iframe allowtransparency='true' frameborder='0' rel='nofollow' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=

http://www.facebook.com/AldioBlog

&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=265' style='height: 265px;background: white;border-radius: 3px;'/> </div>

2. Ganti Tulisan yang berwarna merah dengan Alamat FP anda. Simpan dan lihat hasilnya..

Demikian Membuat Like Page Melayang Dengan Tombol Close kali ini, jika diantara anda yang mengalami kesalahan atau gagal silahkan tanyakan kepada saya...

Senin, 20 Agustus 2012

Membuat Artikel Terkait/Related Post dengan Efek Ceklis

Membuat Artikel Terkait/Related Post dengan Efek Ceklis - Setelah sebelumnya saya update artikel tentang Cara Membuat Widget Artikel Terbaru. kali ini aldio blog akan berikan tutorial blog tentang Membuat Artikel Terkait/Related Post dengan Efek Ceklis. Bagi anda semua yang ingin Membuat Artikel Terkait/Related Post dengan Efek Ceklis silahkan ikuti langkah-langkah berikut ini.

1. Buka Dasbor >> Template >> Edit HTML >> Lanjutkan >> Beri centang pada Expand Template Widget

2. Cari kode ]]></b:skin> setelah ketemu masukan kode berikut ini di atasnya

.rbbox
{
font-family:Federant;
background:#fff;
border:1px solid #ccc;
height:198px;
overflow:auto;
margin:10px 0 15px;
padding:10px
}
.rbbox ul li:hover
{
cursor:pointer;
list-style-image:url(http://4umi.com/image/icon/check.png);
color:#3B5998
}
.rbbox ul li
{
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlfP2lfkm8mRrK2A7wCp7D4uPUBTtRGsfaNLc-KDJepvsCJUFJVYty0PhX9yCI1_51gZPsDkdAYP_5H-nVqqc6viBiEDAFfZMECkHWRjpa9HUt-0evSbtyhHSjnYD4HxoPOzM_sRFGF0U/s12/uncheck.gif);
padding:.5em 0 .5em .3em
}

3. Berikutnya cari kode <data:post.body/> bagi yang sudah memasang read more akan ada dua kode ambil kode yang kedua lalu copy kode berikut ini di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='rbbox'>
<div>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel =999;
var maxNumberOfLabels = 999;
maxNumberOfPostsPerLabel = 999;
maxNumberOfLabels = 999;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

4. Simpan Template

Demikian Membuat Artikel Terkait/Related Post dengan Efek Ceklis kali ini, semoga bisa bermanfaat. jika ada dari sobat yang tidak berhasil silahkan tanya langsung.

Jumat, 17 Agustus 2012

Cara Membuat Widget Artikel Terbaru

Cara Membuat Widget Artikel Terbaru - Setelah sekian lama tidak posting artikel tentang blogger, akhirnya pada kesempatan kali ini saya akan berbagi artikel tentang blogger. artikel yang akan dibahas kali ini adalah Cara Membuat Widget Artikel Terbaru. Langsung saja bagi anda yang sedang mencari artikel ini berikut ini aldio blog berikan langkah-langkahnya

1. Tambah Gadget > HTML/JavaScrip > lalu masukan kodeberikut ini

Jika Ingin Mempercantik atau menambahkan fungsi scroll silahkan pake kode yang ini

<div style="overflow:auto; width:307px; height:250px; background-color:#f3f3f3; rgb(255, 255, 255); border:1px solid #ccc;"><script src="http://dhio.googlecode.com/files/aldio-blog-post-terbaru.js"></script> <script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <script src="http://koneksi-lambat.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script></div>

- warna merah ganti dengan URL anda
- warna biru jumlah yang akan muncul

Berikut tadi Cara Membuat Widget Artikel Terbaru yang bisa saya berikan, selanjutnya silahkan berkreasi sendiri. Happy Blogging!!!