Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

Jumat, 21 Februari 2014

Cara Menghapus Blog Blogspot

Kebetulan saya ada beberapa blog yang sudah tidak terpakai lagi. Yang SERP dan Page Ranknya tidak ada, dan saya memutuskan untuk menghapusnya. Blog yang akan saya hapus ini kalau tidak salah sampel blog waktu saya mengisi Workshop Multimedia di STAIN Salatiga. Cara menghapus blog di blogger.com ini cukup mudah kok.
Langkah-langkahnya :
Masuk ke Dashboard dan Klik Blog yang akan anda hapus.
Cari Tab Setting yang berada di Pojok kiri bawah sendiri, di situ ada tiga pilihan, Import, Export dan Delete Blog.












Klik delete blog. Setelah itu ada konfirmai bahwa blog anda akan dihapus selamanya setelah 90 hari. Jika anda ingin membackup template dan konten blog itu sendiri klik Download Blog terlebih dahulu, tapi jika tidak silahkan langsung saja klik Delete This Blog. Dan anda akan kembali ke dashboard daftar blog-blog aktif anda.













Seperti yang tadi saya tulis bahwa blog akan dihapus selama kurang lebih 90 hari, Jika sebelum 90 hari anda ingin blog itu kembali anda bisa mengembalikannya dengan mudah. Tapi jika lebih dari 90 hari maka blog sudah tidak bisa direcovery lagi, semua data akan dihapus permanen oleh empunya Blogger, yaitu Mbah Google, Inc. Silahkan Baca Mengembalikan Blog Blogspot yang terhapus.
Read More..

Rabu, 06 November 2013

Cara Membuat Kotak Komentar Blog Keren

Tutorial Belajar Blog - Cara Membuat kotak Komentar Keren,Pengunjung Tutorial Blog | Tips BLog Kali  ini saya ingin membuat postingan tentang membuat Kotak Komentar Blog .Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga walapun sedikit berbeda. 
Ini Priview nya

  • Login ke akun blogger dan masuk ke Edit HTML
  • Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga
  • Centang "Expand Widget HTML" ( bila perlu )
 Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 
/*------------- START blogspot.com Threaded Comments  ------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
/*--------- End blogspot.com Blogger Threaded Comments  ----------*/
  • Kemudian simpan dan lihat hasilnya….! Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe :P #LOl
nah biar tampilan nya menjadi lebih menarik seperti Thread komentar saya, anda bisa tambah code CSS berikut, letakkan  di bawah ]]></b:skin> 
<style type=text/css>
        
/*Start Modif kotak Komentar*/
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);
}
.comments .comments-content .datetime a{float:right;
}
.comments .comments-content .comment:last-child,.comments .comments-content .comment-thread ol li{font:14px Verdana;color:#fff;background:rgba(0,0,0,.5);padding:5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 0 0 30px #fff;-moz-box-shadow:inset 0 0 30px #fff;-webkit-box-shadow:inset 0 0 30px #fff;
}
.comment-actions a{
background:#dad6cf;-moz-border-radius:2px;border-radius:2px;-webkit-border-radius:2px;font:12px Verdana;padding:4px;margin:5px;height:16px;border:1px solid #c1c1c1;
}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{
text-decoration:none;background:#ab9e9e;border:1px solid #5AB1E2;
}
.avatar-image-container{
-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:4px inset #000;
}
.comments .continue a{display:inline-block;border:1px solid #C4C4C4;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;font:14px Verdana;color:#fff;padding:2px 8px;margin-right:10px;
}
.deleted-comment{color:gray;font-style:italic;
}
/*End Modif kotak Komentar*/
</style>

OK selesai, coba lihat bagaimana tampilan komentar anda…!
Jangan Lupa tinggalkan Komentar sobat2 ya...
Read More..

Kamis, 24 Oktober 2013

Cara Mudah Mengetahui Yang Copy Artikel Blog

! --->> Apa Kabar...? Kali Ini Saya Akan Berbagi Dengan Sahabat Blogger Dan Pembaca Setia....Mengenai Cara Mudah Mengetahui Yang Copy Artikel Blog 


Situs buat mengetahui siapa yang telah menjiplak artikel di blog kita. Caranya cukup mudah, gak perlu mendaftar, tinggal taruh alamat/URL blogmu trus pencet tombol "COPYCSAPE", tinggal tunggu bentar trus langsung keluar siapa yang ngambil ato yang copy paste artikel blogmu. Kalo untuk mengetahui siapa yang menjiplak artikel2 atau postingan2 tertentu maka yg kamu masukkan ke sana adalah link dari judul postinganmu, jadi nanti akan ketahuan siapa yang menjiplak postinganmu tersebut. 

