Cara Membuat Permalink Di Blogspot

Cara Membuat Permalink Di Blogspot - Kali ini admin akan sedikit membagikan bagaimana Cara Membuat Permalink Di Blogspot. Cara ini sudah tersedia dalam template mas-sugeng dengan templatenya yang bernama "Simple Faster V3" . Memang kali ini saya akan share Permalink yang digunakan secara umum dengan yang digunakan saat ini.

Buatnya terbilang gampang, karena kamu hanya melewati 2 langkah saja. Lebih baik langsung saja daripada dikira kebanyakan omong saya.

• Pertama, silakan anda login ke akun blogger anda.
• Lalu, pergi ke menu rancangan, lalu pilih edit html.
• Jangan lupa centang expand template widget.
• Cari kode ]]> (gunakan Ctrl+F untuk membantu pencarian), setelah ketemu kode tersebut, letakkan kode css berikut tepat di atasnya :

.permalinkblogspot {border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;} .permalinkblogspot a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

• Lalu cari kode <data:post.body/> atau <p><data:post.body/></p>, lalu pastekan kode berikut di bawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalinkblogspot'> <center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div></b:if>

• Simpan template.

Ataupun kali ini saya akan membagikan sedikit Breadcrumbs yang dipasang pada template mas-sugeng. Sebenarnya sama cuma dari style yang kelihatan berbeda dari yang diatas. Langsung saja daripada saya kebanyakan omong !

• Pertama, silakan anda login ke akun blogger anda.
• Lalu, pergi ke menu rancangan, lalu pilih edit html.
• Jangan lupa centang expand template widget.
• Cari kode ]]> (gunakan Ctrl+F untuk membantu pencarian), setelah ketemu kode tersebut, letakkan kode css berikut tepat di atasnya :

