bloger sejati

Pasang Bookmark Share Button Keren Bentuk Hati

Posted by Unknown Wednesday, March 27, 2013

Untuk demonya sobat bisa klik gambar dibawah ini: dan sobat perhatikan bagian bawah sebelah kiri.

OKE, jika jika sobat tertarik memasangnya silahkan ikuti langkah berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Lalu Cari Kode </head> , Lalu letakkan Kode Berikut diatasnya.

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4. Selanjutnya Letakkan Kode Berikut diatas kode </body> .

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/></div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://ut2a-4down.blogspot.com/">Blogger Gadgets</a>

5. Privew dl, jika tdk terjadi kesalahan, baru Simpan template... ;)

Selengkapnya...

cara membuat share button berbentuk hati

Posted by Unknown

Hai.. sobat blogger,, selamat bermalam minggu.

kali ini saya akan share tentang cara membuat share button berbentuk hati.

oke,, tutorial ini saya dapatkan dari http://ut2a-4down.blogspot.com.

langkah pertama silahkan login ke blogger sobat

klik template, kemudian edit HTML, klik lanjutkan

kemudian cari kode </head> , tekan ctrl+F untuk lebih mudah menemukan kodenya, lalu letakkan kode berikut di atas kode </head>.

preview blog terlebih dahulu, apabila tidak ada masalah klik smpan.

demikian tutorial kali ini semoga bermanfaat ya!

Selengkapnya...

Cara Membuat Auto Read More Seo Friendly

Posted by Unknown

Cara Membuat Read More, Cara Membuat Read More Otomatis,Cara Membuat Auto Read More Seo Friendly ~ Tanpa Javascript - Diluar mungkin sudah banyak yang membahas cara membuat read more, tetapi kali ini sedikit berbeda karena saya menerapkan readmore yang seo friendly, Mengapa saya katakan seo friendly , yuup karena anda tau kebanyakan blogger menggunakan readmore dengan javascript yah bukan rahasia lagi kalau kode javascript sangat dibenci om google alias gak seo friendly nah untuk cara yang seo friendly alias manual ikuti langkah-langkahnya berikut ini

Berikut Cara Membuat Auto Read More Seo Friendly ~ Tanpa Javascript | Terbaru:

1. Login Blogger
2. Kemudian Template > EDIT HTML
3. Centang Expand Template Widget
4. Kemudian cari kode data.post.body (Untuk memudahkan pencarian tekan tombol CTRL+F) , hapus kode tersebut dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.snippet'>
        <b:if cond='data:post.thumbnailUrl'>
            <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl' style='float:left; margin:0 10px 10px 0;'/>
            </div>
        </b:if>
        <data:post.snippet/>
        <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
            <div class='jump-link'>
                <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
            </div>
        </b:if>
    <b:else/>
        <data:post.body/>
    </b:if>
<b:else/>
    <data:post.body/>
</b:if>
</b:if>

5. SIMPAN TEMPLATE

Selengkapnya...

Auto Read More Tanpa JavaScript

Posted by Unknown

Pemasangan read more merupakan pemasangan sepenggal kalimat yang dituliskan dalam artikel blogger. Biasanya ini digunakan oleh pengguna blogger pada home page saja. Alasan kebanyakan dari mereka adalah memperingkas home page (halaman depan) blogger. Tak jarang dari kebanyakan tutorial yang sudah memberikan tips untuk pemasangan read more ini. Baik read more yang diganti oleh gambar ataupun read more manual.

Pada tutorial ini, murni menggunakan tag data default dari blogger. ini bisa memperingan pemasangan read more dengan javascript. Berikut demo yang bisa anda liat dari pemasangan read more otomatis tanpa javascript.

Cara membuatnya adalah :

Edit HTML template anda dan jangan lupa centang Expand Widget Templates dan cari kode berikut <data:post.body/> dan ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.thumbnailUrl'>
        <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
    <b:else/>
        <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVyrIo3dlzXPmenRtQr3guI4eKyfcf9p5aX6moJm-Orrcur2W9PrZHN7MsSzDX1RfWxc0NXjaZ-8BHvZYjyyn8kSlaKNtYbFWm_6_4c-MYOJAXVeLvX2zjwUHSpyEmMkFA8XsAcl9SdYs/s1600/no-image.png'/></a>
    </b:if>
    <div class='post-snippet'><data:post.snippet/></div>
    <div class='rm-button-wrap'>
        <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    </div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
<b:else/>
    <b:if cond='data:blog.pageType == "static_page"'>
        <data:post.body/>
    </b:if>
</b:if>

Jika template anda sudah menggunakan auto readmore dengan javascript silakan cari kode berikut :

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

dan ganti semua kode diatas sehingga menjadi seperti ini :

<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVyrIo3dlzXPmenRtQr3guI4eKyfcf9p5aX6moJm-Orrcur2W9PrZHN7MsSzDX1RfWxc0NXjaZ-8BHvZYjyyn8kSlaKNtYbFWm_6_4c-MYOJAXVeLvX2zjwUHSpyEmMkFA8XsAcl9SdYs/s1600/no-image.png'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>

