WordpressThemeSimplicity SNS button applied to Simplicity

Developer
Hidekichi
Size
6,883 Kb
Views
38,456
  1. WordpressThemeSimplicity SNS button applied to Simplicity Previews
  2. WordpressThemeSimplicity SNS button applied to Simplicity HTML Codes
  3. WordpressThemeSimplicity SNS button applied to Simplicity CSS Codes
  4. WordpressThemeSimplicity SNS button applied to Simplicity JS Codes

How do I make an wordpressthemesimplicity sns button applied to simplicity?

What is a wordpressthemesimplicity sns button applied to simplicity? How do you make a wordpressthemesimplicity sns button applied to simplicity? This script and codes were developed by Hidekichi on 11 August 2022, Thursday.

WordpressThemeSimplicity SNS button applied to Simplicity Previews
IQ Test

WordpressThemeSimplicity SNS button applied to Simplicity - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WordpressThemeSimplicity SNS button applied to Simplicity</title> <link rel='stylesheet prefetch' href='https://wp-simplicity.com/wp-content/themes/simplicity-child-simplicity/style.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://wp-simplicity.com/wp-content/themes/simplicity/css/extension.css'>
<link rel='stylesheet prefetch' href='https://wp-simplicity.com/wp-content/themes/simplicity/css/responsive-pc.css'>
<link rel='stylesheet prefetch' href='https://wp-simplicity.com/wp-content/themes/simplicity/css/sns-twitter-type.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="dammy"><div>Find the share button to scroll up & down</div></div>
<div id="sns-group-top" class="sns-group sns-group-top">	<div class="sns-buttons sns-buttons-pc">	<p class="sns-share-msg">Share</p>	<ul class="snsb snsb-balloon clearfix">	<li class="balloon-btn twitter-balloon-btn">	<span class="balloon-btn-set">	<span class="arrow-box">	<a href="//twitter.com/search?q=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" target="blank" class="arrow-box-link twitter-arrow-box-link" rel="nofollow">	<span class="social-count twitter-count">2</span>	</a>	</span>	<a href="//twitter.com/share?text=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82&amp;url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F&amp;related=MrYhira"	target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow">	<span class="fa fa-twitter"></span>	</a>	</span>	</li>	<li class="balloon-btn facebook-balloon-btn">	<span class="balloon-btn-set">	<span class="arrow-box">	<a href="//www.facebook.com/sharer/sharer.php?u=//wp-simplicity.com/simplicity1-8-4/&amp;t=Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。" target="blank" class="arrow-box-link facebook-arrow-box-link" rel="nofollow">	<span class="social-count facebook-count">5</span>	</a>	</span>	<a href="//www.facebook.com/sharer/sharer.php?u=//wp-simplicity.com/simplicity1-8-4/&amp;t=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82"	target="blank" class="balloon-btn-link facebook-balloon-btn-link" rel="nofollow">	<span class="fa fa-facebook"></span>	</a>	</span>	</li>	<li class="balloon-btn googleplus-balloon-btn">	<span class="balloon-btn-set">
<span class="arrow-box">
<a href="//plus.google.com/share?url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="blank" class="arrow-box-link googleplus-arrow-box-link" rel="nofollow">
<span class="social-count googleplus-count">1</span>	</a>	</span>	<a href="//plus.google.com/share?url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="blank" class="balloon-btn-link googleplus-balloon-btn-link"	rel="nofollow">	<span class="fa fa-google-plus"></span>	</a>	</span>	</li>	<li class="balloon-btn hatena-balloon-btn">	<span class="balloon-btn-set">
<span class="arrow-box">
<a href="//b.hatena.ne.jp/entry/wp-simplicity.com/simplicity1-8-4/" target="blank" class="arrow-box-link hatena-arrow-box-link" rel="nofollow">
<span class="social-count hatebu-count">0</span>	</a>	</span>	<a href="//b.hatena.ne.jp/add?mode=confirm&amp;url=//wp-simplicity.com/simplicity1-8-4/&amp;title=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82"	target="blank" class="balloon-btn-link hatena-balloon-btn-link" rel="nofollow">	<span class="icon-hatena"></span>	</a>	</span>	</li>	<li class="balloon-btn pocket-balloon-btn">	<span class="balloon-btn-set">
<span class="arrow-box">
<a href="//getpocket.com/edit?url=//wp-simplicity.com/simplicity1-8-4/" target="blank" class="arrow-box-link pocket-arrow-box-link" rel="nofollow">
<span class="social-count pocket-count">3</span>	</a>	</span>	<a href="//getpocket.com/edit?url=//wp-simplicity.com/simplicity1-8-4/" target="blank" class="balloon-btn-link pocket-balloon-btn-link" rel="nofollow">	<span class="fa fa-get-pocket"></span>	</a>	</span>	</li>	<li class="balloon-btn evernote-balloon-btn">	<span class="balloon-btn-set">
<span class="arrow-box">
<a href="#" onclick="Evernote.doClip({url:'//wp-simplicity.com/simplicity1-8-4/',
providerName:'Simplicity',
title:'Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。',
contentId:'the-content',
}); return false;" target="blank" class="arrow-box-link evernote-arrow-box-link" rel="nofollow">
CLIP!
</a>
</span>	<a href="#" onclick="Evernote.doClip({url:'//wp-simplicity.com/simplicity1-8-4/',
providerName:'Simplicity',
title:'Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。',
contentId:'the-content',
}); return false;" target="blank" class="balloon-btn-link evernote-balloon-btn-link" rel="nofollow">	<span class="icon-evernote"></span>	</a>	</span>	</li>	<li class="balloon-btn feedly-balloon-btn">	<span class="balloon-btn-set">
<span class="arrow-box">
<a href="//feedly.com/index.html#subscription%2Ffeed%2F//wp-simplicity.com/feed/" target="blank" class="arrow-box-link feedly-arrow-box-link" rel="nofollow">
<span class="social-count feedly-count">273</span>	</a>	</span>	<a href="//feedly.com/index.html#subscription%2Ffeed%2F//wp-simplicity.com/feed/" target="blank" class="balloon-btn-link feedly-balloon-btn-link" rel="nofollow">	<span class="icon-feedly"></span>	</a>	</span>	</li>	</ul>	</div>
</div>
<div class="dammy"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WordpressThemeSimplicity SNS button applied to Simplicity - Script Codes CSS Codes