• .permalinkblogspot {text-align:center;-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size:12px; margin:10px 0 13px; padding:8px; border:2px solid #ccc;}

• Lalu cari kode <data:post.body/> atau <p><data:post.body/></p>, lalu pastekan kode berikut di bawahnya :

• <div class='permalinkblogspot'>Anda baru saja membaca artikel yang berkategori <b:loop values='data:post.labels' var='label'><b><data:label.name/></b><b:if cond='data:label.isLast != &quot;true&quot;'> /</b:if> </b:loop> dengan judul <span style='color:red;'><strong><data:blog.pageName/></strong></span>. Anda bisa bookmark halaman ini dengan URL <span style='color:green;'><b><data:post.url/></b></span>. Terima kasih! </div>

• Simpan template.

Sekian yang dapat saya bagikan tentang Cara Membuat Permalink Di Blogspot. Jika ada pertanyaan ! mohon komentar di bawah ini ! Komentarmu akan sangat berharga bagi saya !

Cara Membuat Widget Dengan Scroll

Cara Membuat Widget Dengan Scroll - Kali ini admin akan sedikit membagikan yang saya alamin. Trik ini terbilang sudah lama tetapi kalau terdapat kode yang kurang hasilnya akan beda pada nantinya. Contoh saja widget yang baru saya pasang yang namanya widget "Artikel Terpopuler". 

Widget ini hasilnya berbeda bila tidak dipasangkan dengan kode <ul> dengan penutupnya juga yaitu </ul>. Disitulah letak perbedaan jika kekurangan sekode pun akan berakibat fatal menurut saya. Langsung saja ke bawah daripada panjang lebar.

Inilah kode-kode yang saya bagikan : 

<div class='widget-content' style='overflow:auto; height:125px'>

<li><a href='http://alkian.blogspot.com/2012/10/kata-kata-mutiara-motivasi-terbaru-2012.html'>Kata-kata Mutiara Motivasi Terbaru 2012</a></li>

<li><a href='http://alkian.blogspot.com/2012/09/keretamini-keretamall-komediputar-ya-keretaminikucom.html'>Kereta Mini, Kereta Mall, Komedi Putar Ya Keretaminiku.com</a></li>

<li><a href='http://alkian.blogspot.com/2012/10/suarasepakbolacom-tempatnya-prediksi-bola-terakurat.html'>Suarasepakbola.com Tempatnya Prediksi Bola Terakurat</a></li>

<li><a href='http://fadilblogx.blogspot.com/2012/10/sehat-alami-dengan-produk-indonesia.html'>Sehat Alami dengan Produk Indonesia</a></li>

<li><a href='http://fadilblogx.blogspot.com/2012/10/suarasepakbolacom-tempatnya-prediksi.html'>Suarasepakbola.com Tempatnya Prediksi Bola Terakurat</a></li>

<li><a href='http://fadilblogx.blogspot.com/2012/10/obat-wasir-dan-ambeien-manjur-di.html'>Obat Wasir dan Ambeien Manjur di Obatwasir.biz</a></li>

<li><a href='http://kreativitas-bersama.blogspot.com/2012/10/padang-pasir-arab-mulai-menghijau.html'>Gurun Sahara Subur, Benarkah Tanda Kiamat?</a></li>

<li><a href='http://kreativitas-bersama.blogspot.com/2012/10/virus-komputer-baru-ancam-korporasi.html'>Akankah, Virus Mengancam Dunia?</a></li>

</div>

Disinilah saya akan buktikan kalau kurangnya tanda <ul> dengan penutup </ul> akan mempengaruhi juga di bagian hasil yang terbilang kurang bagus + berantakan kalau dilihat jadi tambahkanlah kode <ul> + </ul> jika mau hasilnya memuaskan

Jika tidak mau seperti diatas bukan?.

Kalau tidak mau anda tinggal menuruti kode yang sedikit saya tambahkan supaya hasilnya seperti gambar yang pertama yang saya contohkan

<div class='widget-content' style='overflow:auto; height:125px'>
<ul>

<li><a href='http://alkian.blogspot.com/2012/10/kata-kata-mutiara-motivasi-terbaru-2012.html'>Kata-kata Mutiara Motivasi Terbaru 2012</a></li>

<li><a href='http://alkian.blogspot.com/2012/09/keretamini-keretamall-komediputar-ya-keretaminikucom.html'>Kereta Mini, Kereta Mall, Komedi Putar Ya Keretaminiku.com</a></li>

<li><a href='http://alkian.blogspot.com/2012/10/suarasepakbolacom-tempatnya-prediksi-bola-terakurat.html'>Suarasepakbola.com Tempatnya Prediksi Bola Terakurat</a></li>

<li><a href='http://fadilblogx.blogspot.com/2012/10/sehat-alami-dengan-produk-indonesia.html'>Sehat Alami dengan Produk Indonesia</a></li>

<li><a href='http://fadilblogx.blogspot.com/2012/10/suarasepakbolacom-tempatnya-prediksi.html'>Suarasepakbola.com Tempatnya Prediksi Bola Terakurat</a></li>

<li><a href='http://fadilblogx.blogspot.com/2012/10/obat-wasir-dan-ambeien-manjur-di.html'>Obat Wasir dan Ambeien Manjur di Obatwasir.biz</a></li>

<li><a href='http://kreativitas-bersama.blogspot.com/2012/10/padang-pasir-arab-mulai-menghijau.html'>Gurun Sahara Subur, Benarkah Tanda Kiamat?</a></li>

<li><a href='http://kreativitas-bersama.blogspot.com/2012/10/virus-komputer-baru-ancam-korporasi.html'>Akankah, Virus Mengancam Dunia?</a></li>

</ul>
</div>

Nb: Kode yang ditambahkan berwarna biru


Masih ada yang mau anda tanyakan?
Silahkan lewat komentar. Insyallah akan saya balas dengan secepatnya kalau saya lihat artikel ini.

Kumpulan Beberapa Tag Conditional Buat Blogger

Kumpulan Beberapa Tag Conditional Buat Blogger - Alhamdulillah di Minggu siang yang cerah ini, saya dapat kembali update blog dengan keadaan sehat wal'afiat maka dari itu saya akan membagikan sesuatu yang dapat menyembunyikan atau menampilkan widget di halaman tertentu.

Menerapkannya cukup terbilang gampang + susah dikarenakan setiap kode berbeda-beda penempatannya jadi mohon disimak dibawah kalau anda belum mengerti. Dibawah ini merupakan contoh widget yang dipasang pada Halaman Homepage Saja

<b:widget id='HTML1' locked='false' title='iklan adsense' type='HTML'>

<b:includable id='main'>
<b:if cond="data:blog.url == data:blog.homepageUrl">

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'> <data:content/>

</div>

<b:include name='quickedit'/>
</b:if>

</b:includable>

</b:widget>

Nb: Jika ingin valid HTML 5 anda bisa menghapus kode <b:include name='quickedit'/> <= Kode tersebut kalau dihapus tidak akan ada masalah apa-apa

Diatas merupakan contoh widget yang ingin ditampilkan pada halaman homepage saja, kalau anda mau merubahnya silahkan merubah warna merah yang pertama, dengan beberapa kode yang saya sediakan dibawah ini 

Menampilkan widget hanya di Homepage

<b:if cond="data:blog.url == data:blog.homepageUrl">

.......isi css......       

</b:if>    

Menampilkan widget selain di Homepage

<b:if cond="data:blog.url != data:blog.homepageUrl">

.......isi......  

</b:if>

 Menampilkan widget hanya di Archivepage

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

.......isi......

 </b:if>   

Menampilkan Widget selain di Archivepages

<b:if cond='data:blog.pageType != &quot;archive&quot;'>

  .......isi......  

</b:if>

 Menampilkan Widget hanya di Itempages / Postingan

<b:if cond='data:blog.pageType == &quot;item&quot;'>

.......isi css......         

</b:if>  

 Menampilkan widget selain di Itempages

<b:if cond='data:blog.pageType != &quot;item&quot;'>

 .......isi......       

</b:if>  

Menampilkan widget hanya di Staticpages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

.......isi......

</b:if>  

 Menampilkan widget selain di Staticpages

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

 .......isi css......       

</b:if>  

Menampilkan widget pada URL atau halaman tertentu

<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>

.......isi css......         

</b:if>

 Menampilkan widget selain di URL atau halaman tertentu

<b:if cond='data:blog.url != &quot;alamatpostingan&quot;'>

.......isi css......     

</b:if> 

ERROR 404

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

Bagaimana sekarang sudah paham bukan?, kalau sudah paham silahkan di praktekan cara saya ini. Kalau dirasa artikel ini bermanfaat mohon dibagikan melalui tombol social boorkmark dibawah. jika belum paham silahkan komentar dibawah

Membuat Clickable Image Autoreadmore

Seperti yang kita tahu, sudah tersedia scrip Auto readmore untuk Blogger disamping read more bawaan Blogger itu sendiri (jump link). Script auto readmore itu sendiri setahu saia (yg sering saia jumpai) tidak mendukung clickable image langsung ke alamat postingan (ketika gambar di klik, tidak menuju url postingan) tetapi ke alamat url gambar itu sendiri. Hal ini mungkin menggangu untuk blog khusus gallery ato photo

Berikut ini langkah2 untuk mengaktifkan clickable image pada auto readmore (jangan lupa klik Expand Widget Templates)

Masuk ke Edit HTML dan cari kode berikut :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 500;

summary_img =70;

img_thumb_height = 230;

img_thumb_width = 280;

</script>

<script type='text/javascript'>

//<![CDATA[

/*

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

*/

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(img.length>=1) {

imgtag = '<span style="float:left; padding:0;margin:0"><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>

Ganti kode berwarna merah dengan kode berikut

function createSummaryAndThumb(pID, pURL, pTITLE){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0;margin:0"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a></span>';

summ = summary_img;

}

Terus, cari kode ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

</b:if>

Ganti diatas dengan kode berikut :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

</b:if>

Save

Untuk demonya, sobat bisa liat di demo Poster Inc Blogger Template

Pic : http://www.sodiycxacun.web.id/2011/10/auto-read-more-thumbnail-tanpa-java.html

** Kode auto readmore berdasarkan template Poster Inc.

Cara Menambahkan Tombol Hapus Di Komentar Blog

Cara Menambahkan Tombol Hapus Di Komentar Blog - Kali ini saya selaku admin Kreativitas-Bersama.blogspot.com hanya menyebarkan saja postingan dari sobat yang bernama "Zhinto", saya menyebarkan ini karena postingan nya ini saya anggap sangat penting karena banyak yang bilang masalah tombol hapus di blog,

Kode nya kalau dibilang cukup mudah karena kita hanya memasukkan kodenya diatas salah satu kode (nanti dibahas dibawah aja), tetapi... tanpa lama" saya langsung saja membagikan nya dari pada banyak ngomong

1. Cari kode ]]></b:skin> di bagian Edit HTML