Tapi sayang untuk yang versi gratis kita hanya bisa mengetahui beberapa aja, jadi gak bisa mengetahui semua yang ngopy paste blog kita. Tapi lumayan kan buat mengintip dikit siapa sih. he..he.. . OK bagi yang pengen tahu nih alamatnya http://www.copyscape.com,

Langsung aja Datangin Alamat ini dan ikuti cara seperti gambar di atas....?
Selamat Mencoba!!!!!
Semoga bermanfaat...................???
Read More..

Cara Mudah Membuat Slider Otomatis Carousel Di Blog

! --->> Apa Kabar...? Kali Ini Saya Akan Berbagi Dengan Sahabat Blogger Dan Pembaca Setia....Mengenai Blog Cara Mudah Membuat Slider Otomatis Carousel Di Blog
Sebenernya sudah lama sekali saya ingin sekali memasang Slide di blog sederhana ini,Setelah Saya keluar masuk kerumah mbah Google akhirnya saya jumpa di blog Mas Kolis ,Dan sekarang saya sengaja men Share Cara Mudah Membuat Slider Otomatis Carousel Di Blog untuk sahabat yang ingin memasang Slide di blog,,Jika Sahabat Ingin memasangnya seperti blog sederhana Saya ini,,, ikuti langkah-langkahnya.....



DEMO

Cara Mudah Membuat Slider Otomatis Carousel Di Blog , Sangat Sederhana karena di buat mudah sama pakarnya (Mas Kolis)disini saya hanya merubah beberapa kode agar serasi dengan template blog saya dan Sahabat pun pasti bisa merubahnya agar serasi dengan blog sahabat.Oke Langsung saja di bawah ini langkah-langkah untuk membuatnya :

Pertama Anda mesti login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan slider ini.
Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode 
]]></b:skin> :

#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU-PZMonRkii-1dUqCVcg8nSx3v8rNkueJ7Uq4No50QO6BX1hhByjBuef5rneOX8Ed8szh1U6lmD_djX87P27095HuA8XfFTyBfgbbKHiL4VPx_-FVWSJsZw51sYhTFASs28zdK9StUgoL/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoKbpg5DLHu6FEi2wxsnEc7Tc0LNsWJiHHmqhH-8Vm0LWJY-k9yGkZDUGqM76LHl6U6wnY34pDNuLC9UGjmd-K_DGwm2CojiZNUX1C268C1TMO8zZlhm8hXW55yH6KIBP9SKIRpcXQrHvU/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript/>
<script src=https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js type=text/javascript/>

<script type=text/javascript>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsPX2StRNF9S71F7bdmeomuHeY8yUucnE0CdAJlsQ7kMnnlkGlUaNreNCN4rcvtuh3Bc-QtSuZhIeVRkXLjqHmV8m11Gd-CBg-2LkOVD4OrrAR7UpoTLXDd_wZSQeaL5IUpy3Xt-k8C0/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;

function removeHtmlTag(strx,chop){
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);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write(<ul>);
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == alternate) {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == replies && entry.link[k].type == text/html) {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src="",a); c = s.indexOf(""",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != no) ? <i><font color="+acolor+">(+pcm+ +text+)</font></i> : ;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ + m + + y ;
var trtd = <li class="car"><div class="thumb"><a href="+posturl+"><img width="100" height="90" class="alignnone" src="+img[i]+"/></a></div><h5>+daystr+</h5><a class="slider_title" href="+posturl+">+posttitle+</a></li>;

document.write(trtd);
j++;
}
document.write(</ul>);
}
//]]>
</script>

Keterangan :
Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.
Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id=main-wrapper>, kemudian letakkan kode berikut ini diatasnya :

<b:if cond=data:blog.pageType != &quot;item&quot;>
<div id=carousel>
<div id=previous_button/>
<div class=container>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;&gt;&lt;/script&gt;&quot;);
</script>    
<div class=clear/>
</div>
<div id=next_button/>
</div>
<script type=text/javascript>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,    
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)    
</script>
</b:if>

Perhatikan kode warna merah diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode 
/-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Demikian tadi tutorial  Cara Mudah Membuat Slider Otomatis Carousel Di Blog,seperti biasa jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat....???
Read More..