#sns-group-top ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; width: 32px; height: 2rem; padding: 0; margin: 0; list-style: none; border-radius: 30px; color: #fff; z-index: 9999; -webkit-transition: .3s ease; transition: .3s ease;
}
#sns-group-top ul i { display: block; position: absolute; top: 50%; -webkit-transform: translate3d(50%, -50%, 0); transform: translate3d(50%, -50%, 0); z-index: 10;
}
#sns-group-top ul .sns-share-msg { display: none; position: absolute; top: 50%; left: -500px; opacity: 0; font-weight: bold; z-index: 5; -webkit-transition: .3s ease; transition: .3s ease; overflow: hidden; visibility: hidden;
}
#sns-group-top ul .sns-share-msg.onclick { display: block; opacity: 1; visibility: visible;
}
#sns-group-top ul.onclick { width: 100px;
}
#sns-group-top ul li { position: relative; color: #fff; -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); opacity: 0;
}
#sns-group-top ul li div { position: absolute; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);
}
#sns-group-top ul li div:last-child { margin-left: 25px; font-size: 12px;
}
.red { background-color: #f00; color: #fff;
}
.red li div { color: #f00;
}
.red li div a { color: #f00;
}
.red li div:last-child { color: #900;
}
.red li div:last-child a:last-child { color: #900;
}
.black { background-color: #333; color: #ccc;
}
.black li div { color: #666;
}
.black li div a { color: #666;
}
.black li div:last-child { color: #000;
}
.black li div:last-child a { color: #000;
}
.tip div { position: absolute; top: 50%; -webkit-transform: translate3d(0px, -50%, 0px); transform: translate3d(0px, -50%, 0px); background-color: #333; color: white; padding: 0px 7px; font-size: 14px; border-radius: 4px; width: 85px; -webkit-transition: .3s ease; transition: .3s ease; -webkit-animation: swing linear 0.8s infinite; animation: swing linear 0.8s infinite;
}
.tip div::before { content: ""; position: absolute; left: -5px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #333;
}
@-webkit-keyframes swing { 0% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 30% { -webkit-transform: translate3d(7px, -50%, 0); transform: translate3d(7px, -50%, 0); } 60% { -webkit-transform: translate3d(10px, -50%, 0); transform: translate3d(10px, -50%, 0); } 100% { -webkit-transform: translate3d(-5px, -50%, 0); transform: translate3d(-5px, -50%, 0); }
}
@keyframes swing { 0% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 30% { -webkit-transform: translate3d(7px, -50%, 0); transform: translate3d(7px, -50%, 0); } 60% { -webkit-transform: translate3d(10px, -50%, 0); transform: translate3d(10px, -50%, 0); } 100% { -webkit-transform: translate3d(-5px, -50%, 0); transform: translate3d(-5px, -50%, 0); }
}
.dammy { height: 1500px; position: relative;
}
.dammy div { position: fixed; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
}