2. Kemudian masukkan kode ini dibawah kode  ]]></b:skin>

.item-control { display: inline;}

Setelah itu langsung anda cek, apakah perintah di atas work atau tidak, saya tidak menjelaskan nya biar sobat" tahu sendiri (xixixi), jika dirasa mohon untuk dibagikan, see you next time.. :)

Sumber 

Cara Membuat Blog Di Blogspot

Cara Membuat Blog Di Blogspot - Hoamz, kali ini saya akan membagikan sehelai postingan tentang "Cara Membuat Blog Di Blogspot", pasti banyak yang tahu apa istilah blog itu?, Blog merupakan catatan pribadi atau diary yang dikemas secara online. "Hari gini masih di buku gak jaman (hehehehe)" piss. Buatnya tidak terlalu sulit kalau untuk dibilang kita cuma tinggal buat + verivikasi no telpon aja.

Pendaftaran nya cuma bisa dibilang gampang karena kita hanya tinggal menyiapkan HP yang bisa menerima SMS dari nomor Internasional, (terima > udah jadi) gampang kan caranya. Tanpa panjang lebar saya langsung menyiapkan saja

1. Masuk Ke Blogger.com

2. Klik tombol “Daftar” di pojok kanan atas.

3. Isi formulir untuk mendaftar di Blogger.com. 

4. Verifikasi akun sobat dengan mengisi No Telepon.

5. Isikan kode verifikasi.

6. Akun anda siap untuk dipakai

Itulah yang dapat saya bagikan untuk blog membuat blog yang berbasis pada blogspot, jika dirasa artikel ini bermanfaat mohon untuk membagikan ke lainnya, sekian jika ada salah kata, See you next time.. :)