Langkah terakhir, silakan modifikasi auto read more template anda dengan sentuhan CSS berikut yang biasanya diletakkan sebelum kode ]]></b:skin>

.post-thumbnail {
  width:72px;
  height:72px;
  float:left;
  margin:0px 10px 0px 0px;
}

Simpan Template anda dan lihat hasilnya.

Selengkapnya...

Sosial Bookmarking & Kotak Berlanganan Artikel Untuk Blogger

Posted by Unknown

- | Hai sobat blogger, seperti pada widget-widget yang sama namun dengan desain yang berbeda, pada tutorial ini kita akan membahas bagaimana membuat sosial bookmarking & kotak berlangganan artikel untuk blogger.

Langkah Membuat Sosial Bookmarking & Kotak Berlanganan Artikel Untuk Blogger :

Buka akun blogger Anda
Masuk ke menu tata letak, add gadget > HTML/Javascript
Pastekan kode dibawah ini :

<style>
#socialbox{border:2px solid black;
width:270px;padding: 5px 5px 5px 5px; }
img.beintouch:hover {
background: none repeat scroll 0 0 #ffbc99;
border-radius: 16px 16px 16px 16px;
box-shadow: 0 0 10px #ffbc12;
}
.emailtext {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBu-hA5ndpTPPn_YM61xOZFSfIW2Dcz_IeuxdsQkpGbL4h2Z7I764huBL-FWMDor-ba57ejeqEiNlUlXeUrcAr2-Aa-zMWWKJQIKwCL4CQ6KipyycMlJ7QnXYixrTS2Fajy1JosYMEyk/s1600/mailbox.png") no-repeat scroll 4px center transparent;
border: 1px solid #7E4E27;
border-radius: 4px 4px 4px 4px;
box-shadow: 1px 1px 4px #7E4E27 inset;
color: #444444;
font-weight: bold;
margin-left: 2px;
padding: 7px 15px 7px 35px;
text-decoration: none;
width: 120px;
}
.ebutton {
background: #D55959;
border: 1px solid #D3D3D3;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
margin-left: -18px;
margin-top: 5px;
padding: 6px 15px;
text-decoration: none;
text-shadow: 1px 1px 0 #000000;
}
</style>
<br />
<div id="socialbox">
<table align="" cellpadding="1px" cellspacing="0px" style="width: 290pxpx;"><tbody>
<tr><td>
<a href="http://facebook.com/Bloggertrix" rel="nofollow" target="_blank"> <img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRSXI9M8k8R9WHtJDwOHhIEU3B2SU9IA9UsNQ_gVLl6SGWgr0wLGcU_W0CoD55ZqhF4Fl1UZIP5cBAK9IshzQnmXyVTbpUawxSd5UGtEj_XMcV59Jv6JyPElZ72rDmKbmMhYFmx3PlBU/s1600/bloggertrix-facebook-icon.png" /></a></td><td>
<a href="http://twitter.com/ID Twitter Anda" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOlbOox4setKvxyD7sUOfp5VoL3NZD62OsnGlu53WGHbLYSdMaa_2jCznCfN4SkaBQNlpQNVE7jNaQoh2oWiWtvLWbMIOOgByMS9cyQwqbk34afnGDvuTfZA24pnUQah2OFJFFno51LaA/s1600/bloggertrix-twitter-icon.png" /></a></td><td>
<a href="http://pinterest.com/ID Pinterst Anda" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1MwmC_BKZ1xtnxlj86DEOwcQvW6bmNxn8rgw9uQCctfVm015s8fcP3Ig9gWlUYp599gFObsJVfmnQEiAKeBxdEl-ioTviexDsZGbkAOHje24ICNE-9gafcg-rm6Qv9b7UHTeubp5_lKU/s1600/bloggertrix-pinterest-icon.png" /></a></td><td>
<a href="URL Google+ Anda" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN5fis6CrH6am8tMGqZyF1bd64sJ3CZ8wXa5F7Smc9BqYhZ4v5JElPryFG4N-jMl_flxA-QkQHh-fwNBoTRBuZ1myaL2nEoSU92hCrzzwhESkOLLWWwuUZJei1BxT4m3mqtNSLWa0LgFU/s1600/bloggertrix-google-icon.png" /></a></td><td>
<a href="http://feeds.feedburner.com/ID Feedburner Anda" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_2Aj6jbuLZmrod0LpMW0FVXgFgXhHR4BwUtfDzgBK1TL41si4JfFErFuoUcv_WWCiJs8psjutnmTbkehNcDdQezlGDHt2uECCiDZsD1bhZMYb9I8lHinGl9i7VG5ZiH36arPOfGXsxQ/s1600/bloggertrix-rss-feed-icon.png" /></a></td></tr>
</tbody></table>
<div>
<center>
<b>Dapatkan Artikel Kami Dengan Email</b></center></div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="ID Feedburner Anda" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailtext" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input alt="" class="ebutton" title="" type="submit" value="Subscribe" />
</form>
</div>