WordpressThemeSimplicity SNS button applied to Simplicity - Script Codes JS Codes

jQuery(function($) {	/* *	色の選択 : black or red。色のスタイルはcss */	var color = "black";	//aタグのリンク有効・無効切り替え用関数	function disable_a(e) {	e.preventDefault();	}	/* *	画面内に目的の要素があるか判別する関数 */	function view(target) {	var wHeight = $(window).height(),	tgtOffset = $(target).offset().top,	tgtHeight = $(target).height(),	hitover = tgtOffset + tgtHeight,	timer = null;	//ウィンドウがロード・スクロール・リサイズの時に発動	$(window).on("load scroll resize", function() {	var st = $(window).scrollTop(),	hit = st + wHeight;	if (timer) clearTimeout(timer);	timer = setTimeout(function() {	//目的の要素が画面内にある時	if (tgtOffset < hit && hitover > st) {	if ($(".tip").size() === 0) {	setTimeout(function() {	tip(target);	}, 100);	} else if ($(".tip").size() > 0 && $(".tip").is(":hidden")) {	setTimeout(function() {	showLimit(".tip");	}, 100);	}	} else {	$(".tip").stop().fadeOut().remove();	}	}, 200);	}); //scroll end	}	/* *	画面内に目的の要素がある時にメッセージを表示する関数 */	function tip(target) {	var x = $(target).find("ul").width(),	y = $(target).find("ul").height(),	oft = $(target).find("ul").offset().top,	ofl = $(target).find("ul").offset().left,	mes = "click to open",	intip = "<div class='tip'><div>" + mes + "</div></div>",	targetHasOnclick = $(target).find("ul").hasClass("onclick");	//tipの入る座標	if (!targetHasOnclick) {	$("body").prepend(intip);	$(".tip").css({	position: "absolute",	top: oft + "px",	left: ofl + x + 10 + "px",	height: y	});	showLimit(".tip");	}	}	//limitミリ秒間だけ表示する関数	function showLimit(target) {	var limit = 2000;	$(target).fadeIn().queue(function() {	setTimeout(function() {	$(target).dequeue();	}, limit);	});	$(target).fadeOut();	}	$(function() {	var snsTopUl = $("#sns-group-top ul");	/* *	前準備。 *	元々のSimplicityのhtmlの構造をjQueryで書き換える */	//ulに.red(or black)追加	snsTopUl.removeClass().addClass(color);	//メッセージ部分のタグ付け替え	$(".sns-share-msg")	.replaceWith(function() {	var cls = $(this).attr("class");	var txt = $(this).text();	$(this)	.replaceWith("<span class='" + cls + "'>" + txt + "</span>");	});	/* *	icon-がついている以外の全クラス削除 *	codepenではアイコンが表示できないのでhtmlを *	fontAwesomeに変更している *	//で切り替え */	//snsTopUl.find("*").not("[class^=icon-]").removeClass();	snsTopUl.find("*").not("[class^='fa fa-']").removeClass();	//シェアアイコン追加	snsTopUl.prepend("<i class='fa fa-share-alt'></i>");	//ul li のaを囲むspan?解除	snsTopUl.find("a").unwrap();	//カウントとアイコンの順番入れ替え	$("#sns-group-top li").each(function() {	var first_a = $(this).children("a:first"),	last_a = $(this).children("a:last");	first_a.before(last_a);	});	//シェアメッセージを ulの先頭に移動	$(".sns-share-msg").prependTo(snsTopUl);	var ssMes = $(".sns-share-msg"),	tWidth = ssMes.width(),	tOfsl = ssMes.offset().left;	ssMes.css({	left: tOfsl + tWidth * -1	});	//.arrow-boxを囲むタグを解除	$("#sns-group-top .arrow-box").each(function() {	$(this).unwrap();	});	//liの中のaをdivで囲む	$("#sns-group-top li").children("a").wrap("<div></div>");	//デフォルトでリストアイテムのaタグを無効化	$("#sns-group-top li").find("a").each(function() {	$(this).on("click", disable_a);	});	/*	----------------------------------------------- *	画面内に目的の要素があるか判断する関数の呼び出し */	view("#sns-group-top");	//ボタンをホバーした時の動作	snsTopUl.hover(function() {	if ($(".tip").size() !== 0) {	$(".tip").remove();	}	});	//シェアボタンをクリックした時の動作	snsTopUl.on("click", function() {	$(this).toggleClass("onclick");	if ($(this).hasClass("onclick")) {	/* *	#sns-group-top ulがonclickを持っている時の処理 */	//#sns-group-op ulがonclickを持っていたらリンク有効	$("#sns-group-top li").find("a").each(function() {	$(this).off("click", disable_a);	});	//シェアメッセージをアニメーションさせるためにclass追加	$(".sns-share-msg").addClass("onclick");	//シェアメッセージのcssの配置を自動計算させる&アニメーション	var ulOffset = snsTopUl.offset().left,	ulWidth = snsTopUl.width(),	ssMsgOffsetLeft = $(".sns-share-msg").offset().left,	ssMsgMovePosition = (ssMsgOffsetLeft * -1) + ulOffset + ulWidth;	$(".sns-share-msg").css({	transform: "translate3d(" + ssMsgMovePosition + "px,-50%,0)"	});	//リストアイテムのアニメーション処理	snsTopUl	.find("li")	.css({	opacity: 0,	left: 120 + "px"	})	.each(function(i, value) {	$(this).delay(i * 80).animate({	left: i * 80 + 120,	opacity: 1	})	});	} else {	/* *	#sns-group-top ulがonclickを持っていない時の処理 */	//.onclickとstyleからtransformを消す	$(".sns-share-msg").removeClass("onclick").removeAttr("style", "transform");	//リストアイテムのaリンク無効化	$("#sns-group-top li").find("a").each(function() {	$(this).on("click", disable_a);	});	//リストアイテムの数を数えて、アニメーションで消す処理	var childs = $("#sns-group-top ul li").length;	for (var j = childs * -1; j < 1; j++) {	$("#sns-group-top ul li").eq(j).delay(80).animate({	left: j * 80,	opacity: 0	});	} //for end	} // if end	}); //onclick	});
});
WordpressThemeSimplicity SNS button applied to Simplicity - Script Codes
WordpressThemeSimplicity SNS button applied to Simplicity - Script Codes
Home Page Home
Developer Hidekichi
Username Hidekichi
Uploaded August 11, 2022
Rating 3
Size 6,883 Kb
Views 38,456
Do you need developer help for WordpressThemeSimplicity SNS button applied to Simplicity?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hidekichi (Hidekichi) Script Codes
Name
A Pen by Hidekichi
Wordpress theme Simplicity list style flex
WordpressTheme Simplicity sns button setting
WordpressTheme Simplicity title position fixed
WordpressTheme Simplicity SNS count The count up automatically the count value of the SNS
WordpressTheme Simplicity menu idea
Wordpress theme Simplicity eye-catch image idea
WordpressTheme Simplicity 1column idea
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!