Keterangan :
Ganti kode-kode yang sudah diwarnai diatas, sesuai dengan kebutuhan Anda.
4. Save template Anda.

Selengkapnya...

Cara Buat Auto Read More dengan Thumbnail di Blogger

Posted by Unknown

Auto Read More Hack With Thumbnail For Blogger

Expandable post atau lebih dikenal dengan "Read More" adalah fitur yang membuat blog Anda menunjukkan hanya sebagian dari posting Anda pada halaman indeks yaitu rumah, label dan halaman arsip. Pada akhir pratinjau setiap akan ada sebuah link ke halaman posting, biasanya menempel pada frase "Read More".

Auto membaca lebih banyak fungsi otomatis mempersingkat posting Anda dan membuat thumbnail dari gambar yang ada di pos. Hal ini juga membantu untuk memuat halaman lebih cepat. Hal ini juga menunjukkan dan thumbnail gambar yang membantu untuk menarik pembaca. Saya juga menambahkan auto read more ke blog saya. Otomatis read more untuk blogger dengan posting thumbnail dapat dilakukan dengan memasukkan beberapa kode ke dalam template blog Anda.

Cara Tambah Auto Read More With Thumbnail Untuk Blogger?

Buka akun Blogger Anda
Pergi ke Blogger Dashboard> Template> Edit HTML.
Periksa "Expand Template Widget".
Cari (Ctrl + F) </ head> tag
Copy dan paste kode di bawah ini sebelum/di atas </head>:

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Keterangan :

Anda dapat menyesuaikan read more dengan mengubah nilai-nilai dari variabel-variabel berikut:

thumbnail_mode – set ke "yes" jika Anda ingin menampilkan thumbnail dengan ringkasan teks
summary_img – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, dengan thumbnail.
summary_noimg – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, bila ada thumbnail ada.
img_thumb_height and img_thumb_width -specify adalah tinggi dan lebar thumbnail (dalam piksel).

6. Sekarang cari kode <data:post.body/> dan ganti kode tersebut dengan kode dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

Selengkapnya...

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger

Posted by Unknown

Auto Read More With Thumbnail Without Java Script For Blogger

| Hai sobat blogger, seperti pada tutorial seelumnya yang membahas auto readmore dengan javascript namun kali ini kita akan membahas tanpa javascipt.
*Apa sih perbedaan menggunakan javascipt dengan tanpa javascript? Auto readmore dengan javascipt memakan waktu loading yang lebih lama lagi ketimbang tanpa java script. Nah, 1 lagi, katanya javascript membuat duplikat kontent yang akan membuat masalah lebih banyak lagi yang akan diberitahukan di Google Web Master.

Langkah Membuat Auto Readmore Dengan Gambar Tanpa Java Script :

Buka akun Blogger Anda
Masuk ke menu edit HTML, centang expand template widget
Cari kode dibawah ini :

<data:post.body/>

Catatan : Biasanya kode diatas ada 3 sampai 4 pada template blogger, silahkan Anda tempatkan kode dibawah ini pada kode 2/3/4.

4. Ganti kode diatas, dengan kode dibawah ini :

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixMNvVTC1Q8qiYV3NbxeIDa-egxvc5_EGM5zBBN4JrRuZ9zTOVkm3rlRNDi5-kU1c3Md4NheKUT5SQCCZw1wlofCfLd6yJ0VVSuW85H3kdmyJz7sPraWtagucKy22uMvp8h7P4_Rg0y66o/s0/no-image.png'/></a>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link' style='float:right'>
<a expr:href='data:post.url' expr:title='data:post.title'>Readmore »</a>
</div></b:if><b:else/>
<data:post.body/></b:if><b:else/>
<data:post.body/></b:if></b:if>

5. Cari kode dibawah ini :

]]></b:skin>

6. Pastekan CSS dibawah ini diatas pada kode diatas :

.post-thumbnail {width:72px; height:72px; float:left; margin:0px 10px 0px 0px;}

7. Preview dahulu template Anda, dan save.

Selengkapnya...

bloger sejati

Pages

Pasang Bookmark Share Button Keren Bentuk Hati

cara membuat share button berbentuk hati

Cara Membuat Auto Read More Seo Friendly

Auto Read More Tanpa JavaScript

Cara membuatnya adalah :

Sosial Bookmarking & Kotak Berlanganan Artikel Untuk Blogger

Langkah Membuat Sosial Bookmarking & Kotak Berlanganan Artikel Untuk Blogger :

Cara Buat Auto Read More dengan Thumbnail di Blogger

Cara Tambah Auto Read More With Thumbnail Untuk Blogger?

Keterangan :

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger

Langkah Membuat Auto Readmore Dengan Gambar Tanpa Java Script :

sponsor

Labels

Followers

Tentang aku

Blog Archive

pengunjung blog